More than 5 years have passed since last update.

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

Last updated at 2019-02-05Posted at 2019-02-04

はじめに

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

まず視覚的にsinとcosを理解

グラフの作成には、Mathcha - Online Math Editorを使用しました。

y = sin(θ)のグラフ

y = cos(θ)のグラフ

グラフを見てわかること

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

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

ラジアンはよくわからんけど、とりあえず以下の公式で出せる

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

valには「90度」とかの角度が入ります。
ラジアンはわからんけど、角度ならわかる。
とりあえずこのプログラムにまかせればいい。

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

装置を動かす型をつくる

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);