三角関数のグラフ（sin, cos, tan）

Q: 三角関数のグラフ（sin, cos, tan）とは何ですか？

単位円周上の点 P を、原点を中心に角 \theta（ラジアン）だけ回転させた位置に取ったとき、その x 座標を \cos\theta、y 座標を \sin\theta と定義する。さらに \tan\theta = \dfrac{\sin\theta}{\cos\theta}（\cos\theta \neq 0）と定義する。 これらはいずれも「角を入力すると比を返す」周期関数であり、一般形 y = A\sin(Bx + C) において、A は振幅（波の高さ）、B は角周波数（B が大きいほど波が詰まる）、C は位相（波の左右方向のずれ）を表す。

Q: 三角関数のグラフ（sin, cos, tan）は社会やプログラミングでどのように使われていますか？

キャラクターの浮遊アニメーションと単振動シミュレーション: ゲームやUIアニメーションで「ふわふわ浮いているような」自然な上下動を作るとき、時間 t を角度に見立てた \sin 波をそのままY座標のオフセットとして使う。振幅・角速度・位相をパラメータ化することで、複数のオブジェクトに微妙にずれた周期運動を与えられる。

振幅・周期・位相のパラメータが波形を変形させる仕組みと振動現象への応用

この単元の発見をシェア

3行要約（Key Takeaways / AIOサマリー）

1: 三角関数 sin, cos, tan は単位円上の点の座標（あるいは辺の比）から生まれる周期関数で、x を横方向にずらしても同じ形が無限に繰り返される
2: y = A sin(Bx + C) の形では、A が波の高さ（振幅）、B が波の詰まり具合（周期 2π/|B| を決める）、C が波の左右のずれ（位相）をそれぞれ独立にコントロールする
3: sin・cos で表される滑らかな周期運動は、キャラクターの上下浮遊アニメーションや振り子・ばねの振動、音波・交流電流の波形など、あらゆる周期現象のシミュレーションの基礎になっている

なぜこれを学ぶのか？ — 現実社会とテクノロジーでの価値

Purpose & Motivation

なぜ生まれたのか？

三角関数 sin, cos, tan は単位円上の点の座標（あるいは辺の比）から生まれる周期関数で、x を横方向にずらしても同じ形が無限に繰り返される

身につく武器・思考力

y = A sin(Bx + C) の形では、A が波の高さ（振幅）、B が波の詰まり具合（周期 2π/|B| を決める）、C が波の左右のずれ（位相）をそれぞれ独立にコントロールする

実社会・ITでの活躍現場

•キャラクターの浮遊アニメーションと単振動シミュレーション
•ITシステム・アルゴリズム実装における論理設計
•データ分析やシミュレーションにおける数理モデリング

Layer 1 — 直感・シミュレーター

sin・cos・tan のボタンで表示する関数を切り替え、振幅 A・角周波数 B・位相 C のスライダーを動かしてみよう。A を大きくすると波が縦に伸び、B を大きくすると波が横に詰まって速く振動し、C を動かすと波形全体が左右にスライドする。下部のアニメーションでは、同じ sin 波が「上下に浮遊するキャラクター」の動きとしてリアルタイムに再生される。

振幅

A

: 1.0

角周波数

B

: 1.0

位相

C

: 0.00

y = 1.0\,sin(1.0x + 0.00)

周期 ≈ 6.28

💡 応用: sin波によるキャラクターの浮遊アニメーション

🙂

上のスライダーで設定した振幅・角周波数・位相をそのまま使い、時間 t を角度として $A\sin(Bt+C)$ をキャラクターのY座標オフセットに使っています。

直感チェック！ミニクイズ

関数 y = 3sin(2x) の周期はいくつか？

Layer 2 — 定義・受験・証明

定義

単位円周上の点 $P$ を、原点を中心に角 $\theta$ （ラジアン）だけ回転させた位置に取ったとき、その $x$ 座標を $\cos\theta$ 、 $y$ 座標を $\sin\theta$ と定義する。さらに $\tan\theta = \dfrac{\sin\theta}{\cos\theta}$ （ $\cos\theta \neq 0$ ）と定義する。

