Contenido principal
Curso: Programación de computadoras > Unidad 4
Lección 6: TransformacionesRotación
Además de mover la cuadrícula, también la puedes rotar con la función
rotate()
. Esta función tiene un argumento, que es el número de grados que quieres rotar.En la versión de ProcessingJS que usamos en Khan Academy, todas las funciones que tienen que ver con rotación miden los ángulos en grados, pero se pueden configurar para medir los ángulos en radianes, la unidad estándar de medida de ángulos. Si prefieres usar radianes, puedes poner
angleMode = "radians";
al principio de tu programa.Cuando hablamos de ángulos en grados, decimos que un círculo completo tiene 360°. Cuando hablamos de ángulos en radianes, decimos que un círculo completo tiene 2π radianes. Aquí hay un diagrama para que recuerdes los grados y radianes en un círculo:
¿Quieres repasar o aprender mediciones de ángulos? Puedes pasar por nuestra lección de "Fundamentos de ángulos y mediciones" aquí en Khan Academy.
Intentemos algo sencillo, rotar un cuadrado 45 grados:
Oye, ¿qué pasó? ¿Cómo es que se movió el cuadrado y quedó a la mitad? La respuesta es: el cuadrado no se movió. La cuadrícula se rotó. Aquí está lo que realmente pasó. Como puedes ver, en el sistema coordenado rotado, el cuadrado aún tiene su esquina superior izquierda en (40, 40).
Rotar de forma correcta
La manera correcta de rotar el cuadrado es:
- Trasladar el origen del sistema coordenado (0, 0) a donde quieres que esté la esquina superior izquierda del cuadrado.
- Rotar la cuadrícula 45° (π/4 radianes)
- Dibujar el cuadrado en el origen.
Aquí está el programa para rotar cuadrados, hecho de forma correcta. Observa la diferencia en el código: este programa primero hace
translate(40, 40);
y luego rect(**0, 0,** 40, 40);
en lugar de solo rect(**40, 40,** 40, 40);
.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?
- ¿Cómo hago para hacer el degradado en el desafió "rotación" ?¿que variable pongo en la función for?(6 votos)
- por que ya no puedo ver los videos(4 votos)
- En este curso avanzado, son articulos en lugar de videos interactivos.(5 votos)
- no entiendo nada por que esta en ingles(2 votos)
- Pues ha vuelto a estar en inglés. Será un fallo de la plataforma.(2 votos)
- Por que Yoli no me quiere?(2 votos)
- me dan instrucciones en español?(2 votos)