本文へジャンプ

算数ドリル ... 三角関数sin/cosの基本

Posted by Namio Araki

算数ドリル ... 三角関数sin/cosの基本

頭の体操

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

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

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

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

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

概要

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

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

図1 - 算数ドリル ... 三角関数sin/cosの基本

  • 図2:sinθとcosθは、最小値は-1で最大値は1となり、周期性がある(繰り返す)。

図2 - 算数ドリル ... 三角関数sin/cosの基本

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

お題

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

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

を考えてみます。

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

解説

円上を動くオブジェクト

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

図3 - 算数ドリル ... 三角関数sin/cosの基本

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

となります。

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
こんな僕たちの仲間に入りませんか?
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr