热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要为大家详细介绍了p5.js实现简单货车运动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

使用工具

Visual Studio Code+p5.js

下载地址

Visual Studio Code

p5.js

目标

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

具体流程

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

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

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

function draw() {
 background(0);
}

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

// 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();
}

效果图

车身部分我们直接在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();
}

效果

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

// 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);
}

效果

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

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

效果图

附上源码

// 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  height) {
 let index = snowflakes.indexOf(this);
 snowflakes.splice(index, 1);
 }
 };

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

码绘与手绘相比

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

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


推荐阅读
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • 本文详细介绍了 BERT 模型中 Transformer 的 Attention 机制,包括其原理、实现代码以及在自然语言处理中的应用。通过结合多个权威资源,帮助读者全面理解这一关键技术。 ... [详细]
  • QBlog开源博客系统:Page_Load生命周期与参数传递优化(第四部分)
    本教程将深入探讨QBlog开源博客系统的Page_Load生命周期,并介绍一种简洁的参数传递重构方法。通过视频演示和详细讲解,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 在 Windows 10 中,F1 至 F12 键默认设置为快捷功能键。本文将介绍几种有效方法来禁用这些快捷键,并恢复其标准功能键的作用。请注意,部分笔记本电脑的快捷键可能无法完全关闭。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文探讨了如何像程序员一样思考,强调了将复杂问题分解为更小模块的重要性,并讨论了如何通过妥善管理和复用已有代码来提高编程效率。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • python的交互模式怎么输出名文汉字[python常见问题]
    在命令行模式下敲命令python,就看到类似如下的一堆文本输出,然后就进入到Python交互模式,它的提示符是>>>,此时我们可以使用print() ... [详细]
author-avatar
heqiuhao
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有