ちょいちょい触って感じたsin/cosの便利なところ

canvasとかその辺触るとだいたいsin/cosが出てきて、数学嫌いな僕みたいなのはそれだけで😇ってなりがち。だけどちょっと触ってみると全然複雑なものでもない。
ポイントは2点で

sin/cosに同一の値（角度）を与え、x座表に起点+cos、y座標に起点+sinを与えると円を描く
必ず-1〜1までの値を返す(その値間を反復する)

1. 円を描く

1.については以下の記事に非常に分かりやすく載ってる。
単位円を用いた三角比の定義
正直結構理解するのに苦しんでたけど、これを読んでなるほど！！ってなった。

実際にコード(JavaScript)で示すと、

// この値をいじることでアニメーションなりなんなりさせる
let angle = 0;

// JSでは基本ラジアンという単位を使うので変換用
const radian = angle => angle * Math.PI / 180;

// 起点座標(300なのは適当)
const BASE_X = 300;
const BASE_Y = 300;

// 半径のサイズ
const SIZE_RADIUS = 200

// 起点座標を中心にしたｘ/y座標
let x = Math.cos(radian(angle)) * SIZE_RADIUS + BASE_X;
let y = Math.sin(radian(angle)) * SIZE_RADIUS + BASE_Y;

この座標を元に位置だったりを計算してやれば円形にものを配置したり、円形に動かしたりできる。
ｘ座標を直線的な動きにするといわゆるsin curveになる。
それ以外にもsinやcosの値を重ねたりなんだりすると面白い動きになったりする。

See the Pen sin/cos by bom_phage (@bom_phage) on CodePen.

2. 反復する値を使う

実際円を描く機会というのもそんなにあるかと言われればないわけで（そもそもこういうtipsが役に立つ機会はない）、もう一方の-1から1の間の値を必ず返すという方が使い勝手がいい気がする。
しかも、何より素晴らしいのはsinとcosで同じ値を入れても別々の値を返してくれるということだ。要件にもよるけど、割と嬉しい。

そのまま使うのもいいし、正規化して使うとさらに使い良いこともある

-1 〜 1の範囲だとちょっと使いにくいよねという場合は0 〜 1に正規化*wikipediaしてしまえばいい。
それはそんなに面倒なことでもなくコード(JavaScript)なら

const normalizeSin = angle => (Math.sin(radian(angle)) + 1) * 0.5;
const normalizeCos = angle => (Math.cos(radian(angle)) + 1) * 0.5;

で0 〜 1の範囲を返すようにできる。

何に使う？

ある範囲を反復するので、繰り返すようなアニメーションの処理に使う。というかtransformのプロパティに使えば、なんかガチャガチャ動くものになるし、例えばopacityの値に使うとかhslの値に使うとか色々ある。
あと特徴としてはsin curveの形で増減するのでeasingにもつかえる。

というか色々数字いじると楽しいし、意外な形になるので触ってみて遊ぶのが一番良さそう😘

See the Pen sin/cos2 by bom_phage (@bom_phage) on CodePen.

はい。

そういうわけで、なんとなく書いておきました。