40. Matrices de transformación 2D

40.1 Introducción

Las fórmulas geométricas pueden aplicarse punto por punto, pero una escena real contiene muchos vértices y varias transformaciones encadenadas. Las matrices ofrecen una representación compacta, uniforme y eficiente.

Una misma matriz transforma todos los vértices de un objeto. También puede multiplicarse por otras matrices para preparar una única operación compuesta.

40.2 ¿Qué es una matriz?

Una matriz es una tabla rectangular de números. En gráficos 2D aparecen principalmente matrices 2×2 y matrices homogéneas 3×3.

Las columnas describen dónde terminan los vectores básicos del plano. La primera columna es la imagen de (1,0) y la segunda, la imagen de (0,1).

40.3 Interpretación visual

40.4 Multiplicar una matriz por un punto

Una matriz 2×2 transforma el vector columna P=(x,y). Cada nueva componente es el producto escalar de una fila por el vector:

Esta operación siempre mantiene fijo el origen: al transformar (0,0), el resultado vuelve a ser (0,0). Por eso una matriz 2×2 sola no puede representar una traslación.

40.5 Matriz identidad

La identidad no cambia ningún punto y funciona como el número 1 en la multiplicación:

Es el valor inicial adecuado para construir una transformación acumulada.

40.6 Matriz de escalado

El escalado multiplica independientemente las coordenadas:

Si sx=sy, la escala es uniforme. Un valor entre 0 y 1 reduce; uno mayor que 1 amplía; un valor negativo combina escala y reflexión. Si alguno vale cero, la figura pierde una dimensión.

40.7 Matriz de rotación

Para girar θ alrededor del origen, en un sistema matemático con y hacia arriba:

Con θ=90°, cosθ=0 y senθ=1: el punto (x,y) se convierte en (−y,x). La matriz conserva distancias, ángulos y área porque sus columnas son unitarias y perpendiculares.

40.8 Reflexión y cizallamiento

Otras transformaciones lineales también tienen matrices sencillas:

Un cizallamiento inclina la figura: x'=x+k·y. Conserva paralelismo, pero normalmente altera ángulos y longitudes.

40.9 Por qué necesitamos matrices 3×3

La traslación suma tx y ty, en lugar de multiplicar las coordenadas. Para incorporarla se agrega una tercera coordenada y se representa el punto como (x,y,1):

Entonces x'=a·x+c·y+tx e y'=b·x+d·y+ty. La parte 2×2 es lineal y la última columna contiene la traslación.

40.10 Traslación homogénea

Al multiplicar T por (x,y,1), obtenemos (x+tx,y+ty,1). Si el último componente fuera 0, la traslación desaparecería; esa será una distinción fundamental entre puntos y vectores.

40.11 Multiplicación de matrices

Para componer A después de B calculamos C=A·B. Cada elemento de C surge del producto escalar entre una fila de A y una columna de B.

Las dimensiones interiores deben coincidir. El producto no es conmutativo en general: A·B y B·A pueden representar transformaciones diferentes.

40.12 Orden de las transformaciones

Con vectores columna, la matriz de la derecha actúa primero:

La composición puede calcularse una vez: M=T·R·S. Después basta multiplicar M por cada vértice. No se debe cambiar el orden sin analizar el efecto geométrico.

40.13 El determinante y el área

Para la parte lineal A, el determinante es:

• |det(A)| indica por cuánto se multiplican las áreas.
• det(A)>0 conserva la orientación.
• det(A)<0 invierte la orientación.
• det(A)=0 aplasta el plano y la matriz no es invertible.

La traslación no cambia el determinante porque no modifica tamaños ni orientación.

40.14 Matriz inversa

Si det(A)≠0, la transformación lineal puede deshacerse:

Para una transformación afín P'=A·P+t, la inversa es P=A⁻¹·(P'−t). Se usa para convertir coordenadas mundiales a locales y para realizar pruebas de selección sobre objetos transformados.

40.15 Base transformada e interpretación de columnas

Los vectores e₁=(1,0) y e₂=(0,1) forman la base habitual. Tras aplicar A:

Por eso las columnas permiten «leer» la transformación. Si son perpendiculares y de longitud uno, hay rotación o reflexión. Si cambian de longitud, existe escala; si dejan de ser perpendiculares, aparece cizallamiento.

40.16 Simulación interactiva: construye la matriz

Modifica los seis componentes de la transformación afín. La figura cian es el original y la amarilla es el resultado. Las flechas violeta y coral muestran las columnas transformadas de la base.

40.17 Aplicar una matriz en JavaScript

function transformarPunto(m, p) {
  return {
    x: m.a * p.x + m.c * p.y + m.tx,
    y: m.b * p.x + m.d * p.y + m.ty
  };
}

const matriz = { a: 2, b: 0, c: 0, d: 3, tx: 4, ty: -1 };
const resultado = transformarPunto(matriz, { x: 2, y: 1 });
console.log(resultado); // { x: 8, y: 2 }

El ejemplo es autocontenido y muestra su resultado. Los seis valores describen la parte lineal de la transformación y su traslación.

40.18 Componer matrices afines en JavaScript

function multiplicar(A, B) {
  return {
    a: A.a*B.a + A.c*B.b,
    b: A.b*B.a + A.d*B.b,
    c: A.a*B.c + A.c*B.d,
    d: A.b*B.c + A.d*B.d,
    tx: A.a*B.tx + A.c*B.ty + A.tx,
    ty: A.b*B.tx + A.d*B.ty + A.ty
  };
}

const T={a:1,b:0,c:0,d:1,tx:3,ty:2};
const S={a:2,b:0,c:0,d:2,tx:0,ty:0};
console.log(multiplicar(T,S));
// { a:2, b:0, c:0, d:2, tx:3, ty:2 }

multiplicar(T,S) representa «primero S y después T». Cada bloque incluye sus propios datos para poder ejecutarse de manera independiente.

40.19 Transformar una figura, errores frecuentes y conclusión

La matriz puede aplicarse directamente a todos los vértices de una figura:

const matriz = {a:1,b:0,c:0,d:1,tx:40,ty:25};
const vertices = [
  {x:0,y:0}, {x:30,y:0},
  {x:30,y:20}, {x:0,y:20}
];

const transformados = vertices.map(p => ({
  x: matriz.a*p.x + matriz.c*p.y + matriz.tx,
  y: matriz.b*p.x + matriz.d*p.y + matriz.ty
}));

transformados.forEach((p, i) =>
  console.log(`V${i}: (${p.x}, ${p.y})`)
);

Laboratorio de deformación matricial

La misma matriz transforma una malla completa, una nave y los vectores de la base. La secuencia recorre varias transformaciones y muestra cómo el determinante controla el área y la orientación.

• Intercambiar b y c al pasar entre convenciones o bibliotecas.
• Confundir vectores fila con vectores columna.
• Multiplicar matrices en el orden inverso al deseado.
• Usar grados directamente en seno y coseno.
• Intentar trasladar con una matriz 2×2.
• Ignorar que un determinante cero impide calcular la inversa.
• Modificar repetidamente los vértices ya transformados y acumular error numérico.

Recuerda: las columnas muestran la base transformada; el determinante describe área y orientación; la última columna homogénea contiene la traslación; y el orden del producto determina el orden geométrico.

En el próximo tema profundizaremos en las coordenadas homogéneas.