3. Variables i funcions

3.6. Funcions

A més de les variables, una altra eina que ens resultarà de gran ajuda a l’hora d’organitzar el nostre codi i fer-lo més modular són les funcions. Ja hem utilitzat unes quantes funcions que P5 ens ofereix, com poden ser createCanvas(), ellipse() o fill(). A partir d’ara serem capaços també de crear les nostres pròpies funcions quan necessitem fer tasques més complexes que les que les funcions de P5 ens permeten fer. Imaginem, per exemple, que volem dibuixar un ull com el de la imatge següent:

Desafortunadament, no existeix una funció en P5 eye() que ens permeti dibuixar directament un ull, però sí que coneixem totes les funcions necessàries per dibuixar-ne totes les parts.

Seria una cosa així:

Hem definit unes variables per a la mida i la posició de l’ull, i després hem dibuixat i emplenat de color les diferents el·lipses que defineixen el seu dibuix. A més, les mides de les el·lipses són proporcionals a la mida total de l’ull, per la qual cosa, si canviem la variable eyeSize, tots els altres elements variaran en funció d’aquesta.

És ara quan podem recopilar tot aquest codi que ens dibuixa l’ull i ficar-lo a la nostra pròpia funció:

En crear la funció eye(), que viu al mateix nivell que setup() o draw(), podem simplement invocar-la des de dins del draw() i tot el codi que tenim dins de eye() s’executarà com si estigués dins del draw() també. Quan s’executa el codi i arriba a la línia 14, on és eye(), salta a la línia 18 i executa tot el codi de la funció fins que arriba al final d’aquesta. Després ho reprèn per on es va quedar (línia 15) i continua el programa.

Com ja haureu pogut observar, per definir una funció seguim l’estructura següent:

function miFuncion() {
    // Aquí dins tot el que fa la meva funció
}

Primer necessitarem la paraula clau function perquè P5 sàpiga que definirem una funció; a continuació, el nom que vulguem donar a la nostra funció seguit d’uns parèntesis i unes claus dins de les quals hi haurà el cos de la nostra funció, el codi que volem que executi.

I per invocar-la des d’una altra part del codi, únicament necessitarem escriure miFuncion().

Aquest tipus de funcions ens poden servir per organitzar millor el nostre codi i per encapsular funcionalitats complexes. No obstant això, tal com l’hem definit, la nostra funció eye() no és massa útil. Sempre dibuixarà l’ull en la mateixa posició, amb la mateixa mida i els mateixos colors. Ens seria de gran utilitat poder crear una funció com ellipse(), a la qual podem donar una sèrie de paràmetres que personalitzen com i on s’ha de dibuixar l’el·lipse. Per a això, a la secció següent veurem com afegir paràmetres a les nostres pròpies funcions.