Kimolizer 2.0 | ClaudioLiser Edition

📦 Release Info

CODER: Claudio Van Dam
CRACKER: El Mismo Claudio
PACKAGER: También Claudio
PROTECTION: Ninguna (es gratis boludo)
DATE: Abril 2026
ORIGIN: 5 IAs metidas en un tupper

📝 REVISIONES - CHANGELOG

🔥 REVISIÓN 3 - 22/04/2026

FOCO PRINCIPAL: Debugging completo y mejora del modo Milkdrop

🌀 MODO MILKDROP - MEJORAS CRÍTICAS

PROBLEMA RESUELTO: Butterchurn v2.6.7 con error de WebGL framebuffer
SOLUCIÓN: Implementación de fallback Canvas2D completo
8 PRESETS NUEVOS: Estilos únicos creados para modo fallback
CONTROLES FUNCIONALES: Botones anterior/siguiente trabajando
SIN ERRORES: Corregidos todos los problemas de radio negativo

🎨 PRESETS DEL MODO FALLBACK

Psychedelic Waves: Ondas radiales clásicas estilo Milkdrop
Geometric Storm: Formas geométricas rotativas (triángulos, cuadrados)
Particle Dance: 50 partículas siguiendo el ritmo
Neon Pulse: Líneas neon ondulantes con efecto glow
Cosmic Flow: Efecto de galaxia con 3 brazos espirales
Digital Rain: Lluvia de caracteres estilo Matrix
Fractal Dreams: Patrones fractales recursivos
Laser Show: Rayos láser desde el centro con glow

🔧 MEJORAS TÉCNICAS

Detección ES6 Module: Soporte para window.butterchurn.default
Manejo de errores: Stack trace completo para debugging
Validación de radios: Math.max() para evitar valores negativos
Respuesta musical: Cada preset reacciona diferente a bass/mid/treble
Performance: Optimizado para 60fps con efectos complejos

🎮 EXPERIENCIA DE USUARIO

6 modos totales: Todos funcionando perfectamente
Controles intuitivos: Navegación fluida entre presets
Feedback visual: Mensajes en consola para cada cambio
Compatibilidad: Funciona incluso si Butterchurn falla

🐛 ERRORES CORREGIDOS

IndexSizeError: Radio negativo en arc() - SOLUCIONADO
WebGL framebuffer: Error de inicialización - SOLUCIONADO
ES6 Module: window.butterchurn como objeto - SOLUCIONADO
Controles inactivos: Botones sin función - SOLUCIONADO

ESTADO ACTUAL: ✅ Kimolizer 2.0 estable con 6 modos visuales completos

PRÓXIMA VERSIÓN: Mejorar efectos para acercarse más al estilo Winamp original

🚀 REVISIONES ANTERIORES

Revisión 2: Integración inicial de Butterchurn, ThreeJS, mejoras UI
Revisión 1: Versión base con Canvas2D, AudioManager básico

🎭 DEDICATORIA EMOTIVA

A Kimi, que se bancó 22 versiones de este delirio antes de que funcionara.
A ChatGPT, que no entendió nada pero dibujó lindo.
A Gemini, que integró Butterchurn como un campeón.
A DeepSeek, que optimizó todo mientras soñaba con ser Skynet.
A Perplexity, que documentó shaders como si le pagaran (no le pagan).
A Claude (yo), que juntó todo esto como Frankenstein junta cadáveres.

🎛️ 6 MODOS VISUALES

⭕ CIRCULAR MODE Canvas 2D
Barras radiales que salen de un círculo pulsante. Estilo: "vinilo tocadiscos espacial". Nivel de psicodelia: 7/10
〰️ OSCILOSCOPIO MODE Canvas 2D
Onda de audio en tiempo real con reflejo espejo. Estilo: "Matrix meets hospital cardíaco". Nivel: 5/10
✨ PARTÍCULAS MODE Canvas 2D
150 partículas orbitando como locas. Reaccionan a las frecuencias. Estilo: "galaxia en un frasco". Nivel: 9/10
🌆 NEON PULSE GLSL Shader
Grid synthwave estilo Miami Vice. 12 estrellas que siguen frecuencias. Glitch ocasional (feature). Nivel: 11/10
🔥 SPECTRUM FIRE GLSL Shader
Fuego que sube según frecuencias. 20 partículas ascendentes + chispas. Estilo: "Infierno de Dante meets Winamp". Nivel: 10/10
🌀 MILKDROP MODE Butterchurn
400+ PRESETS legendarios. Navegación suave. Estilo: "Nostalgia 2005 en esteroides". Nivel: ∞/10

🔊 3 FUENTES DE AUDIO

📁 ARCHIVO

Arrastrá MP3, WAV, OGG, M4A. Loop automático. Soporta hasta 2GB (testeado con "Shine On You Crazy Diamond").

🎤 MICRÓFONO

Visualizá tu voz en tiempo real. Ideal para: cantar mal, gritar, respirar fuerte. TIP: Pegale a tu PC mientras está activo (es arte).

