p5.js实现简单的卡车运动动画

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

使用工具

Visual Studio代码p5.js

下载地址

Visual Studio代码

p5.js

目标

在网页上画一辆卡车，利用循环、条件分支、函数等过程控制方法实现动态效果。

特定过程

首先，我们创建一个index.html文件(主页)和一个car.js文件(代码绘制实现文件)，并将car.js和p5.js链接到index.html。

在car.js中，我们创建了两个函数，setup()和draw()，用于初始化和绘制画布。

//car . jsfunction setup(){ createCanvas(1440，750)；}函数draw(){ background(0)；}然后加上地面和两个轮子。

//car . jsfunction setup(){ createCanvas(1440，750)；}函数draw(){ background(0)；中风(255)；行(0，600，1440，600)；push()；翻译(400，500)；tyre()；pop()；翻译(900，500)；tyre()；}功能轮胎(){//轮胎填充(255)；椭圆(0，0，200，200)；填充(0)；椭圆(0，0，160，160)；填充(255)；椭圆(0，0，40，40)；//钢圈十字填充(255)；椭圆(0，-50，40，80)；填充(255)；椭圆(0，50，40，80)；填充(255)；椭圆(-50，0，80，40)；填充(255)；椭圆(50，0，80，40)；//轴填充(0)；椭圆(0，0，30，30)；填充(255)；椭圆(0，0，20，20)；}注意这里使用的pop()和push()函数。push()功能会存储当时的画风设置和变形，pop()会恢复这些设置。这两个功能需要一起使用。它们允许您更改样式和变形设置，然后返回到以前的设置。由于p5.js的translate()、rotate()等函数的效果是在draw()的一次调用中累积的，如果不使用pop()和push()函数，移动和旋转代码的效果会重叠。

车轮转动

为车轮旋转定义了两个变量，步长(控制转速)和角度(每次调用draw()时车轮旋转的角度)。

//car . jsvar step=0.1；变化角度=0；123将draw()中的代码改为如下//car.js函数draw(){ background(0)；中风(255)；行(0，600，1440，600)；push()；if(angle 2 * PI){ angle=step * PI；} else angle=0；翻译(400，500)；旋转(角度)；tyre()；pop()；push()；翻译(900，500)；旋转(角度)；tyre()；pop()；}效果图

我们直接在绘图中修改身体部分

//car . jsfunction draw(){ background(0)；中风(255)；行(0，600，1440，600)；//身体部位推送()；中风(150)；填充(150)；rect(250，300，800，200，5)；中风(100)；填充(100)；rect(750，150，150，150)；三角形(900，150，900，300，1050，300)；中风(160)；填充(160)；中风(255)；rect(800，200，100，100)；三角形(900，200，900，300，1000，300)；//车轮零件行程(255)；if(angle 2 * PI){ angle=step * PI；} else angle=0；翻译(400，500)；旋转(角度)；tyre()；pop()；push()；翻译(900，500)；旋转(角度)；tyre()；pop()；}效果

最后我们加一个草作为参考，让整个画面“动”起来。

//car . jsvar grass step=1440；函数draw(){ background(0)；中风(255)；行(0，600，1440，600)；push()；中风(150)；填充(150)；rect(250，300，800，200，5)；中风(100)；填充(100)；rect(750，150，150，150)；三角形(900，150，900，300，1050，300)；中风(160)；填充(160)；中风(255)；rect(800，200，100，100)；三角形(900，200，900，300，1000，300)；中风(255)；if(angle 2 * PI){ angle=step * PI；} else angle=0；翻译(400，500)；旋转(角度)；tyre()；pop()；push()；翻译(900，500)；旋转(角度)；tyre()；pop()；push()；if(grass step-20)grass step-=5；else grassstep=1440translate(grassstep，0)；weed()；pop()；}函数weed(){ stroke(160)；填充(160)；中风(255)；三角形(20，600，40，600，0，580)；三角形(20，600，40，600，28，560)；三角形(20，600，40，600，43，585)；}效果

到目前为止，一个简单的卡车运动绘画已经完成。

我们可以加入官方的雪花特效，让画面更加饱满。

翻译

附加源代码

//汽车。jsvar步长=0.1；变化角度=0;var grassstep=1440让雪花=[];函数setup() { createCanvas(1440，750)；}函数draw(){ background(0)；中风(255);行(0,600,1440,600);push()；中风(150);填充(150);rect(250，300，800，200，5)；中风(100);填充(100);rect(750，150，150，150)；三角形(900,150,900,300,1050,300);中风(160);填充(160);中风(255);rect(800，200，100，100)；三角形(900,200,900,300,1000,300);中风(255);if(角度2 * PI){角度=步长* PI；} else angle=0；翻译(400,500);旋转（角度);tyre()；pop()；push()；翻译(900,500);旋转（角度);tyre()；pop()；push()；如果(草步-20)草步-=5；else grass step=1440 translate(grass step，0)；weed()；pop()；让t=帧数/60；//更新时间//为每一帧创建随机数量的雪花(var I=0；我随机(5);I){ 0雪花。推送(新雪花());//追加雪花对象} //用为循环遍历雪花.为循环（让雪花飘落){ flake。更新(t)；//更新雪花位置薄片。显示()；//绘制雪花} }函数tyre(){ //轮胎填充(255);椭圆(0,0,200,200);填充(0);椭圆(0,0,160,160);填充(255);椭圆(0,0,40,40);//钢圈十字填充(255);椭圆(0,-50,40,80);填充(255);椭圆(0,50,40,80);填充(255);椭圆(-50,0,80,40);填充(255);椭圆(50,0,80,40);//轴填充(0);椭圆(0,0,30,30);填充(255);椭圆(0,0,20,20);}函数weed(){ stroke(160)；填充(160);中风(255);三角形(20,600,40,600,0,580);三角形(20,600,40,600,28,560);三角形(20,600,40,600,43,585);}函数雪花(){ //初始化坐标这个。posx=0；this.posY=random(-50，0)；this.initialangle=random(0，2 * PI)；this.size=random(2，5)；//雪花螺旋的半径//选择使得雪花在这个区域均匀散开，半径=sqrt(random(pow(width/2，2))；this.update=函数(时间){ //x位置跟随一个圆，让w=0.6//角速度让角=w * time this . initialanglethis . POSx=宽度/2这个。半径* sin(角度);//不同大小的雪花以稍微不同的y速度落下this.posY=pow(this.size，0.5)；//删除雪花如果过了屏幕结束如果(这个. posY高度){ 0让索引=雪花。index of(this)；雪花。拼接（索引，1);} };这个。display=function(){ ellipse(此。波西，这个。波西，这个。大小)；};}码绘与手绘相比

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。