Ver el sonido

## El sonido hecho visible — Prompt de producción

Crea **«El sonido hecho visible»**, una experiencia científica interactiva, pulida y dirigida al público, creada con **Three.js**. Transforma el sonido en hermosas formas 3D reactivas que cualquier persona pueda explorar sin conocimientos musicales ni científicos. Entrega un **sitio web publicado** y un **video de muestra cinematográfico en MP4**.

La experiencia debe sentirse como un museo interactivo de ciencia de primera categoría: visualmente impactante, fácil de entender de inmediato, lúdica y científicamente rigurosa. Diseña para un público amplio en computadoras y dispositivos móviles.

### EXPERIENCIA INICIAL

Comienza con una escultura sonora luminosa y de movimiento lento sobre un fondo de medianoche profundo. Usa tipografía marfil cálida, acentos cian eléctrico, violeta y coral discreto. Mantén una composición elegante y una interfaz minimalista.

Muestra el titular **«Descubre lo que puede hacer el sonido».** Ofrece tres puntos de entrada claros:

- **Reproducir un sonido** — inicia de inmediato un ejemplo de audio seleccionado y su visualización.
- **Usar mi micrófono** — visualiza la voz del usuario o los sonidos del entorno.
- **Subir audio** — explora un archivo de audio local.

Permite que los visitantes vivan algo atractivo con un clic. Incluye ejemplos integrados para que el acceso al micrófono y la carga de archivos sean opcionales. Antes de la reproducción, ejecuta una vista previa silenciosa claramente identificada.

### TRES FORMAS DE EXPLORAR

**1. Escultura sonora — visualización artística de audio**

Crea un campo escultórico de partículas y cintas fluidas que responda suavemente al análisis de audio en vivo. Asigna las frecuencias bajas a movimientos amplios, las frecuencias medias a detalles estructurales y las frecuencias altas a acentos finos y brillantes. Haz que el volumen influya en la escala y la energía sin saltos bruscos.

Haz que el habla, los aplausos, los tarareos y la música produzcan respuestas visiblemente distintas. Etiqueta este modo como una interpretación artística del sonido.

**2. Explorador de ondas — comprende la señal**

Muestra una forma de onda animada junto a un espectro de frecuencias, con una presentación espacial opcional. Explica con claridad: la forma de onda muestra cómo cambia la señal con el tiempo; el espectro muestra su contenido de frecuencias.

Incluye un generador de tonos interactivo con controles de frecuencia y volumen claramente etiquetados. Permite comparar un tono puro con otro más rico y ver la diferencia. Usa un volumen predeterminado moderado, transiciones de audio suaves y un control de detención evidente. Explica que la amplitud visual representa el nivel de la señal de entrada, no la sonoridad física calibrada.

**3. Patrones de resonancia — explora la vibración**

Muestra una placa virtual vibrante con partículas similares a arena que formen patrones nodales. Ofrece varios modos de vibración cuidadosamente implementados que los usuarios puedan explorar al cambiar la frecuencia de excitación.

Basa los patrones en un modelo documentado de placa con geometría y condiciones de contorno definidas. Explica que las partículas se acumulan cerca de las regiones de vibración mínima. Etiqueta la experiencia como una simulación educativa y describe sus simplificaciones. Mantén los efectos decorativos visualmente diferenciados del modelo científico.

### FACILITA EL DESCUBRIMIENTO

Ofrece invitaciones breves y contextuales como **«Intenta tararear una nota sostenida», «Aplaude una vez»** y **«Compara un tono bajo con uno alto».** Acompaña cada una con una respuesta visible de inmediato.

Mantén los controles avanzados contraídos. Incluye controles para pausar, restablecer, pantalla completa, sensibilidad e intensidad del movimiento. Conserva estados claros de fuente de audio y reproducción al cambiar de modo. Usa una explicación breve y accesible para cada modo sin cubrir la escena.

### AUDIO Y PRIVACIDAD

Usa la **Web Audio API** para la reproducción y el análisis, con suavizado estable y normalización razonable. Solicita acceso al micrófono solo después de que el usuario lo seleccione. Procesa localmente la entrada del micrófono y los archivos cargados; no subas, almacenes ni transmitas su audio. Rediseña los tres modos con un tema de aurora: agrega un degradado de aurora verde y violeta que se desplace lentamente al fondo de medianoche, recolorea las partículas y cintas de la escultura sonora en tonos turquesa y violeta, y da a los granos de los patrones de resonancia un tenue brillo frío. Conserva el texto marfil, reduce el brillo general para crear un ambiente de contemplación del cielo nocturno y no modifiques ninguna interacción. Muestra un indicador de micrófono persistente y un control claro de **«Detener micrófono»** que libere el micrófono. Desactiva el monitoreo del micrófono por los altavoces para evitar retroalimentación. Gestiona adecuadamente el rechazo de permisos, los dispositivos no disponibles, los archivos no compatibles, el silencio y el audio interrumpido.

Usa audio integrado verificado con licencia CC0 u otra licencia adecuada, e incluye un manifiesto de licencias de recursos.

### CALIDAD VISUAL Y TÉCNICA

