用p5.js制作烟花特效

前言

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


网上调查了一圈了，发现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 < fireworks.length; i++) {
        fireworks[i].display();
        fireworks[i].update();
        if (fireworks[i].needRemove()) {
            fireworks.splice(i, 1);
        }
    }
}




 
 
 

  
烟花效果
 

function Fireworks(radius) {
    var num = 512; //一发烟花里，