p5js

• GameDev
• threejs
• p5.js
• Tutorials (p5.js)
• 1.3: Figuras y Dibujo – p5.js – YouTube
• Diseño de Sistemas Generativos – P5.js – YouTube

Libros y PDFs

• Generative Design — Hartmut Bohnacker
  Exploración visual, patrones, algoritmos creativos y estructuras emergentes.
• The Nature of Code — Daniel Shiffman
  Simulación, física, sistemas complejos, algoritmos naturales y comportamiento.

Ejemplos y Repositorios

• Sine wave structures en p5.js – YouTube
• colorful-coding/coding-projects – GitHub

Conceptos Fundamentales de p5.js

• Canvas y Ciclo draw()
  El canvas es el área donde ocurre el render. setup() inicializa, draw() se ejecuta cada frame.
• Coordenadas y Transformaciones
  translate(), rotate(), scale(), push()/pop() permiten controlar sistemas de referencia.
• Dibujo 2D
  Primitivas: rect(), ellipse(), line(), beginShape(), curveVertex().
• Color y Estilo
  Modos HSB/RGB, stroke(), fill(), strokeWeight(), blending.
• Interactividad
  Eventos: mouse, teclado, sensores, audio. Valores dinámicos afectan la composición.
• Imágenes y Tipografías
  Carga asíncrona con preload(). Manipulación de píxeles con loadPixels() / updatePixels().
• Generative Art
  Patrones basados en ruido (noise()), aleatoriedad (random()), iteraciones y sistemas autónomos.
• Animación
  Interpolación, easing manual, sistemas de partículas, agentes, campos vectoriales.
• Optimización
  Evitar operaciones pesadas por frame, usar buffers (createGraphics()), limitar recomputación.

Patrones Creativos en p5.js

• Sistemas basados en ruido
  Campos de flujo, deformaciones, trazos orgánicos, terrenos.
• Parametrización
  Generar variaciones cambiando parámetros clave o usando sliders (librerías como p5.gui).
• Simetrías y Tiling
  Reflejos, mandalas, patrones recursivos y subdivisiones geométricas.
• Generación Procedural
  Arboles, fractales, L-systems, estructuras modulares.