差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン | 次のリビジョン両方とも次のリビジョン | ||
| lecture:design_with_prototyping:p5.js編:13.動きの再構成 [2021/05/25 09:50] – baba | lecture:design_with_prototyping:p5.js編:13.動きの再構成 [2021/05/25 10:06] – [パーティクル] baba | ||
|---|---|---|---|
| 行 199: | 行 199: | ||
| ===== パーティクル ===== | ===== パーティクル ===== | ||
| この動きを一つだけで表現するのではなく、たくさんのオブジェクトに対して共通の動きを適応した代表的な手法にパーティクルがあります。これまでのサンプルを利用して、複数のボールを作成してみます。 | この動きを一つだけで表現するのではなく、たくさんのオブジェクトに対して共通の動きを適応した代表的な手法にパーティクルがあります。これまでのサンプルを利用して、複数のボールを作成してみます。 | ||
| + | |||
| + | <WRAP group> | ||
| + | <WRAP half column> | ||
| + | < | ||
| + | // ボールをたくさん作るので配列で宣言する | ||
| + | var balls = []; | ||
| + | |||
| + | function setup() { | ||
| + | createCanvas(400, | ||
| + | | ||
| + | // ボールの個数を100個にして、ballsの配列に連想配列を初期化して追加する | ||
| + | for (let i = 0; i < 100; i++) { | ||
| + | balls.push({ | ||
| + | x: random(width), | ||
| + | y: random(height), | ||
| + | v: { | ||
| + | x: 0.0, | ||
| + | y: 0.0, | ||
| + | }, | ||
| + | }); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function draw() { | ||
| + | background(220); | ||
| + | |||
| + | // ボールの個数分の描画処理 | ||
| + | for (const ball of balls) { | ||
| + | let g = 1.0; | ||
| + | ball.x += ball.v.x; | ||
| + | ball.y += ball.v.y; | ||
| + | if (ball.y > 400 - 5) { | ||
| + | ball.v.y = 0.5 * -ball.v.y; | ||
| + | ball.y = 400 - 5; | ||
| + | } | ||
| + | ball.v.y += g; | ||
| + | |||
| + | noStroke(); | ||
| + | fill(0); | ||
| + | circle(ball.x, | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <WRAP half column> | ||
| + | {{: | ||
| + | </ | ||
| + | </ | ||