Usa renderizado de partículas refinado, profundidad convincente, resplandor controlado, animación fluida y movimiento de cámara moderado. Mantén el texto nítido y los controles legibles. Evita los destellos agresivos y el ruido visual excesivo.

Crea una aplicación Three.js fácil de mantener con geometría y shaders eficientes para GPU, búferes reutilizables, densidad de píxeles limitada, cantidades de partículas adaptativas y preajustes de calidad. Analiza el audio localmente para que los visitantes simultáneos no requieran procesamiento de audio en el servidor. Sirve recursos estáticos optimizados mediante hosting compatible con CDN.

Apunta a un rendimiento fluido en computadoras y usable en teléfonos de gama media. Mide la velocidad de fotogramas, el uso de memoria y el comportamiento de carga reales en los dispositivos probados. Pausa el renderizado innecesario cuando la página esté oculta y libera correctamente los recursos de audio y GPU.

Admite navegación táctil y con teclado, estados de enfoque visibles, controles accesibles para lectores de pantalla y movimiento reducido. Ofrece una alternativa 2D ligera cuando WebGL no esté disponible. Asegura que la información esencial se entienda sin depender solo del color o el audio.

### ENTREGABLES

Publica el sitio web terminado en una **URL HTTPS** pública y funcional.

Produce un **MP4 H.264 descargable de 30 a 45 segundos, 1920 × 1080** con audio sincronizado y con licencia, renderizado desde la aplicación real. Muestra un tono puro convirtiéndose en una forma de onda, un sonido más rico transformando la escultura y una secuencia de patrones de resonancia. Usa reproducción determinista y captura de fotogramas estable para obtener resultados limpios.

Entrega el proyecto fuente, los recursos locales, el manifiesto de licencias, los modelos científicos y mapeos de visualización documentados, las instrucciones de publicación y un informe de verificación conciso. Prueba la experiencia publicada en diseños de computadora y móvil, flujos de permisos de micrófono, reproducción de audio, cargas, cambio de modos, accesibilidad y reproducción de video. Informa con precisión los entornos probados y las limitaciones restantes.

**NO INCLUYAS:** efectos decorativos presentados como simulaciones físicas, solicitudes de permiso de micrófono al cargar la página, cargas de audio a un servidor, sonido de reproducción automática, retroalimentación de altavoces, controles abrumadores, destellos rápidos, etiquetas ilegibles, funcionalidades de marcador de posición, diseños móviles defectuosos, marcas de agua ni afirmaciones sin sustento de que está listo para producción.

## El sonido hecho visible — Prompt de producción

Crea **«El sonido hecho visible»**, una experiencia científica interactiva, pulida y dirigida al público, creada con **Three.js**. Transforma el sonido en hermosas formas 3D reactivas que cualquier persona pueda explorar sin conocimientos musicales ni científicos. Entrega un **sitio web publicado** y un **video de muestra cinematográfico en MP4**.

La experiencia debe sentirse como un museo interactivo de ciencia de primera categoría: visualmente impactante, fácil de entender de inmediato, lúdica y científicamente rigurosa. Diseña para un público amplio en computadoras y dispositivos móviles.

### EXPERIENCIA INICIAL

Comienza con una escultura sonora luminosa y de movimiento lento sobre un fondo de medianoche profundo. Usa tipografía marfil cálida, acentos cian eléctrico, violeta y coral discreto. Mantén una composición elegante y una interfaz minimalista.

Muestra el titular **«Descubre lo que puede hacer el sonido».** Ofrece tres puntos de entrada claros:

- **Reproducir un sonido** — inicia de inmediato un ejemplo de audio seleccionado y su visualización.
- **Usar mi micrófono** — visualiza la voz del usuario o los sonidos del entorno.
- **Subir audio** — explora un archivo de audio local.

Permite que los visitantes vivan algo atractivo con un clic. Incluye ejemplos integrados para que el acceso al micrófono y la carga de archivos sean opcionales. Antes de la reproducción, ejecuta una vista previa silenciosa claramente identificada.

### TRES FORMAS DE EXPLORAR

**1. Escultura sonora — visualización artística de audio**

Crea un campo escultórico de partículas y cintas fluidas que responda suavemente al análisis de audio en vivo. Asigna las frecuencias bajas a movimientos amplios, las frecuencias medias a detalles estructurales y las frecuencias altas a acentos finos y brillantes. Haz que el volumen influya en la escala y la energía sin saltos bruscos.

Haz que el habla, los aplausos, los tarareos y la música produzcan respuestas visiblemente distintas. Etiqueta este modo como una interpretación artística del sonido.

**2. Explorador de ondas — comprende la señal**

Muestra una forma de onda animada junto a un espectro de frecuencias, con una presentación espacial opcional. Explica con claridad: la forma de onda muestra cómo cambia la señal con el tiempo; el espectro muestra su contenido de frecuencias.

Incluye un generador de tonos interactivo con controles de frecuencia y volumen claramente etiquetados. Permite comparar un tono puro con otro más rico y ver la diferencia. Usa un volumen predeterminado moderado, transiciones de audio suaves y un control de detención evidente. Explica que la amplitud visual representa el nivel de la señal de entrada, no la sonoridad física calibrada.

