Usando un poquito de Javascript
Cuando se enseñan ejes cartesianos como están en el diseño curricular (y como lo vinimos viendo en las clases anteriores), se toma por sentado que el eje de las X y de las Y son estáticos, no se mueven, POR FAVOR NO SE MUEVAN!!!
Pero en ésta clase, como es de esperarse haremos justamente eso. Veremos transformaciones, no en los objetos sino en el plano de coordenadas que los contiene.
El ejemplo del Autobús
Si nos subimos a un Autobús que está estacionado junto a nuestra casa, Imaginemos que hay otros pasajeros en el mismo (El conductor Ellipse, Señora Triangle, y Don Rect), claramente podemos saber a que distancia están de la puerta o del conductor. Es razonable creer que cualquier referencia de distancia DENTRO del Autobús es la misma que hacia afuera, hasta que el autobús empieza a moverse.Cuando ésto pasa, la distancia a nuestra casa es cada vez mayor hasta que no tiene sentido medirla, por ello nuestra referencia de espacio esta justamente dentro del mismo y no afuera.
Comenzaremos por crear un Rect, un Ellipse y un Triangle.
translate()
Por ejemplo, si ponemos un círculo en (0,0) estará en la esquina superior izquierda donde empiezan el eje de las X y las Y respectivamente, como lo dicen las seños en clase.
Ese punto de origen (0,0) puede desplazarse a cualquier lugar de nuestro canvas con la función translate(x,y). El primer número "x" es cuanto desplazaremos en el eje horizontal al punto de origen, el segundo valor "y" es cuanto desplazaremos verticalmente (mayor, es hacia abajo) el punto de origen.
Ese punto de origen (0,0) puede desplazarse a cualquier lugar de nuestro canvas con la función translate(x,y). El primer número "x" es cuanto desplazaremos en el eje horizontal al punto de origen, el segundo valor "y" es cuanto desplazaremos verticalmente (mayor, es hacia abajo) el punto de origen.
La flecha roja muestra cuanto se desplazó el punto Origen, la rejilla gris es solo una referencia. Como vemos, los 3 objetos usan ese punto como referencia y mantienen su posición con respecto a el, como si el Autobús se hubiera movido, pero los pasajeros están en el mismo lugar dentro del mismo.
La función rotate() nos permite rotar el eje de coordenadas, lo que arrastrará todos los objetos que dependen de él.
Dentro de los paréntesis debemos poner el ángulo como un numero en Radianes, que es el radio del círculo expresado sobre el perímetro.
Para el ejemplo pobremos el valor de 1 (A pesar del ejemplo animado, en P5*Js, los radianes giran en sentido de las agujas del reloj, o sea que hacia abajo y a la izquierda).
Si Pi vale3.1415... equivale a 180 Grados y 2 veces Pi (2*Pi) son 360 grados, o un giro completo de la rotación.
rotate()
La función rotate() nos permite rotar el eje de coordenadas, lo que arrastrará todos los objetos que dependen de él.Dentro de los paréntesis debemos poner el ángulo como un numero en Radianes, que es el radio del círculo expresado sobre el perímetro.
Para el ejemplo pobremos el valor de 1 (A pesar del ejemplo animado, en P5*Js, los radianes giran en sentido de las agujas del reloj, o sea que hacia abajo y a la izquierda).
Si Pi vale3.1415... equivale a 180 Grados y 2 veces Pi (2*Pi) son 360 grados, o un giro completo de la rotación.
Como no estamos acostumbrados a usar radianes, y queremos que las cosas se muevan, usaremos frameCount, que es un contador con el número de veces que la función draw() se repite (y redibuja la pantalla). El problema es que el puerto se dibuja muchas veces por segundo, y el número hará girar muy rápido a nuestras formas, para ello dividiremos por 100, de tal manera que cuando frameCount vaya de 0 a 100, la rotación irá de 0 a 1 radianes. Si usamos un denominador menor, la velocidad será mayor, si es mayor, la velocidad será aún más lenta.
Para hacerlo más pequeño podemos poner 1/2 o 0.5 para indicar la mitad. Para que vaya creciendo, usaremos de nuevo frameCount, pero ésta vez dividido por 1000 para que crezca lentamente ya que el valor 1 es el tamaño normal, y obtendremos que empezará en 0 y seguirá 0.01, 0.02, 0.03... y así.
scale(1)
La función scale() es como su nombre lo indica, la escala o TAMAÑO, por defecto cuando no tiene número entre el paréntesis se asume que es 1, si ponemos 2 será el doble del tamaño, si ponemos 4 será el cuádruple del tamaño.Para hacerlo más pequeño podemos poner 1/2 o 0.5 para indicar la mitad. Para que vaya creciendo, usaremos de nuevo frameCount, pero ésta vez dividido por 1000 para que crezca lentamente ya que el valor 1 es el tamaño normal, y obtendremos que empezará en 0 y seguirá 0.01, 0.02, 0.03... y así.
Moviendo el punto de Origen
Cuando usamos translate(300,300) para indicar 2 números de desplazamiento horizontal y vertical respectivamente, y clavó la flecha al centro del canvas (línea número 8 del ejemplo), pero podemos hacer las cosas más interesantes si cambiamos esos números por la posición horizontal y vertical del mouse: mouseX y mouseY respectivamente.
Sumando Transformaciones
Como dato interesante, podemos agregar más transformaciones que se irán sumando a las que ya pusimos. En el ejemplo definiremos otro rotar y un rectángulo, lo que dará una velocidad independiente a éste(que está debajo) que se suma a la velocidad que hereda de la función rotate() anterior.