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

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

目次

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

はじめに

三角関数を調べていて、素敵な記事を見つけました。
三角関数、何に使うの？→点を回すことができます（すごい）

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

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

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

視覚的理解

画像は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学習への理論武装が整ってきました！

頑張ります。