這篇文章給大家分享的是有關(guān)p5.js如何實(shí)現(xiàn)簡單貨車運(yùn)動動畫的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供中衛(wèi)網(wǎng)站建設(shè)、中衛(wèi)做網(wǎng)站、中衛(wèi)網(wǎng)站設(shè)計(jì)、中衛(wèi)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、中衛(wèi)企業(yè)網(wǎng)站模板建站服務(wù)，十余年中衛(wèi)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
具體內(nèi)容如下
使用工具
Visual Studio Code+p5.js
下載地址
Visual Studio Code
p5.js
目標(biāo)
在網(wǎng)頁上畫出一輛貨車，通過運(yùn)用循環(huán)、條件分支、函數(shù)等流程控制方法來達(dá)到動態(tài)的效果。
具體流程
首先我們建立一個(gè)index.html文件（主頁）和一個(gè)car.js文件（碼繪實(shí)現(xiàn)文件），并把car.js和p5.js鏈接到index.html上。
在car.js中我們創(chuàng)建setup()和draw()兩個(gè)函數(shù)，用于畫布的初始化和作圖。
重慶分公司
重慶分公司
// car.js
function setup() {
createCanvas(1440, 750);
}
function draw() {
background(0);
}然后加上地面和兩個(gè)車輪。
// 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()函數(shù)。push() 函數(shù)將儲存當(dāng)時(shí)的繪畫樣式設(shè)置及變形，而 pop() 將恢復(fù)這些設(shè)置。這兩個(gè)函數(shù)需要一起使用。它們讓您改變樣式及變形設(shè)置然后再回到您之前的設(shè)置。由于p5.js的translate()、rotate()等函數(shù)的效果在draw()的一次調(diào)用中是累積的，不使用pop()和push()函數(shù)的話會導(dǎo)致移動、旋轉(zhuǎn)等代碼的效果的重疊。
車輪的旋轉(zhuǎn)
定義兩個(gè)變量step（控制旋轉(zhuǎn)速度）和angle（每調(diào)用一次draw()車輪旋轉(zhuǎn)的角度）用于車輪的旋轉(zhuǎn)。
// 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);
}效果
到此為止，一個(gè)簡單的貨車運(yùn)動作畫已經(jīng)完成。
我們可以將官方的雪花特效加進(jìn)去，使畫面更加豐滿。
效果圖
附上源碼
// 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);
};
}碼繪與手繪相比
手繪由于是靜態(tài)的，來表現(xiàn)車的運(yùn)動效果主要有速度線、車輪線、煙霧以及物體高速變形，通過這些靜態(tài)的線條來還原物體運(yùn)動的效果。而碼繪則是通過參數(shù)的改變實(shí)現(xiàn)每一幀圖像的變化來達(dá)到動態(tài)的效果，比起手繪更直觀地體現(xiàn)了“動感”這個(gè)詞。在細(xì)節(jié)方面，手繪明顯更勝一籌，可以方便地勾勒出車的細(xì)節(jié)，而碼繪由于參數(shù)、循環(huán)等一系列問題（可能動一個(gè)參數(shù)就要改一大片，以及坐標(biāo)問題），在繪畫體驗(yàn)上明顯不行。整體比較下來，手繪給人的感覺更具藝術(shù)氣息，能夠感受到一股人情味，碼繪雖然更容易產(chǎn)生動感的效果，線條更加精準(zhǔn)，但是總感覺少了一份繪畫原有的感覺，更像是另一種藝術(shù)創(chuàng)作形式，而不是在繪畫。
感謝各位的閱讀！關(guān)于“p5.js如何實(shí)現(xiàn)簡單貨車運(yùn)動動畫”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
