In March 2025, we reached out to Nanyang Technological University audio engineering professor Gan Woon Seng, director of the Smart Nation Lab, and senior engineer Santi Peksi to understand the science of noise. Prof Gan and Ms Peksi had recently conducted extensive research on inter-floor noise in HDB settings, alongside their broad studies in sound engineering.

Noise is perceptual

A key takeaway from our consultations with Prof Gan and Ms Peksi was that perceived noise is often quite different from actual noise. Several factors affect this – for example, line of sight matters. If you cannot see the source of a noise, you often perceive the noise as being softer and farther away.

A screen grab of a Zoom call with Prof Gan.
Prof Gan explaining sound masking.
Ms Peksi writing on a whiteboard with a marker.
Ms Peksi explaining data concepts to us using a whiteboard on one of our trips to NTU.

Another factor affecting perceived noise is psychoacoustics, a group of metrics that researchers formulated to measure how annoying a sound is. For instance, 70db of the sound of a waterfall is far more pleasant than 70db of traffic noise, even though both are the same volume. Our article focuses on two types of psychoacoustics: sharpness (measured in acum) and roughness (measured in asper).

An animation of lines shifting in shape as the “sharpness” value increases.
Sharpness
An animation of lines shifting in shape as the “roughness” value increases.
Roughness

We also learnt about noise mitigation, such as how natural barriers like trees don’t just block sound, but also mask it. Masking is when a sound covers up other unwanted sounds in the environment. One house we observed was only 30m from an MRT track, with large trees in between. When surveyed, the occupants were mostly unbothered by the train noises, which were more muted than expected. The rustling of leaves and chirping of birds in the trees dampened the sounds.

All these factors would later come into play during our analysis. When we recorded the traffic noise in each location, we also took note of contextual information like line of sight and environmental features that could affect noise quality.

Our set-up and rules for data collection

Prof Gan and Ms Peksi advised us on the scope and methods of data collection. They narrowed our scope to focus on collecting traffic noise, as it is a more permanent fixture of urban life than temporary sources of noise like construction works. With their guidance, we chose households with these conditions:

• Road and train traffic: Homes where the source of noise was directly visible from a window, and at a distance ranging from 17m to 85m (adjusted for height)
• Air traffic: Homes located 1.1km to 2.3km from airbases or airports

An excel sheet filled with rows and columns of data showing locations, photos of houses and the main source of noise for each entry.
A sample of participant data with the latitude, longitude and images blurred out for privacy.

To ensure high-precision data, Prof Gan and Ms Peksi provided a Class 1 sound level meter – a SQobold recorder and a GRAS 146AE microphone. The sound level meter was mounted on a stand at window height, positioned approximately 10cm from an open window facing the noise source. Occupants were advised to vacate the recording room or remain silent with the doors closed for the duration of the session.

In May, we reached out through various channels to find participants across the country. In June and July, we visited each location and recorded three to six hours of sound, accumulating more than 100 hours of audio data. Each recording included at least two hours during peak periods: morning and evening peak periods for road and rail, and afternoon take-off periods for military airbases.

Ms Peksi screwing the sound meter to a stand.

Ms Peksi demonstrating the set-up for the Class 1 sound level meter.

4 people in a sound-insulated studio.

The team being shown around the facilities in NTU.

Ms Peksi explaining a key part of the sound meter.

Ms Peksi screwing the sound meter to a stand.

Ms Peksi demonstrating the set-up for the Class 1 sound level meter.

The sound meter on the tripod facing the road from an open window

A set-up facing road traffic.

The sound meter on the tripod facing up from an open window

A set-up facing the direction of an airbase.

The sound meter on the tripod pointing down at the road from an open window

A set-up facing a road.

Under Prof Gan and Ms Peksi’s advice, we also recorded information like the distance of the noise source to the window and whether there were any barriers, such as trees. Additionally, we took a photo of the noise source from the window of each house if it was visible, and found satellite imagery for each site in order to study the line of sight from the window.

Narrowing 100 hours of audio down to 38 noise events

Using proprietary analysis software and Python, Ms Peksi helped us process “A-weighted” decibels, or dBA – the frequencies the human ear is most sensitive to. She divided the recordings into one-hour segments, analysed the frequency graphs and hourly average decibel levels, and provided the data for our graphs.

From those 100 hours, she helped us isolate more than 1,000 of the loudest noise events, and analysed the psychoacoustic values for each specific event.

We manually listened through the ones with significant psychoacoustic values, eventually picking out 74 distinct traffic sounds. We labelled each of their noise types in our dataset.

We plotted these noise events in scatter plot charts with three combinations of x and y axes using their decibel, roughness and sharpness values.

We further narrowed the 74 sounds down to 38 noise events that most helped us demonstrate psychoacoustics.

The scatter plot charts helped us more accurately assess if roughness and sharpness values are affected simply by volume. They also helped us find patterns and outliers in the data. Explore the scatter plot charts of the 74 noise events below, and filter out any noise types by clicking on the legend.

Decibel v Sharpness

Loading data…

Decibel v Roughness

Loading data…

Roughness v Sharpness

Loading data…

Visualising psychoacoustic data

A significant challenge was in giving form to abstract concepts like sharpness and roughness. We experimented with a range of visual mock-ups, from noise textures to shapes of varying spikiness. Eventually, one of our editors, Xaquin, nailed it, creating a graphical sound texture with three visual parameters.

A screenshot of Xaquin with his tongue out, holding up a sketch in a notebook.
Xaquin doing a funny face when we requested a screen grab of his sketch for our reference.

