7. Moviment

7.2. Moviment lineal

L’exemple més senzill que podem crear és el d’una variable que augmenti al llarg del temps i que usem per determinar algun paràmetre del nostre dibuix.

A la figura 78 veiem que hem creat al principi del codi una variable posX que hem inicialitzat amb el valor 100 i que després en el draw() estem utilitzant per determinar la posició a l’eix x de l’el·lipse que he dibuixat. Després de dibuixar-la, augmentem el valor de posX una unitat (recordem que posX ++ és equivalent a posX = posX + 1), per la qual cosa la nostra el·lipse comença a la posició x 100 i, ja que el draw() s’executa 60 vegades per segon, la seva posició va augmentant 60 unitats cada segon, desplaçant-se cap a la dreta del canvas. A l’exemple no estem redibuixant el fons perquè s’apreciï l’empremta que deixa el moviment de la figura.

Podem controlar fàcilment la velocitat i la direcció d’aquest moviment variant la quantitat que sumem a la posició a cada frame. Per a això, podem utilitzar una variable que emmagatzemi aquesta «velocitat». Com més quantitat sumem a la posició, més ràpid serà el moviment. Per canviar la direcció del moviment, n’hi ha prou amb canviar el signe del valor que sumem: si sumem valors negatius en lloc de positius a la posició, el moviment serà cap a l’esquerra en lloc de cap a la dreta.

En aquest exemple veiem clarament la diferència de velocitat entre el moviment de les dues el·lipses. Vegem a continuació un exemple mantenint la mateixa velocitat, però canviant la seva direcció:

La clau a l’hora de canviar la direcció del moviment la tenim a la línia 15: en lloc d’utilitzar l’operador += estem utilitzant el -=, de manera que les 5 unitats de la variable speed s’estan restant a cada frame al valor de initPos2 en lloc de sumar-se. Podríem obtenir el mateix resultat mantenint l’operador += però canviant el signe de speed:

initPos2 += -speed;

En dues dimensions

Fins ara, el moviment que hem programat a les nostres formes ha estat en una única dimensió, només s’estan movent en l’eix x, però podem incloure una nova variable perquè el moviment es produeixi tant en l’eix x com en el y.

En aquest cas, com que estem utilitzant el mateix valor speed per augmentar la posició tant en l’eix x com en el y, el moviment és diagonal a exactament 45°, però si utilitzem valors diferents de velocitat per a un eix i per a l’altre, el pendent del moviment canviarà.

Condicions de vora

Ara mateix, segons tenim el nostre codi, la variable que determina la posició del cercle augmenta (o disminueix) fins a l’infinit fent que el cercle desaparegui del canvas. En molts casos, aquest comportament no serà el desitjat i voldrem controlar què passa quan la nostra figura aconsegueix els límits del canvas.

Per a això, ens podem ajudar de les ja conegudes estructures condicionals per detectar quan la variable que emmagatzema la posició de la figura arriba a un determinat valor. Un dels comportaments que podem programar és que la nostra figura reaparegui pel costat contrari del canvas; vegem com dur-ho a terme:

A l’exemple anterior hem creat una condició que detecta quan la posició en y del cercle depassa el límit inferior del canvas i, quan ho fa, reinicialitza la posició a la part superior del canvas. Hem de tenir en compte que el cercle es dibuixa des del seu centre, per la qual cosa perquè depassi completament el límit del canvas hem de considerar també la mida del cercle.

Una vegada que tenim definida aquesta estructura condicional que detecta quan el cercle depassa el límit inferior del canvas, podem variar dins del condicional un altre tipus de paràmetres a més de la posició a l’eix y. Podríem crear una espècie de pluja aleatòria de cercles de diferents mides, colors i velocitats canviant un parell de paràmetres.

En lloc de fer que el cercle reaparegui pel costat contrari del canvas, podríem voler que rebotés. Per a això, el que hem de fer és simplement canviar de signe la velocitat quan detectem que ha arribat al límit:

En el cas de la figura anterior, només estem detectant la col·lisió amb la vora inferior del canvas, per la qual cosa quan el cercle vagi cap amunt depassarà el límit superior del canvas sense rebotar. Per afegir la condició nova, podem usar l’operador lògic OR:

if(posY >= height – size / 2 || posY <= 0 + size / 2) {
  speed = -speed;
}

Podem fer aquesta comprovació a les quatre vores del canvas si tenim moviment en dues dimensions afegint-hi una condició nova:

// REBOT VERTICAL
if(posY >= height – size / 2 || posY <= 0 + size / 2) { speedY = -speedY; } 

// REBOT HORIZONTAL
if(posX >= width – size / 2 || posX <= 0 + size / 2) {
  speedX = -speedX;
}

I perquè el codi quedi més net i organitzat, podem encapsular totes aquestes comprovacions en una funció:

function checkBorders(){
  // REBOT VERTICAL
  if(posY >= height – size / 2 || posY <= 0 + size / 2) { speedY = -speedY; } // REBOTE HORIZONTAL if(posX >= width – size / 2 || posX <= 0 + size / 2) {
    speedX = -speedX;
  }
}

Vegem un exemple complet amb rebot a les quatre vores del canvas: