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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
Javascript学习笔记5 类和对象
Jan 11 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
详解react-redux插件入门
2018/04/19 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
vue中rem的配置的方法示例
2018/08/30 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python AES加密实例解析
2018/01/18 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
python中remove函数的踩坑记录
2021/01/04 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
捐助倡议书范文
2014/04/15 职场文书
行政监察建议书
2014/05/19 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书