サイトトップ

Director Flash 書籍 業務内容 プロフィール
 

HTML5 / Flash ActionScript講座
CreateJS Style Book Webクリエイターのための
CreateJSスタイルブック
Away3D TypeScript in gihyo.jp gihyo.jp連載
「Away3D TypeScriptではじめる3次元表現」
■Twitter: @FumioNonaka / Facebook Page: CreateJS / Away3D

Creators MeetUp

sinとcosは何する関数?

三角関数のsinとcosは、直角三角形の辺の比率として初めに習う。それをプログラムのアニメーション表現で使うのは、おもに円運動だ。「三角」がどうして「円」になるのか、疑問をもったとしても不思議はない。sinとcosはどう定められ、どういう性質があるのかという基本を中心に、変わったアニメーションの応用表現も紹介したい。

このレジュメは、2014年11月15日土曜日に催された第22回Creators Meetupで務めた高座「sinとcosは何する関数?」向けとして書いた。当日のYouTube録画をつぎに掲げる。


01 三角関数のsinとcosの求め方と性質

三角関数は、高校数学で初めに直角三角形を用いた三角比で習う(図001)。sinとcosは、直角三角形の高さと底辺それぞれの斜辺に対する比だ。といわれて、素直に納得はしづらい

図001■三角関数は初め三角比で習う
図001
*ビジュアル数学「三角比・三角関数」より引用。

プログラムのアニメーション表現では、円運動で使われる(図002)。式をそのまま写しさえすれば、確かに円周上を回る。

図002■xy座標を(cosθ, sinθ)で定めると円運動が表せる
図002
*上図をクリックすると、サンプルSWFが開く。

でも、

「三角」なのに、なぜ「円」運動?

加えて、三角関数の公式は数が多くて、直感的にわかりにくい。

sin2θ + cos2θ = 1
sin(θ±φ)=sinθcosφ±cosθsinφ
a2 = b2 + c2 − 2bc cosθ

02 理解すれば覚えることは減る

三角関数はとっつきにくいと感じられやすい。理由はいくつか考えられる。

理解の順番を間違えると、覚えることばかりになる。三角関数は、そもそも半径1の円(「単位円」)の円周上の座標として定められている(図003)。三角比でなく、こちらが定義になる。また、直角三角形に三平方の定理を当てはめたのがつぎの式だ。

sin2θ + cos2θ = 1

図003■半径1の円周上のxy座標が角度θに対して(cosθ, sinθ)と定められた
図003

だから、角度を変えれば座標は定義にしたがって円周上を動く(図004)。つまり、そういうふうにできている

図004■角度を変えれば座標は円周上を動く
図004

三角比も、単位円にもとづく三角関数の定義から直ちに求まる。cosとsinは半径1のときのxy座標なのだから、底辺(x)と高さ(y)をそれぞれ斜辺(r)で割ればよい(図005)。逆に、半径(r)と角度(θ)が与えられたときのxy座標P(r cosθ, r sinθ)を示す場合の方が多い。

図005■xy座標を半径で割ればcosとsinが求まる
図005

sinθ = y / r
cosθ = x / r

そして、三角関数の余弦定理と三平方の定理の間には隠れた関係が!(証明は「余弦定理」参照)

sinやcosを用いたアニメーション表現としては、ほかにバネや波の動きがある(図006)。垂直方向にsinで座標を変えれば、バネの縦の振動だ。さらに、水平方向には等速度で動かすと波になる。

図006■sinやcosはバネや波の動きを表す
図006
*Wikipedia「Harmonic oscillator」より引用。


03 スピログラフを回してみる

穴の空いた大きな定円の中で、歯車のような小さな動円を回しながら、動円の描画点の穴から筆記用具の先を通して幾何学模様を描く(図007)。スピログラフを使って描かれたアートもある。

スピログラフ(英: Spirograph)は、曲線による幾何学模様を描くための定規の一種である。主に玩具店で販売されていることから玩具ともみなされている。「スピログラフ」 という名称はハズブロの登録商標である。
*Wikipedia「スピログラフ」より引用。

図007■Spirograph Art スピログラフ 定規
図007
*上図をクリックすると、動画が開く。

幾何学模様がどのように描かれるかについては、MicroAd Labs. BLOG「スピログラフを作ってあそぼ」にシミュレーションが掲げられている。描かれる曲線は「ハイポトロコイド」(Hypotrochoid)と呼ばれる。

図008■ハイポトロコイドの方程式
図008

定円の半径をrc、動円の半径はrm、そして動円の中心から描画点までの距離をrdとする。

ハイポトロコイド方程式
*MicroAd Labs. BLOG「スピログラフを作ってあそぼ」より引用。

応用例としてサンプル001は、曲線そのものを描くのではなく、その上の2点を一定間隔で直線により結んだ。さらに、パラメータに現在時刻のミリ秒を含めたため、グラフィックスは時々刻々変わる。

サンプル001■Using trochoid to draw lines

参考: fladdict「標本002 三角関数



作成者: 野中文雄
作成日: 2014年11月14日


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