# 一场烟花盛宴🎇，祝2022新春快乐🎉 | 可在线观看

·  阅读 10934

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

`pc`

# 实现步骤

## 创建画布

`setup``draw``p5.js`的两个主函数，里头的`createCanvas`用于创建画布的大小，`background`来设置画布的背景颜色

``````function setup() {
createCanvas(1303 / 2, 734 / 2)
}
function draw() {
background(50);
}

## 画烟花粒子

``````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.acc.mult(0)
}
this.show = function () {
point(this.pos.x, this.pos.y)
}
}

``````function setup() {
createCanvas(1303 / 2, 734 / 2)
stroke(255)
strokeWeight(4)
firework = new Particle(200, 150)
}

``````function draw() {
background(50);
firework.update()
firework.show()
}

## 让烟花粒子随机出现在底部

``````firework = new Particle(random(width), height)

## 让烟花粒子向上运动

``````this.vel = createVector(0, -4)

`createVector`中第一个参数表示x轴的速率，正数为向右的速率，负为向左的速率；第二个参数表示y轴的速率，负为向上，正为向下

## 让粒子用重力效果，可以下向运动

``````gravity = createVector(0, 0.2)

`createVector(0, 0.2)`表示就是向下的重力，后面数值越大重力场就越大

``````firework.applyForce(gravity)

``````this.applyForce = function (force) {
}

## 需要很多的烟花粒子

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

``````function draw() {
background(50)
fireworks.push(new Firework())
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].update()
fireworks[i].show()
}
}

## 引入随机因子，修改密集度

``````if(random(1)<0.1){
fireworks.push(new 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();
}
}
}

## 消失的那一刻，让周围爆破

``````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()
}
}
}

## 随机倍数爆发

``````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.update = function () {
this.acc.mult(0)
}
this.show = function () {
point(this.pos.x, this.pos.y)
}
}

## 展示烟花少一些

``````if(random(1)<0.1){
fireworks.push(new Firework())
}

``````if(random(1)<0.02){
fireworks.push(new Firework())
}

## 修改烟花太散落的问题

`Particle`中，找到`update`方法，里头添加

``````if(!this.firework){
this.vel.mult(0.85)
}

## 淡出效果实现

``````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.update = function () {
if(!this.firework){
this.vel.mult(0.85)
this.lifespan -= 4
}
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)
}
}

## 扩大爆破范围

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

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

## 消失的烟花粒子需要进行移除

``````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)
}
}

``````this.done = function () {
if (this.lifespan < 0) {
return true
} else {
return false
}
}

``````this.done = function(){
if(this.exploded && this.particles.length === 0){
return true
}else{
return false
}
}

``````for (var i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update()
fireworks[i].show()
if (fireworks[i].done) {
fireworks.splice(i, 1)
}
}

## 修改背景颜色

`setup`中通过`background`函数将背景色修改成黑色

``````background(0)

``````colorMode(RGB)
background(0, 0, 0, 25)

`colorMode`用于设置颜色模型，除了`RGB`，还有上面的`HSB``background``4`个参数就是对应`rgba`

## 添加烟花颜色

``````this.hu = random(255)

## 适配pc端和移动端

``````createCanvas(window.innerWidth, window.innerHeight)

``````if (this.firework) {
if(window.innerHeight<640){
this.vel = createVector(0, random(-16, -13))
}else{
this.vel = createVector(0, random(-17, -15))
}
}

## 加大重力场

``````gravity = createVector(0, 0.3)

## 小打小闹闹着玩的

``````if (random(1) < 0.01) {
fireworks.push(new Firework())
}

## 烟花盛宴好好看的

``````if (random(1) < 0.5) {
fireworks.push(new Firework())
}