JS奮闘記【javaScriptとcanvasと線形変換 その4 ~線形変換のポイントと行列積の特徴編~】

JS奮闘記 canvasと線形変換

こんにちは。
相変わらず canvas タグとにらめっこしているエンジニアの辻です。
前回は様々な線形変換を見てきました。

今回は線形変換の関数を実行する上で重要なポイントを 1 つ紹介します。

ソースコードは以下になります。
ただ今回はソースを確認せずとも大丈夫です。このまま記事を読み進めていただいてOKです。

「60° 反時計回りに回転 → x 軸に対して反転」した点 A と 「x 軸に対して反転 → 60° 反時計回りに回転」した点 B の違いは?

まず下図をご覧ください。

canvas上での合成変換の描画結果

x: 75, y: 75 の点 P を
60° 反時計回りに回転後に x 軸に対して反転させた点 A
x 軸に対して反転後に 60° 反時計回りに回転させた点 B
canvas に描画した結果です。
(※回転は原点を軸にしています。)

ご覧の通り、点 A と点 B は異なる点になります。

さて、ここで 1 つ思考実験をしてみましょう。
点 A、点 B は変換前の点が一緒です。どちらも点 P (75, 75)を元に変換を行っています。
そして、60° 回転させる処理と、x 軸に対して反転させる処理も共通です。
…なのに、なせ計算結果が異なるのでしょうか。

一般的なイメージとして、同じ値に対して同じ値を乗算したら、計算結果は一緒になりますよね。
x * y * z は、xyz だろうが、zyx だろうが、yzx だろうが、結果は一緒です。
ですが、点 A と点 B で描画位置が異なります。

一体これはなぜなのでしょう。
バグなのでしょうか。

 

…いいえ、これはバグではありません。
点 A と点 B が異なるのは正しい挙動です。
なぜこんな結果になるのかというと、行列積のある特徴が関係しています。

行列積は計算する順番によって結果が異なる

行列積には以下の特徴があります。

行列 A と行列 B があるとします。

  1. 行列積 AB は、かけられる行列 A の列数と、かける行列 B の行数が一致している場合のみ定義される。
  2. 行列積 AB が定義されていたとしても、BA が定義されているとは限らない。
  3. 仮に行列積 AB と BA が定義されていたとしても、AB = BA が成り立つとは限らない。

今回最も重要になるのは、3 番目の特徴です。

スカラーの計算であれば、乗算に順序は関係ありません。
x と y と z を乗算する時、順序を入れ替えても計算結果は変わりません。

しかしながら、この点において行列は異なります。
AB = BA が必ずしも成り立つわけではないのです。
つまり「行列積は計算する順番によって計算結果が異なる」という事です。
(B が単位行列の場合…など等式が成り立つ場合もありますが、今回は割愛します。)

この点を踏まえて、前半の点 A、点 B を改めて考えてみましょう。
まず今回行っている変換は、以下の 2 つです。

  1. 60° 反時計回りに回転させる
  2. x 軸に対して反転させる

1、2の変換をそれぞれ f、g としましょう。
点 P に変換 f を行う f(p)と、点 P に変換 g を行う g(p) を計算式で表すと以下の通りです。

 

変換f、gの計算結果 1回目

 

次に、 f(p)と g(p)の計算結果にそれぞれ変換 g と f を行います。

 

変換f、gの計算結果 2回目の変換

 

f(g(p))(点 A) と g(f(p))(点 B) の計算結果が異なりますね。
このように行列積は、計算する順番によって結果が異なるのです。
最後に点Pの座標である x= 75, y= 75 を代入してみます。

 

変換f、gの計算結果 最終計算結果

 

これで点 A、B の位置が算出されました。
点 A、B はだいたい(-27.45, -102.45)、(102.45, 27.45)の位置にいる事が分かりました。

 

以上の事から得られる教訓は「canvas で複数回の線形変換を行う時は、順番に気をつけよう」です。
「同じ処理を噛ませたら、結果も同じになるでしょ」と思っていると、意図しない位置に描画されてしまいます。
行列積をしっかりとイメージすることが大切ですね。

まとめ

今回は行列積の特徴から、線形変換の実装のポイントを紹介しました。
ちなみに、今回のような複数回の変換を行う事を合成変換といいます。

もっと詳しく知りたい方は wikipedia をご覧ください。
行列 – wikipedia

それでは、また!



❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ
チャットボット導入サービス
WEBシステム開発・スマホアプリ開発はSRIAへ