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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
一些实用性较高的js方法
Apr 19 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
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开发过程中关于继承的使用方法分享
2011/06/17 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
js读取cookie方法总结
2014/10/31 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python中的整除和取模实例
2020/06/03 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
高三地理教学反思
2014/01/11 职场文书
管理建议书范文
2014/05/13 职场文书
迎国庆演讲稿
2014/09/15 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
工程质检员岗位职责
2015/04/08 职场文书
解除租赁合同协议书
2016/03/21 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Vue+Flask实现图片传输功能
2022/04/01 Vue.js