Colección de herramientas pequeñas para generación visual en el navegador.
Sin instalación, sin dependencias, sin servidor. Abrís el archivo y funciona.
Procesador de video en tiempo real usando Hydra Synth.
Cargás cualquier video local y lo transforma con efectos generativos.
Efectos incluidos:
- Glitch fluido — noise orgánico con feedback suave
- Membrana líquida — deformación que respira
- Corrosión cromática — separación RGB por canal
- Pulso orgánico — el video late y se expande
- Deriva fractal — capas superpuestas en espiral
Cómo usar:
- Descargá el archivo
- Abrilo en Chrome o Firefox
- Arrastrá un video
.mp4a la pantalla o usá el botón para elegir archivo - Los controles de abajo permiten cambiar el modo, la velocidad o pausar
Editor en vivo para Hydra Synth con soporte de audio reactivo y sistema de presets.
Escribís código Hydra directamente en el navegador y lo ves ejecutarse en tiempo real.
Funcionalidades:
- Editor de código con resaltado de errores
Ctrl+Enterpara ejecutar sin usar el mouse- Guardar y cargar presets con nombre (persisten entre sesiones)
- Activar audio reactivo — usá
a.fft[0],a.fft[1], etc. en tu código - Modo pantalla completa para performance o instalación
Cómo usar:
- Descargá el archivo
- Abrilo en Chrome o Firefox
- Escribí código Hydra en el panel derecho
Ctrl+Entero el botón ▶ para ejecutar- Guardá tus efectos favoritos como presets
Ejemplo mínimo:
osc(6, 0.05, 1.4)
.rotate(0.3)
.modulateScale(noise(3), 0.3)
.color(1.1, 0.8, 1.3)
.out()Ejemplo con audio reactivo:
// primero activá el audio desde el panel
osc(() => a.fft[0] * 20, 0.05, 1.4)
.modulate(noise(3), () => a.fft[1] * 0.3)
.out()- Hydra Synth — video synth en WebGL
- Canvas 2D API
- Web Audio API
- JavaScript vanilla — sin frameworks
Herramientas de una sola página. Todo en un .html.
Fáciles de compartir, fáciles de modificar, fáciles de entender.
Hecho con curiosidad.