3x3 行列で学ぶ 2D 座標変換

レッスン一覧

1. 一次変換（拡大縮小・せん断・反転の合成） scaleX / scaleY / shearX / shearY を動かして、正方形と基底ベクトルがどう変わるかを見る。
2. 平行移動 2x2 行列では書けない平行移動を、3x3 の同次座標でどう表すかを確かめる。
3. 一次変換 + 平行移動（アフィン変換） 変形と移動を 1 つの行列にまとめる。順番を変えると結果が変わることも見える。
4. 原点中心の回転 角度 θ の回転行列。sin と cos がどこに入るかを数値で追う。
5. 任意の点中心の回転 T(p)・R(θ)・T(-p) の 3 つの行列の積として組み立て、それぞれの行列も表示する。

このデモで分かること

• 行列の各成分を変えると、図形のどこがどう変わるのか。
• なぜ平行移動のために 2 次元の点をわざわざ 3 つの数で表すのか。
• 変換を「合成する」とは、行列の積を計算することだということ。
• 掛ける順番を入れ替えると、結果が変わること。

使い方

• 右側のスライダーや数値入力でパラメータを変えると、図形や基底ベクトルが変換されます。
• 表には、実際に使用されている 3x3 行列（同次座標）が表示されます。
• 左上のツールから、線・円・四角形・自由曲線を自分で描いて変換をかけられます。
• 原点中心以外の回転は T(p)、R(θ)、T(-p) の 3 行列の積として実装・表示しています。

前提知識

行列の積の計算を一度は見たことがあると読み進めやすくなります。 計算方法を知らなくても、数値の変化と図形の変化を対応づけるだけで感覚は掴めます。

注意

• 画面上の座標系は、数学の教科書と y 軸の向きが異なる場合があります。図の目盛りを確認してください。
• このデモは直感的な理解を優先しており、線形代数の厳密な定義や証明は扱っていません。
• グラフの描画に外部ライブラリ D3.js（v7、CDN 配信）を使用しています。社内ネットワークで CDN への通信が遮断されていると図が表示されません。