放物運動のアニメーション

地球上で斜め方向に物体を投げると、そのまま斜め方向に飛び続けるのではなく山なりに飛んで行って地上に落下します。
それは地球上であれば物体には常に重力がかかる、地球の中心へと引っ張られるからです。
このような運動を放物運動といいます。

放物運動の速度の成分

放物運動は鉛直方向（縦方向）と水平方向（横方向）の速度からなる運動です。ですので鉛直方向と水平方向の運動を合わせれば放物運動を表すことができます。

鉛直方向の運動は一度高い位置に移動してその後低い位置へと移動します。
これは鉛直上方向に初速度があり、さらにそれに重力が働き鉛直下方向への速度が出てきます。鉛直方向の運動はこの二つの速度の合成であり、上方向の速度が大きければ高い位置への運動になり、下方向の速度が大きくなれば低い位置への運動になります。
物体にかかる重力は加速度を用いて表すことができ、その加速度は重力加速度といいます。そして重力下の鉛直方向の速度も加速度を用いて表すことができます

v = vy0 + g×t （vy0は初速度、gは重力加速度、tは経過した時間）

y = vy0×t + g×t×t×1/2 (yはtだけ時間経過した鉛直方向の位置)

重力加速度は上方向を正の値をとるとすれば、その逆に働きますので負の値をとります。


水平方向の運動は物体が投げられた後は水平方向に何の力も働かないのでそのまま等速運動になります。

x = vx0×t（vx0は初速度、tは経過した時間、xはtだけ時間経過した水平方向の位置）




このスクリプトではCanvasのstrokeRectの第1プロパティと第2プロパティをそれぞれ水平方向の運動xと鉛直方向yの運動としています。
鉛直方向の加速度aは0.2としています。これはHTMLのCanvasはブラウザでは下方向に正の値をとるからです。

実際の運動では空気抵抗など様々な要因が物体の運動に関わってきます。
それらの要因を取り入れることでよりリアルな表現ができます。