1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

2 次元アフィン変換の変換行列から各変換要素へ分解する

Posted at

変換行列を以下の変換要素へ分解します:

  • 平行移動 translation/position: $t_x, t_y$
  • せん断/回転 skew/rotation/angle: $a_x, a_y$
  • 拡大縮小 scale: $s_x, s_y$

0. まとめ

変換行列を

\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
1 & 0 & t_x \\
0 & 1 & t_y \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
s_x & 0 & 0 \\
0 & s_y & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

と分解すると、各変換要素の値は

\begin{align}

\begin{pmatrix}
t_x \\
t_y \\
\end{pmatrix}

&=

\begin{pmatrix}
e \\
f \\
\end{pmatrix}

\\

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

&=

\begin{pmatrix}
\arctan \left( \dfrac cd \right) \\
\arctan \left( \dfrac ba \right) \\
\end{pmatrix}

\\

\begin{pmatrix}
s_x \\
s_y \\
\end{pmatrix}

&=

\begin{pmatrix}
\sqrt{ a^2 + b^2 } \\
\sqrt{ c^2 + d^2 } \\
\end{pmatrix}

\end{align}

になります。

1. 平行移動

行列を分割して乗算すると

\begin{align}

\left(
\begin{array}{cc|c}
a & c & e \\
b & d & f \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

&=

\left(
\begin{array}{cc|c}
1 & 0 & t_x \\
0 & 1 & t_y \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\left(
\begin{array}{cc|c}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\left(
\begin{array}{cc|c}
s_x & 0 & 0 \\
0 & s_y & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\\

&=

\begin{pmatrix}
I & T \\
O & I \\
\end{pmatrix}

\begin{pmatrix}
A & O \\
O & I \\
\end{pmatrix}

\begin{pmatrix}
S & O \\
O & I \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
A S & T \\
O & I \\
\end{pmatrix}

\end{align}

となり、

T

=

\begin{pmatrix}
t_x \\
t_y \\
\end{pmatrix}

=

\begin{pmatrix}
e \\
f \\
\end{pmatrix}

になることが分かります。

2. せん断/回転

平行移動を除く変形は

\begin{align}

A S

&=

\begin{pmatrix}
\cos(a_y) & \sin(a_x) \\
\sin(a_y) & \cos(a_x) \\
\end{pmatrix}

\begin{pmatrix}
s_x & 0 \\
0 & s_y \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
s_x \cos(a_y) & s_y \sin(a_x) \\
s_x \sin(a_y) & s_y \cos(a_x) \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
a & c \\
b & d \\
\end{pmatrix}

\end{align}

となり、$\tan\theta = \dfrac{\sin\theta}{\cos\theta}$ より

\begin{align}

\begin{pmatrix}
\dfrac cd \\
\dfrac ba \\
\end{pmatrix}

&=

\begin{pmatrix}
\dfrac{\sin(a_x)}{\cos(a_x)} \\
\dfrac{\sin(a_y)}{\cos(a_y)} \\
\end{pmatrix}

=

\begin{pmatrix}
\tan(a_x) \\
\tan(a_y) \\
\end{pmatrix}

\\

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

&=

\begin{pmatrix}
\arctan \left( \dfrac cd \right) \\
\arctan \left( \dfrac ba \right) \\
\end{pmatrix}

\end{align}

になります。

3. 拡大縮小

$\cos^2\theta + \sin^2\theta = 1$ より

\begin{pmatrix}
\sqrt{ a^2 + b^2 } \\
\sqrt{ c^2 + d^2 } \\
\end{pmatrix}

=

\begin{pmatrix}
s_x \sqrt{ \cos^2(a_y) + \sin^2(a_y) } \\
s_y \sqrt{ \sin^2(a_x) + \cos^2(a_x) } \\
\end{pmatrix}

=

\begin{pmatrix}
s_x \\
s_y \\
\end{pmatrix}

になります。

4. その他

4.1. 回転をせん断を用いて表す

回転とせん断の変換行列は

\begin{align}

\left(
\begin{array}{cc|c}
\cos\theta & - \sin\theta & 0 \\
\sin\theta & \cos\theta & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

&=

\left(
\begin{array}{cc|c}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\\

&=

\left(
\begin{array}{cc|c}
\cos(a_y) & - \sin(- a_x) & 0 \\
\sin(a_y) & \cos(- a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\end{align}

となり、

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

=

\begin{pmatrix}
- \theta \\
\theta \\
\end{pmatrix}

になります。

4.2. せん断と回転を分解する

せん断の変換行列を

\left(
\begin{array}{cc|c}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

=

\left(
\begin{array}{cc|c}
\cos\theta & - \sin\theta & 0 \\
\sin\theta & \cos\theta & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\left(
\begin{array}{cc|c}
\cos(a_y') & \sin(a_x') & 0 \\
\sin(a_y') & \cos(a_x') & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

と分解すると

\begin{align}

\begin{pmatrix}
\cos(a_y) & \sin(a_x) \\
\sin(a_y) & \cos(a_x) \\
\end{pmatrix}

&=

\begin{pmatrix}
\cos\theta & - \sin\theta \\
\sin\theta & \cos\theta \\
\end{pmatrix}

\begin{pmatrix}
\cos(a_y') & \sin(a_x') \\
\sin(a_y') & \cos(a_x') \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
\cos\theta \cos(a_y') - \sin\theta \sin(a_y') & \cos\theta \sin(a_x') - \sin\theta \cos(a_x') \\
\sin\theta \cos(a_y') + \cos\theta \sin(a_y') & \sin\theta \sin(a_x') + \cos\theta \cos(a_x') \\
\end{pmatrix}

\end{align}

が成り立ちます。

三角関数の加法定理

\begin{align}
\sin(\alpha + \beta) &= \sin\alpha \cos\beta + \cos\alpha \sin\beta \\
\sin(\alpha - \beta) &= \sin\alpha \cos\beta - \cos\alpha \sin\beta \\
\cos(\alpha + \beta) &= \cos\alpha \cos\beta - \sin\alpha \sin\beta \\
\cos(\alpha - \beta) &= \cos\alpha \cos\beta + \sin\alpha \sin\beta \\
\end{align}

より

\begin{align}

\begin{pmatrix}
\cos(a_y) & \sin(a_x) \\
\sin(a_y) & \cos(a_x) \\
\end{pmatrix}

&=

\begin{pmatrix}
\cos\theta \cos(a_y') - \sin\theta \sin(a_y') & \cos\theta \sin(a_x') - \sin\theta \cos(a_x') \\
\sin\theta \cos(a_y') + \cos\theta \sin(a_y') & \sin\theta \sin(a_x') + \cos\theta \cos(a_x') \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
\cos(\theta + a_y') & - \sin(\theta - a_x') \\
\sin(\theta + a_y') & \cos(\theta - a_x') \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
\cos(a_y' + \theta) & \sin(a_x' - \theta) \\
\sin(a_y' + \theta) & \cos(a_x' - \theta) \\
\end{pmatrix}

\end{align}

となり、

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

=

\begin{pmatrix}
a_x' - \theta \\
a_y' + \theta \\
\end{pmatrix}

になります。

4.3. せん断を tan を用いて表す

$\cos\theta = 0$ となる角度 $\theta$ を除いて、せん断の変換行列は

{\begin{pmatrix}
\cos(a_y') & \sin(a_x') & 0 \\
\sin(a_y') & \cos(a_x') & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
1 & \tan(a_x') & 0 \\
\tan(a_y') & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
\cos(a_y') & 0 & 0 \\
0 & \cos(a_x') & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
}

になります。

参考「[CSS/JavaScript] アフィン変換の skew の挙動は実装により異なる - Qiita

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?