Programación con funciones, clases y arreglos para artistas

Definición y uso

Empezamos una nueva sección en la que vamos a aprender sobre las funciones y hay que decir que ya hemos utilizado muchas funciones de la biblioteca p5, como setup, draw y todas las que sirven para dibujar formas y colores.

Modularización y reusabilidad

En la programación las funciones son uno de los conceptos más importantes porque permiten escribir código modular y reutilizable:

  • Modular porque nos ofrece la posibilidad de organizar nuestro código de una forma coherente.
  • Reutilizable porque podemos ejecutar una función tantas veces como queramos.

Definición y sintaxis

Si buscamos una definición concreta, las funciones son bloques de código reutilizable identificados con un nombre cuyo objetivo es solucionar un problema. Recordad, las buenas funciones deben dar solución a sólo un problema, si solucionan más de un problema significa que podríamos haberlo dividido en más funciones, lo que nos permitiría organizar mejor el código, hacerlo más extensible y fácil de utilizar.

Podmos aprender sobre la sintaxis de una función observando setup:

function setup() {

}

Como se puede apreciar hacemos uso de la palabra reservada function para definir el nombre de una función, seguido de los paréntesis y las llaves que envuelven su bloque de código.

Vamos a recuperar el ejemplo del círculo que rebota diagonalmente y lo vamos a utilizar para practiar como crear y llamar nuestras propias funciones:

15 - Funciones/sketch.js

var circulo = { x: 0, y: 0, d: 1 }

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

function draw() {
  background(220)
}

Para reorganizar el código utilizando funciones una forma de hacerlo es identificar los verbos, ya que éstos indican acciones:

  • Pintar
  • Mover
  • Rebotar

Cada una de estas acciones podría trasladarse a una función para organizar mejor el código:

function pintar() {
  // Pintamos el círculo
  fill(220, 0, 0)
  ellipse(circulo.x, circulo.y, 50, 50)
}

function mover() {
  // Movemos el círculo
  circulo.x += 2 * circulo.d
  circulo.y += 2 * circulo.d
}

function rebotar() {
  // Comprobamos si nos salimos del lienzo
  if (circulo.x > width) {
    circulo.d *= -1
  } else if (circulo.x < 0) {
    circulo.d *= -1
  }
}

Finalmente tendríamos que ejecutar nuestras funciones en lugar del código:

var circulo = { x: 0, y: 0, d: 1 }

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

function draw() {
  background(220)
  mover()
  rebotar()
  pintar()
}

Estamos haciendo lo mismo pero ahora tenemos el código organizado modularmente. Podríamos desactivar una característica como la de hacer que el círculo rebote comentando la línea que ejecuta esa funcionalidad:

function draw() {
  background(220)
  mover()
  //rebotar()
  pintar()
}