2 次元の回転 — 線分を回す

第3章 No.1 ／三角関数と回転行列のおさらい

最近では、テレビゲームなどで 3 次元のグラフィックスが多用され、日常生活で当り前のようにコンピュータグラフィックスが使われるようになった。しかし、その原理は非常に単純な計算である。高校数学で習った三角関数や行列の演算を使えば簡単に求めることができる。

最初に 2 次元の回転の行列を見よう。座標平面上の点 (x₁, y₁) を α ラジアン回転した点の座標を (x₂, y₂) とする。

x₂ = x₁ cos α − y₁ sin α
y₂ = x₁ sin α + y₁ cos α

これを回転行列を使って表すと、

( x₂ ) ( cos α −sin α ) ( x₁ )
( y₂ ) = ( sin α cos α ) ( y₁ )

となる。この点を 2 つ用意して、それらをつなぐ線分を表示すれば、線分を回転することができる。回転の部分のプログラムは、以下のようになる。

function Rotate() {
  xt = x1 * Math.cos(alpha) - y1 * Math.sin(alpha);
  yt = x1 * Math.sin(alpha) + y1 * Math.cos(alpha);
  x1 = xt; y1 = yt;
  xt = x2 * Math.cos(alpha) - y2 * Math.sin(alpha);
  yt = x2 * Math.sin(alpha) + y2 * Math.cos(alpha);
  x2 = xt; y2 = yt;
}

これを実行すると、以下のようになる（以前は Java アプレットだったものを JavaScript で書き直しました）。

Sample 1 — 直線の回転JS

独立ページで開く →

ソースコードは以下のとおり（JavaScript 版）。

samples.js — すべての Sample をまとめた JavaScript モジュール
Sample1.html — 単独で実行できるページ

歴史的な参考（Java 時代）

もともとは Java アプレットでしたが、ブラウザのアプレットサポートが終了したため、すべて JavaScript に移植しました。Java のソースは廃止しました。