--- theme: cyanosis --- PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：[春节创意投稿大赛](https://juejin.cn/post/7049181546682515464 "https://juejin.cn/post/7049181546682515464") # 前言很快就要过年了用一场美丽的烟火，祝`xdm`新年快乐🎉🎉🎉 # 效果预览 `pc`端 ![17.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9c03107a759416d8ed751d5276b7175~tplv-k3u1fbpfcp-zoom-1.image) 移动端 ![21.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7cfcdad54c4b45b2a5a6e6be2a2fc46d~tplv-k3u1fbpfcp-zoom-1.image) 小打小闹 ![22.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19351a38db64453c9dd9a38e214b07a3~tplv-k3u1fbpfcp-zoom-1.image) 烟花盛宴 ![23.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc623d3763964bd293ce2472fc8ca169~tplv-k3u1fbpfcp-zoom-1.image) [**在线观看地址**](https://jcodelife.github.io/happy-new-year/) # 实现步骤具体实现步骤如下 ## 创建画布 `setup`和`draw`是`p5.js`的两个主函数，里头的`createCanvas`用于创建画布的大小，`background`来设置画布的背景颜色 ```js function setup() { createCanvas(1303 / 2, 734 / 2) } function draw() { background(50); } ``` 设置成`1303/2`和`734/2`，为了截图，在掘金还展示，后面会改 ## 画烟花粒子考虑到会有很多，通过一个函数`Particle`来生成，代码如下 ```js 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) } } ``` 这里用`createVector`创建了`3`个包含幅度和方向的p5向量`pos`、`vel`、`acc`，可以理解为作用力，之后会用到，接着还有一个更新函数`update`,以及显示函数`show` 然后修改主函数的内容，首先是`setup` ```js function setup() { createCanvas(1303 / 2, 734 / 2) stroke(255) strokeWeight(4) firework = new Particle(200, 150) } ``` 通过`stroke`设置颜色为白色，通过`strokeWeight`设置粒子大小为4，接着在`draw` ```js function draw() { background(50); firework.update() firework.show() } ``` 调用`firework.update()`和`firework.show()`将烟花粒子展示出来结果如下： ![1641628184(1).jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f1714645d9845908074a930624bfa4a~tplv-k3u1fbpfcp-watermark.image?) ## 让烟花粒子随机出现在底部修改`setup`中的`firework`，让它出现在底部的任意位置 ```js firework = new Particle(random(width), height) ``` 这里的`width`和`height`表示的就是画布的宽和高结果如下 ![1641629030.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3abd4fac3ff64ad2aec1e20379dc8c33~tplv-k3u1fbpfcp-watermark.image?) ## 让烟花粒子向上运动只需要修改`Particle`中的`this.vel`即可 ```js this.vel = createVector(0, -4) ``` `createVector`中第一个参数表示x轴的速率，正数为向右的速率，负为向左的速率；第二个参数表示y轴的速率，负为向上，正为向下效果如下 ![3.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01403744444e488fbad805d95ccb2d5d~tplv-k3u1fbpfcp-watermark.image?) ## 让粒子用重力效果，可以下向运动首先在全局声明一个变量`gravity`，在setup函数中设置重力 ```js gravity = createVector(0, 0.2) ``` `createVector(0, 0.2)`表示就是向下的重力，后面数值越大重力场就越大然后，我们需要在`draw`函数中，添加重力场 ```js firework.applyForce(gravity) ``` 当然，需要在`Particle`中，添加`applyForce`函数，实际添加的操作 ```js this.applyForce = function (force) { this.acc.add(force) } ``` 效果如下 ![4.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/794a236463e44292a395c55828d30b49~tplv-k3u1fbpfcp-watermark.image?) ## 需要很多的烟花粒子需要创建一个`Firework`函数 ```js 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(); } } ``` 然后再`draw`中，通过`for`循环来显示很多的烟花粒子 ```js function draw() { background(50) fireworks.push(new Firework()) for (var i = 0; i < fireworks.length; i++) { fireworks[i].update() fireworks[i].show() } } ``` 结果如下 ![5.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c23a1287757b45a1bc9fe95eefcb005e~tplv-k3u1fbpfcp-watermark.image?) ## 引入随机因子，修改密集度上面的显示明显太过密集，我们可以通过修改`draw`中的`fireworks.push(new Firework())`，修改成 ```js if(random(1)<0.1){ fireworks.push(new Firework()) } ``` 这里通过引入随机因子，可以很方便的修改效果如下 ![6.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfd472ca2a864788bbe11fe703db0770~tplv-k3u1fbpfcp-watermark.image?) ## 调整快、慢、高、低其实只需要修改作用力大小，我们可以使用`random` 于是我们修改`Particle`中的`this.vel`为`createVector(0, random(-12,-8))` 结果如下 ![7.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6eb33491e9b04b2b82cddecd9f7db2da~tplv-k3u1fbpfcp-watermark.image?) ## 让烟花粒子上到自身顶点时消失其实就是当`y`轴的作用力没有的时候，清空`firework` 那怎么检查`y`轴的作用力呢？答案是通过`this.firework.vel.y >= 0` 于是修改`Firework`： ```js 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(); } } } ``` 效果如下 ![8.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12b71367fd0d4f568a0cae9713faec52~tplv-k3u1fbpfcp-watermark.image?) ## 消失的那一刻，让周围爆破这里修改的地方会比较多，主要修改的地方是`Firework`： ```js 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() } } } ``` 结果如下 ![9.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/929880cd7b864222945f12a99d2888b5~tplv-k3u1fbpfcp-watermark.image?) ## 随机倍数爆发可以修改`Particle`来完善以下上面的效果，修改后的代码为 ```js 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) } } ``` 效果如下： ![10.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67b88b6362444e57ae7b05142dd1660f~tplv-k3u1fbpfcp-watermark.image?) ## 展示烟花少一些通过调整几率来实现，让展示烟花少一些我们将`draw`函数中的 ```js if(random(1)<0.1){ fireworks.push(new Firework()) } ``` 修改成： ```js if(random(1)<0.02){ fireworks.push(new Firework()) } ``` 这样就少一些了效果如下 ![11.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e365f9d53176426a88a8a866adb63fba~tplv-k3u1fbpfcp-watermark.image?) ## 修改烟花太散落的问题到`Particle`中，找到`update`方法，里头添加 ```js if(!this.firework){ this.vel.mult(0.85) } ``` 可以理解为，`mult`的值越大作用力就越大爆炸就越散效果如下 ![12.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3481cc34c4947fd9dde278582bf715d~tplv-k3u1fbpfcp-watermark.image?) ## 淡出效果实现散开之后，需要慢慢淡出消失，其实主要引入一个变量`lifespan`，让它从`255`开始递减，通过`stroke(255,this.lifespan)`来实现淡出如下代码 ```js 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) } } ``` 效果如下 ![13.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f61be82b0913495a8c1bb3c356fb5484~tplv-k3u1fbpfcp-watermark.image?) ## 扩大爆破范围还是通过调整`mult`数值实现 `Particle`中`this.vel.mult(random(1, 6))`修改成`this.vel.mult(random(2, 10))` `this.vel.mult(0.85)`修改成`this.vel.mult(0.9)` 效果如下： ![14.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/705f8da7d4cb4a9596579be0d6fe0ac8~tplv-k3u1fbpfcp-watermark.image?) ## 消失的烟花粒子需要进行移除将消失的烟花粒子移除，其实就是从数组`particles`中剪切出去，可以通过原生js 数组的`splice`方法实现于是在`Firework`中修改`update`中的`for`循环 ```js 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) } } ``` 当然我们需要在粒子生成的`Particle`中添加`done`方法 ```js this.done = function () { if (this.lifespan < 0) { return true } else { return false } } ``` 接着，还在`Firework`中也添加一个`done` ```js this.done = function(){ if(this.exploded && this.particles.length === 0){ return true }else{ return false } } ``` 然后再`draw`中使用 ```js for (var i = fireworks.length - 1; i >= 0; i--) { fireworks[i].update() fireworks[i].show() if (fireworks[i].done) { fireworks.splice(i, 1) } } ``` 效果还是跟上面一样，不同的是我们将肉眼不可见的粒子移除出数组了 ![14.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32aa4a01104543ec98cf8c4fc6c9e40d~tplv-k3u1fbpfcp-watermark.image?) ## 修改背景颜色在`setup`中通过`background`函数将背景色修改成黑色 ```js background(0) ``` 同时在`draw`添加 ```js colorMode(RGB) background(0, 0, 0, 25) ``` `colorMode`用于设置颜色模型，除了`RGB`，还有上面的`HSB`；`background`的`4`个参数就是对应`rgba` 效果如下 ![15.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5fb2b0fe6124c718d9b6cac7d760b94~tplv-k3u1fbpfcp-watermark.image?) ## 添加烟花颜色主要给烟花添加色彩，可以随机数来添加随机颜色，主要在`Firework`添加一下 ```js this.hu = random(255) ``` 记住，所依赖的好几个地方都要进行修改完善后，效果如下 ![18.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25be737d8aaf475293df21674086afc2~tplv-k3u1fbpfcp-watermark.image?) ## 适配pc端和移动端之前设置`createCanvas(1303 / 2, 734 / 2)`的原因，一是为了截合适的在掘金上展示的图，二是为了让图片别那么大现在为适配移动端竖屏，我们设置草稿的宽高为视口宽高 ```js createCanvas(window.innerWidth, window.innerHeight) ``` 第二，由于竖屏的高度肯定比较高，所以我们要适当调整向上的力度，而且要分别调整移动端和网页端的力度所以我们找到`Particle`，修改`if (this.firework){xx}`为 ```js if (this.firework) { if(window.innerHeight<640){ this.vel = createVector(0, random(-16, -13)) }else{ this.vel = createVector(0, random(-17, -15)) } } ``` 以上数值是经过调整后的，我觉得比较好的效果，不会太高，高度比较集中页面端效果如下 ![20.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91e61d1fe1f64e4d9b69e3179cd340ff~tplv-k3u1fbpfcp-watermark.image?) 看看移动端效果 ![21.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e5faa1393ee41c0a352c6a20efd4660~tplv-k3u1fbpfcp-watermark.image?) 算是差不多了，当然我们可以通过调整相关数值来实现很多不同的效果，比如 ## 加大重力场 ```js gravity = createVector(0, 0.3) ``` ![24.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/951af821f5d948d6aef0adf57261bcf3~tplv-k3u1fbpfcp-watermark.image?) ## 小打小闹闹着玩的 ```js if (random(1) < 0.01) { fireworks.push(new Firework()) } ``` ![22.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b39b88223792498483d45a74054b5749~tplv-k3u1fbpfcp-watermark.image?) ## 烟花盛宴好好看的 ```js if (random(1) < 0.5) { fireworks.push(new Firework()) } ``` ![23.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/671cedd1cbf24ce6912fd135b97272f1~tplv-k3u1fbpfcp-watermark.image?) 其实还可以根据粒子的不同的颜色、粗细、快慢、方向、添加声音，甚至可以变成`3d`效果等等，弄出更多好玩的效果 # 结语以上就是本文的所有内容了，欢迎点赞支持~ 最后祝你 >在新的一年里，有好运气、被很多人爱、笑口常开、万事如意新年快乐~🎉🎉🎉