La idea es muy simple: si el ratón se mueve y tú vas dibujando puntos (o pequeñas líneas) siguiendo su recorrido, puedes crear un efecto de “lápiz”.

Paso 1: Crea el canvas y un fondo

Primero prepara el lienzo. Pon un background() solo en setup(), para que el dibujo no se borre cada frame.

function setup() {
  createCanvas(500, 300);
  background(255);
}

Paso 2: Dibuja puntos al arrastrar el ratón

Usa el evento mouseDragged(). Cada vez que arrastras, dibujas un punto donde está el ratón.

function mouseDragged() {
  point(mouseX, mouseY);
}

✅ Ya tienes un “pincel” básico. 🔎 Si el trazo se ve flojo, es porque los puntos están separados: lo arreglamos en el siguiente paso.

Paso 3: Une el trazo con líneas (efecto bolígrafo)

En lugar de un punto suelto, dibuja una línea desde la posición anterior a la actual.

p5.js te da dos variables perfectas:

• pmouseX, pmouseY → posición previa del ratón

function mouseDragged() {
  line(pmouseX, pmouseY, mouseX, mouseY);
}

✅ Ahora el trazo es continuo y queda mucho más natural.

Paso 4: Ajusta el grosor y el color del trazo

Configura el aspecto del “lápiz” con stroke() y strokeWeight().

function setup() {
  createCanvas(500, 300);
  background(255);

  stroke(0);
  strokeWeight(4);
}

Paso 5: Añade un borrador rápido con el teclado

Una función muy práctica: pulsar una tecla para “limpiar” el canvas.

function keyPressed() {
  if (key === 'c') {
    background(255);
  }
}

✅ Pulsas c y el lienzo se limpia.

Código completo (todo junto)

function setup() {
  createCanvas(500, 300);
  background(255);

  stroke(0);
  strokeWeight(4);
}

function mouseDragged() {
  line(pmouseX, pmouseY, mouseX, mouseY);
}

function keyPressed() {
  if (key === 'c') {
    background(255);
  }
}

Ideas rápidas para mejorarlo (si te sobra tiempo)

• Cambiar color con teclas (r, g, b…)
• Cambiar grosor con + y -
• Hacer el “borrador” pintando en blanco

Con esto ya puedes crear tu primer mini-programa de dibujo: ratón para pintar, teclado para controlar.