Vedere il suono

## Il suono reso visibile — Prompt di produzione

Crea **“Il suono reso visibile”**, un'esperienza scientifica interattiva rifinita e rivolta al pubblico, realizzata con **Three.js**. Trasforma il suono in splendide forme 3D reattive, esplorabili da chiunque senza conoscenze musicali o scientifiche. Fornisci un **sito web pubblicato** e un **video MP4 cinematografico di presentazione**.

L'esperienza deve evocare un museo scientifico interattivo di alta qualità: visivamente d'impatto, immediatamente comprensibile, giocosa e scientificamente rigorosa. Progetta per un pubblico ampio, su desktop e dispositivi mobili.

### PRIMA ESPERIENZA

Apri con una scultura sonora luminosa e in lento movimento su uno sfondo blu notte profondo. Usa una tipografia avorio calda, accenti ciano elettrico e viola, con tocchi di corallo discreti. Mantieni la composizione elegante e l'interfaccia essenziale.

Mostra il titolo **“Scopri cosa può fare il suono.”** Offri tre chiari punti di accesso:

- **Riproduci un suono** — avvia immediatamente un esempio audio selezionato e la sua visualizzazione.
- **Usa il mio microfono** — visualizza la voce dell'utente o i suoni circostanti.
- **Carica audio** — esplora un file audio locale.

Permetti ai visitatori di vivere qualcosa di coinvolgente con un clic. Fornisci esempi integrati affinché l'accesso al microfono e il caricamento di file siano facoltativi. Prima della riproduzione, esegui un'anteprima silenziosa chiaramente identificata.

### TRE MODI PER ESPLORARE

**1. Scultura sonora — visualizzazione artistica dell'audio**

Crea un campo scultoreo di particelle e nastri fluidi che risponda in modo uniforme all'analisi audio in tempo reale. Associa le basse frequenze a movimenti ampi, le medie frequenze ai dettagli strutturali e le alte frequenze a delicati accenti scintillanti. Lascia che il volume influenzi scala ed energia senza salti bruschi.

Fai sì che parlato, applausi, canticchiare e musica generino risposte visibilmente diverse. Etichetta questa modalità come interpretazione artistica del suono.

**2. Esploratore d'onda — comprendere il segnale**

Mostra una forma d'onda animata accanto a uno spettro di frequenza, con una presentazione spaziale opzionale. Spiega con chiarezza: la forma d'onda mostra come il segnale cambia nel tempo; lo spettro mostra il suo contenuto in frequenza.

Includi un generatore di toni interattivo con controlli di frequenza e volume chiaramente etichettati. Consenti agli utenti di confrontare un tono puro con un tono più ricco e osservarne la differenza. Usa un volume predefinito moderato, transizioni audio fluide e un comando di arresto evidente. Spiega che l'ampiezza visiva rappresenta il livello del segnale in ingresso, non l'intensità sonora fisica calibrata.

**3. Pattern di risonanza — esplorare la vibrazione**

Mostra una piastra virtuale vibrante con particelle simili a sabbia che formano pattern nodali. Fornisci diverse modalità di vibrazione realizzate con cura, esplorabili modificando la frequenza di eccitazione.

Basa i pattern su un modello documentato della piastra, con geometria e condizioni al contorno definite. Spiega che le particelle si raccolgono nelle zone a vibrazione minima. Etichetta l'esperienza come simulazione didattica e descrivine le semplificazioni. Mantieni gli effetti decorativi visivamente distinti dal modello scientifico.

### RENDI SEMPLICE LA SCOPERTA

Offri brevi inviti contestuali come **“Prova a canticchiare una nota costante”, “Batti le mani una volta”** e **“Confronta un tono basso con uno alto.”** Associali a una risposta immediatamente visibile.

Mantieni chiusi i controlli avanzati. Fornisci controlli per pausa, reimpostazione, schermo intero, sensibilità e intensità del movimento. Mantieni chiari gli stati della sorgente audio e della riproduzione nel passaggio tra le modalità. Usa una breve spiegazione accessibile per ogni modalità senza coprire la scena.

