Making Of — Urban Interaction Design · HvA 2026

Light Up
Connection

A full chronological account of how we turned a cold Amsterdam transit tunnel into a living, breathing canvas of light, nature, and human connection.

Stijn · Sol · Adam   ·   May 2026   ·   Zuidplein, Amsterdam

Scroll
01 — The Concept

Break the Routine,
Light Up Connection

Imagine Zuidplein on any given Tuesday morning — the beating heart of Zuidas. A sea of grey concrete, sleek glass facades and hurried footsteps. The route from the train station to the office has become a fully automated action. Earphones in, gaze fixed on a phone screen. Everyone enclosed in their own bubble.

Within the UID minor, we believe public space should be more than just an efficient passageway. We aim to break through this rigid reality — not with a physical obstacle, but with an unexpected intervention of light.

When a hurried commuter walks across Zuidplein, our interactive installation recognises them and projects a soft, moving glow of light behind and around their feet. A digital shadow that immediately lifts the anonymity of the individual.

The Goal: Social Cohesion. When the trail of flowers from one person meets the virtual grass of another, the projection responds. The paths merge in a burst of light, or a shared virtual tree suddenly grows between them. That is the precise moment at which social cohesion is created.

Project concept overview

Concept poster & project overview document

Wall projection visuals and concept sketches

Light Up Connection — wall projection visuals & installation setup sketches

Zuidplein tunnel — location research

Location research — Zuidplein tunnel, Amsterdam · Cold concrete, anonymous, purely functional

Storyboard — The Encounter

A visual narrative showing how two strangers meet in a burst of digital light. The six frames illustrate the complete arc from grey city isolation to a shared moment of connection.

Storyboard 2 — six frames of the encounter

Storyboard 2 — AI-generated visual narrative, six interaction scenes

Hand-drawn Pufferfish phase storyboard

Hand-drawn storyboard — the four emotional phases of the Pufferfish mapped out on paper

02 — First Iteration

Starting with
TouchDesigner

TouchDesigner

Our first technical explorations used TouchDesigner — a node-based visual programming environment designed for real-time interactive media. We began by building geometry that responded to audio input, exploring how organic movement could be generated procedurally.

We investigated people-tracking techniques using MediaPipe and OpenCV, studying how a camera feed could drive the visualisation in real time. These early experiments gave us a deep understanding of generative motion and the interaction between data and visuals — but also showed us the limits of what we could achieve within our timeframe.

TouchDesigner — audio-controlled geometry experiment

TouchDesigner — audio-controlled geometry, first experiments with organic form

TouchDesigner — particle instancing node network

TouchDesigner — particle instancing node network, TOP-based instancing system

Hardware & Software Setup

Hardware

  • →Projector (3000+ lumen)
  • →Laptop
  • →Webcam / depth camera
  • →Optional Arduino / ESP32
  • →Mounting system
  • →Weatherproofing

Software

  • →TouchDesigner (v1)
  • →OpenProcessing / p5.js (v2)
  • →MediaPipe / OpenCV
  • →Projection mapping

Visual Content

  • →Generative grass & flowers
  • →Tree shadows & leaves
  • →Light particles
  • →Soft organic movement
03 — Animation Design

The Four Phases of
the Pufferfish

The overarching psychological goal is "Cognitive Hijacking & The Present Moment." Our target audience suffers from continuous partial attention. By introducing the Pufferfish, we exploit Biophilic Engagement — our innate attraction to nature-like behaviour — to hijack their attention, compel them to put their phone away, and make them feel present within the urban space.

Four phases overview document

Phase overview from the project document — Peaceful · Playful · Joyful · Agitation

These eight storyboard frames show the complete interaction arc frame by frame — from the passer-by entering the tunnel on autopilot, to leaving completely changed.

Frame 01 — Phase 1 Peaceful
01 · Phase 1 · Peaceful
Frame 02 — Phase 1 Autopilot
02 · Phase 1 · Autopilot
Frame 03 — Phase 2 Surprise
03 · Phase 2 · Surprise
Frame 04 — Phase 2 Mischievous
04 · Phase 2 · Mischievous
Frame 05 — Phase 3 Joy
05 · Phase 3 · Joy
Frame 06 — Phase 3 Flow
06 · Phase 3 · Flow
Frame 07 — Phase 4 Agitated
07 · Phase 4 · Agitated
Frame 08 — Phase 4 Lasting impression
08 · Phase 4 · Lasting Impression
Phase 01 — Peaceful
The Idle State
Calm · Peaceful · Waiting
The passer-by enters in a state of sensory deprivation, sheltering in their digital bubble. The Pufferfish sleeps on the wall, breathing softly with the ambient light. It does not yet demand attention — it simply softens the environment, waiting for a human presence.

