前言

很快就要過年了

用一場(chǎng)美麗的煙火，祝xdm新年快樂??????

效果預(yù)覽

pc端

移動(dòng)端

小打小鬧

煙花盛宴

實(shí)現(xiàn)步驟

具體實(shí)現(xiàn)步驟如下

創(chuàng)建畫布

setup和draw是p5.js的兩個(gè)主函數(shù)，里頭的createCanvas用于創(chuàng)建畫布的大小，background來設(shè)置畫布的背景顏色

function?setup()?{
????createCanvas(1303?/?2,?734?/?2)
}
function?draw()?{
????background(50);
}
復(fù)制代碼

設(shè)置成1303/2和734/2，為了截圖，在掘金還展示，后面會(huì)改

畫煙花粒子

考慮到會(huì)有很多，通過一個(gè)函數(shù)Particle來生成，代碼如下

var?firework;
function?Particle(x,?y)?{
????this.pos?=?createVector(x,?y)
????this.vel?=?createVector(0,?0)
????this.acc?=?createVector(0,?0)
????this.update?=?function?()?{
????????this.vel.add(this.acc)
????????this.pos.add(this.vel)
????????this.acc.mult(0)
????}
????this.show?=?function?()?{
????????point(this.pos.x,?this.pos.y)
????}
}
復(fù)制代碼

這里用createVector創(chuàng)建了3個(gè)包含幅度和方向的p5向量pos、vel、acc，可以理解為作用力，之后會(huì)用到，接著還有一個(gè)更新函數(shù)update,以及顯示函數(shù)show

然后修改主函數(shù)的內(nèi)容，首先是setup

function?setup()?{
????createCanvas(1303?/?2,?734?/?2)
????stroke(255)
????strokeWeight(4)
????firework?=?new?Particle(200,?150)
}
復(fù)制代碼

通過stroke設(shè)置顏色為白色，通過strokeWeight設(shè)置粒子大小為4，接著在draw

function?draw()?{
????background(50);
????firework.update()
????firework.show()
}
復(fù)制代碼

調(diào)用firework.update()和firework.show()將煙花粒子展示出來

結(jié)果如下：

讓煙花粒子隨機(jī)出現(xiàn)在底部

修改setup中的firework，讓它出現(xiàn)在底部的任意位置

firework?=?new?Particle(random(width),?height)
復(fù)制代碼

這里的width和height表示的就是畫布的寬和高

結(jié)果如下

讓煙花粒子向上運(yùn)動(dòng)

只需要修改Particle中的this.vel即可

this.vel?=?createVector(0,?-4)
復(fù)制代碼

createVector中第一個(gè)參數(shù)表示x軸的速率，正數(shù)為向右的速率，負(fù)為向左的速率；第二個(gè)參數(shù)表示y軸的速率，負(fù)為向上，正為向下

效果如下

讓粒子用重力效果，可以下向運(yùn)動(dòng)

首先在全局聲明一個(gè)變量gravity，在setup函數(shù)中設(shè)置重力

gravity?=?createVector(0,?0.2)
復(fù)制代碼

createVector(0, 0.2)表示就是向下的重力，后面數(shù)值越大重力場(chǎng)就越大

然后，我們需要在draw函數(shù)中，添加重力場(chǎng)

firework.applyForce(gravity)
復(fù)制代碼

當(dāng)然，需要在Particle中，添加applyForce函數(shù)，實(shí)際添加的操作

this.applyForce?=?function?(force)?{
????this.acc.add(force)
}
復(fù)制代碼

效果如下

需要很多的煙花粒子

需要?jiǎng)?chuàng)建一個(gè)Firework函數(shù)

function?Firework()?{
????this.firework?=?new?Particle(random(width),?height)
????this.update?=?function?()?{
????????this.firework.applyForce(gravity)
????????this.firework.update()
????}
????this.show?=?function?()?{
????????this.firework.show();
????}
}
復(fù)制代碼

然后再draw中，通過for循環(huán)來顯示很多的煙花粒子

function?draw()?{
????background(50)
????fireworks.push(new?Firework())
????for?(var?i?=?0;?i?????????fireworks[i].update()
????????fireworks[i].show()
????}
}
復(fù)制代碼

結(jié)果如下

引入隨機(jī)因子，修改密集度

上面的顯示明顯太過密集，我們可以通過修改draw中的fireworks.push(new Firework())，修改成

if(random(1)<0.1){
????fireworks.push(new?Firework())
}???
復(fù)制代碼

這里通過引入隨機(jī)因子，可以很方便的修改

效果如下

調(diào)整快、慢、高、低

其實(shí)只需要修改作用力大小，我們可以使用random

于是我們修改Particle中的this.vel為createVector(0, random(-12,-8))

