p5.js lässt Feuerwerks-Animationen erblühen

Dieses Mal bringe ich Ihnen p5.js, um eine Feuerwerksanimation zu erstellen. Welche Vorsichtsmaßnahmen gibt es für p5.js, um eine Feuerwerksanimation zu erstellen?

Vorwort

Ich habe bereits einen Artikel gelesen, in dem es um die Verwendung von Verarbeitung zur Erstellung von Feuerwerks-Spezialeffekten ging. Der Effekt ist wie folgt:

Feuerwerk Nach einer Runde Online-Recherche habe ich herausgefunden, dass es sich bei Processing um eine interaktive Programmiersoftware handelt, die aus der Java-Sprache entwickelt wurde. Darüber hinaus werden die Animationseffekte zur Verarbeitung auf einem speziellen Simulator ausgeführt. Glücklicherweise gibt es auch entsprechende Web-Erweiterungssprachen, darunter processing.js und p5.js. processing.js wurde seit mehreren Jahren nicht mehr auf Github gepflegt und einige Verarbeitungsfunktionen werden nicht unterstützt. Ich habe dabei viele Fallstricke durchgemacht, daher konzentriert sich dieser Artikel auf die Erklärung, wie man p5.js zum Schreiben von Feuerwerks-Spezialeffekten verwendet.

Code-Erklärung

Verarbeitungsstil

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);
  }
 }
}

Feuerwerkseffekt

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 < 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发烟花里各个点的位置计算
  firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
 }
 //调整烟花随机颜色，使其更亮丽
 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); //各个小点（发光源遮罩效果）
   image(img, 0, 0);
   pop();
   firePosition[i] = p5.Vector.mult(firePosition[i], 1.015); //更新小点（发光源）扩散位置
  } 
 }
 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;
  }
 }
}

Bilderzeugung mit zufälliger Lichtquelle

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;
}

Erhalten Sie Tastatur- und Bildschirmberührungsereignisse

function keyPressed() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80)); //80为烟花初始半径
}
function touchStarted() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80));
 return false;
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

nodejs+server.js zum Erstellen eines Webservers

Vue.js+Flask zum Erstellen eine mobile App

Das obige ist der detaillierte Inhalt vonp5.js lässt Feuerwerks-Animationen erblühen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!