Transformaciones y Matrices

¡Una matriz puede hacer transformaciones geométricas!

Juega con esta aplicación de transformación 2D:

Transformation Matrix:
a:
b:
c:
d:
Shape:

Transform 100%
© 2019 MathsIsFun.com v0.81

 

Las matrices también pueden transformar de 3D a 2D (muy útil para gráficos por computadora), hacer transformaciones en 3D y mucho más.

Las matemáticas

Para cada punto [x, y] que conforma la figura, hacemos esta multiplicación de matrices:

a
b
c
d
x
y
=
ax + by
cx + dy

Cuando la matriz de transformación [a, b, c, d] es la matriz identidad (el equivalente matricial del número "1") los valores [x, y] no cambian:

1
0
0
1
x
y
=
1x + 0y
0x + 1y
=
x
y

Cambiar el valor "b" conduce a una transformación "inclinada" (pruébalo arriba):

1
0.8
0
1
x
y
=
1x + 0.8y
0x + 1y
=
x+0.8y
y

Y ésta hará un "giro" diagonal sobre la línea x = y (pruébalo también):

0
1
1
0
x
y
=
0x + 1y
1x + 0y
=
y
x

¿Qué más puedes descubrir?

Muchas transformaciones a la vez

Podemos "encadenar" transformaciones mediante multiplicación de matrices.

Ejemplo: un giro diagonal seguido de una inclinación horizontal:

¡Ten cuidado! Las transformaciones van de derecha a izquierda, por lo que es inclinación ×  giro = "girar luego inclinar"

1
0.8
0
1
0
1
1
0
=
0.8
1
1
0

Y luego podemos usar ese resultado en una transformación:

0.8
1
1
0
x
y
=
0.8x+y
x

Hace estas dos transformaciones a la vez:

Primera transformación luego Segunda transformación

¿Y qué pasa si cambiamos el orden de esas dos transformaciones?

Ejemplo: una inclinación horizontal seguida de un giro diagonal:

Recuerda que el orden es giro ×  inclinación = "inclinar luego girar"

0
1
1
0
1
0.8
0
1
=
0
1
1
0.8

¡Es un resultado diferente!

0
1
1
0.8
x
y
=
y
x+0.8y

Hace estas dos transformaciones a la vez:

Primera transformación luego Segunda transformación

Esto es poderoso ya que podemos hacer MUCHAS transformaciones a la vez y acelerar los cálculos. MUY útil para gráficos por computadora.

¡Pero tenemos que tener cuidado en qué orden hacemos las transformaciones!

También nos muestra por qué es importante el orden de multiplicar las matrices (a diferencia de los números ordinarios que pueden multiplicarse en cualquier orden, por ejemplo 2×3 = 3×2).

Transforma en código

¿Necesitas escribir el código? Aquí te digo cómo.

La letra F es solo una lista de coordenadas:
[3, 4], [3, 5], [0, 5], [0, 0], [1, 0], [1, 1.8], [2.5, 1.8], [2.5, 2.8], [1, 2.8], [1, 4]

Y recorremos esos puntos, creando nuevos puntos usando la matriz 2×2 "a, b, c, d":

  for (var i = 0; i < shape.pts.length; i++) {
    var pt = shape.pts[i]
    var x = a * pt[0] + b * pt[1]
    var y = c * pt[0] + d * pt[1]
    newPts.push({ x: x, y: y })
  }

¡Luego graficamos los puntos originales y los puntos transformados para que podamos ver ambos!

Rotación

Para rotar simplemente usa esta matriz:

cos(θ)
−sen(θ)
sen(θ)
cos(θ)

Ejemplo: Rota por 30°

Cálculo a 4 decimales:

cos(30°)
−sen(30°)
sen(30°)
cos(30°)
=
0.8660
−0.5
0.5
0.8660

¡Pruébalo en la aplicación en la parte superior!

Y probémoslo en un punto aquí:

0.8660
−0.5
0.5
0.8660
3
1
=
0.8660×3−0.5×1
0.5×3+0.8660×1
=
2.098
2.366

Y obtenemos esto:

transformación de giro 30 grados

 

 

Nota al pie: intercambio de filas y columnas

¡Las matrices son flexibles!

Esta transformación inclinada:
1
0.8
0
1
x
y
=
1x + 0.8y
0x + 1y
=
x+0.8y
y

Se puede hacer así:

x
y
1
0
0.8
1
=
1x + 0.8y
0x + 1y
=
x + 0.8y
y

Las filas y columnas se intercambian todas (transpuesta),y el orden de multiplicación se invierte, pero aún funciona. Solo para que lo sepas.

 

¡Intenta resolver las siguientes preguntas sobre este tema! (Nota: están en inglés).