p5.js es una biblioteca de JavaScript que nos permite escribir sketches de una forma muy parecida a Processing. En este artículo voy a explicar, de la manera más resumida posible, qué se necesita para empezar a usar p5.js.
1. Lo primero que necesitamos es una carpeta donde meter todos los archivos que tendrá nuestro proyecto.
2. Dentro de la carpeta creamos un primer archivo de texto que llamaremos index.html.
3. Editamos nuestro archivo index.html para darle la estructura básica de una página web. Podemos usar cualquier editor de texto pero es recomendable tener uno diseñado para ayudarnos a escribir código, como Sublime Text. Si ejecutamos nuestro archivo podremos ver nuestra web en un navegador de internet.
4. Añadimos a la carpeta de nuestro proyecto el archivo p5.js que podemos descargarnos aquí.
4. Añadimos a la carpeta de nuestro proyecto el archivo p5.js que podemos descargarnos aquí.
5. Creamos un tercer archivo de texto en nuestra carpeta que podemos llamar code.js.
6. Volvemos a la edición del archivo index.html para añadir los dos scripts que enlazarán la página web que hemos creado en el punto 2 con los dos archivos .js descritos en los puntos 4 y 5.
8. Ahora ya podemos editar el archivo code.js que es donde escribiremos nuestro sketch.
Una buena forma de trabajar es dividir la pantalla en dos ventanas y dedicar la parte derecha a escribir código y la izquierda a visualizar el resultado en un navegador, tal como se muestra en las imágenes anteriores.
Código html:
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>Mi primer sketch p5.js</title> <script src="p5.js"></script> <script src="code.js"></script> </head> <body> <p>Esto es un párrafo dentro del body.</p> </body> </html>
Código p5.js:
function setup() { createCanvas(400,300); background(255,215,0); } function draw() { fill(255,0,0); strokeWeight(4); ellipse(100,50,50,50); line(100,250,300,150); }
