P5.js es una biblioteca de JavaScript inspirada en el lenguaje de programación Processing, diseñada para facilitar la creación de gráficos interactivos, arte visual y experiencias multimedia.
Processing es un lenguaje de programación y un entorno de desarrollo orientado a las artes visuales. Processing ha tenido un impacto significativo en la comunidad de programación. P5.js es, en muchos aspectos, su descendiente directo adaptado a la web.
P5.js destaca por varias razones:
- Facilidad de uso: Su sintaxis es accesible para principiantes y su enfoque es adecuado tanto para artistas como para desarrolladores.
- Flexibilidad: Proporciona una amplia gama de herramientas para crear gráficos 2D y 3D, animaciones, y efectos visuales.
- Interactividad: Nos permite crear aplicaciones interactivas con facilidad, respondiendo a eventos del usuario como clics y desplazamientos.
- Documentación y Comunidad: Ofrece una extensa documentación y una comunidad activa que facilita el aprendizaje y la resolución de problemas.
Para obtener más información sobre p5.js, podéis consultar el sitio oficial de p5.js, explorar la documentación completa y acceder al repositorio en GitHub para ver el código fuente y contribuir a la comunidad.
Instalación de P5.js
Para comenzar a usar p5.js en nuestros proyectos, tenemos varias opciones. Podemos incluir p5.js directamente en nuestro HTML mediante una etiqueta <script>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Si estamos utilizando un entorno de desarrollo que soporte npm, también podemos instalarlo mediante el siguiente comando:
npm install p5Cómo usar p5.js
Veamos cómo podemos empezar a usar p5.js con algunos ejemplos prácticos. p5.js utiliza dos funciones principales para la mayoría de sus proyectos: setup() y draw().
Crear un canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>Dibujar formas básicas
El siguiente ejemplo configura un lienzo y dibuja un círculo y un rectángulo.
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
fill(255, 0, 0); // Color rojo
ellipse(200, 200, 100, 100); // Dibuja un círculo
fill(0, 0, 255); // Color azul
rect(100, 100, 150, 75); // Dibuja un rectángulo
}Interactividad con el Usuario
p5.js también nos permite interactuar con el usuario. Podemos agregar eventos como el clic del mouse para cambiar el color de los objetos en el canvas.
let color = 'blue';
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
fill(color);
ellipse(mouseX, mouseY, 100, 100);
}
function mousePressed() {
color = (color === 'blue') ? 'red' : 'blue';
}En este ejemplo, cambiamos el color del círculo cuando hacemos clic en el canvas.
Crear Animaciones
p5.js facilita la creación de animaciones mediante la función draw(), que se llama continuamente.
let x = 0;
let speed = 2;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(255, 0, 0);
ellipse(x, height / 2, 50, 50);
x += speed;
if (x > width || x < 0) {
speed *= -1;
}
}En este código, el círculo se mueve horizontalmente y rebota en los bordes del canvas.