7. Movimiento

7.4. Movimiento circular

Si queremos crear un movimiento circular, lo único que tenemos que hacer es utilizar las dos oscilaciones juntas: con el coseno determinando la posición en x del círculo y el seno determinando la posición en el eje y.

En este caso, quizá es menos sencillo utilizar map() y nos es más fácil pensar en una coordenada alrededor de la cual rotará nuestra figura (initX, initY) y un radio de rotación (radius). A las coordenadas del centro de rotación les sumaremos los valores que nos devuelvan cos() y sin(), como siempre entre –1 y 1, multiplicados por el radio que queremos para nuestra rotación. En nuestro caso, los valores oscilarán entre –150 y 150 tanto en vertical como en horizontal desde el centro del canvas (200, 200).

Tanto en los ejemplos de movimiento lineal como en los de movimiento oscilatorio o circular, hemos utilizado los valores de las variables cambiantes a lo largo del tiempo como parámetros de la posición de nuestras figuras. Pero esto no tiene que ser así, sino que podemos utilizar estos valores para hacer que nuestro sketch varíe a lo largo del tiempo de cualquier manera, aplicando estos valores a cualquier parámetro de dibujo. Veamos un ejemplo aplicado al tamaño de un círculo:

En este caso hemos utilizado el valor animado size para determinar el tamaño del círculo, que oscilará entre 0 y width. De la misma manera que lo hemos usado para el tamaño, podríamos usarlo para el color; veamos un ejemplo:

En este ejemplo hemos creado una «lluvia aleatoria» en la que animamos el color de relleno de los círculos para que oscile en un hue de entre 150 y 250. Esta animación del color, unida a la animación de la posición vertical de los círculos, nos crea los gradientes de color.