p5.jsを使った斜方投射アニメーション

斜方投射

斜め上方向に物体を投げたときの運動を斜方投射といいます。
物体を投げ出してから t
秒後の位置を知るためには、以下の公式が必要になります。

$x = v_0 cos\theta \cdot t$

$y = -\frac{1}{2}gt^2 + v_0sin\theta \cdot t$

各値について

プログラムで実装する

p5.js で斜方投射をシミュレートすると、このような感じになります。

https://codesandbox.io/embed/projectile-motion-p5-qug1ci?fontsize=14&hidenavigation=1&hidedevtools=1&theme=dark

上記の例では、X 座標と Y 座標を取得するために以下の関数を使っています。

const ProjectileMotionX = (v0: number, degree: number, time: number) => {
  return v0 * Math.cos(DegreeToRadian(degree)) * time;
};

const ProjectileMotionY = (v0: number, degree: number, time: number) => {
  return (
    v0 * Math.sin(DegreeToRadian(degree)) * time -
    (1 / 2) * Gravity * time * time
  );
};

それぞれ初速と投げた角度、経過時間を受け取って位置を返す関数となります。
後は経過時間を取得できれば、斜方投射をアニメーションで再現できます。

p5.js で経過時間を取得するには millis() を使用します。
この関数はプログラムがスタートしてからの時間(ms)を取得できる関数となります。
ms だと扱いにくいので、時間として渡す際には 1000で割ってあげると扱いやすくなります。

以上で斜方投射のアニメーションを実装することができました。