p5.js实现简单货车运动动画


Posted in Javascript onOctober 23, 2019

本文为大家分享了p5.js实现简单货车运动动画的具体代码,供大家参考,具体内容如下

使用工具

Visual Studio Code+p5.js

下载地址

Visual Studio Code

p5.js

目标

在网页上画出一辆货车,通过运用循环、条件分支、函数等流程控制方法来达到动态的效果。

具体流程

首先我们建立一个index.html文件(主页)和一个car.js文件(码绘实现文件),并把car.js和p5.js链接到index.html上。

p5.js实现简单货车运动动画

在car.js中我们创建setup()和draw()两个函数,用于画布的初始化和作图。

// car.js
function setup() {
 createCanvas(1440, 750);
}

function draw() {
 background(0);
}

然后加上地面和两个车轮。

p5.js实现简单货车运动动画

// car.js
function setup() {
 createCanvas(1440, 750);
}

function draw() {
 background(0);
 stroke(255);
 line(0,600,1440,600);
 push();

 translate(400,500);
 tyre();

 pop();

 translate(900,500);
 tyre();
}

function tyre(){
 //轮胎
fill(255);
ellipse(0,0,200,200);
fill(0);
ellipse(0,0,160,160);

fill(255);
ellipse(0,0,40,40);


//钢圈十字
fill(255);
ellipse(0,-50,40,80);
fill(255);
ellipse(0,50,40,80);

fill(255);
ellipse(-50,0,80,40);
fill(255);
ellipse(50,0,80,40);

//轴
fill(0);
ellipse(0,0,30,30);
fill(255);
ellipse(0,0,20,20);
}

注意这里使用的pop()和push()函数。push() 函数将储存当时的绘画样式设置及变形,而 pop() 将恢复这些设置。这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。由于p5.js的translate()、rotate()等函数的效果在draw()的一次调用中是累积的,不使用pop()和push()函数的话会导致移动、旋转等代码的效果的重叠。

车轮的旋转

定义两个变量step(控制旋转速度)和angle(每调用一次draw()车轮旋转的角度)用于车轮的旋转。

// car.js
var step=0.1;
var angle=0;
123
将draw()中代码改至如下
// car.js
function draw() {
 background(0);
 stroke(255);
 line(0,600,1440,600);
 push();

 if(angle<2*PI)
 {
 angle+=step*PI;
 }
 else
 angle=0;
 translate(400,500);
 rotate(angle);
 tyre();
 
 pop();
 push();

 translate(900,500);
 rotate(angle);
 tyre();
 
 pop();
}

效果图

p5.js实现简单货车运动动画

车身部分我们直接在draw中修改

// car.js
function draw() {

 background(0);
 stroke(255);
 line(0,600,1440,600);
 //车身部分
 push();
 stroke(150);
 fill(150);
 rect(250,300,800,200,5);

 stroke(100);
 fill(100);
 rect(750,150,150,150);
 triangle(900,150,900,300,1050,300);

 stroke(160);
 fill(160);
 stroke(255);
 rect(800,200,100,100);
 triangle(900,200,900,300,1000,300);
 //车轮部分
 stroke(255);
 if(angle<2*PI)
 {
 angle+=step*PI;
 }
 else
 angle=0;
 translate(400,500);
 rotate(angle);
 tyre();
 
 pop();
 push();

 translate(900,500);
 rotate(angle);
 tyre();
 
 pop();
}

效果

p5.js实现简单货车运动动画

最后我们加上一棵草作为参照物,来使得整幅图“动起来”。

// car.js
var grassstep=1440;
function draw() {

 background(0);
 stroke(255);
 line(0,600,1440,600);

 push();
 stroke(150);
 fill(150);
 rect(250,300,800,200,5);

 stroke(100);
 fill(100);
 rect(750,150,150,150);
 triangle(900,150,900,300,1050,300);

 stroke(160);
 fill(160);
 stroke(255);
 rect(800,200,100,100);
 triangle(900,200,900,300,1000,300);
 
 stroke(255);
 if(angle<2*PI)
 {
 angle+=step*PI;
 }
 else
 angle=0;
 translate(400,500);
 rotate(angle);
 tyre();
 
 pop();
 push();

 translate(900,500);
 rotate(angle);
 tyre();
 
 pop();

 push();

 if(grassstep>-20)
 grassstep-=5; 
 else
 grassstep=1440;

 translate(grassstep,0);
 weed();
 pop();
}

function weed(){
 stroke(160);
 fill(160);
 stroke(255);
 triangle(20,600,40,600,0,580);
 triangle(20,600,40,600,28,560);
 triangle(20,600,40,600,43,585);
}

效果

p5.js实现简单货车运动动画

到此为止,一个简单的货车运动作画已经完成。

我们可以将官方的雪花特效加进去,使画面更加丰满。

效果图

p5.js实现简单货车运动动画

附上源码

// car.js
var step=0.1;
var angle=0;
var grassstep=1440;
let snowflakes = []; 
function setup() {
 createCanvas(1440, 750);
 

}

function draw() {
 background(0);
 stroke(255);
 line(0,600,1440,600);
 
 push();
 stroke(150);
 fill(150);
 rect(250,300,800,200,5);

 stroke(100);
 fill(100);
 rect(750,150,150,150);
 triangle(900,150,900,300,1050,300);

 stroke(160);
 fill(160);
 stroke(255);
 rect(800,200,100,100);
 triangle(900,200,900,300,1000,300);
 
 stroke(255);
 if(angle<2*PI)
 {
 angle+=step*PI;
 }
 else
 angle=0;
 translate(400,500);
 rotate(angle);
 tyre();
 
 pop();
 push();

 translate(900,500);
 rotate(angle);
 tyre();
 
 pop();
 push();

 if(grassstep>-20)
 grassstep-=5; 
 else
 grassstep=1440;

 translate(grassstep,0);
 weed();
 pop();

 let t = frameCount / 60; // update time

 // create a random number of snowflakes each frame
 for (var i = 0; i < random(5); i++) {
 snowflakes.push(new snowflake()); // append snowflake object
 }

 // loop through snowflakes with a for..of loop
 for (let flake of snowflakes) {
 flake.update(t); // update snowflake position
 flake.display(); // draw snowflake
 }

 
}


function tyre(){
 //轮胎
 fill(255);
 ellipse(0,0,200,200);
 fill(0);
 ellipse(0,0,160,160);

 fill(255);
 ellipse(0,0,40,40);
 

 //钢圈十字
 fill(255);
 ellipse(0,-50,40,80);
 fill(255);
 ellipse(0,50,40,80);

 fill(255);
 ellipse(-50,0,80,40);
 fill(255);
 ellipse(50,0,80,40);

 //轴
 fill(0);
 ellipse(0,0,30,30);
 fill(255);
 ellipse(0,0,20,20);
}

function weed(){
 stroke(160);
 fill(160);
 stroke(255);
 triangle(20,600,40,600,0,580);
 triangle(20,600,40,600,28,560);
 triangle(20,600,40,600,43,585);
}

function snowflake() {
 // initialize coordinates
 this.posX = 0;
 this.posY = random(-50, 0);
 this.initialangle = random(0, 2 * PI);
 this.size = random(2, 5);

 // radius of snowflake spiral
 // chosen so the snowflakes are uniformly spread out in area
 this.radius = sqrt(random(pow(width / 2, 2)));

 this.update = function(time) {
 // x position follows a circle
 let w = 0.6; // angular speed
 let angle = w * time + this.initialangle;
 this.posX = width / 2 + this.radius * sin(angle);

 // different size snowflakes fall at slightly different y speeds
 this.posY += pow(this.size, 0.5);

 // delete snowflake if past end of screen
 if (this.posY > height) {
 let index = snowflakes.indexOf(this);
 snowflakes.splice(index, 1);
 }
 };

 this.display = function() {
 ellipse(this.posX, this.posY, this.size);
 };
}

码绘与手绘相比

p5.js实现简单货车运动动画

手绘由于是静态的,来表现车的运动效果主要有速度线、车轮线、烟雾以及物体高速变形,通过这些静态的线条来还原物体运动的效果。而码绘则是通过参数的改变实现每一帧图像的变化来达到动态的效果,比起手绘更直观地体现了“动感”这个词。在细节方面,手绘明显更胜一筹,可以方便地勾勒出车的细节,而码绘由于参数、循环等一系列问题(可能动一个参数就要改一大片,以及坐标问题),在绘画体验上明显不行。整体比较下来,手绘给人的感觉更具艺术气息,能够感受到一股人情味,码绘虽然更容易产生动感的效果,线条更加精准,但是总感觉少了一份绘画原有的感觉,更像是另一种艺术创作形式,而不是在绘画。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 #Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 #Javascript
p5.js临摹旋转爱心
Oct 23 #Javascript
JavaScript 作用域scope简单汇总
Oct 23 #Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 #Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
JavaScript提升机制Hoisting详解
Oct 23 #Javascript
You might like
谈谈PHP语法(5)
2006/10/09 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
Node.js assert断言原理与用法分析
2019/01/04 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
世界上最短的数字判断js代码
2019/09/09 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
wxPython使用系统剪切板的方法
2015/06/16 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python二维码生成识别实例详解
2019/07/16 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
2014年预备党员学习两会心得体会
2014/03/17 职场文书
本科生自荐信
2014/06/18 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL