Rotació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).

La manera correcta de rotar el cuadrado es:

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.