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

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

# はじめに
今年はwebGLを頑張って勉強しようかな、と思っています。
いろいろ調べてますが、どうやら数学的な知識の習得は避けて通れないと。
三角関数だったり、行列だったり。
自分は一応入試で数学Ⅱ・Bまでは学習していますが、それが自分の仕事にどう活かせるかまでは正直わかりません。
なので、タイトルの通り、
「文系フロントエンドエンジニアは、アニメーションに三角関数をどう活用したら良いのか」
をテーマに、以下自分が勉強したことを軽くoutputします。

## まず視覚的にsinとcosを理解
グラフの作成には、[Mathcha - Online Math Editor](https://www.mathcha.io/)を使用しました。

### y = sin(θ)のグラフ
![スクリーンショット 2019-02-04 13.03.59.png](https://qiita-image-store.s3.amazonaws.com/0/195673/49de196b-4b21-a247-0268-14321db816de.png)

### y = cos(θ)のグラフ
![スクリーンショット 2019-02-04 13.06.53.png](https://qiita-image-store.s3.amazonaws.com/0/195673/3230ebc5-fae9-c0dd-2502-c66bc9c51e4a.png)

### グラフを見てわかること
1. x軸の値に応じて、-1から1の値を返してくれる。
2. x軸の値はθ。これをラジアンというらしい。
3. グラフがなめらか！これって数値が滑らかに変化するってことだから、アニメーションには都合がいいね！

ところでラジアンってなんだっけ？

## ラジアンはよくわからんけど、とりあえず以下の公式で出せる
```javascript
function radian(val) {
  return val * Math.PI / 180;
}
```
valには「90度」とかの角度が入ります。
ラジアンはわからんけど、角度ならわかる。
とりあえずこのプログラムにまかせればいい。

この関数でラジアンを生成して、あのグラフにぶち込めばアニメーションに使えそう。
つまり、三角関数って**「ラジアンをぶち込めば、滑らかに-1から1の値を返してくれる装置」**なんだ！

## 装置を動かす型をつくる
```javascript
let angle = 0;

function radian(val) {
  return val * Math.PI / 180;
}

let tick = () => {
  rad = radian(angle);
  angle += 2;

  console.log(`sin : ${Math.sin(rad)}`);
  console.log(`cos : ${Math.cos(rad)}`);
 
  window.requestAnimationFrame(tick);  
}
window.requestAnimationFrame(tick);
```
``requestAnimationFrame``を使って、60fpsで繰り返してみました。
（requestAnimationFrameについては、[以前書いた記事](https://qiita.com/yukiTTT/items/0852fd7bf48cff011788)をご参照ください。）

``angle += 2``が肝の部分で、これは1コマごとに角度を2度ずつ増やしています。
これは、グラフでいうところの矢印の動きに相当します。

![スクリーンショット 2019-02-04 13.28.00.png](https://qiita-image-store.s3.amazonaws.com/0/195673/c9f8afd7-6ec0-a92f-54e9-64ee0e0dd36f.png)

角度（正確にはθ、関数で変換してます）を増やしていくと、そのxの値に応じて-1から1の値を滑らかに返してくれる。
これが永遠に続きます。
consoleみたら、角度が永遠に増加していきますが、sinとcosは滑らかに-1から1の値を返してくれています。
グラフの形状と同じですね。

[![Image from Gyazo](https://i.gyazo.com/726907c6f163eac10e567e86c047da70.gif)](https://gyazo.com/726907c6f163eac10e567e86c047da70)

## 三角関数を使って、アニメーションを書いてみた
<p class="codepen" data-height="500" data-theme-id="0" data-default-tab="js,result" data-user="yuki-tanabe-plusd" data-slug-hash="LqWLOQ" 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.1">
  <span>See the Pen <a href="https://codepen.io/yuki-tanabe-plusd/pen/LqWLOQ/">
  Trigonometric function Practice vol.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>

# 最後に
理屈まで理解しようとすると沼にはまりそう。
次は行列も勉強したい。
が、数Cの範囲は未知の世界だしどうしたらよいのやら。

今回の学習にあたっては、以下のサイトが大変参考になりました。
心より、御礼申し上げます。
そして、これからも目標に勉強していきます！！

[ikeryou / blog](https://ikeryou.hatenablog.com/)

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