Controlli fisici e feedback esatto
I pulsanti selezionano sorgenti e filtri. Le manopole ruotano di 270° e aggiornano etichette in Hz, Q, dB o velocità di riproduzione.
Panoramica
Un segnale, due domini, una città
Fourier City trasforma concetti di elaborazione dei segnali in comportamenti visibili. La forma d’onda live mostra come cambia l’ampiezza nel tempo; lo skyline mostra dove si distribuisce l’energia in frequenza. I controlli nella scena permettono di modificare il suono e confrontare subito entrambe le viste.
L’esperienza supporta segnali generati sinusoidali, quadri, triangolari, a dente di sega, ricchi di armoniche e rumore, oltre a un MP3 incluso o selezionato dall’utente. Pitch, cutoff, gain e risonanza si modificano direttamente sul tavolo 3D, senza un menu separato.
TeamLorenzo Marinelli & Alessandro Romania
CorsoGrafica Interattiva
Stack principaleThree.js, Web Audio, Vite
Asset 3DModelli Blender originali
Principio centrale: forma d’onda e FFT analizzano lo stesso segnale post-filtro che arriva all’ascoltatore, mantenendo allineate la risposta udibile e quella visiva.
Esperienza
Un laboratorio di signal processing da attraversare
La camera usa una vista in prima persona. Il tavolo e il robot sono ostacoli fisici; quando un movimento diagonale è bloccato, il giocatore scivola lungo i bordi per mantenere fluida l’esplorazione.
WASDCammina nella città.
ShiftCorri durante il movimento.
MouseGuarda e mira ai controlli sul tavolo.
ClickSeleziona sorgenti e filtri; trascina le manopole in verticale.
SpazioMetti in pausa o riprendi il suono.
EscRilascia il pointer lock.
Forma d’onda live
Un display in vetro traccia 2.048 campioni post-filtro e parte vicino a uno zero-crossing crescente, così le forme d’onda periodiche restano visivamente stabili.
Skyline audio-reattivo
Posizione e colore identificano la frequenza; altezza degli edifici, luminosità delle linee e movimento del terreno identificano l’energia spettrale.
Robot gerarchico
Per i segnali periodici, un braccio robotico a due link indica la banda dello skyline che corrisponde al pitch selezionato e segue il tetto dell’edificio.
Pipeline audio
Un solo segnale elaborato alimenta suono e grafica
Buffer MP3 e sorgenti procedurali condividono un controller. Le forme periodiche usano oscillatori live per cambiare pitch in modo fluido; rumore e musica usano buffer in loop. Il filtro biquad selezionato viene inserito prima dell’analisi e dell’output posizionale.
MP3 o segnale generato
Oscillatore o buffer decodificato
Filtro biquad opzionale
Low-, high-, band-pass o peaking
Segnale elaborato
Unica sorgente di verità
Analizzatore temporale2.048 campioni
Analizzatore FFT70 bande logaritmiche
PositionalAudioOutput spaziale all’ascoltatore
Pitch logaritmico
Per gli oscillatori periodici, il valore normalizzato della manopola si distribuisce uniformemente sull’intervallo udibile.
f(p) = 20 × (20000 / 20)p Hz, 0 ≤ p ≤ 1
Per la musica, il pitch diventa invece una velocità da 0,5× a 1,5×; il rumore non ha un singolo pitch.
Filtri con conseguenze visibili
Il cutoff va da 20 Hz a 20 kHz, la risonanza da Q = 0,1 a 20 e il filtro peaking aggiunge gain da -18 a +18 dB.
La curva rossa sullo skyline prevede attenuazione o enfasi, mentre il punto giallo identifica il cutoff.
Città-spettro
Dai bin FFT a uno skyline animato
Una FFT da 2.048 punti viene campionata a 30 Hz e raggruppata in 70 bande logaritmiche da 20 Hz a 20 kHz. I decibel medi di ogni banda vengono normalizzati in un valore di energia comune usato da edifici, wireframe e flusso del terreno guidato da shader.
Intervallo20 Hz – 20 kHz
Bande dello skyline70
Frequenza di analisi30 Hz
Movimento senza jitter
Tassi esponenziali separati fanno reagire rapidamente gli edifici quando l’energia cresce e li fanno scendere più lentamente durante il decadimento. La stessa scala smussata guida solido e wireframe.
α = 1 - e-rΔt · salita r = 200 · discesa r = 16
Un’energia, tre canali visivi
L’energia di banda controlla altezza degli edifici, luminosità del wireframe e una texture compatta da 70 texel letta dallo shader del terreno. Il colore conserva l’identità della frequenza a ogni livello.
Animazione gerarchica
Un braccio robotico che indica fisicamente il pitch
Il braccio è una gerarchia annidata di oggetti Three.js. La rotazione della base sceglie il piano di movimento; spalla e gomito risolvono la distanza; il polso compensa per mantenere l’orientamento dello stilo. Ogni figlio eredita le trasformazioni dei giunti precedenti.
Root→Base→Spalla→Gomito→Polso→Stilo
Il pitch di un oscillatore periodico viene arrotondato alla banda più vicina. Velocità di un MP3 e rumore non rappresentano una frequenza stabile, quindi il robot torna lentamente alla posa inattiva.
Cinematica inversa a due link
La distanza del target viene limitata all’intervallo raggiungibile prima di calcolare gli angoli, evitando pose non valide quando l’edificio selezionato è fuori dal raggio esatto del braccio.
θ₂ = acos((d² - L₁² - L₂²) / (2L₁L₂))
θ₁ = atan2(y, x) - atan2(L₂sinθ₂, L₁ + L₂cosθ₂)
polso = -(θ₁ + θ₂)
Ingegneria
Mantenere reattiva la spiegazione
La scena usa tecniche di ottimizzazione in modo mirato: ognuna protegge anche la chiarezza di una visualizzazione che deve aggiornarsi continuamente insieme all’audio.
Skyline istanziato
Il grattacielo originale in Blender viene normalizzato e riutilizzato con instancing. Buffer di linee espansi mantengono ogni wireframe sincronizzato con l’edificio solido.
Buffer riutilizzabili
Typed array, buffer degli analizzatori, matrici e geometria della forma d’onda si aggiornano in place, evitando allocazioni a ogni frame.
Flusso guidato da shader
Una piccola texture RGBA porta l’energia delle bande a uno shader polare con onde in movimento, bordi Voronoi, risposta Fresnel e riflessi speculari.
Cambi di stato robusti
Richieste audio versionate ignorano callback MP3 obsolete; collisioni analitiche, recupero del pointer lock e setup audio lazy mantengono prevedibile l’esperienza.
Prossimi passi: filtri band-stop, microfono e streaming, dimensioni FFT selezionabili, controlli accessibili da tastiera, preset salvati e modalità a dettaglio ridotto per dispositivi meno potenti.
Galleria
Leggere la scena
Crediti e risorse
Realizzato come progetto di gruppo
Fourier City è stato creato da Lorenzo Marinelli e Alessandro Romania per il corso di Grafica Interattiva del Prof. Marco Schaerf presso il DIAG, Sapienza Università di Roma. I modelli OBJ del tavolo e del grattacielo sono asset originali del team, realizzati in Blender.
L’ambiente usa Night Sky HDRI 001 di ambientCG con licenza CC0 1.0. Three.js e Vite sono usati secondo le rispettive licenze open source. Il report contiene riferimenti tecnici e dettagli completi di implementazione.