ホームページ > ウェブフロントエンド > jsチュートリアル > p5.j​​s_javascript スキルを使用して花火の特殊効果を作成するサンプル コード

p5.j​​s_javascript スキルを使用して花火の特殊効果を作成するサンプル コード

php中世界最好的语言
リリース: 2018-05-09 11:32:32
オリジナル
4663 人が閲覧しました

この記事では、p5.jsを使って花火の特殊効果を作成するサンプルコードを中心に紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう

前書き

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

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

コード説明

処理スタイル

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

  }

 }

}

ログイン後にコピー

花火効果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

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;

  }

 }

}

ログイン後にコピー

ランダム光源画像生成

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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;

}

ログイン後にコピー

キーボードとスクリーンタッチの受信イベント

1

2

3

4

5

6

7

function keyPressed() { //每事件添加一发烟花

 fireworks.push(new Fireworks(80)); //80为烟花初始半径

}

function touchStarted() { //每事件添加一发烟花

 fireworks.push(new Fireworks(80));

 return false;

}

ログイン後にコピー

この事例を読んで、方法をマスターしたと思います。記事など、とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

ファジーボックスでWebUploaderを使用する手順の詳細な説明

Vue.jsでの計算されたユースケースの詳細な説明

以上がp5.j​​s_javascript スキルを使用して花火の特殊効果を作成するサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート