這篇文章將為大家詳細(xì)講解有關(guān)如何用p5.js制作煙花特效，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為山西等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及山西網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、網(wǎng)站建設(shè)、山西網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

之前看過(guò)一篇文章，使用processing制作煙花特效。效果如下

fireworks 網(wǎng)上調(diào)查了一圈了，發(fā)現(xiàn)processing是一個(gè)互動(dòng)編程軟件，java語(yǔ)言發(fā)展而來(lái)。而且動(dòng)畫效果是跑在processing專門的模擬器上。 不過(guò)好在也有對(duì)應(yīng)的web擴(kuò)展語(yǔ)言，有processing.js和p5.js。 processing.js在github上已經(jīng)好幾年沒(méi)有人維護(hù)了，一些processing的特性支持不了。為此踩了不少坑， 本文就集中講解如何用p5.js寫煙花特效。

代碼講解

processing風(fēng)格

function setup() { //processing初始化設(shè)置
 createCanvas(window.innerWidth, window.innerHeight);
 frameRate(50);
 imageMode(CENTER);
}

function draw() { //循環(huán)執(zhí)行，達(dá)成畫面渲染效果
 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; //一發(fā)煙花里，有多少個(gè)點(diǎn) (比較吃機(jī)器)
 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 < num; i++) {
  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發(fā)煙花里各個(gè)點(diǎn)的位置計(jì)算
  firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
 }

 //調(diào)整煙花隨機(jī)顏色，使其更亮麗
 if(colorChange>=3.8){
  img=createLight(0.9,random(0.2,0.5),random(0.2,0.5));
 }else if(colorChange>3.2){
  img=createLight(random(0.2,0.5),0.9,random(0.2,0.5));
 }else if(colorChange>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 < num; i++) {
   push();
   translate(centerPosition.x, centerPosition.y, centerPosition.z);
   translate(firePosition[i].x, firePosition[i].y, firePosition[i].z);
   blendMode(ADD); //各個(gè)小點(diǎn)（發(fā)光源遮罩效果）
   image(img, 0, 0);
   pop();

   firePosition[i] = p5.Vector.mult(firePosition[i], 1.015); //更新小點(diǎn)（發(fā)光源）擴(kuò)散位置
  } 
 }

 this.update = function () { //模擬重力加速度
  radius = dist(0, 0, 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;
  }
 }
}

隨機(jī)發(fā)光源圖片生成

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 < side; y++) {
  for (var x = 0; x < side; x++) {
   var distance = (sq(center - x) + sq(center - y)) / 10.0;
   var r = int((255 * rPower) / distance);
   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.updatePixels();
 return img;
}

接收鍵盤和屏幕觸碰事件

function keyPressed() { //每事件添加一發(fā)煙花
 fireworks.push(new Fireworks(80)); //80為煙花初始半徑
}

function touchStarted() { //每事件添加一發(fā)煙花
 fireworks.push(new Fireworks(80));
 return false;
}

關(guān)于“如何用p5.js制作煙花特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：如何用p5.js制作煙花特效-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/ppijj.html