# DRUM4 - Simulador de Akai MPC VERSION PC ¡Bienvenido a **DRUM4**! Este es un simulador de caja de ritmos (MPC) inspirado en el diseño clásico de Akai, desarrollado íntegramente con tecnologías web estándar (**HTML5, CSS3 y JavaScript**). ## Demo en Vivo Puedes probar el simulador funcionando aquí: **[VER PROYECTO ONLINE](https://eduardofierroduque-sudo.github.io/DRUM4/) ## Características - **Interfaz Responsiva:** Diseño de 4 pads estilo. - **Baja Latencia:** Sonidos optimizados para una respuesta rápida al interactuar. - **Interacción Visual:** Los pads reaccionan visualmente al ser presionados. - **Tecnologías:** - **HTML5:** Estructura semántica de la MPC. - **CSS3:** Diseño con Grid y Flexbox para la apariencia profesional. - **JavaScript:** Lógica de reproducción de audio y manejo de eventos. ## Cómo usarlo localmente Si deseas clonar este proyecto y probarlo en tu computadora: 1. Clona el repositorio: ```bash git clone [https://github.com/eduardofierroduque-sudo/DRUM4.git](https://github.com/eduardofierroduque-sudo/DRUM4.git) 2. Entra a la carpeta ```bash cd DRUM4 3. Abre el archivo index.html en tu navegador favorito. Creado por eduardofierroduque-sudo como parte de mi aprendizaje en desarrollo web y Python. Características Principales Síntesis Real-Time: Sonidos generados mediante osciladores y ruido blanco (sin samples). Baja Latencia: Optimizado para disparos instantáneos mediante eventos de toque (touchstart). Efectos Profesionales: Drive (distorsión), Filtro Paso Bajo (LPF) y Reverb por delay. Secuenciador de 4 pasos: Crea ritmos complejos con 4 canales de percusión. Explicación Técnica (Arquitectura) El código se divide en tres capas fundamentales: 1. El Motor de Audio (script.js) AudioContext: Es el "cerebro" del audio. Nodos de Audio: El sonido viaja a través de una cadena: Oscilador/Ruido → Envolvente (Gain) → Drive → Filtro → Reverb → Master. Generación de Sonido: Kicks: Usan un oscilador con una caída exponencial de frecuencia (Pitch Sweep). Snare/Hats: Combinan osciladores con ráfagas de ruido blanco filtrado. El Scheduler: Utiliza un bucle de tiempo preciso que mira hacia adelante (look-ahead) para programar los sonidos, garantizando que el ritmo no se desfase aunque el procesador esté ocupado. 2. La Interfaz y Estética (style.css) CSS Variables: Permiten cambiar el color de acento (--accent) en todo el sistema instantáneamente. Knobs Personalizados: Los controles giratorios funcionan mediante transformaciones de rotación en CSS (rotate) basadas en el movimiento vertical del mouse. 3. Estructura (index.html) Define el "chasis" de la máquina. Está organizado en componentes lógicos: header, main-panel (controles y pads), seq-panel (secuenciador) y visualizer-screen. Carga: Abre el archivo index.html en tu navegador. Activa: Toca cualquier Pad para desbloquear el sistema de audio. Crea: Haz clic en los cuadraditos del secuenciador (steps) para programar un ritmo. Ajusta: * BPM: Cambia la velocidad del ritmo. Drive: Añade agresividad al sonido. Filter: Corta las frecuencias agudas para un sonido más oscuro. Attack: Suaviza el inicio de los golpes (útil para sonidos tipo ambient). #eduardofierroduque, #fierroduque