3. Variables i funcions

3.7. Funcions amb paràmetres

Afegir paràmetres a les nostres funcions resulta senzill. Com a exemple, farem una funció que ens permeti canviar el nostre estil de dibuix en una línia única:

function changeStyle(par1, par2) {
    // Aquí podem fer ús de par1 i par2
    strokeWeight(par1); 
    fill(par2);
}

Dins dels parèntesis escrivim el nom dels paràmetres que vulguem usar. A l’exemple hem usat par1 i par2, però poden tenir els noms que vulguem. Aquests paràmetres són els que podrem utilitzar després dins del cos de la funció per al que necessitem.

A l’hora d’invocar la funció, únicament hem de passar els valors que vulguem als paràmetres que hem definit a la funció. En aquest cas, a par1 hi donem el valor 10 i a par2 hi donem el valor 255:

changeStyle(10, 255);
// Equivalent al fet que escrivíssim:
// strokeWeight(10);
// fill(255);

Ens estalviem una línia, que pot no semblar molt, però si és una operació que fem múltiples vegades al llarg del nostre codi, ens valdrà la pena. Vegem com podríem aplicar les funcions amb paràmetres a la nostra funció eye():

Ara tenim de nou la funcionalitat del dibuix de l’ull encapsulada en la funció eye(), però, a més, com que tenim paràmetres que en defineixen la mida, posició tant en x com en y, així com el color, podem dibuixar molts ulls diferents sense haver de repetir les gairebé quinze línies de codi que necessitem per dibuixar un únic ull:

En aquest segon exemple invertim l’ordre: escrivim primer el codi de l’el·lipse i, a continuació, el del rectangle. Ara és el rectangle el que queda per sobre.

Per aclarir-nos, podem pensar en un sketch de P5.js com en una pintura a l’oli: a mida que anem afegint línies de codi, afegirem elements que se superposen als anteriors.