Introducción a la programación para artistas y principiantes

Introducción a p5.js

Bienvenidos a esta introducción a la programación utilizando la biblioteca p5, cuyo propósito nos lo explican sus creadores en la página web p5js.org:

[...] Se trata de una biblioteca creada con el objetivo de hacer la programación
accesible a artistas, diseñadores, educadores y principiantes; reinterpretando 
la web actual y ofreciendo un conjunto completo de funcionalidades para dibujar 
e interactuar con los componentes HTML5 del navegador, como por ejemplo 
textos, entradas de usuario, vídeos, cámara y sonidos.

En definitiva con ella se pueden dibujar líneas, figuras, colores, textos... Y esa es la razón por la que nos puede ayudar mucho a entender la programación; todos sabemos que una imagen vale más que mil palabras.

¿Os imagináis aprender conceptos como las variables, las condiciones o los bucles gráficamente? ¿Utilizando figuras geométricas? ¿Generando animaciones de esas mismas figuras para moverlas por la pantalla haciendo todo tipo de cosas? Pues de eso trata esta serie de cursos.

Empezando a trabajar

Para crear un proyecto con p5.js podemos hacerlo de dos formas:

  • A través del editor online en la dirección https://editor.p5js.org.
  • Utilizando un editor en vuestro propio ordenador siguiendo los pasos de la sección Empezar de la página oficial.

Os recomiendo la primera opción a no ser que tengáis experiencia en desarrollo web, sólo hay que crear una cuenta donde pone Signup y ya podréis guardar vuestros proyectos en la nube de forma gratuita.

Primer proyecto

Si estamos identificados en el editor online podemos crear un nuevo proyecto, asignarle un nombre (por ejemplo 01 - Hola mundo) y guardarlo. Para recuperarlo lo haremos desde el apartado My Account > My Sketches.

Un sketch es un bosquejo o dibujo, de ahí que el fichero principal de un proyecto en p5 se llame sketch.js, indicando la extensión .js que el fichero contiene código en lenguaje JavaScript, pero no os preocupéis por eso.

Por ahora fijaos que por defecto este fichero sketch.js contiene un código:

01 - Hola mundo/sketch.js

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

function draw() {
  background(220);
}

Todavía no sabemos para qué sirve pero pronto lo descubriremos, pinchad el botón superior para ejecutarlo, veréis que a la derecha se dibuja un cuadrado gris.

No os sintáis abrumados por estás instrucciones, al fin y al cabo este curso es para absolutos principiantes. Quiero que os enfoquéis en la traducción y significado de las palabras que aparecen:

  • function -> función
  • setup -> preparar
  • createCanvas -> crear lienzo
  • draw -> dibujar
  • background -> fondo

Si unimos estos términos utilizando nuestra lógica podemos entender que tenemos dos funciones o comandos:

  • setup para preparar el programa y crear un lienzo
  • draw para dibujar o pintar un fondo en el lienzo

La biblioteca p5 es muy intuitiva y sabiendo un poco de inglés podemos hacernos una idea de lo que hacen todas las instrucciones. En este caso como podemos deducir se ha preparado un espacio para dibujar, un lienzo, en el cuál hemos dibujado el fondo con un color.

¿Ahora qué creéis que son los números que aparecen entre paréntesis en las instrucciones createCanvas y background? Probad a cambiarlos y veréis:

  • createCanvas(ancho, alto): tamaño del lienzo
  • background(color): código del color

Evidentemente todo esto no me lo estoy inventando yo, son los creadores de esta biblioteca lo que han programado estas instrucciones para que podamos utilizarlas de forma intuitiva.

Si queréis aprender más sobre las funcionalidades de p5 podéis consultar la referencia oficial que se encuentra perfectamente traducida al español, además os dejaré una chuleta muy útil con las instrucciones básicas de la biblioteca, aunque ésta sí se encuentra en inglés.

En fin, no le deis muchas vueltas porque a lo largo del curso veremos en profundidad estos conceptos y os iréis familiarizando con ellos poco a poco.