2.3. Estructura de un programa en P5.js
La estructura básica de un programa escrito en P5.js es la siguiente:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(200);
ellipse(200, 200, 50, 50);
}
Podemos observar que el código está organizado en dos funciones: setup() y draw(). La función setup() se ejecuta una única vez al iniciarse el programa. En esta escribiremos código que se ocupe de establecer el estado inicial de nuestro programa, como por ejemplo definir el tamaño de nuestro canvas (el área donde crearemos nuestros dibujos).
Por otro lado, todo el código que realmente se ocupe de dibujar lo pondremos dentro de la función draw(). Dentro de esta dibujaremos nuestras formas, textos o imágenes. A diferencia de setup(), la función draw() se ejecuta en bucle continuamente a no ser que le indiquemos lo contrario. Por defecto, se ejecuta a 60 FPS (frames por segundo).
Dentro de las funciones setup() y draw() tenemos distintos métodos, como createCanvas(), background() o ellipse(). Estos métodos son propios de P5.js y dentro de sus paréntesis reciben parámetros cuya finalidad depende de qué método utilicemos.
Habréis podido observar la peculiar sintaxis que tiene nuestro código, con paréntesis, llaves o puntos y coma. En el caso de setup() y draw(), al ser funciones se definen con la palabra clave function seguida del nombre de la función, unos paréntesis y unas llaves que encierran el contenido de la función. Más adelante, en la asignatura, veremos con detalle las funciones y crearemos las nuestras propias, pero de momento las utilizaremos tal como se muestran en el ejemplo.
Con el fin de mantener nuestro código ordenado, es importante que todo el código que vaya dentro de una función lo tabulemos (en programación se usa mucho el anglicismo indentar en lugar de tabular) para que visualmente seamos capaces de distinguir de un vistazo dónde empieza y dónde acaba una función.
También habréis observado que cada una de las instrucciones dentro de las funciones terminan con un punto y coma. En Javascript, y por extensión también en P5.js, los puntos y coma son opcionales, pero es muy recomendable que los pongamos, ya que no hacerlo puede ser fuente de quebraderos de cabeza más adelante.