Physical controls, exact feedback
Buttons select sources and filters. Knobs rotate through 270° and redraw Hz, Q, dB, or playback-rate labels as they move.
Overview
One signal, two domains, one city
Fourier City turns signal-processing concepts into visible behavior. The live waveform answers how amplitude changes over time; the skyline answers where energy is distributed across frequency. In-world controls let visitors change the sound and compare both views immediately.
The experience supports generated sine, square, triangle, sawtooth, rich-harmonic, and noise signals, plus a bundled or user-selected MP3. Pitch, cutoff, gain, and resonance are changed directly on the 3D desk rather than through a separate menu.
TeamLorenzo Marinelli & Alessandro Romania
CourseInteractive Graphics
Core stackThree.js, Web Audio, Vite
3D assetsOriginal Blender models
Core principle: the waveform and FFT analyse the same post-filter signal that reaches the listener, so the audible and visual responses stay aligned.
Experience
A signal-processing lab you can walk through
The camera uses a first-person viewpoint. The table and robot are physical obstacles, while blocked diagonal movement slides along their edges to keep exploration fluid.
WASDWalk through the city.
ShiftSprint while moving.
MouseLook and aim at desk controls.
ClickSelect sources and filters; drag knobs vertically.
SpacePause or resume the active sound.
EscapeRelease pointer lock.
Live waveform
A glass display plots 2,048 post-filter samples and begins near a rising zero crossing so periodic waveforms remain visually stable.
Audio-reactive skyline
Position and hue identify frequency; building height, line brightness, and ground motion identify spectral energy.
Hierarchical robot
For periodic signals, a two-link robotic arm points to the skyline band matching the selected pitch and follows that building’s roof.
Audio pipeline
One processed signal drives sound and graphics
MP3 buffers and procedural sources share one controller. Periodic waveforms use live oscillators for smooth pitch changes; noise and music use looping buffers. A selected biquad filter is inserted before analysis and positional output.
MP3 or generated source
Oscillator or decoded buffer
Optional biquad filter
Low-, high-, band-pass, or peaking
Processed signal
Shared source of truth
Time analyser2,048 waveform samples
FFT analyser70 logarithmic bands
PositionalAudioSpatial listener output
Logarithmic pitch
A normalized knob value maps evenly across the audible range for periodic oscillators.
f(p) = 20 × (20000 / 20)p Hz, 0 ≤ p ≤ 1
Music instead maps pitch to a playback rate from 0.5× to 1.5×; noise has no single pitch.
Filters with visible consequences
Cutoff spans 20 Hz to 20 kHz, resonance spans Q = 0.1 to 20, and the peaking filter adds gain from -18 to +18 dB.
The red skyline curve predicts attenuation or emphasis while a yellow marker identifies cutoff.
Spectrum city
From FFT bins to an animated skyline
A 2,048-point FFT is sampled at 30 Hz and grouped into 70 logarithmic bands from 20 Hz to 20 kHz. Mean decibels in each band are normalized into a common energy value used by buildings, wireframes, and the shader-driven ground flow.
Frequency range20 Hz – 20 kHz
Skyline bands70
Analysis rate30 Hz
Motion without jitter
Separate exponential rates make buildings react quickly to rising energy and fall more slowly during decay. The same smoothed scale drives the solid building and its colored wireframe.
α = 1 - e-rΔt · rise r = 200 · decay r = 16
One energy value, three visual channels
Band energy controls building height, wireframe brightness, and a compact 70-texel texture sampled by the ground shader. Color preserves frequency identity across every layer.
Hierarchical animation
A robot arm that physically points to pitch
The arm is a nested Three.js hierarchy. Base yaw chooses the movement plane; shoulder and elbow solve reach; the wrist compensates to preserve stylus orientation. Every child inherits the transformations of the joints above it.
Root→Base yaw→Shoulder→Elbow→Wrist→Stylus
Periodic oscillator pitch is rounded to the nearest skyline band. MP3 playback rate and noise do not represent one stable frequency, so the robot returns smoothly to its folded inactive pose.
Two-link inverse kinematics
The target distance is clamped to the reachable interval before the joint angles are solved, preventing invalid poses when the selected building lies outside the exact arm radius.
θ₂ = acos((d² - L₁² - L₂²) / (2L₁L₂))
θ₁ = atan2(y, x) - atan2(L₂sinθ₂, L₁ + L₂cosθ₂)
wrist = -(θ₁ + θ₂)
Engineering
Keeping the explanation responsive
The scene uses performance techniques selectively: every optimization also protects the clarity of a visual explanation that must update continuously with audio.
Instanced skyline
The original Blender skyscraper is normalized and reused with instancing. Expanded line buffers keep each wireframe synchronized with its solid building.
Reusable buffers
Typed arrays, analyser buffers, matrices, and waveform geometry are updated in place to avoid per-frame allocations.
Shader-driven flow
A small RGBA texture carries band energy to a polar ground shader with traveling waves, Voronoi edges, Fresnel response, and specular highlights.
Resilient state changes
Versioned audio requests ignore stale MP3 callbacks; analytic collisions, pointer-lock recovery, and lazy audio setup keep the experience predictable.
Next steps: add band-stop filters, microphone and streamed sources, selectable FFT sizes, keyboard-accessible controls, saved presets, and lower-detail modes for weaker devices.
Gallery
Reading the scene
Credits and resources
Built as a joint course project
Fourier City was created by Lorenzo Marinelli and Alessandro Romania for the Interactive Graphics course taught by Prof. Marco Schaerf at DIAG, Sapienza University of Rome. The table and skyscraper OBJ models are original team assets made in Blender.
The environment uses Night Sky HDRI 001 from ambientCG under CC0 1.0. Three.js and Vite are used under their published open-source licenses. Full technical references and implementation details are listed in the report.