Catalogue of Making · WSB PROCESS JOURNAL →

Catalogue of Making

Where Sounds Breathe

Kim Jaewon · 2026

Supervised by Andreas Schlegel

BA(Hons) Design Communication

LASALLE College of the Arts

Main Page

Taxi exterior · entry scene

Scroll for materials

Materials

Films and stills from Main Page

Marina Bay skyline

Marina Bay skyline

Main view of the Marina Bay area.

§3 Making · Technology

Technology Stack

Seven layers, human input to pixel out.

Stack diagram

View mode

Focus layer

Drag · orbit · Hover · highlight · Click · focus · Esc · exit

The project runs as a native desktop program, not a web app. Seven layers stack from human input down to the GPU and back to pixels. Mouse, keyboard, and webcam feed MediaPipe, which turns hand motion into twenty-one landmarks per frame. Python holds the main loop and decides what each frame should look like. ModernGL is a thin wrapper that speaks to OpenGL without getting in the way. OpenGL 4.3 runs compute shaders across SSBOs, which is where the particles actually live. The RTX 4070 Laptop GPU takes that work and paints the next frame sixty times a second. Each layer only talks to the one above and below it, so the stack stays simple to reason about.

§4 Making · Spatial

Spatial Design

Interior as container. Exterior as bridge. Taxi as threshold.

Layer

Drag to orbit · scroll to zoom

Spatial grammar

Every interior is a container; the exterior is the bridge. The taxi is the threshold between. Its glass is an active surface, not mere cladding, that splits the experience into what approaches and what opens up. Bugis is built as layered glass because its cultures are transparent to each other. East Coast Park is built as a canopy because the district itself is a roof of leaves. Each interior follows its own spatial logic, but all share the same grammar of approach, threshold, and interior volume. Future districts will inherit the rule and break it where the district demands. The grammar is not a template but a starting point. Singapore has many skins. This project shows three of them and leaves space for more.

Bugis Interior

Glass architecture · religious coexistence

Scroll for materials

Materials

Films and stills from Bugis

Landscape overview

Full interior landscape of Bugis.

Sound

Field recordings and touch response from Bugis

Buddhist temple

Interior ambience of a Buddhist temple.

0:00 / 0:00
  • Buddhist temple
  • Crosswalk beeps
  • Bugis Junction interior
  • Bugis Junction exterior
  • Bugis+ interior
  • Street ambience I
  • Street ambience II
  • Hawker centre
  • Heji Lane jazz
  • Hindu temple
  • Pedestrian ambience
  • Street walk
  • Thong Hood Cho temple
§6 Making · Fluid

Fluid Simulation

PIC/FLIP inside an axis-aligned bounding box.

PIC/FLIP · AABB

Particles: 50000

Force

View

PIC/FLIP is a hybrid. The Particle-in-Cell method interpolates velocities through a grid and smooths away noise; the Fluid-Implicit-Particle method keeps velocity on the particles themselves and preserves motion. A single blend parameter, here a slider, chooses how much of each. David Li’s WebGL FLIP was the reference. Its clarity was too useful to rewrite from scratch. The extension specific to this project is an axis-aligned bounding box. Bugis needs a room that holds its water; containers need walls. Particles reflect at the six faces, and the grid sampler clamps at those same faces so the fluid behaves like it lives inside a building rather than an infinite plane. Quiet audio lets the fluid settle. A strong beat lifts the whole volume at once.

East Coast Park Interior

Forest at dusk · bioluminescent

Scroll for materials

Materials

Films and stills from East Coast Park

Full landscape

Complete interior landscape of ECP.

Sound

Field recordings and touch response from East Coast Park

Gravel run

A group running together over a gravel path.

0:00 / 0:00
  • Gravel run
  • Distant horn
  • Airplane landing
  • Eagle call
  • Breakwater waves
  • Jungle at night
  • Koel call
  • Hand splash
  • Otter peeps
  • Seagulls
  • Tropical birds
  • Engine drone
  • Wind storm
§8 Making · Audio

Audio System

FFT → bass / mids / treble → six visual forces.

Audio system

0.0 / 0.0

View

Audio enters as waveform, exits as force. An FFT splits each frame into three bands. Bass drives radial pulses, mids drive surface waves, treble drives ripple sparks. Recording is two-layered on purpose. An always-on ambient bed of the district plus a distinctive layer for foreground events. Zone-based mixing decides which recordings are audible according to where the visitor stands inside the world. One flag, “always-audible”, is reserved for the East Coast Park waves. The sea is part of ECP whether you are near it or not. Bugis keeps its prayer calls zoned, following the geography of the block, so coexistence is audible, not explained. The system runs on twenty-six recordings total, thirteen per district. Each was captured on site with a portable recorder and trimmed to loop without a seam.

§9 Making · Visual

Visual Languages

Three languages, one rule each. Bugis · glass. Main · hologram. ECP · bioluminescence.

§9.1 Prismatic Crown Glass

Prismatic crown glass

Drag to rotate · scroll to zoom

Why glass for Bugis. Four cultures transparent through each other. Chromatic dispersion mirrors audio frequency bands; the colour you see has been bent by the sound playing at that moment.

§9.2 Retro Rim-Light Hologram

Holographic skyline

Mouse side sets sweep direction

Hologram as medium for the invisible. Sound has no form. Holograms exist only as light. The language declares the rule.

§9.3 Bioluminescence

Bioluminescence

Mouse stirs (vortex)

Living light. Fireflies, deep sea, moss. The palette stays cool, intentionally opposite the Bugis warm glass.