▶️ DEMO

Tono generado con oscilador + LFO (220Hz modulado a 2Hz). Para cuando no tenés música ni ganas. Ciencia pura.

🏗️ ARQUITECTURA

🎵 AUDIO INPUT ──► 🔊 AudioManager (Web Audio API)
                      ├─ SourceNode
                      ├─ AnalyserNode (FFT: 256 → 128 bins)
                      └─ GainNode
                      ▼
                  📊 AudioData { frequency, timeDomain, bass, mid, treble }
                      ▼
                  🎛️ ModeManager (Hot-Swapping) ──► SIN CORTAR AUDIO
                      ▼
          ┌───────────┼───────────┐
          ▼           ▼           ▼
     🖥️ Canvas2D    🎲 Three.js   🥛 Butterchurn
          │           │           │
          └───────────┼───────────┘
                      ▼
                  ✨ PANTALLA

HOT-SWAPPING 1 RENDERER ACTIVO LOCALSTORAGE

📥 INSTALACIÓN

OPCIÓN A - PYTHON (LA MÁS FÁCIL)

python3 -m http.server 8080

OPCIÓN B - NODE.JS (PARA HIPSTERS)

npx serve

OPCIÓN C - PHP (PORQUE SÍ)

php -S localhost:8080

⚠️ OPCIÓN D - DOBLE CLICK: NO FUNCIONA por CORS/ES6 modules. Usá servidor local.

🕹️ CONTROLES

← / P ──► Modo anterior
→ / N ──► Siguiente modo
F11 ──► Pantalla completa
Mouse ──► Click en botones/controles según modo
Milkdrop ──► ⏮ Anterior | ⏭ Siguiente | 🎲 Aleatorio | Selector

🔧 DEPENDENCIAS

Externas (CDN): Three.js v0.160.0, Butterchurn v3.0.0-beta.5, Butterchurn Presets, Google Fonts (Orbitron, Rajdhani)
Internas (Vanilla JS): AudioManager.js, ModeManager.js, StateManager.js, Canvas2DRenderer.js, ThreeJSRenderer.js, ButterchurnRenderer.js, Shaders GLSL

🆘 TROUBLESHOOTING

PANTALLA NEGRA: F12 → Consola. Usá servidor local. Probá Demo primero.
Error Three.js: Revisá internet. Refrescá. Si no, usá Canvas2D.
WebGL no disponible: Shaders/Butterchurn desactivados. Usá modos Canvas2D.
MICRÓFONO: Requiere HTTPS/localhost + permisos.
FPS BAJO: Canvas2D > Shaders. Cerrá pestañas. En móviles: olvidate de WebGL.
BUTTERCHURN SE CUELGA: Es pesado. Dale tiempo o reducí pixelRatio.

🧪 CREAR TU PROPIO MODO

Canvas 2D


import { CanvasMode } from '../renderers/Canvas2DRenderer.js';
export class MiModo extends CanvasMode {
  constructor() { super('mi-modo', 'Mi Visualización'); }
  draw(canvas, ctx, freq, time, avg) {
    this.applyFadeEffect(ctx, canvas, 0.2);
    ctx.beginPath();
    ctx.arc(canvas.width/2, canvas.height/2, 50 + avg * 100, 0, Math.PI*2);
    ctx.fillStyle = `rgba(0, 255, 255, ${avg})`;
    ctx.fill();
  }
}

Shader GLSL


export const miShader = {
  vertexShader: `...`,
  fragmentShader: `uniform float uTime; uniform sampler2D uAudioTexture; uniform float uAverageVolume; varying vec2 vUv; void main(){ float f = texture2D(uAudioTexture, vec2(vUv.x, 0.5)).r / 255.0; gl_FragColor = vec4(vec3(f * uAverageVolume), 1.0); }`
};

👥 CREDITS & SHOUTS

TEAM: Claudio Van Dam (Integrador), Kimi, ChatGPT, Gemini, DeepSeek, Perplexity, Claude
SHOUTS: Winamp (1997), Milkdrop, Demoscene 90s, Audacity 2026, BBS Argentina, Charly García
SPECIAL: Nerds que leen READMEs, Ctrl+U users, extrañadores de Winamp.

📜 ESTATUTO DE LA LIMPIEZA (LEY 70.014)

ART. 1: Software GRATIS. Si te lo vendieron, te cagaron.
ART. 2: Comentar es ley. El que suba código sin documentar: picará COBOL en Bodornia. Eternamente jugando promoción sin irse a la B. Con IE6. En Vista.
ART. 3: Si hay bug, hacé PR o callate. (Mentira, reportalo, no soy forro)
ART. 4: Licencia MIT. Copiá, modificá, vendé. NO borrés créditos. Suscribite al canal inexistente.
ADVERTENCIA: Si borrás esto, tu código solo andará en IE6. Tu abuela te ve en 4K. Tu ex encuentra tu Fotolog.