Colour: Deep ocean blues, soft violets, ecological forest green.
Speed: Very slow and breathing (4 sec in, 4 sec out).
Phase 02 — Playful
The Interruption / The Tease
Mischievous · Curious · Disruptive
Expectation Violation. The passer-by expects a static wall. The Pufferfish wakes up because of the phone's blue light. It darts into their path and tilts its head to "stare" at their screen. The absurdity of a fish reading their texts forces them to snap out of autopilot and smile.

Colour: Attention-grabbing turquoise or lime green.
Speed: Dynamic — rapid sprints followed by sudden freezes.
Phase 03 — Joyful
The Collaborative Flow
Happy · Playful · Rewarding
Gamification & Dopamine Reward. The phone is away, the passer-by is fully present. The Pufferfish celebrates and enters a collaborative dance. The tunnel bursts into warm, celebratory colours. For 30 seconds, the passer-by and the fish are co-creating a living piece of digital art.

Colour: Warm sunny yellow, magenta and glowing gold.
Speed: High and responsive, perfectly synchronised.
Phase 04 — Agitated
The Emotional Boundary
Sad · Agitated · Dramatic
The Cost of Disconnection. A clear ending underscores the bond just created. The Pufferfish throws a digital temper tantrum — instantly inflating into a massive, jagged sphere of sharp, electric spikes. The passer-by leaves the tunnel completely altered: alert, smiling, and present.

Colour: Sudden burst, then dull ash-grey.
Speed: Hectic, jittery, rapidly shrinking to a single point.

AI-generated reference renders showing what each phase should look and feel like — created to guide the visual direction of the final sketch.

Phase 2 render — fish gather around phone glow
Phase 2
Fish gather around the warm phone glow
Phase 3 render — joyful colorful energy
Phase 3
Joyful — colorful energy and bubble trails
Phase 4 render — agitated puffed-up fish
Phase 4
Agitated — puffed-up fish and red warning light
04 — First Prototype

Calibration &
Testing in the Room

After feedback from Marjolijn, we were told to focus mainly on the visualisation — it needed to look beautiful and realistic. We moved from TouchDesigner to OpenProcessing (p5.js) to gain more direct control over the look and interaction. We chose new fish designs and began testing the projection in the classroom with a live projector setup.

Below you can see the calibration process: determining the exact location where the interaction takes place so that Adam can control it via his trackpad, while Sol walks at precisely the right moment to re-enact the interaction. Stijn documented everything with photographs.

Reference — The Real Pufferfish
Real pufferfish — normal state

Normal swimming state — sleek, hydrodynamic

Real pufferfish — puffed/agitated state

Puffed / agitated state — sharp spines extended

Prototype test — standing in front of projection
Test 01
Finding the right position & scale
Prototype test — interacting with glowing orbs
Test 02
Phase 3 — interactive bubble field
Prototype test — touching the glowing ring
Test 03
Joyful ring interaction — touching the light

Director's Note

In the first video, I calibrate the location with the projector while Stijn photographs. The first two shots show me determining the exact position, so that Adam can be there on time — since he controls the interaction via his trackpad. This means I need to start walking at precisely the right moment so that we can perfectly re-enact the intended interaction. The first version was then screen-recorded and I was edited into the tunnel video. This version will later be revised: I was moving slightly too quickly compared to the video Adam had recorded on his laptop.

05 — Final Iteration

From TouchDesigner to
OpenProcessing

TouchDesigner
→
OpenProcessing · p5.js

After our initial TouchDesigner experiments, we made a deliberate pivot. TouchDesigner offered incredible generative power, but the interaction design was difficult to iterate quickly. We switched to OpenProcessing — a platform built on p5.js — which gave us immediate, browser-based interactivity and far greater control over the fish's behaviour and emotional states.

