Lab / 6
Lab
Experimentos visuales, juegos y creative coding. Piezas más exploratorias que un caso de estudio, pero útiles para mostrar sistemas interactivos, estética y prototipos en movimiento.
Visualización
Interactivo aquíDay-in-the-Life
Motor de visualización del uso del tiempo: backend Python produce un contrato estático y el frontend D3/Canvas anima agentes por actividad y reloj.
- Contrato de datos pequeño y estático para separar microdatos pesados de la experiencia web.
- Motor visual con clustering por fuerzas y timeline tipo reloj en pasos de 10 minutos.
- Roadmap de adaptadores ATUS, ENUT Chile y EET España.
#d3#canvas#time use#data contract
Python · D3.js · Canvas · datos estáticos · GitHub Pages2025
Coro Micelar
Juego web original de estrategia en tiempo real: una colonia micelar sobre una membrana viva responde a oleadas, mutaciones, mandatos y cicatrices.
- No hay derrota total: la presión degrada, deja residuos y abre nuevas rutas de optimización.
- Sistemas de placement, oleadas cualitativas, mutaciones de partida y combos persistentes.
- Sin build ni dependencias; se ejecuta abriendo index.html o sirviendo la carpeta.
#game#canvas#web audio#systems design
Vanilla JS · Canvas · Web Audio · localStorage · módulos ES2025
Arte generativo
Colección localGenuary 2025
Colección de sketches p5.js para prompts de Genuary, organizada alrededor de helpers reutilizables para geometría, color, simetría, ruido y exportación.
- 31 carpetas de sketches y utilidades compartidas para grid, simetría, ruido, gradientes y color.
- Plan de prompts agrupado por geometría, color, restricciones de código, arquitectura y texturas.
- Tests visuales/manuales para helpers de color, grid, noise, save, subdivision y symmetry.
#p5js#creative coding#generative art#toolkit
p5.js · JavaScript · geometría · paletas · export tooling2025
Particle Life
Simulación de vida de partículas: miles de agentes con reglas de atracción y repulsión por color generan clusters, cadenas y patrones que emergen solos en tiempo real.
- El comportamiento global emerge de reglas simples de atracción y repulsión entre pares de colores.
- Quadtree e índice espacial para resolver vecindades de miles de partículas a 60fps.
- Paleta viva sobre fondo oscuro, en la línea visual del sitio.
#particle life#emergencia#canvas#simulacion
Vanilla JS · Canvas · quadtree · índice espacial2025
Cuncuna
Animación generativa: una red de nodos conectados forma una cuncuna (oruga) que repta en bucle y teje un plexo de líneas en magenta sobre un fondo profundo.
- Nodos unidos por proximidad que dibujan un plexo cambiante cuadro a cuadro.
- Movimiento en bucle continuo, pensado como pieza ambiental.
- Paleta magenta afín al acento del sitio.
#generativo#plexo#canvas#loop
Vanilla JS · Canvas · p5.js2024
Arte generativo
En vivo aquíTruchet
Teselado de Truchet: baldosas con arcos orientados al azar que, unidas, dibujan un laberinto continuo de curvas. Un clásico del arte generativo en variante de curvas redondeadas.
- Cada baldosa elige al azar entre dos arcos; el patrón global surge de esa decisión local repetida.
- Regenera una composición distinta en cada carga.
- Variante de curvas redondeadas para un trazo limpio y continuo.
#truchet#teselado#generativo#patron
Vanilla JS · Canvas · p5.js2024