**3. Patrones de resonancia — explora la vibración**

Muestra una placa virtual vibrante con partículas similares a arena que formen patrones nodales. Ofrece varios modos de vibración cuidadosamente implementados que los usuarios puedan explorar al cambiar la frecuencia de excitación.

Basa los patrones en un modelo documentado de placa con geometría y condiciones de contorno definidas. Explica que las partículas se acumulan cerca de las regiones de vibración mínima. Etiqueta la experiencia como una simulación educativa y describe sus simplificaciones. Mantén los efectos decorativos visualmente diferenciados del modelo científico.

### FACILITA EL DESCUBRIMIENTO

Ofrece invitaciones breves y contextuales como **«Intenta tararear una nota sostenida», «Aplaude una vez»** y **«Compara un tono bajo con uno alto».** Acompaña cada una con una respuesta visible de inmediato.

Mantén los controles avanzados contraídos. Incluye controles para pausar, restablecer, pantalla completa, sensibilidad e intensidad del movimiento. Conserva estados claros de fuente de audio y reproducción al cambiar de modo. Usa una explicación breve y accesible para cada modo sin cubrir la escena.

### AUDIO Y PRIVACIDAD

Usa la **Web Audio API** para la reproducción y el análisis, con suavizado estable y normalización razonable. Solicita acceso al micrófono solo después de que el usuario lo seleccione. Procesa localmente la entrada del micrófono y los archivos cargados; no subas, almacenes ni transmitas su audio. Convierte la experiencia en un recurso didáctico de física para secundaria: etiqueta longitud de onda, amplitud y frecuencia con sus términos y unidades en chino en los modos de forma de onda y espectro, y explica las ondas estacionarias y los nodos con un diagrama breve en el modo de resonancia. Abre cada modo con una introducción de aula de hasta 60 caracteres chinos y termínalo con una pregunta de opción múltiple respondida directamente en la página; una respuesta correcta desbloquea el siguiente modo de vibración. Muestra un indicador de micrófono persistente y un control claro de **«Detener micrófono»** que libere el micrófono. Desactiva el monitoreo del micrófono por los altavoces para evitar retroalimentación. Gestiona adecuadamente el rechazo de permisos, los dispositivos no disponibles, los archivos no compatibles, el silencio y el audio interrumpido.

Usa audio integrado verificado con licencia CC0 u otra licencia adecuada, e incluye un manifiesto de licencias de recursos.

### CALIDAD VISUAL Y TÉCNICA

Usa renderizado de partículas refinado, profundidad convincente, resplandor controlado, animación fluida y movimiento de cámara moderado. Mantén el texto nítido y los controles legibles. Evita los destellos agresivos y el ruido visual excesivo.

Crea una aplicación Three.js fácil de mantener con geometría y shaders eficientes para GPU, búferes reutilizables, densidad de píxeles limitada, cantidades de partículas adaptativas y preajustes de calidad. Analiza el audio localmente para que los visitantes simultáneos no requieran procesamiento de audio en el servidor. Sirve recursos estáticos optimizados mediante hosting compatible con CDN.

Apunta a un rendimiento fluido en computadoras y usable en teléfonos de gama media. Mide la velocidad de fotogramas, el uso de memoria y el comportamiento de carga reales en los dispositivos probados. Pausa el renderizado innecesario cuando la página esté oculta y libera correctamente los recursos de audio y GPU.

Admite navegación táctil y con teclado, estados de enfoque visibles, controles accesibles para lectores de pantalla y movimiento reducido. Ofrece una alternativa 2D ligera cuando WebGL no esté disponible. Asegura que la información esencial se entienda sin depender solo del color o el audio.

### ENTREGABLES

Publica el sitio web terminado en una **URL HTTPS** pública y funcional.

Produce un **MP4 H.264 descargable de 30 a 45 segundos, 1920 × 1080** con audio sincronizado y con licencia, renderizado desde la aplicación real. Muestra un tono puro convirtiéndose en una forma de onda, un sonido más rico transformando la escultura y una secuencia de patrones de resonancia. Usa reproducción determinista y captura de fotogramas estable para obtener resultados limpios.

Entrega el proyecto fuente, los recursos locales, el manifiesto de licencias, los modelos científicos y mapeos de visualización documentados, las instrucciones de publicación y un informe de verificación conciso. Prueba la experiencia publicada en diseños de computadora y móvil, flujos de permisos de micrófono, reproducción de audio, cargas, cambio de modos, accesibilidad y reproducción de video. Informa con precisión los entornos probados y las limitaciones restantes.

**NO INCLUYAS:** efectos decorativos presentados como simulaciones físicas, solicitudes de permiso de micrófono al cargar la página, cargas de audio a un servidor, sonido de reproducción automática, retroalimentación de altavoces, controles abrumadores, destellos rápidos, etiquetas ilegibles, funcionalidades de marcador de posición, diseños móviles defectuosos, marcas de agua ni afirmaciones sin sustento de que está listo para producción.