Geometry Matrix

Code


To execute this program, you need the image file gopher.png at the same directory:

Gopher

The result will be like this:

Screenshot

How the code works


  

The program is almost same as render-an-image example. The difference is whether DrawImageOptions is specified or not at the DrawImage call. In this example, a GeoM is adjusted. GeoM represents an affine matrix to translate, scale or rotate the image.

In this example, the image is translated by $(50, 50)$ first, and scaled by $(1.5, 1)$. In Ebiten, Y axis is not upward but downward. Then, tralslating by $(50, 50)$ means that the image is moved by 50 pixels rightward, and by 50 pixels downward. For scaling, the origin point is upper-left and the directions are also downward and rightward.

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

While GeoM is an matrix for 2D dimension, GeoM's dimension is 3. It is because GeoM is an affine matrix, which can represent not only scaling or rorating, but also translating. While scaling and rotating don't change the origin point (upper-left), translating does, and such change cannot be achieved with a non-affine 2-dimension matrix. The last row is always $(0, 0, 1)$.

The geometry matrix is used to determine how to convert the position in the source image to the position in the destination image. In other words, the geometry matrix represents a converting rule of positions. By adjusting the geometry matrix, we can adjust how to render the source image on the destination image.

\begin{equation} \begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \\ \end{bmatrix} \end{equation}

The initial value of GeoM represents an identity matrix. This means that nothing was changed. In Ebiten, the default location is the upper-left corner.

\begin{equation} \begin{bmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \\ \end{bmatrix} g \end{equation}

(g *GeoM).Scale left-multiplies a scaling geometry matrix. The origin position is the upper-left corner of the destination image.

\begin{equation} \begin{bmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \\ \end{bmatrix} g \end{equation}

(g *GeoM).Translate left-multiplies a translating geometry matrix.

\begin{equation} \begin{bmatrix} \cos(\theta) & -\sin(\theta) & 0 \\ \sin(\theta) & \cos(\theta) & 0 \\ 0 & 0 & 1 \\ \end{bmatrix} g \end{equation}

(g *GeoM).Rotate left-multiplies a rotating geometry matrix. The origin position is the upper-left corner of the destination image.