これらはいずれも「角を入力すると比を返す」周期関数であり、一般形 $y = A\sin(Bx + C)$ において、 $A$ は振幅（波の高さ）、 $B$ は角周波数（ $B$ が大きいほど波が詰まる）、 $C$ は位相（波の左右方向のずれ）を表す。

公式・数理モデル

y = A\sin(Bx + C), \quad \text{周期} = \frac{2\pi}{|B|}, \quad \tan\theta = \frac{\sin\theta}{\cos\theta}

証明・導出

周期が $2\pi / |B|$ になることの導出：

$\sin\theta$ は $\theta$ が $2\pi$ 増えるごとに同じ値を繰り返す性質（ $\sin(\theta + 2\pi) = \sin\theta$ ）を持つ。

関数 $y = \sin(Bx)$ において、 $x$ が $T$ だけ増えたときに中身の角がちょうど $2\pi$ 増えれば波形は元に戻る。すなわち、

B(x + T) = Bx + 2\pi \iff BT = 2\pi \iff T = \frac{2\pi}{B}

$B$ が負の場合も波の詰まり具合（間隔）は変わらないため、一般に周期は $T = \dfrac{2\pi}{|B|}$ となる。

また $\tan\theta = \sin\theta / \cos\theta$ において、 $\cos\theta = 0$ となる $\theta = \pi/2 + n\pi$ （ $n$ は整数）では分母が 0 になるため、tan のグラフはそこで無限大に発散する「漸近線」を持つ。これが sin・cos のなめらかな波形と、tan の周期的に切れるグラフとの決定的な違いを生む。

押さえておきたいポイント

振幅 $A$ ：グラフの縦方向の伸縮率。 $A$ を負にすると上下が反転する
角周波数 $B$ ：周期 $2\pi/|B|$ を決める。 $B$ が大きいほど波が横に詰まって振動が速くなる
位相 $C$ ： $-C/B$ だけ波形全体を左右に平行移動させる（位相のずれ）
$\tan\theta$ は $\theta = \pi/2 + n\pi$ で定義されず、周期は $\pi$ （sin・cos の半分）である

参照基準・学習指導要領との対応

本トピックの内容・数理モデルは、文部科学省学習指導要領（算数・数学・情報）および国際標準カリキュラムに準拠し、エンジニアリング現場の実装事例と照らし合わせてMath World Lab編集部により検証・作成されています。

Layer 3 — 工学応用・現場実装

キャラクターの浮遊アニメーションと単振動シミュレーション

ゲームやUIアニメーションで「ふわふわ浮いているような」自然な上下動を作るとき、時間 $t$ を角度に見立てた $\sin$ 波をそのままY座標のオフセットとして使う。振幅・角速度・位相をパラメータ化することで、複数のオブジェクトに微妙にずれた周期運動を与えられる。

1type Vec2 = { x: number; y: number };
2
3// 単振動（sin波）によるキャラクターの浮遊オフセットを計算
4function computeFloatOffset(
5  timeSec: number,
6  amplitude: number,   // 振幅 A（px）
7  angularFreq: number, // 角周波数 B（rad/sec）
8  phase: number        // 位相 C（rad）
9): number {
10  return amplitude * Math.sin(angularFreq * timeSec + phase);
11}
12
13// キャラクターの基準位置に浮遊オフセットを加算して毎フレーム更新
14function updateCharacterPosition(
15  basePos: Vec2,
16  timeSec: number
17): Vec2 {
18  const offsetY = computeFloatOffset(timeSec, /* A */ 8, /* B */ 2, /* C */ 0);
19  return { x: basePos.x, y: basePos.y + offsetY };
20}
21
22// 60fpsのゲームループを想定した例
23let t = 0;
24const base: Vec2 = { x: 100, y: 200 };
25setInterval(() => {
26  t += 1 / 60;
27  const pos = updateCharacterPosition(base, t);
28  console.log(`キャラクター位置: (${pos.x.toFixed(1)}, ${pos.y.toFixed(1)})`);
29}, 1000 / 60);