The Pufferfish sketch was built entirely in p5.js: 20 generative fish with individual personalities, four emotional phases, background ocean creatures (sharks, divers, an octopus), sea plants, plankton, bubbles, and sparkle trails — all responsive to mouse movement. The result is the most complete and expressive version of the interaction.

Final interaction — Phase 3 Joyful, colorful fish ring

Final OpenProcessing / p5.js build — Phase 3 Joyful, colorful pink and blue energy · fish forming a dynamic ring around the user

06 — Try It Live

The Pufferfish
Interaction

This is the actual p5.js sketch built for the project — running live in your browser. Move your mouse across the canvas and switch between the four emotional phases using the buttons below. Keyboard shortcuts 1–4 also work.

Move your mouse across the canvas · keys 1–4 switch phase

07 — Video Script

Shaking Up the
Urban Autopilot

Video title: "Light in the Tunnel" · Duration: 60 seconds · Tone: cinematic, transitioning from cold/isolated to magical/vibrant, ending with a playful spark. Audio: Low ambient drone shifting into dynamic, generative electronic music with organic glitch.

00:00–00:10
The Digital Cocoon
Dark, concrete Amsterdam underpass. A PASSER-BY enters — rigid gait, head bowed over glowing smartphone, over-ear headphones on. On the wall, a vague oval shape (the Pufferfish) drifts lazily in deep blue and forest green. The passer-by walks straight past it without noticing. Audio: Low, industrial city drone. Footsteps echoing hollowly.
00:10–00:22
The Interruption
Close-up of the passer-by's face illuminated by the cold blue light of their phone. Suddenly, a bright flash of turquoise light reflects on their cheek. The Pufferfish zips into their path, tilts its body and explicitly "peeks" over their shoulder at the screen. Audio: A playful, liquid digital sound. The heavy city drone begins to fade.
00:22–00:30
Breaking the Ritual
The passer-by lets out a brief, genuine laugh — the absurdity of a fish reading their texts has violated their expectations. They slide their phone into their coat pocket and pull off their headphones. The Pufferfish does a joyful flip. Turquoise fades; warm golden light pulses from its centre. Audio: A warm, melodic synth pad kicks in.
00:30–00:45
The Collaborative Dance
Wide, cinematic shot of the tunnel entirely transformed by light. The passer-by actively experiments — step forward, step back, waving at the wall. The Pufferfish moves in perfect synchrony. The wall erupts in massive expanding rings of gold and magenta, leaving sparkling digital bubble trails that map 1-to-1 to their physical movements. Audio: Music reaches its peak — joyful, uptempo generative track.
00:45–00:55
The Emotional Boundary
The passer-by reaches the tunnel exit. They break the flow, lower their hands, and take three steps toward the daylight. The Pufferfish instantly inflates into a massive, jagged sphere covered in sharp, electric neon-blue spikes — visibly angry that playtime has been cut short. The passer-by stops and looks back one last time. Audio: Music abruptly cuts. High-frequency jittery digital vibration.
00:55–01:00
The Present Mind
The passer-by steps out into bright city daylight. No phone. Chin held high, eyes scanning the sky, trees, and the city. Fully alert, smiling, and present in the world. Visual fade to black. On-screen text appears: "Break the autopilot. Reconnect with the city." Audio: Digital sounds vanish. We hear crisp Amsterdam morning birds, bicycle bells, open city wind.
Detailed video script document

Detailed video script — scene breakdown with passerby behaviour, projection behaviour and audio direction

We use light and technology not to bombard people with more data, but as a means of celebrating our shared humanity. We transform Zuidplein from a cold transit route into a canvas for playfulness, connection, and digital nature.
08 — The Team

Made by
Three Minds

Urban Interaction Design Minor — HvA, Amsterdam · Team collaboration contract signed 13 May 2026 · Project: Integrating Natural, Human, and Artificial Intelligence.

✦
Stijn
Process & Quality Control
◈
Sol
Creative Direction
⊙
Adam
Interaction & Code
Team Collaboration Contract

Team Collaboration Contract — signed 13 May 2026 · Roles, responsibilities, communication & conflict resolution

First Prototype Video

Watch the
First Iteration

▶  Watch on YouTube

First version — calibration and live interaction test · further revised in post-production