Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 4
Lección 6: TransformacionesTraslació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.¿Cuál es la ventaja?
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.
¿Quieres unirte a la conversación?
- Hello!
I have a very important question. I have seen in some projects the conditional % and I don't know what it is for. Could somebody explain it, please??
Hola:
Tengo una pregunta muy importante. He visto escrito muchas veces en algunos desafios y proyectos el condicional % y no se para que sirve. ¿Podría alguien explicármelo, por favor?(6 votos)- Es el operador módulo. Te da el resto de una división entera. Por ejemplo, 5%2 , obtienes 1. 4%3, obtienes 1. Sirve para comprobar ciertas condiciones (si un número es par o impar) o para realizar ciclos (una vez que acabas, puedes usar este operador para volver a empezar). Un saludo(4 votos)
- Hola, estoy leyendo los artículos y están muy buenos e instructivos. Tengo una pregunta, ¿cuando conviene usar la función translate (); para mover las coordenadas o simplemente es una cosa que siempre tengo que hacer? La diferencia que noto es que ya no tengo que poner variables en las coordenadas para poder moverlas sino que la función translate hace eso pero que utilidad tiene dejar las coordenadas de los comandos de dibujo sin una variable?(2 votos)
- Ya pasaron dos año pero considero que la función translate() simplifica el trabajo de tener que ajustar la posición en cada variable, cabe aclarar que eso no quita que en otros casos sea más conveniente no utilizarla.(1 voto)
- JavaScript o también conocido como JS. Es un lenguaje de alto nivel (Que pueden leer los humanos y los dispositivos de cómputo), el cual, se enfoca en un paradigma (Área de estudio) web. En donde, JS puede estar presente tanto en la parte FrontEnd como en el BackEnd, es decir, puede estar su algoritmo desde el punto gráfico y visual de un sitio web, o de igual manera, puede estar su algoritmo entre los servidores donde se almacene el sitio web. Visto desde un punto MVS, se puede decir que JavaScript es el controlador entre la vista y el modelo de datos.(1 voto)