6. Interacció

6.4. El mètode map()

A l’hora d’utilitzar la interactivitat per controlar paràmetres dels nostres sketches, moltes vegades, tindrem la necessitat d’haver d’ajustar els valors que el dispositiu interactiu ens retorna. Per exemple, podríem voler usar la posició del ratolí en el nostre canvas per controlar la transparència d’alguna de les figures que dibuixem. Vegem-ne un exemple senzill:

Atès que el nostre canvas mesura 400 px d’amplària, els valors de mouseX tindran un rang que va des de 0 fins a 399. El problema ve quan usem mouseX per determinar el valor de transparència del farciment: com bé sabem, el valor de transparència pot anar de 0 a 255, per la qual cosa, si movem el ratolí dins dels primers 255 píxels del canvas, veurem com la transparència del farciment varia. No obstant això, passats els 255 píxels no observarem cap canvi, ja que l’alpha del farciment no varia a partir de 255, atès que és completament opac.

L’ideal seria que poguéssim ajustar el rang dels valors que mouseX ens lliura perquè s’ajustin als valors que fill() espera perquè la interacció tingui sentit. Per a això, podem usar el mètode map(), al qual passem com a paràmetres el valor que volem «remapar», el mínim i el màxim que aquests valors poden arribar i el nou rang al qual els volem ajustar.

map(input, inputMin, inputMax, outputMin, outputMax);

En el nostre cas, el valor que volem «remapar» seria mouseX, els límits del qual serien 0 i l’amplària del nostre canvas (width), mentre que el mínim i el màxim del nou rang serien 0 i 255. Per tant, el mètode quedaria així:

map(mouseX, 0, width, 0, 255);

Pongámoslo en funcionamiento:

A la figura 74 tenim, a la part superior del canvas, un cercle l’opacitat del qual no està ajustada al rang complet de valors possibles de mouseX, mentre que el cercle de la part inferior sí que té la seva opacitat ajustada del rang (0, 400) que pot arribar mouseX al rang (0, 255) que pot agafar la seva opacitat.