Transformación Bidimensional

Se crean aplicaciones de diseño y planos de construcciones al ordenar las orientaciones y los tamaños de las partes que componen la escena. Las transformaciones nos permiten alterar de forma uniforme una imagen en dos dimensiones (2D)

El proceso de transformar una imagen puede ser traducido a formulas matriciales para una compresión lógica de lo que sucede con la imagen internamente.

Traslado

Sea un punto $(�,�)$ y un vector de traslación $({�}_{�},{�}_{�})$, la fórmula de traslación es:

$${�}^{\mathrm{\prime }}=�+{�}_{�}$$

$${�}^{\mathrm{\prime }}=�+{�}_{�}$$

Ejemplo: Si tienes un punto $(2,3)$ y deseas trasladarlo $3$ unidades hacia la derecha y $2$ unidades hacia arriba, la nueva posición sería $(2+3,3+2)=(5,5)$.

Escalamiento

Sea un punto $(�,�)$, un factor de escala ${�}_{�}$ en la dirección x y ${�}_{�}$ en la dirección y, la fórmula de escalado es:

$${�}^{\mathrm{\prime }}=�\ast {�}_{�}$$

$${�}^{\mathrm{\prime }}=�\ast {�}_{�}$$

Ejemplo: Si tienes un punto $(3,4)$ y deseas escalarlo por un factor de $2$ en la dirección $�$ y $1.5$ en la dirección $�$, la nueva posición sería ((3 \cdot 2, 4 \cdot 1.5) = (6, 6).

Rotación

Sea un punto $(�,�)$ y un ángulo de rotación $�$ en sentido antihorario, la fórmula de rotación es:

$${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">\cdot </span>\mathrm{<span\; style="background-color:\; white;">cos</span>}<span\; style="background-color:\; white;"></span><span\; style="background-color:\; white;">(</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">)</span><span\; style="background-color:\; white;">-</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">\cdot </span>\mathrm{<span\; style="background-color:\; white;">sin</span>}<span\; style="background-color:\; white;"></span><span\; style="background-color:\; white;">(</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">)</span>$$

$${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">\cdot </span>\mathrm{<span\; style="background-color:\; white;">sin</span>}<span\; style="background-color:\; white;"></span><span\; style="background-color:\; white;">(</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">)</span><span\; style="background-color:\; white;">+</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">\cdot </span>\mathrm{<span\; style="background-color:\; white;">cos</span>}<span\; style="background-color:\; white;"></span><span\; style="background-color:\; white;">(</span>\mathrm{<span\; style="background-color:\; white;">�</span>}<span\; style="background-color:\; white;">)</span>$$

Ejemplo: Si tienes un punto $(2,2)$ y deseas rotarlo $45^{\circ }$ en sentido antihorario alrededor del origen, la nueva posición sería $(2\cos (45^{\circ })-2\sin (45^{\circ }),2\sin (45^{\circ })+2\cos (45^{\circ }))\approx (0.71,2.12)$.

Sesgado

• Reflexión sobre el eje x:

  $${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span>\mathrm{<span\; style="background-color:\; white;">�</span>}$$
  $${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span><span\; style="background-color:\; white;">-</span>\mathrm{<span\; style="background-color:\; white;">�</span>}$$

• Reflexión sobre el eje y:

  $${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span><span\; style="background-color:\; white;">-</span>\mathrm{<span\; style="background-color:\; white;">�</span>}$$
  $${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span>\mathrm{<span\; style="background-color:\; white;">�</span>}$$

• Reflexión sobre la línea y = x:

  $${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span>\mathrm{<span\; style="background-color:\; white;">�</span>}$$
  $${\mathrm{<span\; style="background-color:\; white;">�</span>}}^{\mathrm{<span\; style="background-color:\; white;">\prime </span>}}<span\; style="background-color:\; white;">=</span>\mathrm{<span\; style="background-color:\; white;">�</span>}$$

Ejemplo de sesgo en la dirección $�$: Si tienes un punto $(2,3)$ y deseas aplicar un sesgo en la dirección $�$ con un factor de $1.5$, la nueva posición sería $(2+1.5\cdot 3,3)=(6.5,3)$.

Ejemplo de sesgo en la dirección $�$: Si tienes un punto $(4,5)$ y deseas aplicar un sesgo en la dirección $�$ con un factor de $0.75$, la nueva posición sería ((4, 5 + 0.75 \cdot 4) = (4, 8).

Fuentes:

https://grafu2ramirezf.blogspot.com/2020/10/21-transformacion-bidimensional.html

Transformaciones en 2d (wordpress.com)

https://grafidepc.blogspot.com/p/transformacion-bidimensional-los.html

http://www.cs.uns.edu.ar/cg/clasespdf/2.1-Transformaciones.pdf

http://elopez.fime.uanl.mx/@materias/732/@Tema%203%20-%20Transformaciones%202D.pdf