結(jié)果如下

讓煙花粒子上到自身頂點(diǎn)時(shí)消失

其實(shí)就是當(dāng)y軸的作用力沒有的時(shí)候，清空firework

那怎么檢查y軸的作用力呢？

答案是通過this.firework.vel.y >= 0

于是修改Firework：

function?Firework()?{
????this.firework?=?new?Particle(random(width),?height)
????this.update?=?function?()?{
????????if?(this.firework)?{
????????????this.firework.applyForce(gravity)
????????????this.firework.update()
????????????if?(this.firework.vel.y?>=?0)?{
????????????????this.firework?=?null
????????????}
????????}
????}
????this.show?=?function?()?{
????????if?(this.firework)?{
????????????this.firework.show();
????????}
????}
}
復(fù)制代碼

效果如下

消失的那一刻，讓周圍爆破

這里修改的地方會(huì)比較多，主要修改的地方是Firework：

function?Firework()?{
????this.firework?=?new?Particle(random(width),?height,?true)
????this.exploded?=?false
????this.particles?=?[]
????this.update?=?function?()?{
????????if?(!this.exploded)?{
????????????this.firework.applyForce(gravity)
????????????this.firework.update()
????????????if?(this.firework.vel.y?>=?0)?{
????????????????this.exploded?=?true
????????????????this.explode()
????????????}
????????}
????????for?(let?i?=?0;?i?this.particles.length;?i++)?{
????????????this.particles[i].applyForce(gravity)
????????????this.particles[i].update()
????????}

????}
????this.explode?=?function?()?{
????????for?(let?i?=?0;?i?100;?i++)?{
????????????var?p?=?new?Particle(this.firework.pos.x,?this.firework.pos.y)
????????????this.particles.push(p)
????????}
????}
????this.show?=?function?()?{
????????if?(!this.exploded)?{
????????????this.firework.show();
????????}
????????for?(let?i?=?0;?i?this.particles.length;?i++)?{
????????????this.particles[i].show()
????????}
????}
}
復(fù)制代碼

結(jié)果如下

隨機(jī)倍數(shù)爆發(fā)

可以修改Particle來完善以下上面的效果，修改后的代碼為

function?Particle(x,?y,?firework)?{
????this.pos?=?createVector(x,?y)
????this.firework?=?firework
????if?(this.firework)?{
????????this.vel?=?createVector(0,?random(-12,?-8))
????}?else?{
????????this.vel?=?p5.Vector.random2D()
????????this.vel.mult(random(1,?6))
????}
????this.acc?=?createVector(0,?0)
????this.applyForce?=?function?(force)?{
????????this.acc.add(force)
????}
????this.update?=?function?()?{
????????this.vel.add(this.acc)
????????this.pos.add(this.vel)
????????this.acc.mult(0)
????}
????this.show?=?function?()?{
????????point(this.pos.x,?this.pos.y)
????}
}
復(fù)制代碼

效果如下：

展示煙花少一些

通過調(diào)整幾率來實(shí)現(xiàn)，讓展示煙花少一些

我們將draw函數(shù)中的

if(random(1)<0.1){
????fireworks.push(new?Firework())
}????
復(fù)制代碼

修改成：

if(random(1)<0.02){
????fireworks.push(new?Firework())
}????
復(fù)制代碼

這樣就少一些了

效果如下

修改煙花太散落的問題

到Particle中，找到update方法，里頭添加

if(!this.firework){
????this.vel.mult(0.85)
}
復(fù)制代碼

可以理解為，mult的值越大作用力就越大爆炸就越散

效果如下

淡出效果實(shí)現(xiàn)

散開之后，需要慢慢淡出消失，

其實(shí)主要引入一個(gè)變量lifespan，讓它從255開始遞減，通過stroke(255,this.lifespan)來實(shí)現(xiàn)淡出

如下代碼

function?Particle(x,?y,?firework)?{
????this.pos?=?createVector(x,?y)
????this.firework?=?firework
????this.lifespan =?255
????if?(this.firework)?{
????????this.vel?=?createVector(0,?random(-12,?-8))
????}?else?{
????????this.vel?=?p5.Vector.random2D()
????????this.vel.mult(random(1,?6))
????}
????this.acc?=?createVector(0,?0)
????this.applyForce?=?function?(force)?{
????????this.acc.add(force)
????}
????this.update?=?function?()?{
????????if(!this.firework){
????????????this.vel.mult(0.85)
????????????this.lifespan -=?4
????????}
????????this.vel.add(this.acc)
????????this.pos.add(this.vel)
????????this.acc.mult(0)
????}
????this.show?=?function?()?{
????????if?(!this.firework)?{
????????????strokeWeight(2)
????????????stroke(255,this.lifespan)
????????}?else?{
????????????strokeWeight(4)
????????????stroke(255)
????????}
????????point(this.pos.x,?this.pos.y)
????}
}
復(fù)制代碼

效果如下

擴(kuò)大爆破范圍

還是通過調(diào)整mult數(shù)值實(shí)現(xiàn)

Particle中this.vel.mult(random(1, 6))修改成this.vel.mult(random(2, 10))

this.vel.mult(0.85)修改成this.vel.mult(0.9)

效果如下：

消失的煙花粒子需要進(jìn)行移除

將消失的煙花粒子移除，其實(shí)就是從數(shù)組particles中剪切出去，可以通過原生js 數(shù)組的splice方法實(shí)現(xiàn)

于是在Firework中修改update中的for循環(huán)

for?(var?i?=?this.particles.length?-?1;?i?>=?0;?i--)?{
????this.particles[i].applyForce(gravity)
????this.particles[i].update()
????if?(this.particles[i].done())?{
????????this.particles.splice(i,?1)
????}
}
復(fù)制代碼

當(dāng)然我們需要在粒子生成的Particle中添加done方法

this.done?=?function?()?{
????if?(this.lifespan 0)?{
????????return?true
????}?else?{
????????return?false
????}
}
復(fù)制代碼

接著，還在Firework中也添加一個(gè)done

this.done?=?function(){
????if(this.exploded?&&?this.particles.length?===?0){
????????return?true
????}else{
????????return?false
????}
}
復(fù)制代碼

然后再draw中使用

for?(var?i?=?fireworks.length?-?1;?i?>=?0;?i--)?{
????fireworks[i].update()
????fireworks[i].show()
????if?(fireworks[i].done)?{
????????fireworks.splice(i,?1)
????}
}
復(fù)制代碼

效果還是跟上面一樣，不同的是我們將肉眼不可見的粒子移除出數(shù)組了

修改背景顏色

在setup中通過background函數(shù)將背景色修改成黑色

background(0)
復(fù)制代碼

同時(shí)在draw添加

colorMode(RGB)
background(0,?0,?0,?25)
復(fù)制代碼

colorMode用于設(shè)置顏色模型，除了RGB，還有上面的HSB；background的4個(gè)參數(shù)就是對(duì)應(yīng)rgba

效果如下

添加煙花顏色

主要給煙花添加色彩，可以隨機(jī)數(shù)來添加隨機(jī)顏色，主要在Firework添加一下

this.hu?=?random(255)
復(fù)制代碼

記住，所依賴的好幾個(gè)地方都要進(jìn)行修改

完善后，效果如下

適配pc端和移動(dòng)端

之前設(shè)置createCanvas(1303 / 2, 734 / 2)的原因，一是為了截合適的在掘金上展示的圖，二是為了讓圖片別那么大

現(xiàn)在為適配移動(dòng)端豎屏，我們?cè)O(shè)置草稿的寬高為視口寬高

createCanvas(window.innerWidth,?window.innerHeight)
復(fù)制代碼

第二，由于豎屏的高度肯定比較高，所以我們要適當(dāng)調(diào)整向上的力度，而且要分別調(diào)整移動(dòng)端和網(wǎng)頁端的力度

所以我們找到Particle，修改if (this.firework){xx}為

if?(this.firework)?{
????if(window.innerHeight<640){
????????this.vel?=?createVector(0,?random(-16,?-13))
????}else{
????????this.vel?=?createVector(0,?random(-17,?-15))
????}
}
復(fù)制代碼

以上數(shù)值是經(jīng)過調(diào)整后的，我覺得比較好的效果，不會(huì)太高，高度比較集中

頁面端效果如下

看看移動(dòng)端效果

算是差不多了，當(dāng)然我們可以通過調(diào)整相關(guān)數(shù)值來實(shí)現(xiàn)很多不同的效果，比如

加大重力場(chǎng)

gravity?=?createVector(0,?0.3)
復(fù)制代碼

小打小鬧鬧著玩的

if?(random(1)?0.01)?{
????fireworks.push(new?Firework())
}
復(fù)制代碼

煙花盛宴好好看的

if?(random(1)?0.5)?{
????fireworks.push(new?Firework())
}
復(fù)制代碼

其實(shí)還可以根據(jù)粒子的不同的顏色、粗細(xì)、快慢、方向、添加聲音，甚至可以變成3d效果等等，弄出更多好玩的效果

結(jié)語

以上就是本文的所有內(nèi)容了，歡迎點(diǎn)贊支持~

最后祝你

在新的一年里，有好運(yùn)氣、被很多人愛、笑口常開、萬事如意

新年快樂~??????