7. Moviment

7.5. Moviment aleatori

En temes anteriors, hem utilitzat el mètode random() per obtenir valors aleatoris. Podem usar aquests valors per canviar a cada frame les coordenades en les quals dibuixem alguna de les nostres figures. Vegem-ne un exemple:

Com s’observa a la figura anterior, el canvi d’un frame al següent és massa brusc. El mètode random() ens retorna en aquest cas un nombre entre 0 i 400 cada vegada que l’invoquem. Podem imprimir aquests valors a la consola utilitzant console.log() i observarem que efectivament el salt d’una posició a una altra és massa brusc.

Utilitzant random() d’aquesta manera no podrem crear una sensació de moviment convincent, haurem d’explorar altres tècniques.

Random walk

Una d’aquestes tècniques és el random walk: passeig aleatori. En aquesta, en lloc d’utilitzar els valors de random() directament per establir la posició de la figura que volem moure, tindrem una posició inicial a la qual sumarem un petit valor aleatori a cada frame. Vegem-ho en acció:

Partint des del centre del canvas, a cada frame sumem una petita quantitat, definida en aquest cas amb la variable offset, a la posició del cercle tant a l’eix x com al y. D’aquesta manera, el nostre cercle es mourà entre –2 i 2 píxels en totes dues direccions cada vegada que s’executa el draw().

Noise

Una altra de les tècniques per obtenir un moviment aleatori més orgànic és utilitzant el mètode de P5 noise(). Aquest mètode ens retorna valors pseudoaleatoris entre 0 i 1 utilitzant una funció de soroll Perlin (Perlin noise). Aquesta funció, creada per Ken Perlin per generar les textures de la pel·lícula Tron de 1982, és àmpliament utilitzada en molts àmbits de la creació gràfica digital, des de per a la creació d’efectes de fum o foc fins per a la distribució dels diferents paisatges del videojoc Minecraft. L’avantatge que noise() ens ofereix respecte a random() és que ens atorga una aleatorietat amb continuïtat, sense salts bruscos. A continuació, podem veure un exemple de la funció de soroll.

A noise() li passem un paràmetre que equival a la coordenada x de la funció de soroll i ens retorna el valor de la coordenada y (entre 0 i 1). A l’exemple de la figura anterior, si li passem el valor noise(3), ens retornarà un valor pròxim a 0,75. Si li anem passant a noise() valors pròxims, els que ens retorni ho seran també. Vegem com podem utilitzar-lo en P5.

Com es pot observar, els valors que ens va retornant noise() són relativament pròxims entre si, per la qual cosa ara sí que els podrem utilitzar per crear un moviment aleatori fluid:

En aquest cas utilitzem dos sorolls diferents, un per a la posició en x del cercle i un altre per a la posició en y. Abans de calcular cadascun dels sorolls, especifiquem un noiseSeed() diferent per a cadascun; si no ho fem, els valors que obtindrem seran iguals, ja que tots dos mètodes noise() estaran usant la mateixa corba de soroll. Una altra manera d’obtenir valors diferents és establir diferents punts de partida a la mateixa corba. Per a això, podríem canviar els valors de offX i offY que hem definit al principi del codi amb la finalitat que estiguin més separats entre si a la corba. Variant l’increment de offX i offY podem controlar la velocitat a la qual ens movem a la corba de valors pseudoaleatoris: a valors més petits li corresponen moviments més suaus, mentre que si augmentem molt l’increment, els valors que noise() ens retornarà seran cada vegada més similars als que ens retornaria random(), ja que els salts a la corba pseudoaleatòria seran més grans.

De la mateixa manera que anteriorment hem utilitzat els valors animats no únicament per a la posició de les figures en el canvas sinó també per a la seva mida, color o altres paràmetres, podem utilitzar també les animacions aleatòries per al propòsit que considerem oportú. Creem un parell de sorolls més per aplicar-los a la mida i al color del cercle:

A la figura anterior veiem que s’han creat un parell de variables més per emmagatzemar la posició a la corba de soroll per a la mida i el color, amb diferents valors perquè aquests no estiguin associats entre si. A continuació, s’han utilitzat aquests valors per passar-los com a paràmetre a diferents noise() que s’usen per definir la posició, la mida i el color del cercle, de manera que tots aquests paràmetres varien aleatòriament de forma fluida al llarg del temps.