Edited at

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


目次


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

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


はじめに

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

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

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

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

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

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

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


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

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


y = sin(θ)のグラフ

スクリーンショット 2019-02-04 13.03.59.png


y = cos(θ)のグラフ

スクリーンショット 2019-02-04 13.06.53.png


グラフを見てわかること


  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度ずつ増やしています。

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

スクリーンショット 2019-02-04 13.28.00.png

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

これが永遠に続きます。

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

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

Image from Gyazo


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


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


最後に

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

次は行列も勉強したい。

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

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

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

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

ikeryou / blog

Part2はこちら ↓

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