Introducción

En este tutorial, aprenderá cómo crear una animación geométrica dinámica y colorida usando p5.js. Esta animación simboliza la idea de que "el mundo está lleno de gente fabulosa e increíble que hace cosas maravillosas". Las formas se moverán aleatoriamente por el lienzo, cambiando de color y creando un efecto visualmente cautivador.

Paso 1: Configurar tu entorno

1. Descargar p5.js:

   • Vaya al sitio web de p5.js y descargue la última versión de p5.js.
   • Como alternativa, puedes utilizar el editor p5.js en línea editor.p5js.org, que te permite escribir y ejecutar tu código directamente en tu navegador.

2. Crear un nuevo proyecto:

   • Si estás usando el editor en línea, crea un nuevo boceto haciendo clic en "Nuevo" en la esquina superior izquierda.
   • Si estás codificando localmente, crea un nuevo archivo HTML y vincula la biblioteca p5.js.

Paso 2: Escribir la estructura básica

Comencemos configurando la estructura básica de nuestro boceto p5.js. Esto incluye definir las funciones setup() y draw().

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

Explicación:

createCanvas(windowWidth, windowHeight);: esto establece el tamaño del lienzo para que coincida con la ventana de tu navegador.
noStroke();: Esto elimina el borde de las formas que crearemos.
background(30, 30, 60, 25);: Esto establece el color de fondo en azul oscuro con algo de transparencia, creando un efecto de seguimiento para las formas.

Paso 3: Agregar formas geométricas dinámicas

Ahora, agreguemos el código para crear formas aleatorias con diferentes colores, posiciones y tamaños.

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i 



Explicación:

• Variables aleatorias:

  • xey determinan la posición de cada forma en el lienzo.
  • size controla el tamaño de cada forma.
  • colorR, colorG, colorB generan valores aleatorios para los componentes rojo, verde y azul del color de relleno.
  • fill(colorR, colorG, colorB, 150);: Esto establece el color de relleno con una ligera transparencia.

• Tipos de formas:

  • elipse(x, y, tamaño, tamaño);: Dibuja un círculo o elipse.
  • rect(x, y, tamaño, tamaño);: Dibuja un cuadrado o rectángulo.
  • triángulo(x, y, x tamaño, y, x tamaño / 2, y - tamaño);: Dibuja un triángulo.

Paso 4: Hacer que la animación sea responsiva

Para asegurarse de que el lienzo cambie de tamaño con la ventana, agregue la siguiente función:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Paso 5: Ejecutar tu boceto

• Si estás usando el editor en línea p5.js, simplemente presiona el botón "Reproducir" para ver tu animación.
• Si estás codificando localmente, abre tu archivo HTML en un navegador web para ver la animación.