Beispielcode zum Erstellen von Feuerwerks-Spezialeffekten mit p5.js_javascript-Kenntnissen

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von p5.js zum Erstellen von Feuerwerks-Spezialeffekten vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Kommen Sie und werfen Sie einen Blick mit dem Editor.

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ührungs--Ereignisse

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 zum Thema PHP-Chinesisch Webseite!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von WebUploader in der Fuzzy-Box

Detaillierte Erläuterung der berechneten Anwendungsfälle in Vue .js

Das obige ist der detaillierte Inhalt vonBeispielcode zum Erstellen von Feuerwerks-Spezialeffekten mit p5.js_javascript-Kenntnissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!