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.

let vecLocation;
let vecVelocity;

function setup() {
  createCanvas(200, 200); //キャンバスのサイズ
  colorMode(HSL, 360, 100, 100, 100); //カラーモードをHSLに 
  vecLocation = createVector(width / 2, height / 2); //初期位置
  vecVelocity = createVector(2, 3); //速度 Xが2 Yが3
}

function draw() {
  background(0); 
  vecLocation.add(vecVelocity); // 速度を位置に足している
  fill(160, 100, 50, 100); // 色
  ellipse(vecLocation.x, vecLocation.y, 20, 20); //だ円
  if( vecLocation.x < 0 || vecLocation.x > width){
    vecVelocity.x = vecVelocity.x * -1;
  }
  if(vecLocation.y < 0 || vecLocation.y > height){
    vecVelocity.y = vecVelocity.y * -1;
  }
}

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

  • vecLocation・・Location(ロケーション)は位置
  • vecVelocity・・Velocity(ベロシティー)は速度

として、

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

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

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

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

回数Xの速度Xの座標位置
020
122
224
326

プログラムで加速度と速度を使ってみる

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

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

参考記事

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

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

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

コードはこちら。

let vecLocation;
let vecVelocity;
let vecAcceleration; //この行を追加
let topSpeed; //この行を追加


function setup() {
  createCanvas(250, 250);
  colorMode(HSL, 360, 100, 100, 100);
  vecLocation = createVector(width / 2, height / 2);
  vecVelocity = createVector(2, 3);
  vecAcceleration = createVector(0.01, 0.02); //この行を追加 加速度 
  topSpeed = 10; //この行を追加 速度の制限(最大速度)
  
}

function draw() {
  background(0);

  vecVelocity.add(vecAcceleration); // 速度に加速度を足しています
  vecVelocity.limit(topSpeed); // 速度の制限をかけています
  vecLocation.add(vecVelocity); //現在の位置に速度を足しています

  fill(160, 100, 50, 100);
  ellipse(vecLocation.x, vecLocation.y, 20, 20);

//ここから下も変更しています
  if( vecLocation.x > width){
    vecLocation.x = 0;
  }
  if(vecLocation.y < 0 || vecLocation.y > height){
    vecLocation.y = 0;
  }
}

新しく『vecAcceleration』(アクセラレーション)という変数を追加しています。

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

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

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

  vecVelocity = createVector(2, 3);

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

  • X方向・・0.01
  • Y方向・・0.02
    vecAcceleration = createVector(0.01, 0.02); //この行を追加

大事なのはこの部分。

  vecVelocity.add(vecAcceleration); // 速度に加速度を足しています
  vecVelocity.limit(topSpeed); // 速度の制限をかけています
  vecLocation.add(vecVelocity); //現在の位置に速度を足しています

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

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

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

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

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

回数Xの速度Xの加速度Xの座標位置
020.10
120.12.1
22.10.14.3
32.20.16.6

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

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

  vecVelocity.limit(topSpeed); // 速度の制限をかけています
Sponsored link

プログラム加速度を使ってバウンドを表現してみる

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

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

コードはこちら。

let vecLocation;
let vecVelocity;
let vecAcceleration;
let topSpeed;

function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  vecLocation = createVector(width / 2, height / 2); //座標の位置
  vecVelocity = createVector(5, -5); // 速度 Xが5 Yが-5 (マイナスなので上方向)
  vecAcceleration = createVector(0, 9.8/60); // 9.8は重力加速度 フレームレート(60)で割ってる
}

function draw() {
  background(0);

  vecVelocity.add(vecAcceleration); //加速度を速度に追加
  vecLocation.add(vecVelocity); // 速度を位置に追加

  fill(160, 100, 50, 100);
  ellipse(vecLocation.x, vecLocation.y, 20, 20);
  if( vecLocation.y + 20 > height || vecLocation.y - 20 < 0 ){ //Yが端についたら-1をかけて反転させる
    vecVelocity.y = vecVelocity.y * -1;
  }
  if(vecLocation.x + 20 > width || vecLocation.x - 20 < 0 ){ // Xが端についたら -1をかけて反転させる
    vecVelocity.x = vecVelocity.x * -1;
  }
}

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

  vecVelocity = createVector(5, -5);

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

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

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

  vecAcceleration = createVector(0, 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.1200
Yが200以上-9くらい0.1200

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

プログラムで加速度と速度の使い方をわかりやすくまとめてみて

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

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

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

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

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

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

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

1. 【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【Udemy】

2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】

3. プログラミング実況をやってみた その1【P5.js】

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

コメント

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

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

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  2. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  3. 生成AI

    2024/5/14 OpenAI発表 まとめ
  4. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  5. データベース

    MySQLの講座をリリースしました
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock