Hace algunos años atrás, escribí una entrada relacionada con aplicar la geometría y en particular la trigonometría en las aplicaciones web en el lado del cliente con altos requerimientos de animaciones e interactividad. Hoy vamos a profundizar algo más en este asunto estudiando un tema un poco más avanzado en el mundo de la geometría: las matrices de rotación.
Para empezar definamos qué es una matriz. Una matriz no es más que un conjunto bidimensional de números que representa un cambio (ya sea de un punto, un vector o un plano) en un espacio geométrico (específicamente, el Espacio Euclídeo).
El uso de matrices es una de las maneras más simples de describir una transformación algebráica en el espacio geométrico y es muy poco costosa en términos computacionales. Es por eso que su uso es tan extendido en la generación de gráficos por orenador. Todo programa de renderizado de gráficos en tres dimensiones usa de una u otra forma estas operaciones algebraicas en sus cálculos. Aunque cualquier transformación en el Espacio Euclídeo (ya sea traslación, rotación, escala, sesgo, etc.) se podría describir con una matriz, en este artículo nos centraremos solamente en las matrices de rotación.
Aunque parezca intimidante en un inicio, es un tema fácil de entender cuando conocemos todas sus aristas. Para comenzar, analicemos una matriz de rotación de dos dimensiones:
Esta matriz rotará un punto en un ángulo θ con respecto al centro del sistema de coordenadas. Si quisiéramos rotar un punto {x, y} en θ grados solo debemos multiplicar la anterior matriz por el vector conformado por los valores de dicho punto:
Con lo cual podemos determinar que:
Observemos el siguiente ejemplo interactivo (varía los valores del ángulo)
De la misma manera que podemos transformar un punto en un espacio de dos dimensiones, podemos hacerlo en un espacio tridimensional [x, y, z] lo que en este caso las matrices de rotación tendrán tres filas y tres columnas y podremos aplicar las transformaciones en tres planos diferentes.
Consultemos la matriz de rotación necesaria para aplicar una rotación alrededor del eje x:
De la misma manera que hicimos con el ejemplo en dos dimensiones, si deseamos rotar un punto {x, y, z} usando la anterior matriz, deberemos multiplicar la misma por el vector conformado por estos tres puntos:
Con lo cual podemos determinar que:
Procedamos a crear un ejemplo práctico con HTML, CSS y JavaScript valiéndonos de transformaciones CSS3.
Código HTML
Código CSS
Ahora con JavaScript procederemos a variar la propiedad CSS3 translate3d de cada elemento ball cuando el valor de un input, relativo al valor del ángulo de rotación, cambie.
Este sería el resultado (varía los valores del ángulo)
Hagamos el mismo ejercicio con la matriz de rotación del eje y:
Y realicemos los cálculos correspondientes para esta matriz de rotación:
Este sería el resultado (varía los valores del ángulo)
Y por último hagamos el mismo ejercicio con la matriz de rotación del eje z:
Y realicemos los cálculos correspondientes para esta matriz de rotación:
Este sería el resultado (varía los valores del ángulo)
También es posible convertir varias matrices de rotación en una sola, para ello solo se necesita mutiplicarlas, pero se debe tener en cuenta que el orden en el que se multiplican las matrices es importante, porque las multiplicaciones de matrices NO son conmutativas (sólo debes tomar un dado y rotarlo una vez hacia a la izquierda y otra vez hacia adelante para darte cuenta que no obtendrás lo mismo si lo rotas primero hacia adelante y después hacia la izquierda).
Apliquemos esto a un ejemplo práctico muy parecido a los anteriores, pero esta vez vamos a utilizar las transformaciones en los tres ejes por lo que procederemos a multiplicar las tres matrices correspondientes. El código HTML y el código CSS serán los mismos que vimos anteriormente así que no los repetiremos, centrémonos solo en el código JavaScript.
Código JavaScript
Este sería el resultado (varía los valores de los ángulos)
Espero que te haya sido de ayuda este artículo. Si deseas consultar ejemplos prácticos del uso de las matrices de transformación, creo que estas dos librerías que mantengo te resultarán interesantes: Isometric e Isometric-CSS.
Puedes situar fragmentos de código dentro de etiquetas <pre></pre> y código HTML o XML entre etiquetas <xmp></xmp>.