少し回すと、
模様の世界。

01 / 三枚の鏡、小さな世界

三枚の鏡を正三角形の筒に組み、奥に色付きのガラス片を置きます。目からたどる光線は、直接かけらに届く場合も、鏡で何度か反射してから届く場合もあります。たくさんの像は、同じ小さな部屋から生まれます。

「鏡なしの部屋」と「三枚の鏡とガラス」を切り替えましょう。同じ八個のかけらが画面全体へ繰り返されます。これは三次元の部屋を透視した像で、三角形の反復は画面の外へ続きます。

02 / 反射を展開する

鏡で光線を曲げる代わりに、壁の向こう側へ部屋ごと鏡映しにして、光線を直進させると考えます。正三角形を各辺で鏡映しにすると、向きが交互に反転した三角形が隙間なく並びます。一つの頂点には60°の角が六個集まります。

鏡映は距離を保ち、向きを反転します。回転は距離も向きの表裏も保ちます。任意の画像をコピーして回すだけでは、すべての鏡の境界を再現できない理由です。

03 / まずは簡単な二次元の実験

「二次元の対称性」を選びましょう。これは円形の画像を扇形に折り返す、別の構成です。組数をNとすると、一組は360° ÷ N、元の扇形は180° ÷ Nです。六組なら30°の扇形が十二個になります。

一つの扇形、鏡映しのペア、円全体を比べ、境界線を表示しましょう。四組は45°、六組は30°、八組は22.5°です。これは対称性を学ぶ図です。ガラスの表示では、三枚の鏡でできた部屋を使います。

04 / コードで角度を折り返す

二次元の実験では、画素の位置を半径rと角度θで表します。角度を一組の範囲に収め、後半を前半へ折り返します。正の余りを使うと、負の角度も扱えます。

const period = 2 * Math.PI / pairs;
const wrapped = ((theta % period) + period) % period;
const folded = Math.min(wrapped, period - wrapped);
const sampleX = radius * Math.cos(folded);
const sampleY = radius * Math.sin(folded);

折り返した角度は0からπ ÷ Nの範囲になり、すべての鏡像が同じ座標を読み取ります。一方、三角形の部屋では、三枚の鏡の単位法線nに対して、d′ = d − 2(d · n)nで光線を反射します。

05 / ガラスに厚みを与える

「三枚の鏡とガラス」に戻ります。各かけらは位置、向き、厚みを持つ立体です。透視投影では近い面が大きく見えます。面の法線がハイライトを決め、光は入口と出口の面で屈折します。

スネルの法則はn₁ sin θ₁ = n₂ sin θ₂です。角度は面の法線から測ります。写真を読み込んでガラスの背景にするか、用意された背景を使います。かけらを止めたまま屈折率を変えましょう。かけらの位置は変わらず、面を通して見える背景がずれます。

06 / 色は控えめに加える

色ガラスは波長によって異なる強さで光を吸収します。材質の中を長く進むほど色が強くなります。フレネル反射では浅い角度ほど反射が強くなります。赤、緑、青の屈折率の小さな違いが色の分散を生みます。

色の分散を切り替え、輪郭を比べましょう。この描画では最大九回の鏡との交差と、各色につき一つのガラスへの入射・出射を計算します。ガラス内の反射は最大四回までとし、三色のサンプル、近似照明、決められた動きを使います。完全な分光計算、かけら同士の屈折、集光模様、剛体の衝突は扱いません。

07 / 回して、止めて、残す

かけらを動かすと中身が変わり、視点を回すと像全体が回転します。ドラッグは指に追従し、離すと止まります。「再生」ではゆっくり動きます。それぞれの操作と変化を明確にすると、探索しやすくなります。

動きは操作した時だけ始まります。一時停止して面を観察し、材質の設定を一つ変えてから画像を保存しましょう。静かな操作画面なら、小さな光の世界が主役になります。

試してみよう / 構造と材質を分ける

同じかけらの位置で、鏡なし、鏡あり、屈折率を変えた状態の三枚を保存します。物体を繰り返すのはどの変更でしょう。物体を通して見える像を変えるのはどの変更でしょう。

鏡は反復構造を変えます。屈折率はガラスの中の光路を変えます。追加の実験として、二次元の図で四組、六組、八組を比べ、スライダーを動かす前に扇形の角度を予想しましょう。

小さな世界を持ち帰る

ガラスの描画をPNGで保存するか、レッスンと実験を一つのオフラインHTMLファイルとしてダウンロードできます。WebGLが使えない場合は幾何学的なSVG表示に切り替わります。インストールやアカウントは不要です。