P5.js (Processing)

加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

遊ぶようなプログラミングでおなじみの『クリエイティブコーディング』。

スムーズな動きを実現しようと思うとどうしても『物理』や『数学』の知識が必要になってきます。

今回のお題は『加速度』

だんだんスピードが速くなったり、だんだんスピードが遅くなったり、
はたまた逆方向に加速していったり。

そんな動きをできるだけわかりやすく作ってみたいと思います。

アオキ
今回は2D(2次元・平面)の動きを想定しています。
Sponsored link

加速度のまえに『ベクトル』のざっくり解説

平面(2次元・2D)の場合、横と縦の2つの情報が必要になります。

横がX、縦がYになります。

常にXとY、2つの値がペアになって、位置や速度を表現するので、

複数の数値をまとめて扱えるように『ベクトル』を使います。

『ベクトル』なんて難しい言葉ですが、

ようは、『2つ以上の数字をまとめたもの』と思ってもらえればOKです。

参考記事

参考記事内で設定しているコードはこちら。

See the Pen
p5.js vector-test2
by aoki_monpro (@suica)
on CodePen.

座標の位置と速度をそれぞれ

  • vecLocation
  • vecVelocity

として、

createVector というメソッドでそれぞれ使えるようにして(インスタンス化して)います。

アオキ
『ベクトル』を使うとXとY2つの値をまとめて使えるんですね。

毎回 速度を 位置に足していくので、表にするとこうなります。(Xの場合)

表にするとこうなります。(Xの場合。)

回数 Xの速度 Xの座標位置
0 2 0
1 2 2
2 2 4
3 2 6

加速度を速度に足していくことでどんどん加速(減速)していきます

加速度の公式は下記なのですが、

$ 加速度(m/s^2)=\displaystyle \frac{速度の変化(m/s)}{時間(s)} $

参考記事

せっかくプログラミングをやっているので、
適当に『加速度』を設定して動かしてみたいと思います。

See the Pen
p5.js vector-acceleration
by aoki_monpro (@suica)
on CodePen.

アオキ
だんだん早くなってます。動いている方がわかりやすいなと思います。

コードはこちら。

新しく『vecAcceleration』という変数を追加しています。

アオキ
変数の名前はなんでもOKなのですが、
アオキ
英語で加速度という意味のAccelerateやAccelerationを使うのがいいかなと思います。

『ベクトル』として使うので『createVector(0.01, 0.02)』という形で実体化しています。

速度は下記で、Xを2、Yを3にしています。

今回は加速度を下記に設定しています。

  • X方向・・0.01
  • Y方向・・0.02

大事なのはこの部分。

どんな事をやっているかというと、

速度に加速度を足して、(速度 + 加速度)

(速度 + 加速度)を座標位置に足すことで、座標の位置を変えています。

『P5.js(ProcessingのJavaScript版)』の場合、『draw』関数の中に書いてある内容は何度も何度も実行されるので、位置が徐々に変わっていきます。

表にするとこうなります。(Xの場合。)

回数 Xの速度 Xの加速度 Xの座標位置
0 2 0.1 0
1 2 0.1 2.1
2 2.1 0.1 4.3
3 2.2 0.1 6.6

加速度は0.1のままですが、
速度が0.1ずつずつ増えて、
位置の値がどんどん増えていくことで、加速しています。

ただ、速度がどんどん大きくなっていくと早すぎて見えなくなってしまうので、
最大値を設定して制限をかけています。

Sponsored link

加速度を使ってバウンドを表現してみる

続いてボールをバウンドさせてみます。

See the Pen
p5.js vector-bounce
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

Y方向の速度をマイナスにしているのがポイントかなと思います。

『P5.js(ProcessingのJavaScript版)』の場合、上方向がマイナス、下方向がプラスなので、
上方向に動くように設定しています。

加速度をプラスで設定しているので、
徐々に速度がプラスに変わっていくことで、下方向に下がっていく動きを実現しています。

(9.8は重力加速度で、フレームレート60で割っています。)

参考記事:重力加速度

参考記事:フレームレート

加速度は変わらず、
Yの速度がマイナスから徐々にプラスに変わっていくので、
Yの位置情報も、
最初はマイナスが増えるものの、徐々にマイナスの幅が減って、プラス(下方向)に変わっていきます。

  • -5(速度) + 0.16(加速度) + 位置 = -4.84(位置)
  • -4.84(速度) + 0.16(加速度) + 位置 = -9.52(位置)
  • -4.68(速度) + 0.16(加速度) + 位置 = -14.04(位置)


  • 3(速度) + 0.16(加速度) + 位置 = -42.84(位置)
  • 3.16(速度) + 0.16(加速度) + 位置 = -39.52(位置)

  • 4.6(速度) + 0.16(加速度) + 位置 = -2.44(位置)
  • 4.76(速度) + 0.16(加速度) + 位置 = 2.48(位置)

Yの位置がプラス200になると(画面下になると)、
速度に -1 をかけてマイナスにして、
上方向に動くよう変更しています。

表で描くとこうなります。

条件 Yの速度 Yの加速度 Yの座標位置
Yが200以下 9くらい 0.1 200
Yが200以上 -9くらい 0.1 200

Yの速度がプラスからマイナスに反転するのでぼよーんという動きになり、
加速度は下方向(プラス方向)にかかり続けるので、徐々にまた下がってくるというかたちです。

加速度をわかりやすくするために動かしてみる〜まとめ

加速度を設定することで、

徐々にスピードが上がるんだろうなぁと思いはするものの、

教科書だけ読んでいてもなかなかしっくりこなかったりするので、

プログラムを組んで数値を変えたりして色々試していくうちに、

徐々に肌感覚でわかってくるようになるんじゃないかなと思います。

アオキ
やっぱり教科書丸暗記よりも、自分で作っていじってみる方がいいんじゃないかなと思います。

 

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい【P5.js】(3)

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.js】(6)

7. プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜【P5.js】(7)

8. プログラミングで色や大きさをランダムにして遊んでみる【P5.js】(8)

9. プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

10. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. P5.js (Processing)

    移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

    遊ぶようにプログラミングができる『クリエイティブコーディング』の中でも…

  2. P5.js (Processing)

    プログラミングで色や大きさをランダムにして遊んでみる【P5.js】(8)

    遊ぶようにプログラミングができる『クリエイティブコーディング』。『…

  3. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

    プログラミングでアートだったりデザインを作ることを『クリエイティブコ…

  4. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

    前回の記事で、プログラミングを使って数学がわかるという『コー…

  5. クリエイティブコーディング

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

  6. 物理学

    物理とプログラミングの関係〜力学のはじめのいっぽ

    子供向けプログラミング教室『CoderDojo熊本』で以前こんな質問が…

Sponsored link

最近の記事

Sponsored link
  1. クリエイティブコーディング

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング
  2. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  3. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して
  4. Laravel

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心…
  5. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
PAGE TOP