这次给大家带来p5.js实现烟花绽放效果，p5.js实现烟花绽放效果的注意事项有哪些，下面就是实战案例，一起来看一下。

之前看过一篇文章，使用processing制作烟花特效。效果如下

fireworks 网上调查了一圈了，发现processing是一个互动编程软件，java语言发展而来。而且动画效果是跑在processing专门的模拟器上。 不过好在也有对应的web扩展语言，有processing.js和p5.js。 processing.js在github上已经好几年没有人维护了，一些processing的特性支持不了。为此踩了不少坑， 本文就集中讲解如何用p5.js写烟花特效。

代码讲解

processing风格

function setup() { //processing初始化设置 createCanvas(window.innerWidth, window.innerHeight); frameRate(50); imageMode(CENTER);}function draw() { //循环执行，达成画面渲染效果 background(0, 0, 40); for (var i = 0; i <p style="text-align: left;">烟花效果</p><pre class="brush:php;toolbar:false">function Fireworks(radius) { var num = 512; //一发烟花里，有多少个点 (比较吃机器) var centerPosition = new p5.Vector(random(width / 8, width * 7 / 8), random(height / 2, height * 4 / 5), random(-100, 100)); //烟花的中心位置 var velocity = new p5.Vector(0, -22, 0); var accel = new p5.Vector(0, 0.4, 0); var img; var firePosition = []; var cosTheta; var sinTheta; var phi; var colorChange = random(0, 5); for (var i = 0; i =3.8){  img=createLight(0.9,random(0.2,0.5),random(0.2,0.5)); }else if(colorChange&gt;3.2){  img=createLight(random(0.2,0.5),0.9,random(0.2,0.5)); }else if(colorChange&gt;2){  img=createLight(random(0.2,0.5),random(0.2,0.5),0.9); } else {  img=createLight(random(0.5,0.8),random(0.5,0.8),random(0.5,0.8)); } this.display = function () {  for (var i = 0; i  height) {   return true;  } else {   return false;  } }}

随机发光源图片生成

function createLight(rPower, gPower, bPower) { var side = 64; var center = side / 2.0; var img = createImage(side, side); img.loadPixels(); for (var y = 0; y <p style="text-align: left;">接收键盘和屏幕触碰事件</p><pre class="brush:php;toolbar:false">function keyPressed() { //每事件添加一发烟花 fireworks.push(new Fireworks(80)); //80为烟花初始半径}function touchStarted() { //每事件添加一发烟花 fireworks.push(new Fireworks(80)); return false;}

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

推荐阅读：

Vue.js+Flask来构建单页的App（附代码）

不使用vue代码规范检测方法总结

标签： p5.js