p5.j​​s實現煙火綻放效果

這次為大家帶來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>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  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;
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js Flask來建立單頁的App（附程式碼）

不使用vue程式碼規範檢測方法總結

#

以上是p5.j​​s實現煙火綻放效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！