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

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

はじめに

今年はwebGLを頑張って勉強しようかな、と思っています。

いろいろ調べてますが、どうやら数学的な知識の習得は避けて通れないと。

三角関数だったり、行列だったり。

自分は一応入試で数学Ⅱ・Bまでは学習していますが、それが自分の仕事にどう活かせるかまでは正直わかりません。

なので、タイトルの通り、

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

をテーマに、以下自分が勉強したことを軽くoutputします。

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

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

y = sin(θ)のグラフ

y = cos(θ)のグラフ

グラフを見てわかること

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

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

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

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

requestAnimationFrameを使って、60fpsで繰り返してみました。

（requestAnimationFrameについては、以前書いた記事をご参照ください。）

angle += 2が肝の部分で、これは1コマごとに角度を2度ずつ増やしています。

これは、グラフでいうところの矢印の動きに相当します。

角度（正確にはθ、関数で変換してます）を増やしていくと、そのxの値に応じて-1から1の値を滑らかに返してくれる。

これが永遠に続きます。

consoleみたら、角度が永遠に増加していきますが、sinとcosは滑らかに-1から1の値を返してくれています。

グラフの形状と同じですね。

三角関数を使って、アニメーションを書いてみた

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

最後に

理屈まで理解しようとすると沼にはまりそう。

次は行列も勉強したい。

が、数Cの範囲は未知の世界だしどうしたらよいのやら。

今回の学習にあたっては、以下のサイトが大変参考になりました。

心より、御礼申し上げます。

そして、これからも目標に勉強していきます！！

ikeryou / blog