Contenido principal
Curso: Programación de computadoras > Unidad 4
Lección 6: TransformacionesTransformaciones múltiples
Ahora que ya has visto lo básico sobre traslación, rotación y homotecia (escalar), hablemos de usarlas todas juntas y algunas de las complejidades que nos saltamos al principio.
El orden es importante
Cuando haces varias transformaciones, el orden hace la diferencia. Una rotación seguida de un traslación, seguida de una homotecia no dará el mismo resultado que una traslación seguida de una rotación, seguida de una homotecia. Aquí hay un programa de ejemplo que lo demuestra:
Qué orden debes usar depende del efecto que desees. Solo ten en cuenta que estás moviendo el papel cuadriculado, no el objeto, y debes encontrar un orden que te funcione.
La matriz de transformación
Cada vez que haces una rotación, traslación u homotecia, la información requerida para hacer la transformación se acumula en una tabla de números. Esta tabla, o matriz, tiene pocos renglones y columnas, sin embargo, gracias al milagro de las matemáticas, contiene toda la información necesaria para hacer cualquier serie de transformaciones. Y es por eso que
pushMatrix() y popMatrix() tienen esa palabra en su nombre.¿Qué hay de las partes push y pop en los nombres? Estas vienen de un concepto de computadora conocido como pila (stack en inglés), que funciona como un dispensador de bandejas en una cafetería. Cuando alguien devuelve una bandeja a la pila, su peso empuja la plataforma hacia abajo. Cuando alguien necesita una bandeja, la toma de la parte superior de la pila y las bandejas restantes suben un poco.
De manera parecida,
pushMatrix() pone el estado actual del sistema de coordenadas en la parte superior del área de memoria y popMatrix() jala de nuevo ese estado. El ejemplo anterior usó pushMatrix() y popMatrix() para asegurarse de que el sistema coordenado estuviera "limpio" antes de cada parte del dibujo. En todos los demás ejemplos, las llamadas a esas funciones no eran realmente necesarias porque no hubo transformaciones subsecuentes, pero no hace daño guardar y restaurar el estado de la cuadrícula. Como una mejor práctica, siempre utiliza esas funciones cuando estés haciendo cualquier transformación.También hay una función
resetMatrix() que restaura la matriz a su estado original (la "matriz identidad"), pero las funciones push y pop por lo general son la mejor opción.¿Quieres aprender o repasar cómo funcionan las matrices en álgebra? Puedes pasar por el área de Matrices en Khan Academy, en particular, la sección de Transformaciones geométricas con matrices.
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?
Hola.
no entendí muy bien de que sirve escaleF en el desafio anterior y porque no se podria realizar solo con scale. Alguien me explica por favor?(2 votos)
El scalef servía para decirle al programa que hiciera un escalado de 1 el cual posteriormente sería reducido con decreaseAmt. cada vez que dibujara otro círculo.(7 votos)
Hi Pamela:
I don´t understans at 100% the transformacion theme Can you help me??
Thanks(2 votos)
Pamela is just the content creator and the audiovisual creator, but not something else than that. If you need help you can search by yourself or make questions for the community to answer. G.D.(1 voto)
En el desafío "Sol brillante" me he quedado atascado en el paso 3.
¿Alguien puede explicarme qué he de poner dentro de "translate();"?(2 votos)
I understand anything... Could someone help me?(2 votos)
Saludos el desafío: Ilusión óptica tiene problemas para ejecutarse, en mi caso en el Google Chrome. Para solucionarlo solo descargue otro navegador Web(Opera) y al iniciar sección se ejecuto correctamente, por si les ocurre lo mismo.(1 voto)
muy rico y todo pero algunas partes no estan bien detalladas para el usuario medio(1 voto)
Alguien que me pueda ayudar con el tercer paso del desafió: Sol Brillante Escalado.
es que no se que valores tengo que colocar en translate();(1 voto)
Debes colocar los mismos que están en el bucle For, es decir 200 y 200. solo que deben ser restado por la variable que creaste para ScaleF.
Quedaría de esta forma:
translate(200-scaleF*200,200-scaleF*200);(5 votos)
- Hola, ¿alguien sabe cómo hacer para que la pantalla del juego se vaya desplazando con el jugador?.¿Se hace con un translate?(1 voto)
- Alguien me puede explicar como hacer el desafio? es que en verdad estoy perdido en este desafio y no logro encontrar una respuesta....
Can someone explain to me how to do the challenge? is that I'm really lost in this challenge and I can't find an answer(1 voto) 
Aquí está el código del ejercicio anterior si no entienden una parte me pueden preguntar:var diameter = 600;
var decreaseAmt = 0.02;
var scaleF = 1.0;
var drawWhiteCircle = function(diameter) {
fill(255, 255, 255);
ellipse(0,0,diameter,diameter);
};
var drawBlackCircle = function(diameter) {
fill(0, 0, 0);
ellipse(0,0,diameter,diameter);
};
background(255, 255, 255);
while(scaleF > 0){
//Dibuja los círculos negros
pushMatrix();
translate(200,200);
scale(scaleF);
drawBlackCircle(diameter);
scaleF -= decreaseAmt;
popMatrix();
//Dibuja los círculos blancos
pushMatrix();
translate(200,200);
scale(scaleF);
drawWhiteCircle(diameter);
scaleF -= decreaseAmt;
popMatrix();
}(1 voto)