7. Moviment

7.4. Moviment circular

Si volem crear un moviment circular, l’única cosa que hem de fer és utilitzar les dues oscil·lacions juntes: amb el cosinus determinant la posició en x del cercle i el sinus determinant la posició a l’eix y.

En aquest cas, potser és menys senzill utilitzar map() i ens és més fàcil pensar en una coordenada al voltant de la qual girarà la nostra figura (initX, initY) i un radi de rotació (radius). A les coordenades del centre de rotació els sumarem els valors que ens retornin cos() i sin(), com sempre entre –1 i 1, multiplicats pel radi que volem per a la nostra rotació. En el nostre cas, els valors oscil·laran entre –150 i 150 tant en vertical com en horitzontal des del centre del canvas (200, 200).

Tant en els exemples de moviment lineal com en els de moviment oscil·latori o circular, hem utilitzat els valors de les variables canviants al llarg del temps com a paràmetres de la posició de les nostres figures. Però això no ha de ser així, sinó que podem utilitzar aquests valors per fer que el nostre sketch variï al llarg del temps de qualsevol manera, aplicant aquests valors a qualsevol paràmetre de dibuix. Vegem un exemple aplicat a la mida d’un cercle:

En aquest cas hem utilitzat el valor animat size per determinar la mida del cercle, que oscil·larà entre 0 i width. De la mateixa manera que l’hem usat per a la mida, el podríem usar per al color; vegem-ne un exemple:

En aquest exemple hem creat una «pluja aleatòria» en la qual animem el color de farciment dels cercles perquè oscil·li en un hue d’entre 150 i 250. Aquesta animació del color, unida a l’animació de la posició vertical dels cercles, ens crea els gradients de color.