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

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

今回のお題は『加速度』。

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

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

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

平面(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の場合。)

回数	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.

コードはこちら。

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』(アクセラレーション)という変数を追加しています。

『ベクトル』として使うので『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の座標位置
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ずつずつ増えて、
位置の値がどんどん増えていくことで、加速しています。

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

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

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

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

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.1	200
Yが200以上	-9くらい	0.1	200

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. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

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