### AUDIO E PRIVACY

Usa la **Web Audio API** per riproduzione e analisi, con livellamento stabile e normalizzazione appropriata. Richiedi l'accesso al microfono solo dopo che l'utente lo ha selezionato. Elabora localmente l'input del microfono e i file caricati; non caricare, archiviare né trasmettere il loro audio. Rivisita tutte e tre le modalità con un tema aurora: aggiungi allo sfondo notturno un gradiente aurora verde-viola che si sposta lentamente, ricolora in verde acqua e viola le particelle e i nastri della scultura sonora e dona ai granelli dei pattern di risonanza un tenue bagliore freddo. Mantieni il testo avorio, riduci la luminosità complessiva per evocare l'osservazione del cielo notturno e non modificare alcuna interazione. Mostra un indicatore del microfono sempre visibile e un chiaro controllo **“Disattiva microfono”** che rilasci il microfono. Disabilita il monitoraggio del microfono tramite gli altoparlanti per evitare il feedback. Gestisci con eleganza il rifiuto dell'autorizzazione, i dispositivi non disponibili, i file non supportati, il silenzio e l'audio interrotto.

Usa audio integrato CC0 verificato o con licenza appropriata e includi un registro delle licenze delle risorse.

### QUALITÀ VISIVA E TECNICA

Usa un rendering delle particelle raffinato, una profondità convincente, bloom controllato, animazioni fluide e movimenti di camera sobri. Mantieni testi nitidi e controlli leggibili. Evita lampeggiamenti aggressivi e rumore visivo eccessivo.

Realizza un'applicazione Three.js manutenibile, con geometrie e shader efficienti per la GPU, buffer riutilizzabili, densità di pixel limitata, conteggi di particelle adattivi e preimpostazioni di qualità. Analizza l'audio localmente affinché i visitatori simultanei non richiedano elaborazione audio lato server. Distribuisci risorse statiche ottimizzate tramite hosting compatibile con CDN.

Punta a prestazioni fluide su desktop e utilizzabili su telefoni di fascia media. Misura la frequenza dei fotogrammi effettiva, l'uso della memoria e il comportamento di caricamento sui dispositivi testati. Sospendi il rendering non necessario quando la pagina è nascosta e rilascia correttamente le risorse audio e GPU.

Supporta il tocco, la navigazione da tastiera, stati di focus visibili, controlli accessibili ai lettori di schermo e la riduzione del movimento. Fornisci un'alternativa 2D leggera quando WebGL non è disponibile. Assicurati che le informazioni essenziali siano comprensibili senza basarsi soltanto sul colore o sull'audio.

### RISULTATI DA CONSEGNARE

Pubblica il sito web completato a un **URL HTTPS** pubblico funzionante.

Produci un **MP4 H.264 scaricabile di 30–45 secondi, 1920 × 1080** con audio sincronizzato e con licenza, renderizzato dall'applicazione effettiva. Mostra un tono puro che diventa una forma d'onda, un suono più ricco che trasforma la scultura e una sequenza di pattern di risonanza. Usa una riproduzione deterministica e un'acquisizione stabile dei fotogrammi per risultati puliti.

Consegna il progetto sorgente, le risorse locali, il registro delle licenze, i modelli scientifici e le mappature di visualizzazione documentati, le istruzioni di pubblicazione e un rapporto di verifica conciso. Testa l'esperienza pubblicata su layout desktop e mobili, flussi di autorizzazione del microfono, riproduzione audio, caricamenti, cambio di modalità, accessibilità e riproduzione video. Riporta con precisione gli ambienti testati e le limitazioni rimanenti.

**NON INCLUDERE:** effetti decorativi presentati come simulazioni fisiche, richieste di autorizzazione del microfono al caricamento della pagina, caricamenti audio su un server, audio in riproduzione automatica, feedback dagli altoparlanti, controlli eccessivi, lampeggiamenti rapidi, etichette illeggibili, funzionalità segnaposto, layout mobili non funzionanti, filigrane o affermazioni non supportate di idoneità alla produzione.

## Il suono reso visibile — Prompt di produzione

Crea **“Il suono reso visibile”**, un'esperienza scientifica interattiva rifinita e rivolta al pubblico, realizzata con **Three.js**. Trasforma il suono in splendide forme 3D reattive, esplorabili da chiunque senza conoscenze musicali o scientifiche. Fornisci un **sito web pubblicato** e un **video MP4 cinematografico di presentazione**.

L'esperienza deve evocare un museo scientifico interattivo di alta qualità: visivamente d'impatto, immediatamente comprensibile, giocosa e scientificamente rigorosa. Progetta per un pubblico ampio, su desktop e dispositivi mobili.

### PRIMA ESPERIENZA

Apri con una scultura sonora luminosa e in lento movimento su uno sfondo blu notte profondo. Usa una tipografia avorio calda, accenti ciano elettrico e viola, con tocchi di corallo discreti. Mantieni la composizione elegante e l'interfaccia essenziale.

Mostra il titolo **“Scopri cosa può fare il suono.”** Offri tre chiari punti di accesso:

- **Riproduci un suono** — avvia immediatamente un esempio audio selezionato e la sua visualizzazione.
- **Usa il mio microfono** — visualizza la voce dell'utente o i suoni circostanti.
- **Carica audio** — esplora un file audio locale.

Permetti ai visitatori di vivere qualcosa di coinvolgente con un clic. Fornisci esempi integrati affinché l'accesso al microfono e il caricamento di file siano facoltativi. Prima della riproduzione, esegui un'anteprima silenziosa chiaramente identificata.

### TRE MODI PER ESPLORARE

**1. Scultura sonora — visualizzazione artistica dell'audio**

Crea un campo scultoreo di particelle e nastri fluidi che risponda in modo uniforme all'analisi audio in tempo reale. Associa le basse frequenze a movimenti ampi, le medie frequenze ai dettagli strutturali e le alte frequenze a delicati accenti scintillanti. Lascia che il volume influenzi scala ed energia senza salti bruschi.

Fai sì che parlato, applausi, canticchiare e musica generino risposte visibilmente diverse. Etichetta questa modalità come interpretazione artistica del suono.

**2. Esploratore d'onda — comprendere il segnale**

Mostra una forma d'onda animata accanto a uno spettro di frequenza, con una presentazione spaziale opzionale. Spiega con chiarezza: la forma d'onda mostra come il segnale cambia nel tempo; lo spettro mostra il suo contenuto in frequenza.

Includi un generatore di toni interattivo con controlli di frequenza e volume chiaramente etichettati. Consenti agli utenti di confrontare un tono puro con un tono più ricco e osservarne la differenza. Usa un volume predefinito moderato, transizioni audio fluide e un comando di arresto evidente. Spiega che l'ampiezza visiva rappresenta il livello del segnale in ingresso, non l'intensità sonora fisica calibrata.

**3. Pattern di risonanza — esplorare la vibrazione**

Mostra una piastra virtuale vibrante con particelle simili a sabbia che formano pattern nodali. Fornisci diverse modalità di vibrazione realizzate con cura, esplorabili modificando la frequenza di eccitazione.

Basa i pattern su un modello documentato della piastra, con geometria e condizioni al contorno definite. Spiega che le particelle si raccolgono nelle zone a vibrazione minima. Etichetta l'esperienza come simulazione didattica e descrivine le semplificazioni. Mantieni gli effetti decorativi visivamente distinti dal modello scientifico.

### RENDI SEMPLICE LA SCOPERTA

Offri brevi inviti contestuali come **“Prova a canticchiare una nota costante”, “Batti le mani una volta”** e **“Confronta un tono basso con uno alto.”** Associali a una risposta immediatamente visibile.

Mantieni chiusi i controlli avanzati. Fornisci controlli per pausa, reimpostazione, schermo intero, sensibilità e intensità del movimento. Mantieni chiari gli stati della sorgente audio e della riproduzione nel passaggio tra le modalità. Usa una breve spiegazione accessibile per ogni modalità senza coprire la scena.

### AUDIO E PRIVACY

