← Back to Portfolio

Interactive Prototype — Media, Motion & the Body

A three-module IXD exploration: turning hidden circuits into visible interaction language, using sound as input with visuals as feedback, and mapping real-world touch into real-time digital output.

Role: Hardware + creative-coding prototyping Tools: Copper tape, Makey Makey, p5.js, p5.sound, WebGL
Open P3
Makey Makey drum kit — copper foil touch pads mapped to p5.js WebGL visuals

TL;DR

Problem:
How can hidden electronic circuits and invisible data (sound, touch) become expressive, visible interaction?
Role:
Individual creative-coding and physical prototyping
Tools:
Copper tape, conductive thread/fabric, LEDs, Makey Makey, p5.js, p5.sound, WebGL
Timeline:
3 modules — circuits → sound-reactive visuals → touch-to-digital output
Key Decisions:
Use real conductive materials for tactile input; p5.js for real-time visual feedback; Makey Makey as analog-to-digital bridge
Result:
A drum machine driven by copper-foil touch pads, with 3D WebGL explosions reacting to each hit — combining physical craft with digital expression.
Module 1 — Circuits & Formstorming

Copper Tape, LEDs & Conductive Materials

Explored copper tape, conductive thread, and conductive fabric to build simple circuits. The goal: make the normally hidden wiring and connections visible, turning electronic circuits into a visual and interaction language.

Activity 1 — Copper Tape Circuits

Simple circuit with copper tape and LED sticker Copper tape + conductive fabric LED circuit LED stickers glowing in a heart circuit LED as a glowing window in a house design Christmas tree design with copper tape Blender icon with copper tape and blue LED Printing Pod design with LEDs off Printing Pod design with LEDs on

Activity 2 — Affordance-Based Interaction Patterns

Press a button to call security Door handle can open a door Press to get hand sanitizer Hand flipping a light switch LED placement on clothes using conductive material Three circuit design ideas with LEDs

Final — Wearable & Non-Wearable Circuits

Wearable: Smart Cycling Helmet

Conductive wires integrated into the helmet. The buckle doubles as a switch — fastening it completes the circuit and activates the headlight automatically.

Smart cycling helmet with automatic lighting system

Non-Wearable: Phone Holder Alert

A phone holder with an integrated red-light alert. Placing the phone activates a visual reminder to reduce screen time — behavior modification through environmental cues.

Phone holder with red light feedback for behavior modification
Module 2 — Sound & Visualisation

Sound as Input, Visuals as Feedback

Collected 25 sound recordings to build a personal sound library, then created 25 real-time sound visualizations in p5.js. The module culminated in an interactive audio-reactive web header.

Activity 1 — Sound Library (25 recordings)

Ambient, environmental, synthesized, and recorded audio — from bicycle chains and subway sounds to synth arpeggios and boiling water.

Sound of a bicycle chain Keypad sound Sequence of synthesizers The subway pulls in Boil water sound Sounds of fries

Activity 2 — 25 Sound Visualizations (p5.js)

Each sketch maps audio amplitude or frequency to visual output: waveforms, particle systems, 3D shapes, spectral analyzers, radial equalizers, and more. Try V1 live →

Final — Rainbow Bloom: Interactive Audio Web Header

An audio-reactive header designed for a portfolio homepage. Sound drives colour and shape in real time. Try V2 live →

Rainbow Bloom — sound-reactive visual header
Module 3 — Touch-to-Digital

Makey Makey & Real-Time Digital Output

Mapped analogue-world touch (copper foil, conductive materials, Makey Makey) into real-time p5.js visuals. Explored 50 experiments across two activities, then built a final drum machine.

Activity 1 — p5.js Experiments (25)

Bouncing shapes, soundboards, 3D cubes, particle systems, mini-games — all driven by keyboard or Makey Makey input. Try V3 live →

Bouncing shape reacting to keyboard input Interactive mini-game with player movement 3D rotating cube controlled by keyboard Piano-like experiment with sound keys Particle system with gravity controlled by arrow keys Makey Makey experiment with conductive materials

Activity 2 — More Experiments (25)

Bouncing shape reacting to keyboard input Interactive game with random shapes 3D bouncing ball simulation Reaction-based game using Makey Makey 3D shape responding to Makey Makey inputs Debugging and testing Makey Makey interactions

Final — Makey Makey Drum Machine

Copper foil pads wired through Makey Makey trigger drum sounds (kick, snare, hi-hat, clap, crash) and 3D WebGL explosions in p5.js. Each touch creates a unique colour burst and sphere pulse. Try V4 live →

Final drum kit with copper foil touch pads
← Back to Portfolio