p5.jsで花火を咲かせるアニメーション-jsチュートリアル-php.cn

p5.jsで花火を咲かせるアニメーション

php中世界最好的语言

リリース： 2018-06-14 15:18:50

オリジナル

2689 人が閲覧しました

今回はp5.jsで花火が咲くアニメーションを作る方法についてお届けします。p5.jsで花火が咲くアニメーションを作る際の注意点は何ですか？実際の事例を見てみましょう。

まえがき

以前、加工を使って花火の特殊効果を作成するという記事を読みました。効果は以下の通りです

fireworks ネットで調べた結果、Processing は Java 言語から開発された対話型プログラミングソフトウェアであることがわかりました。さらに、アニメーション効果は専用のシミュレーター上で実行されて処理されます。幸いなことに、processing.js や p5.js など、対応する Web 拡張言語もあります。 process.js は数年間 github でメンテナンスされておらず、一部の処理機能はサポートされていません。このために多くの落とし穴を経験したため、この記事では、p5.js を使用して花火の特殊効果を作成する方法を説明することに重点を置きます。

コード説明

処理スタイル

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

ログイン後にコピー

花火効果

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

ログイン後にコピー

ランダム光源画像生成

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() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80)); //80为烟花初始半径
}
function touchStarted() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80));
 return false;
}

ログイン後にコピー

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。もっとエキサイティングな php 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

nodejs+server.jsでWebサーバーを作成

Vue.js+Flaskでモバイルアプリを作成

以上がp5.jsで花火を咲かせるアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。