Si dibujas una figura sin más, puede que no se vea como esperas. Para controlar cómo se ven las formas, p5.js nos da tres funciones clave: background, fill y stroke.

Fondo del canvas – background()

Sirve para poner color al fondo del canvas.

function setup() {
  createCanvas(400, 300);
  background(220);
}

📌 El número indica un tono de gris (0 = negro, 255 = blanco).

Color de relleno – fill()

Define el color interior de las figuras.

function setup() {
  createCanvas(400, 300);
  background(220);
  fill(255, 0, 0);
  circle(200, 150, 100);
}

📌 fill(rojo, verde, azul).

Color del borde – stroke()

Define el color del contorno de las figuras.

function setup() {
  createCanvas(400, 300);
  background(220);
  fill(0, 150, 255);
  stroke(0);
  rect(120, 80, 160, 140);
}

📌 Si no quieres borde, puedes usar noStroke().

El orden importa:

• Primero defines fondo y colores
• Luego dibujas las formas

Desde aquí ya puedes ver claramente lo que programas, y a partir de ahora el siguiente paso natural será mover, animar e interactuar con lo que aparece en pantalla 🎨🚀