03 位置と速度の数学的な関係

前述項01の方程式は、円運動の位置座標を表しました。それに対して、速度を一定間隔で位置座標に加えることにより計算したのが前項02の方程式です。これらふたつの方程式の関係について、興味ある読者のために数学的な説明を加えます。

まず、単純な等速直線運動で考えます。初めの位置を$(x_0, y_0)$として、時間$t$が経過した位置座標$(x, y)$を求めたのが、つぎの方程式です。$a$は時間あたりに$x$座標が動く大きさ、$b$は直線の傾きを示す係数です(「直線の式(方程式)」参照)。

x = at + x_0 \\
y = bx + y_0 = abt + bx_0 + y_0

けれど、等速直線運動は位置座標で扱うと煩わしくなりがちです。ほとんどの場合、速度を位置座標に加えて、アニメーションさせます。一般に、位置の方程式を時間($t$)で微分すれば、速度の方程式が導かれます。上記の方程式を$t$で微分すると、$xy$方向ともに定数になります。

x' = a \\
y' = ab

つぎのような$n$次関数$f(x)$を考えます。なお、各項の係数$k_0～k_n$は定数とします。

$f(x) = k_nx^n + k_{n-1}x^{n-1}+ … + k_2x^2 + k_1x + k_0$

すると、この関数を微分して得られる関数(「導関数」と呼ばれます)$f'(x)$は、つぎのとおりです(Wikibooks「高等学校数学II 微分・積分の考え」1「微分・積分の考え」参照)。

$f'(x) = nk_nx^{n-1} + (n-1)k_{n-1}x^{n-2} + … + 2k_2x + k_1$

そして、速度の方程式は積分すると、位置の方程式になるのです(「微分積分学の基本定理」)。さらに、微分・積分などというむずかしいことは考えなくて構いません。短い単位時間であれば、速度を位置に足し込んでいくだけで近似値として運動が表せるのです(「微分の考え方を使う ー オイラー法」参照)。

等速直線運動がつぎのようなJavaScriptコードで定められることは、よく知られています。初めの位置は(startX, startY)で、関数が呼ばれるごとに水平方向にspeedX、垂直方向にはspeedY動きます。なお、直線軌道の傾きはspeedY/speedXとなります。

instance.x = startX;
instance.y = startY;
function move() {
    instance.x += speedX;
    instance.y += speedY;
}

等速円運動でも考え方は同じです。項01のひとつ目の方程式は、円運動の位置座標を表しています。

x = o_x + r\cos\theta \\
y = o_y + r\sin\theta

この方程式を$\theta = \omega t$として、$t$で微分するとつぎのようになります。これがまさに、項02で示した円運動の速度の方程式なのです(Wikipedia「等速円運動の運動方程式」参照)。

x' = -r\omega\sin(\omega t) \\
y' = r\omega\cos(\omega t)

三角関数の$\sin$と$\cos$について、角度$\theta$で微分した導関数はつぎのとおりです(Wikipedia「三角関数の公式の一覧」17「微積分」参照)。

$f(\theta) = \sin\theta\, →\, f'(\theta) = \cos\theta$
$f(\theta) = \cos\theta\, →\, f'(\theta) = -\sin\theta$

けれど、本文では$\theta=\omega t$として、時間$t$で微分したいのです。$\theta$を$t$で微分すると導関数$\theta '$($t$で微分したことを示すときは$\frac{d\theta}{dt}$で表す)はつぎのようになります。

$\frac{d\theta}{dt} = \omega$

「合成関数の微分」は、ふたつの導関数を掛け合わせます。そこで、$\sin$と$\cos$を角速度$\omega$における経過時間$t$で微分すると、導関数はつぎのように導けます。

$f(t) = \cos(\omega t)\, →\, f'(t) = f'(\theta)\frac{d\theta}{dt} = -\omega \sin(\omega t)$
$f(t) = \sin(\omega t)\, →\, f'(t) = f'(\theta)\frac{d\theta}{dt} = \omega \cos(\omega t)$

04 応用例 ー ランダムなパーティクルの円運動

速度を用いた円運動の応用例が、以下に掲げたCodePenのサンプル002です。クラス(Particle)に定めたメソッド(_move())により円運動のアニメーションを行っています。プロパティspeedXとspeedYは、円運動するオブジェクトごとの定数です。ふたつの値(の絶対値)が異なると、軌道が楕円になります。速度を操作することで、速さだけでなく軌道もランダムにできるのです。なお、つぎに抜書きしたコードは、一部簡略化ししました。

_move(advance) {
    const angle = this.angle + advance;
    const velocityX = this.speedX * Math.sin(angle);
    const velocityY = this.speedY * Math.cos(angle);
    this.x += velocityX;
    this.y += velocityY;
    this.angle = angle;
};

サンプル002■CreateJS 1.0.0: Randomized Particles

See the Pen CreateJS 1.0.0: Randomized Particles by Fumio Nonaka (@FumioNonaka) on CodePen.