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

# 目次
1. [文系フロントエンドエンジニアは、アニメーションに三角関数をどう活用したら良いのか Part.1](https://qiita.com/yukiTTT/items/92f2f3910a333ff2d8a1)
2. 文系フロントエンドエンジニアは、アニメーションに三角関数をどう活用したら良いのか Part.2

# はじめに
三角関数を調べていて、素敵な記事を見つけました。
[三角関数、何に使うの？→点を回すことができます（すごい）](https://www.ajimatics.com/entry/2019/01/11/092529)

タイトルの通り、上記記事の主題は**「三角関数とは、点を回す道具である」**というお話です。
前回は「y=sin(θ)やy=cos(θ)の返り値は何かと都合が良いので、アニメーションに使えるぜ！」的なお話だったのですが、
今回はその三角関数の図形的性質そのものに着目して、色々やってみようと。

## 視覚的理解
![1024px-Unit_circle.svg.png](https://qiita-image-store.s3.amazonaws.com/0/195673/403d6340-ae1f-c664-ee1a-ec25decda124.png)
画像は[wikipedia](https://ja.wikipedia.org/wiki/%E5%8D%98%E4%BD%8D%E5%86%86)より

半径1の円を考えた時、三角関数の定義から
**x座標はcosθ、y座標はsinθである。** （上記図ではθをtで表してますが）
なぜか？よくわからんけど、そういう定義である！突っ込んだら沼なのでこの辺で。

上の図の点について、θ（t）をぐにょぐにょ動かしていけば、一周して円を描きそうだ。
理屈はわからんが、性質として便利そうだ。
ということで使ってみよう。

## アニメーションの大枠
簡単なのでTweenMaxで動かすことを考えます。

```javascript:円を描く
  TweenMax.set($obj,{
    x: Math.cos(θ) * 100,
    y: Math.sin(θ) * 100
  });
```

x座標がcosθ、y座標がsinθなのだから、こう設定すればいいかな。
(100を掛けているのは、sinθもcosθも-1から1の間で値を変えるためです。
そのままだとあまりにも変化幅が小さすぎるので、アニメーションがわかりやすいように100を掛けました。)
※より数学的には、半径1じゃアニメーション見えないから、半径100にしました。

θはラジアンだが、ラジアン変換公式は前回学んだ通り。
とりあえず下の関数に角度をぶちこめばいい。

```javascript:角度をラジアンへ変換する
function radian(val) {
  return val * Math.PI / 180;
}
```

θを動かせば、「円を描く」ようになるけど、
θを動かすっていうのはつまり角度を動かすこと。
``requestAnimationFrame``で1フレームごとに角度を増やしていけばいいな。
ここも前回と変わらない！

## アニメーションを書いてみた
<p class="codepen" data-height="500" data-theme-id="0" data-default-tab="js,result" data-user="yuki-tanabe-plusd" data-slug-hash="PVjmYZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Trigonometric function Practice vol.2">
  <span>See the Pen <a href="https://codepen.io/yuki-tanabe-plusd/pen/PVjmYZ/">
  Trigonometric function Practice vol.2</a> by yuki tanabe (<a href="https://codepen.io/yuki-tanabe-plusd">@yuki-tanabe-plusd</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## リサジュー図形を描く
タイトルは理系っぽくカッコイイので書いてみました。
sin、cosで描かれる図形を**リサジュー図形**というらしいです。

引用記事にあったのですが、
2sin(θ)だったり、sin(2θ)にすることで、図形を拡張できるようです。
**外側の掛け算 : 回転の半径**
**内側の掛け算 : 回転数**
に影響するようで。
とりあえず色々いじってみます。

### 外側の掛け算
縦長になりました。
sinθに2をかけています。（2sinθ）

<p class="codepen" data-height="500" data-theme-id="0" data-default-tab="js,result" data-user="yuki-tanabe-plusd" data-slug-hash="JxyJyG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="リサジュー図形1">
  <span>See the Pen <a href="https://codepen.io/yuki-tanabe-plusd/pen/JxyJyG/">
  リサジュー図形1</a> by yuki tanabe (<a href="https://codepen.io/yuki-tanabe-plusd">@yuki-tanabe-plusd</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 内側の掛け算
軌跡がわかりづらいですが、良い感じに！
sinθのθに2をかけています。sin(2θ)

<p class="codepen" data-height="500" data-theme-id="0" data-default-tab="js,result" data-user="yuki-tanabe-plusd" data-slug-hash="OdjgxQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="リサジュー図形2">
  <span>See the Pen <a href="https://codepen.io/yuki-tanabe-plusd/pen/OdjgxQ/">
  リサジュー図形2</a> by yuki tanabe (<a href="https://codepen.io/yuki-tanabe-plusd">@yuki-tanabe-plusd</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

最初の引用記事によると、
下記のような理解をすればよいみたいです。わかりやすい。

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

# 最後に
視覚的ではありますが、なんとなく理解ができたのと、
後半のリサジュー図形については微調整が効きそうで実践でも使えそうです。

これでwebGL学習への理論武装が整ってきました！
頑張ります。