Traslación

Cuando creas un programa aquí, usando ProcessingJS, los datos de salida se dibujan en una ventana que actúa como un pedazo de papel cuadriculado. Para dibujar una figura, especificas las coordenadas en una gráfica.

Como ejemplo, aquí está un rectángulo sencillo dibujado con el código rect(20, 20, 40, 40). El sistema de coordenadas (una palabra más elegante para describir ese "papel cuadriculado") se muestra en gris, y para mantener nuestras imágenes pequeñas, el sistema de coordenadas mostrado es de 200 pixeles por 200 pixeles (en lugar del tamaño predeterminado de 400x400). Aquí puedes ver que el rectángulo está en x=20, y=20, con un alto y un ancho de 40:

Si quieres mover el rectángulo 60 unidades a la derecha y 80 unidades hacia abajo, puedes solo cambiar las coordenadas al sumarle a los x y y iniciales: rect (20 + 60, 20 + 80, 40, 40) y el rectángulo aparecerá en un lugar diferente. (Ponemos la flecha ahí para un efecto dramático).

Pero hay una manera más interesante de hacerlo: en lugar de eso, mueve el papel cuadriculado. Si mueves el papel cuadriculado 60 unidades a la derecha y 80 unidades hacia abajo, obtendrás exactamente el mismo resultado visual. Mover el sistema de coordenadas se llama traslación.

Lo importante que debemos observar en el diagrama anterior es que, en lo que le concierne al rectángulo, no se ha movido en lo absoluto. Su esquina superior izquierda sigue estando en (20, 20). Cuando utilizas transformaciones, las figuras que dibujas nunca cambian de posición; el sistema de coordenadas es el que cambia.

Aquí hay un programa que dibuja el rectángulo original, luego lo dibuja en rojo en la nueva ubicación cambiando sus coordenadas y luego lo dibuja en azul en la nueva ubicación al mover la cuadrícula (usando translate() ). Los colores de relleno son translúcidos, de modo que puedes ver que el rojo y el azul se traslapan para formar un cuadrado morado que está prácticamente en el mismo lugar. Solo cambió el método utilizado para moverlos. Manipula los números de abajo para verlo tu mismo:

Veamos el código de la traslación más a detalle. pushMatrix() es una función incorporada que guarda la posición actual del sistema de coordenadas. translate(60, 80) (la traslación) mueve el sistema de coordenadas 60 unidades a la derecha y 80 unidades hacia abajo. rect(20, 20, 40, 40) dibuja el rectángulo en el mismo lugar en el que estaba originalmente. Recuerda, las cosas que dibujas no se mueven; en lugar de eso, la cuadrícula es la que se mueve. Por último, popMatrix() restaura el sistema de coordenadas a como estaba antes de que hicieras la traslación.

¿Por qué utilizar pushMatrix() y popMatrix()? Podrías haber hecho un translate(-60,-80) para regresar la cuadrícula a su posición original. Sin embargo, cuando empiezas a hacer operaciones más sofisticadas con el sistema de coordenadas, es más sencillo usar pushMatrix() y popMatrix() para guardar y restaurar el estado, en lugar de tener que deshacer todas tus operaciones. Más adelante en esta sección descubrirás por qué esas funciones tienen nombres tan extraños.

Tal vez estés pensando que tomar el sistema de coordenadas y moverlo es mucho más problemático que solo sumarle a las coordenadas. Para un ejemplo sencillo como el del rectángulo, estás en lo correcto. Pero veamos un ejemplo donde translate() puede hacernos la vida más sencilla.

Aquí hay un programa que dibuja una hilera de casas. Utiliza un bucle que llama la función denominada drawHouse() (dibujar casa), que toma como parámetros la ubicación x y y de la esquina superior izquierda de la casa. Observa que la función drawHouse tiene que manipular mucho los parámetros para dibujar la casa en las coordenadas dadas:

¿Qué pasa si usamos la función translate() en lugar de calcular las nuevas coordenadas? En este caso, el código siempre dibuja la casa en el mismo lugar cada vez, con su esquina superior izquierda en (0, 0), y deja que la traslación haga el resto del trabajo en su lugar.

Eso no significa que siempre debes usar translate() en lugar de calcular nuevas coordenadas. Al igual que gran parte de lo que enseñamos, esta es una herramienta más en tu caja de herramientas, y dependerá de ti darte cuenta cuando tiene sentido utilizar esta nueva herramienta translate().

Este artículo es una adaptación de Transformaciones 2D hecha por J David Eisenberg, usada bajo una licencia Creative Commons Attribution-NonCommercial-ShareAlike.