JavaScript
jQuery
数学
三角関数

文系フロントエンドエンジニアは、アニメーションに三角関数をどう活用したら良いのか Part.2


目次


  1. 文系フロントエンドエンジニアは、アニメーションに三角関数をどう活用したら良いのか Part.1

  2. 文系フロントエンドエンジニアは、アニメーションに三角関数をどう活用したら良いのか Part.2


はじめに

三角関数を調べていて、素敵な記事を見つけました。

三角関数、何に使うの?→点を回すことができます(すごい)

タイトルの通り、上記記事の主題は「三角関数とは、点を回す道具である」というお話です。

前回は「y=sin(θ)やy=cos(θ)の返り値は何かと都合が良いので、アニメーションに使えるぜ!」的なお話だったのですが、

今回はその三角関数の図形的性質そのものに着目して、色々やってみようと。


視覚的理解

1024px-Unit_circle.svg.png

画像はwikipediaより

半径1の円を考えた時、三角関数の定義から

x座標はcosθ、y座標はsinθである。 (上記図ではθをtで表してますが)

なぜか?よくわからんけど、そういう定義である!突っ込んだら沼なのでこの辺で。

上の図の点について、θ(t)をぐにょぐにょ動かしていけば、一周して円を描きそうだ。

理屈はわからんが、性質として便利そうだ。

ということで使ってみよう。


アニメーションの大枠

簡単なのでTweenMaxで動かすことを考えます。


円を描く

  TweenMax.set($obj,{

x: Math.cos(θ) * 100,
y: Math.sin(θ) * 100
});

x座標がcosθ、y座標がsinθなのだから、こう設定すればいいかな。

(100を掛けているのは、sinθもcosθも-1から1の間で値を変えるためです。

そのままだとあまりにも変化幅が小さすぎるので、アニメーションがわかりやすいように100を掛けました。)

※より数学的には、半径1じゃアニメーション見えないから、半径100にしました。

θはラジアンだが、ラジアン変換公式は前回学んだ通り。

とりあえず下の関数に角度をぶちこめばいい。


角度をラジアンへ変換する

function radian(val) {

return val * Math.PI / 180;
}

θを動かせば、「円を描く」ようになるけど、

θを動かすっていうのはつまり角度を動かすこと。

requestAnimationFrameで1フレームごとに角度を増やしていけばいいな。

ここも前回と変わらない!


アニメーションを書いてみた


See the Pen
Trigonometric function Practice vol.2
by yuki tanabe (@yuki-tanabe-plusd)
on CodePen.


リサジュー図形を描く

タイトルは理系っぽくカッコイイので書いてみました。

sin、cosで描かれる図形をリサジュー図形というらしいです。

引用記事にあったのですが、

2sin(θ)だったり、sin(2θ)にすることで、図形を拡張できるようです。

外側の掛け算 : 回転の半径

内側の掛け算 : 回転数

に影響するようで。

とりあえず色々いじってみます。


外側の掛け算

縦長になりました。

sinθに2をかけています。(2sinθ)


See the Pen
リサジュー図形1
by yuki tanabe (@yuki-tanabe-plusd)
on CodePen.


内側の掛け算

軌跡がわかりづらいですが、良い感じに!

sinθのθに2をかけています。sin(2θ)


See the Pen
リサジュー図形2
by yuki tanabe (@yuki-tanabe-plusd)
on CodePen.

最初の引用記事によると、

下記のような理解をすればよいみたいです。わかりやすい。


sinやcosの内側にかけられた数は回転数に影響します。cos(横往復)とsin(縦往復)の中身を比べると、sinだけが2倍になっているので「横に1回往復する間に縦に2回往復する」感じになっていることがお分かりいただけますでしょうか。



最後に

視覚的ではありますが、なんとなく理解ができたのと、

後半のリサジュー図形については微調整が効きそうで実践でも使えそうです。

これでwebGL学習への理論武装が整ってきました!

頑張ります。