Programación con funciones, clases y arreglos para artistas

Parámetros y argumentos

Ya hemos visto cómo crear y utilizar funciones, unos bloques muy útiles para organizar el código modularmente y reutilizarlo.

En el ejemplo anterior creamos tres funciones para dibujar, mover y hacer rebotar un círculo pero difícilmente podemos reutilizarlas porque su objetivo era sólo reorganizar el código.

Pero, ¿recordáis que para dibujar una figura necesitábamos enviar a la función la posición donde queremos dibujarla y su tamaño? Esos datos son conocidos como parámetros de la función y es lo que nos permite añadir dinamismo a su funcionamiento, logrando diferentes resultados dependiendo de los datos que les enviemos.

Parámetros y argumentos

Vamos a aprender sobre los parámetros creando nuestra propia función para dibujar casitas. Cada casita estará formada por dos figuras:

  • Un cuadrado gris para la pared principal
  • Un triángulo rojo para el tejado

16 - Parametros/sketch.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220)
  casita()
}

function casita() {
  
  var x = 100;
  var y = 100;
  var lado = 50;
  
  // Pintamos la pared
  fill(100)
  rect(x, y, lado, lado)
  
  // Pintamos el techo
  fill(220, 0, 0)
  triangle(x, y, x+lado, y, x+lado/2, y-lado/2)
  
}

Muy bien, con esto podemos dibujar una casita. Lo malo es que todavía no podemos reutilizar la función porque sus variables tienen valores estáticos que no cambian.

La idea como podéis suponer es añadir las variables x, y y lado como parámtros para poder establecerlos en el momento de dibujar la casita, así que vamos a hacerlo:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220)
  casita()
}

function casita(x, y, lado) {
  
  // Pintamos la pared
  fill(100)
  rect(x, y, lado, lado)
  
  // Pintamos el techo
  fill(220, 0, 0)
  triangle(x, y, x+lado, y, x+lado/2, y-lado/2)
  
}

Lo interesante es que al crear los parámetros estos recibirán los valores por orden en el momento de enviarlos a la función y además no tenemos que usar la palabra var para definirlos:

casita(100, 100, 50)

Con esto ya le diremos que x e y valen 100 y el lado tiene un tamaño de 50, pero lo mejor de todo es que cambiando los valores podemos dibujar diferentes casitas:

function draw() {
  background(220)
  casita(50, 50, 50)
  casita(150, 150, 100)
  casita(300, 300, 25)
}

De hecho nada nos impide usarlo dentro de un bucle y hacer un poco de magia:

function draw() {
  background(220)
  for (var i=0;i<20;i++){
    casita(i*10, i*10, i*10)
  }
}

¿Y los argumentos?

Los valores que se envían a las funciones y se almacenan en los parámetros se denominan argumentos. Aunque en realidad son datos correlativos (unos se envían y los otros se reciben), es importante diferenciarlos porque los parámetros tienen nombre y los argumentos no.