Sharpness Represented by wavelength width. The narrower the wave, the more piercing the sound, with unpleasant high frequencies.
Roughness Represented by line brokenness. As the sound becomes more scratchy and grating, with fast and irregular changes, the smooth sine waves become more jagged and broken, with more contrasting stroke widths.
Decibels Represented by the vertical spacing between the lines.

A photo of intern Azhari working on the creative coding to visualise psychoacoustics data on two computer monitors, surrounded by Post-its with scribbles on them.
The process of iterating the visualiser, surrounded by Post-its with tweaks, edits and physics notes.

The motion of these textures was inspired by 1950s movie title designer Saul Bass, who was known for his thick lines and choppy, rhythmic motions.

The aim was to capture not just the essence of how the noise feels, but also the beauty of sound energy. We prototyped with p5.js and spent hours refining the parameters: spacing, speed, whether the values increased logarithmically, maximum and minimum values and stroke width. Try changing the values yourself with the visualiser below!

Our custom p5 engine renders waves as disjointed segments. This snippet shows how we calculate the “shattered” look of the waveform.

1 
// roughness.js: Procedural generation of wave segments
2 
function drawDisjointedWave(p, accum, yPos, waveIndex, numWaves, wavelength, props, xShift = 0) {
3 
  p.push();
4 
  p.translate(xShift, 0);
5 
  p.randomSeed((1 + waveIndex) * 24); // Consistency while scrolling
6 
  let xCursor = 0;
7 
  while (xCursor < totalWidth) {
8 
    const thickness = p.random([upperBound, lowerBound]);
9 
    const gapBase = gapCompute * cachedBlend;
10 
    let gap = p.random() > 0.7 ? 0 : gapBase;
11 
    // Drawing each "segment" of the shattered wave
12 
    drawWaveSegment(startX, initialStartX, segmentLength, yPos, thickness, waveHeight, ...);
13 
    xCursor += Math.max(segmentLength, thickness * 2) + gap;
14 
  }
15 
  p.pop();
16 
}

Real-time audio-visual sync

We used Howler.js integrated with the Web Audio API (AnalyserNode) to create a reactive feedback loop that bridges the gap between sound and vision.

• Frequency analysis: As the audio plays, we extract raw frequency data in real time. To prevent visual “jitter” or random movements, this raw data is processed and linked to Svelte’s Tween utility for a final smooth visual rendering.

• Real-time frequency extraction: The core of this feedback loop happens inside the updateAmplitude function in the p5 component. The AnalyserNode captures current sound intensities, which are then mapped to a reactive distance variable.

1 
// P5.svelte
2 
const updateAmplitude = () => {
3 
  if (!analyser) return
4 
  // 1. Get current sound intensities as a Byte array
5 
  analyser.getByteFrequencyData(dataArray)
6 
  // 2. Average the intensities across the frequency spectrum
7 
  let sum = 0
8 
  for (let i = 0; i < dataArray.length; i++) sum += dataArray[i]
9 
  const average = sum / dataArray.length
10 
  // 3. Map the average volume to a state variable 'distance'
11 
  // (capped at 2 for visual stability)
12 
  distance = Math.min(average / 128, 2)
13 
  // 4. Continuously loop to keep visuals in sync with the audio
14 
  animationId = requestAnimationFrame(updateAmplitude)
15 
}
16 
}

We fed the 38 noise events chosen into the visualisers and carefully choreographed them into a single interactive scrolly. Drawing from the Saul Bass inspiration, we designed the sequence to look graphical but also have squeezes, swirls and bold zooms reminiscent of mid-century whimsy.

Screen recordings of Saul Bass opening animations for the movie “The Man with the Golden Arm”
Clips from Saul Bass’ movie titles.
Scrolling down the article triggers the transitions we designed.
Screen recordings of the page experience.

Showcasing the houses’ soundscapes

We also analysed each traffic type by diving into the soundscapes of the households. We curated these in different time resolutions:

• Video clip of the moment a traffic noise hits a household.
• One-hour decibel graph of the same representative house.
• Ten-minute slices of the graphs of houses of the same traffic type.

Screen recordings of the webpage being scrolled, showing the household’s data presentation.

This three-layered presentation gives a fuller picture of the reality of living with traffic noise. It reveals several patterns and observations: While both aircraft and train noise are cyclical, repeating every once in a while, aircraft noise creates more dramatic spikes in volume than train noise. Meanwhile, road noise is more erratic, featuring a messier assortment of sirens, horns and brakes. The selection of examples to showcase for the household data was a laborious process, as we had to manually listen to hours of footage to pick out exact moments and specific 10-minute slices.

4 people looking at their computers.

The team in the newsroom, sifting through the audio recordings and selecting suitable cuts.

A person shifting items in a room for filming.

The team shifting items in a scene around for the ideal composition in one of our filming locations.

An iphone and a mic on stands as part of the recording set-up.

Our set-up in another location.

5 people relaxing on a sofa.

The team waiting in a different room while the audio and video recording ran.

A selfie with 5 members of the team smiling with prawn noodles on the table.

Lunch before the filming.

We filmed a few homes to provide a relatable, human entry point to our more abstract data. We also integrated the same psychoacoustic visualiser into the videos, driven by the actual acum and asper data of the moment. This unified the separate segments and allowed us to envisage the technicalities of physics and sound engineering with science-fiction flair.

A clip from a video in the article, with a sofa showing visual distortion effects corresponding to the psychoacoustics data of the sound in that video.