Usa la **Web Audio API** per riproduzione e analisi, con livellamento stabile e normalizzazione appropriata. Richiedi l'accesso al microfono solo dopo che l'utente lo ha selezionato. Elabora localmente l'input del microfono e i file caricati; non caricare, archiviare né trasmettere il loro audio. Trasforma l'esperienza in un sussidio didattico di fisica per la scuola media: nelle modalità forma d'onda e spettro, etichetta lunghezza d'onda, ampiezza e frequenza con i rispettivi termini e le unità in cinese; nella modalità risonanza, spiega le onde stazionarie e i nodi con un breve diagramma. Apri ogni modalità con un'introduzione scolastica di massimo 60 caratteri cinesi e concludila con una domanda a scelta multipla a cui rispondere direttamente nella pagina; una risposta corretta sblocca la modalità di vibrazione successiva. Mostra un indicatore del microfono sempre visibile e un chiaro controllo **“Disattiva microfono”** che rilasci il microfono. Disabilita il monitoraggio del microfono tramite gli altoparlanti per evitare il feedback. Gestisci con eleganza il rifiuto dell'autorizzazione, i dispositivi non disponibili, i file non supportati, il silenzio e l'audio interrotto.

Usa audio integrato CC0 verificato o con licenza appropriata e includi un registro delle licenze delle risorse.

### QUALITÀ VISIVA E TECNICA

Usa un rendering delle particelle raffinato, una profondità convincente, bloom controllato, animazioni fluide e movimenti di camera sobri. Mantieni testi nitidi e controlli leggibili. Evita lampeggiamenti aggressivi e rumore visivo eccessivo.

Realizza un'applicazione Three.js manutenibile, con geometrie e shader efficienti per la GPU, buffer riutilizzabili, densità di pixel limitata, conteggi di particelle adattivi e preimpostazioni di qualità. Analizza l'audio localmente affinché i visitatori simultanei non richiedano elaborazione audio lato server. Distribuisci risorse statiche ottimizzate tramite hosting compatibile con CDN.

Punta a prestazioni fluide su desktop e utilizzabili su telefoni di fascia media. Misura la frequenza dei fotogrammi effettiva, l'uso della memoria e il comportamento di caricamento sui dispositivi testati. Sospendi il rendering non necessario quando la pagina è nascosta e rilascia correttamente le risorse audio e GPU.

Supporta il tocco, la navigazione da tastiera, stati di focus visibili, controlli accessibili ai lettori di schermo e la riduzione del movimento. Fornisci un'alternativa 2D leggera quando WebGL non è disponibile. Assicurati che le informazioni essenziali siano comprensibili senza basarsi soltanto sul colore o sull'audio.

### RISULTATI DA CONSEGNARE

Pubblica il sito web completato a un **URL HTTPS** pubblico funzionante.

Produci un **MP4 H.264 scaricabile di 30–45 secondi, 1920 × 1080** con audio sincronizzato e con licenza, renderizzato dall'applicazione effettiva. Mostra un tono puro che diventa una forma d'onda, un suono più ricco che trasforma la scultura e una sequenza di pattern di risonanza. Usa una riproduzione deterministica e un'acquisizione stabile dei fotogrammi per risultati puliti.

Consegna il progetto sorgente, le risorse locali, il registro delle licenze, i modelli scientifici e le mappature di visualizzazione documentati, le istruzioni di pubblicazione e un rapporto di verifica conciso. Testa l'esperienza pubblicata su layout desktop e mobili, flussi di autorizzazione del microfono, riproduzione audio, caricamenti, cambio di modalità, accessibilità e riproduzione video. Riporta con precisione gli ambienti testati e le limitazioni rimanenti.

**NON INCLUDERE:** effetti decorativi presentati come simulazioni fisiche, richieste di autorizzazione del microfono al caricamento della pagina, caricamenti audio su un server, audio in riproduzione automatica, feedback dagli altoparlanti, controlli eccessivi, lampeggiamenti rapidi, etichette illeggibili, funzionalità segnaposto, layout mobili non funzionanti, filigrane o affermazioni non supportate di idoneità alla produzione.