CG関連

プログラムで【加速度】【速度】の使い方をわかりやすく (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・・Location(ロケーション)は位置
  • vecVelocity・・Velocity(ベロシティー)は速度

として、

createVector というメソッドでそれぞれ使えるようにしています。

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

毎回 速度を 位置に足していくので、

表にするとこうなります。(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』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

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

5. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

6. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

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

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

9. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

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

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

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

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

CAPTCHA


最近の記事

  1. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
  3. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
  4. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  5. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
PAGE TOP