Estudio de P5.js

• Creación y manipulación de elementos gráficos
• Interacciones de entrada del usuario
• Generación y manipulación de sonido

• Arte generativo
• Juegos sencillos
• Prototipado rápido de interacciones visuales

Instalación: npm i p5 (o CDN)

function setup() { createCanvas(200, 200); }
function draw() { background(220); ellipse(mouseX, mouseY, 40, 40); }

1. Dibujar con el ratón

Deja un rastro de círculos donde está el cursor.

function setup() { createCanvas(400, 300); background(20); }
function draw() {
  fill(random(255), random(255), random(255));
  noStroke();
  circle(mouseX, mouseY, 20);
}

2. Animación de rebote

Una bola que rebota en los bordes.

let x = 50, v = 3;
function setup() { createCanvas(400, 300); }
function draw() {
  background(20);
  x += v;
  if (x > width || x < 0) v *= -1;
  fill(255, 165, 0); circle(x, height / 2, 40);
}