前言
之前看过一篇文章，使用processing制作烟花特效。效果如下
fireworks 网上调查了一圈了，发现processing是一个互动编程软件，java语言发展而来。而且动画效果是跑在processing专门的模拟器上。 不过好在也有对应的web扩展语言，有processing.js和p5.js。 processing.js在github上已经好几年没有人维护了，一些processing的特性支持不了。为此踩了不少坑， 本文就集中讲解如何用p5.js写烟花特效。
代码讲解
processing风格
background(0,40);
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].display();
fireworks[i].update();
if (fireworks[i].needRemove()) {
fireworks.splice(i,1);
}
}
}
烟花效果
cosTheta = random(0,1) 2 - 1;
sinTheta = sqrt(1 - cosTheta cosTheta);
phi = random(0,1) 2 PI;
firePosition[i] = new p5.Vector(radius sinTheta cos(phi),radius sinTheta sin(phi),radius * cosTheta); //1发烟花里各个点的位置计算
firePosition[i] = p5.Vector.mult(firePosition[i],1.12);
}
//调整烟花随机颜色，使其更亮丽
if(colorChange>=3.8){
img=createLight(0.9,random(0.2,0.5),0.5));
}else if(colorChange>3.2){
img=createLight(random(0.2,0.9,0.5));
}else if(colorChange>2){
img=createLight(random(0.2,0.9);
} else {
img=createLight(random(0.5,0.8),random(0.5,0.8));
}
this.display = function () {
for (var i = 0; i < num; i++) {
push();
translate(centerPosition.x,centerPosition.y,centerPosition.z);
translate(firePosition[i].x,firePosition[i].y,firePosition[i].z);
blendMode(ADD); //各个小点（发光源遮罩效果）
image(img,0);
pop();
firePosition[i] = p5.Vector.mult(firePosition[i],1.015); //更新小点（发光源）扩散位置
}
}
this.update = function () { //模拟重力加速度
radius = dist(0,firePosition[0].x,firePosition[0].y,firePosition[0].z);
centerPosition.add(velocity);
velocity.add(accel);
}
this.needRemove = function () {
if (centerPosition.y - radius > height) {
return true;
} else {
return false;
}
}
}
return img;
}
接收键盘和屏幕触碰事件
function touchStarted() { //每事件添加一发烟花
fireworks.push(new Fireworks(80));
return false;
}
Github
nofollow" target="_blank" href="https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS">https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS
原文链接：https://www.f2er.com/js/33080.html