介绍//, car.js
function 设置(),{
,createCanvas (1440,, 750);
}
function 画(),{
,背景(0);
} //, car.js
function 设置(),{
,createCanvas (1440,, 750);
}
function 画(),{
,背景(0);
,中风(255);
,行(0600、1440、600);
,把();
,翻译(400500);
,轮胎();
,pop ();
,翻译(900500);
,轮胎();
}
function 轮胎(){
,//轮胎
填满(255);
椭圆(0,0200200);
填充(0);
椭圆(0,0160160);
填满(255);
椭圆(0,0,40岁,40);//钢圈十字
填满(255);
椭圆(0,-50,80);
填满(255);
椭圆(0,50,80);
填满(255);
椭圆(-50、0、80、40);
填满(255);
椭圆(50 0 80,40);//轴
填充(0);
椭圆(0,0,30、30);
填满(255);
椭圆(0,0,20日20);
} //, car.js
var 一步=0.1;
var 角=0;
123
将画()中代码改至如下//car.js
function 画(),{
,背景(0);
,中风(255);
,行(0600、1440、600);
,把();
,如果(angle<2 *π)
,{
步,角+=*π;
,}
其他的,
,角=0;
,翻译(400500);
,旋转(角度);
,轮胎();
,
,pop ();
,把();
,翻译(900500);
,旋转(角度);
,轮胎();
,
,pop ();
} //, car.js
function 画(),{
,背景(0);
,中风(255);
,行(0600、1440、600);
,//车身部分
,把();
,中风(150);
,填满(150);
,矩形(250300800200 5);
,中风(100);
,填满(100);
,矩形(750150150150);
,三角形(900150900300、1050、300);
,中风(160);
,填满(160);
,中风(255);
,矩形(800200100100);
,三角形(900200900300、1000、300);
,//车轮部分
,中风(255);
,如果(angle<2 *π)
,{
步,角+=*π;
,}
其他的,
,角=0;
,翻译(400500);
,旋转(角度);
,轮胎();
,
,pop ();
,把();
,翻译(900500);
,旋转(角度);
,轮胎();
,
,pop ();
} //, car.js
var grassstep=1440;
function 画(),{
,背景(0);
,中风(255);
,行(0600、1440、600);
,把();
,中风(150);
,填满(150);
,矩形(250300800200 5);
,中风(100);
,填满(100);
,矩形(750150150150);
,三角形(900150900300、1050、300);
,中风(160);
,填满(160);
,中风(255);
,矩形(800200100100);
,三角形(900200900300、1000、300);
,
,中风(255);
,如果(angle
这篇文章给大家分享的是有关p5。js如何实现简单货车运动动画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
<强>使用工具
Visual Studio代码+ p5。js
<>强下载地址
Visual Studio代码p5.js
<强>目标
在网页上画出一辆货车,通过运用循环,条件分支,函数等流程控制方法来达到动态的效果。
<强>具体流程
首先我们建立一个index . html文件(主页)和一个car.js文件(码绘实现文件),并把car.js和p5.js链接到索引。html上。
在car.js中我们创建setup()和()画两个函数,用于画布的初始化和作图。
然后加上地面和两个车轮。
注意这里使用的pop()和()推函数.push()函数将储存当时的绘画样式设置及变形,而pop()将恢复这些设置。这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。由于p5.js的翻译()、()等旋转函数的效果在画()的一次调用中是累积的,不使用pop()和()推函数的话会导致移动,旋转等代码的效果的重叠。
<强>车轮的旋转
定义两个变量步骤(控制旋转速度)和角(每调用一次画()车轮旋转的角度)用于车轮的旋转。
效果图
车身部分我们直接在画中修改
效果
最后我们加上一棵草作为参照物,来使得整幅图“动起来”。
