バネが伸び縮みするアニメーションは、「単振動」と呼ばれて三角関数で表すのが定石です。けれど、バネの端をもって振り回すような動きは、加速度にもとづく式で扱うのが便利です。この式は「オイラー法」という数学の考え方から導かれます。 01 三角関数を使ったバネの動き バネの伸び縮みをアニメーションで見せたいときは、三角関数のsinまたはcosを使うのが定石です。sinとcosは半径1の「単位円」で定義されます。単位円の円周上の点Pと原点O(0, 0)を結ぶ線分がx軸の正方向となす角度をθとすると、点Pの座標は(cosθ, sinθ)と定められています(図001)。 図001■単位円の円周上の座標は原点と結ぶ線分がx軸となす角をθとするとき(cosθ, sinθ) 角度θを等しい速さで増やしてゆくと、sinθとcosθは値がバネの動きのように上下します。横軸を角度、縦軸に三角関数値としたグラフを描く

等速円運動は、多くの場合三角関数で表します。その場合、運動の式を位置の動きで立てるほかに、速度の変化で扱う考え方もあります。後者は、数学的には「微分」で導かれる関数が使われます。解説では先にJavaScriptコードを示し、数学の考え方は興味ある読者のために後で説明します。 01 等速円運動を表すふたつの計算の仕方 等速円運動をアニメーションで見せたいときは、三角関数のsinとcosを使うのが便利です。sinとcosは半径1の「単位円」で定義されます。単位円の円周上の点Pと原点O(0, 0)を結ぶ線分がx軸の正方向となす角度をθとすると、点Pの座標は(cosθ, sinθ)と定められています(図001)。 図001■単位円の円周上の座標は原点と結ぶ線分がx軸となす角をθとするとき(cosθ, sinθ) すると、中心座標を(x0, y0)とする半径rの円周上の座標(x, y)は、つぎの式で

2014年1月28日付CreateJS Blogに「WebGL & EaselJS: a Technical Intro」という記事が投稿されました。EaselJSの次期バージョンがサポートするでWebGLレンダラをどのように使うかの入門的な解説です。現在、EaselJS次期バージョンはパブリックプレビューがGitHubに公開されています。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。なお、次期バージョンに備わる機能については、「EaselJSがWebGLをサポート」をお読みください。 01 はじめに これまで試されたかぎりでは、一般的に使うWebGLレンダラをEaselJS向けに開発する意味はないと考えられていました。最近のCanvasの実装は、すでにさまざまな2DコンテンツをGPUで適切に描くことができます。それも、ネイティブコードにより、重い仕事をこな