前言

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

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

代码讲解

处理风格

函数设置(){//处理初始化设置createCanvas(window.innerWidth，window。内部高度)；帧率(50);图像模式（中心);}函数draw() { //循环执行，达成画面渲染效果背景(0,0,40);for(var I=0；一、烟花。长度；I){ 0烟花[i].显示();烟火[i].update()；如果（烟花[i].needRemove()){ fireworks。拼接(，1)；} }}烟花效果

函数烟花(半径){ var num=512//一发烟花里，有多少个点（比较吃机器)var centerPosition=new p5 .向量（随机（宽/8,宽* 7/8),随机（高/2,高* 4/5),随机(-100,100));//烟花的中心位置变化速度=新p5 .向量(0,-22,0);var accel=new p5 .向量(0,0.4,0);var img var FirePosition=[]；var cosThetavar sinThetavar phivar color change=random(0，5)；for(var I=0；i numi ) { cosTheta=random(0，1)* 2-1；sinTheta=sqrt(1-cosTheta * cosTheta)；=随机(0，1)* 2 * PI；firePosition[i]=新p5 .向量（半径* sinTheta * cos()，半径* sinTheta * sin()、半径* costeta)；//1发烟花里各个点的位置计算firePosition[i]=p5 .Vector.mult(firePosition[i]，1.12)；} //调整烟花随机颜色，使其更亮丽if(颜色变化=3.8){ img=创造光(0.9，随机(0.2，0.5)，随机(0.2，0.5))；} else if(color change 3.2){ img=create light(random(0.2，0.5)，0.9，random(0.2，0.5))；} else if(颜色变化2){ img=创建光(random(0.2，0.5)，random(0.2，0.5)，0.9)；} else { img=create light(random(0.5，0.8)，random(0.5，0.8)，random(0.5，0.8))；}这个。display=function(){ for(var I=0；I NuMi){ push()；翻译(中心位置. x，中心位置. y，中心位置。z)；翻译(火力位置[i]).x，firePosition[i].y，firePosition[i].z)；混合模式；//各个小点（发光源遮罩效果)图像(img，0，0)；pop()；firePosition[i]=p5 .Vector.mult(firePosition[i]，1.015)；//更新小点（发光源)扩散位置} } this.update=function () { //模拟重力加速度半径=dist(0，0，0，firePosition[0]).x，firePosition[0].y，firePosition[0].z)；中心位置。添加（速度);速度。add(Accel)；}这个。needremove=function(){ if(中心位置。y半径高度){返回真}否则{返回假} }}随机发光源图片生成

函数createLight(rPower，gPower，bPower){ var side=64；定义变量中心=边/2.0;var img=createImage(侧面，侧面);img。load Pixels()；for(var y=0；y侧；y){ for(var x=0；x侧；x){ var distance=(sq(center-x)sq(center-y))/10.0；var r=int((255 * r次方)/距离)；var g=int((255 * gPower)/distance)；var b=int((255 * bPower)/distance)；//img.pixels[x y * side]=color(r，g，b)；img.set(y，x，color(r，g，b))；} } img。update pixels()；返回img}接收键盘和屏幕触碰事件

function KeYPRESS(){//每事件添加一发烟花fireworks.push(新烟花(80))；//80为烟花初始半径}函数touchStarted() { //每事件添加一发烟花fireworks.push(新烟花(80))；返回false}Github

https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。