lecture:design_with_prototyping:p5.js編:13.動きの再構成

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
lecture:design_with_prototyping:p5.js編:13.動きの再構成 [2021/05/25 13:09] – [パーティクル] babalecture:design_with_prototyping:p5.js編:13.動きの再構成 [2021/05/25 13:25] (現在) – [パーティクル] baba
行 251: 行 251:
 同じプログラムでもそれがたくさんになると、印象が変わりますね。では次は重力の無い世界のプログラムに変更してみます。ただし重力がないとただそこにとどまるだけのボールになってしまうため、初速度を設定しておきます。初速度はそのボールに設定する最初の速度です。また飛んでいってそのまま見えなくなってしまうとつまらないので、一定期間飛び続けたら自動的に最初に戻るようにします。パーティクルではこのことをライフと読んでおり、パーティクル（粒子）が発生してからなくなるまでの寿命のことを意味します。 同じプログラムでもそれがたくさんになると、印象が変わりますね。では次は重力の無い世界のプログラムに変更してみます。ただし重力がないとただそこにとどまるだけのボールになってしまうため、初速度を設定しておきます。初速度はそのボールに設定する最初の速度です。また飛んでいってそのまま見えなくなってしまうとつまらないので、一定期間飛び続けたら自動的に最初に戻るようにします。パーティクルではこのことをライフと読んでおり、パーティクル（粒子）が発生してからなくなるまでの寿命のことを意味します。
  
 +<WRAP group>
 +<WRAP half column>
 +<file>
 +// ボールをたくさん作るので配列で宣言する
 +var balls = [];
 +
 +// 初速度
 +var v0 = 0.3;
 +
 +function setup() {
 +  createCanvas(400, 400);
 +
 +  // ボールの個数を100個にして、ballsの配列に連想配列を初期化して追加する
 +  for (let i = 0; i < 100; i++) {
 +    balls[i] = {
 +      x: width / 2,
 +      y: height / 2,
 +      v: {
 +        x: random(-v0, v0),
 +        y: random(-v0, v0),
 +      },
 +      life: random(255),
 +    };
 +  }
 +
 +  // 色が重なっているときの振る舞いを加算モードにする
 +  // 詳細：https://p5js.org/reference/#/p5/blendMode
 +  blendMode(ADD);
 +}
 +
 +function draw() {
 +  // 画面の描画をすべてなくす
 +  clear();
 +
 +  // 背景色の描画
 +  background(0);
 +
 +  // ボールの個数分の描画処理
 +  for (const ball of balls) {
 +    ball.x += ball.v.x;
 +    ball.y += ball.v.y;
 +    ball.life--;
 +
 +    // 寿命が付きたら最初に戻る
 +    if (ball.life < 0) {
 +      ball.x = width / 2;
 +      ball.y = height / 2;
 +      ball.v.x = random(-v0, v0);
 +      ball.v.y = random(-v0, v0);
 +      ball.life = random(255);
 +    }
 +
 +    noStroke();
 +    fill(255, 150, 50, ball.life / 10);
 +    circle(ball.x, ball.y, 100);
 +  }
 +}
 +</file>
 +</WRAP>
 +
 +<WRAP half column>
 +{{ :lecture:design_with_prototyping:p5.js編:may-25-2021_13-21-37.gif?nolink |}}
 +</WRAP>
 +</WRAP>
 +
 +さて、ここまでパーティクルをコーディングしてみて、パーティクルが炎や雲等の様々なコンピュータグラフィクスに利用されている可能性が理解できたかなと思います。パーティクルはウェブ等で調べても多くヒットするとおもうので、興味を持った人は自学してみてくださいね。
  
  
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/attic/lecture/design_with_prototyping/p5.js編/13.動きの再構成.1621915750.txt.gz
  • 最終更新: 2021/05/25 13:09
  • by baba