Geometry - Translation (Addition)

1 - About

A translation is a special type of transformation matrix.

3 - Matrix multiplication

See Geometry - Transformation Matrix.

The functional form <MATH> x' = x + t_x \\ y' = y + t_y </MATH> becomes: <MATH> \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & t \\ 0 & 1 & t \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} </MATH>

4 - Example

In Svg, the transform matrix is implemented with the matrix function. A translation would be matrix(1 0 0 1 X Y).

Below:

  • we draw a rectangle without translation
  • we draw a rectangle with translation

Example:

  • The CSS

rect {
   height:20px;
   width:20px;
   fill:#ECDCC6;
}

  • The Svg

<svg>
<!-- N -->
<rect/>
<rect transform="matrix(1 0 0 1 20 20)" />
</svg>

  • The output:

5 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap