MD-Blog_Web Creative

頭の体操

師走になり、バタバタしているところでしょうが、
今年も少し気分転換に算数ドリルで頭の体操をしてみましょう。

昨年掲載した動的レイアウト編はこちら！

三角関数って、言葉を聞くだけで拒否反応がでる人は多いですよね。

さいん？こさいん？たんじぇんと？あーくたんじぇんと？？

ちゃんとした解説は、さまざまなサイトで紹介されていると思うのでここでは、僕流にプログラミングから見たざっくり入門を話したいと思います。
詳しい話は、Google先生に聞いてみてください。（他力本願。w）

概要

今回取り上げるのはsinとcosですが難しいことは無視して、まず2つを丸覚えしましょう。

• 図1：半径Rの円上の座標は（Rcosθ, Rsinθ）で表現できる。※θは角度（ラジアン）

• 図２：sinθとcosθは、最小値は-1で最大値は1となり、周期性がある（繰り返す）。

ひとまずこれだけ頭に叩き込めば、少し理解した気分になると思います。

お題

今回は三角関数sin/cosを使って、

• 円上を動くオブジェクト
• 等幅で蛇行するオブジェクト

を考えてみます。

よくわからないと思うので、デモをどうぞ。
※動作確認済みの環境は PC：Chrome, FireFox です。

解説

円上を動くオブジェクト

位置に関しては上記の通りですが、デモをよく見れば円の中の「C」の文字が進行方向に傾いてます。
ここは、単純にCSSにrotateをセットしているだけなのですが、
その角度は、下図のように考えると簡単ですね。求める傾きは、図中Bになります。

Aは、図1の座標軸と並行に補助線を描いただけなので、

A = θ

また座標軸は直角で交わっているので、

A + B = 直角

となります。
そのため、

B = 直角 - θ

となります。

蛇行するオブジェクト

こちらはもっと簡単で、概要の1点目に書いた等幅の値を取るため、
CSSのleftに、cosθの値を足しているだけになります。

left = 基準位置 + cosθ x 蛇行する大きさ

上記の2つのJavaScript（jQuery）でCSSをセットすると、

/**
 * 円上オブジェクトのCSS
 * CIR_R：回転する円の大きさ
 * theta：角度（deg）
 */
$("#cir").css("transform", "translate3d(" + CIR_R * Math.cos(theta * Math.PI / 180) + "px, " + CIR_R * Math.sin(theta * Math.PI / 180) + "px , 0) rotate(" + (90 - theta) + "deg)");


/**
 * 蛇行するオブジェクトのCSS
 * BOX_R：蛇行する最大値
 * theta：角度（deg）
 */
$('#box').css({"left": BOX_R * Math.cos(theta * Math.PI / 180) + "px"});

//円上オブジェクト同様にtransformを使う
/**
 * 蛇行するオブジェクトのCSS
 * BOX_R：蛇行する最大値
 * theta：角度（deg）
 * posY：縦方向の位置
 */
$("#box").css("transform", "translate3d(" + BOX_R * Math.cos(theta * Math.PI / 180) + "px, " + posY + "px , 0)");

となります。

どうでしょうか。
難しく考えずに、そいうものと思って使ってみるのも一興かと思います。
少しでも食わず嫌いが直ることを祈って！