3. Variables y funciones

3.7. Funciones con parámetros

Añadir parámetros a nuestras funciones resulta sencillo. Como ejemplo, vamos a hacer una función que nos permita cambiar nuestro estilo de dibujo en una única línea:

function changeStyle(par1, par2) {
    // Aquí podemos hacer uso de par1 y par2
    strokeWeight(par1); 
    fill(par2);
}

Dentro de los paréntesis escribimos el nombre de los parámetros que queramos usar. En el ejemplo hemos usado par1 y par2, pero pueden tener los nombres que queramos. Estos parámetros son los que podremos utilizar luego dentro del cuerpo de la función para lo que necesitemos.

A la hora de invocar la función, únicamente hemos de pasarle los valores que queramos a los parámetros que hemos definido en la función. En este caso, a par1 le damos el valor 10 y a par2 le damos el valor 255:

changeStyle(10, 255);
// Equivalente a que escribiéramos:
// strokeWeight(10);
// fill(255);

Nos ahorramos una línea, que puede no parecer mucho, pero si es una operación que hacemos múltiples veces a lo largo de nuestro código, nos merecerá la pena. Veamos cómo podríamos aplicar las funciones con parámetros a nuestra función eye():

Ahora tenemos de nuevo la funcionalidad del dibujo del ojo encapsulada en la función eye(), pero además, como tenemos parámetros que definen su tamaño, posición tanto en x como en y, así como su color, podemos dibujar muchos ojos distintos sin tener que repetir las casi quince líneas de código que necesitamos para dibujar un único ojo:

En este segundo ejemplo invertimos el orden: escribimos primero el código de la elipse y a continuación, el del rectángulo. Ahora es el rectángulo el que queda por encima.

Para aclararnos, podemos pensar en un sketch de P5.js como en una pintura al óleo: según vamos añadiendo líneas de código, vamos añadiendo elementos que se superponen a los anteriores.