サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

等速円運動を三角関数の微分で表す

ID: FN1401004 Technique: HTML5 and JavaScript Library: None or EaselJS 1.0.0

等速円運動は、多くの場合三角関数で表します。その場合、運動の式を位置の動きで立てるほかに、速度の変化で扱う考え方もあります。後者は、数学的には「微分」で導かれる関数が使われます。解説では先にJavaScriptコードを示し、数学の考え方は興味ある読者のために後で説明します。


01 等速円運動を表すふたつの計算の仕方

等速円運動をアニメーションで見せたいときは、三角関数のsinとcosを使うのが便利です。sinとcosは半径1の「単位円」で定義されます。単位円の円周上の点Pと原点O(0, 0)を結ぶ線分がx軸の正方向となす角度をθとすると、点Pの座標は(cosθ, sinθ)と定められています(図001)。

図001■単位円の円周上の座標は原点と結ぶ線分がx軸となす角をθとするとき(cosθ, sinθ)
図001

すると、中心座標を(x0, y0)とする半径rの円周上の座標(x, y)は、つぎの式で求められます(『ActionScript 3.0による三次元表現ガイドブック』Math01-01「角度を座標にする三角関数sinとcos」p.220-221 (PDF)参照)。

x = x0 + r cosθ
y = y0 + r sinθ

そこで上記の方程式にもとづいて、円運動をJavaScriptコードの関数(rotate())で書いてみます。中心座標は(centerX, centerY)、円の半径をangleという変数でもちます。動かすインスタンスがinstanceで、xとyのプロパティにより位置を変えます。なお、関数は一定間隔で呼出されるものとし[*1]、回す角度をspeedとしています。

function rotate() {
  angle += speed;
  instance.x = centerX + radius * Math.cos(angle);
  instance.y = centerY + radius * Math.sin(angle);
}

同じ三角関数のsinとcosを使いつつ、また違った方程式で等速円運動を表すことができます。それは、運動の速度のベクトル(x', y')を位置ベクトル(座標)に加えるのです。円運動の速度の(x', y')成分は、つぎの式で表されます。なお、経過時間をtとし、一定の角速度はω(オメガ)としています。

x' = -rω sin(ωt)
y' = rω cos(ωt)

この方程式を用いると、前掲JavaScriptコードと同じ等速円運動はつぎのような計算式で示されます。方程式で導かれる速度(x', y')は、位置座標(x, y)に加えます。そのため、初めに位置決めしてしまえば、円の中心座標(centerX, centerY)は使わずに済みます。ふたつの円運動が同じ動きになることは、以下に掲げたCodePenのサンプルコードから確かめられるでしょう。

instance.x = centerX + radius;
instance.y = centerY;
function rotate() {
  angle += speed;
  instance.x -= radius * speed * Math.sin(angle);
  instance.y += radius * speed * Math.cos(angle);
}

See the Pen poowPRj by Fumio Nonaka (@FumioNonaka) on CodePen.

[*1] 関数をwindow.setTimeout()やwindow.setInterval()メソッドから呼出すか、EaselJSでTicker.tickイベントのリスナーに定めればよいでしょう。

02 位置と速度の方程式の関係

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

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

x = at + x0
y = bx + y0 = abt + bx0 + y0

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

x' = a
y' = ab

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

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

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

x = x0 + r cosθ
y = y0 + r sinθ

この方程式をθ=ωtとして、tで微分するとつぎのようになります[*3]。これがまさに、前項01のふたつ目で示した円運動の速度の方程式なのです(RETURN「等速円運動」参照)。

x' = -rω sin(ωt)
y' = rω cos(ωt)

[*2] つぎのようなn次関数f(x)を考えます。なお、各項の係数k0〜knは定数とします。

f(x) = knxn + kn-1xn-1+ … + k2x2 + k1x + k0

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

f'(x) = nknxn-1 + (n-1)kn-1xn-2 + … + 2k2x + k1

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

f(θ) = sinθ → f'(θ) = cosθ
f(θ) = cosθ → f'(θ) = -sinθ

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

dθ/dt = ω

「合成関数の微分」は、ふたつの導関数を掛け合わせます。そこで、sinとcosを角速度ωにおける経過時間tで微分すると、導関数はつぎのよう導けます(RETURN「sin(aθ)の微分」参照)。

f(t) = sin(ωt) → f'(t) = f'(θ)×dθ/dt = ω cos(ωt)
f(t) = cos(ωt) → f'(t) = f'(θ) ×dθ/dt = -ω sinθ

03 応用例「Particles」

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

Particle.prototype.move = function(advance) {
  var angle = this.angle + advance;
  var radX = Math.sin(angle);
  var radY = Math.cos(angle);
  this.x += radX * this.speedX;
  this.y += radY * this.speedY;
  this.angle = angle;
};

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


作成者: 野中文雄
更新日: 2019年10月31日 サンプルをjsdo.itからCodePenに差し替え。
作成日: 2014年2月5日

Copyright © 2001-2019 Fumio Nonaka.  All rights reserved.