Interactive 3D & Creative Coding

2024–2026 ↗ Live 3D Site

A collection of experiments across WebGL, physical computing, and creative algorithms. It includes a spatial 3D portfolio where you explore works by moving through a virtual world, alongside hardware prototypes and web games that bridge the gap between code and interactive environments.

A portfolio is already a strange object: a curated self, arranged for a viewer. Making it spatial asks a harder question — what does it feel like to be inside someone's work rather than looking at it?
Software
Three.js, WebGL, HTML/JS, p5.js
Hardware
ESP32, DC/Servo Motors, 7-Segment
Deployment
Vercel, Wireless ESP-NOW
My Role
Design, Development, Wiring

The 3D Portfolio

Most portfolios are lists. Grids of thumbnails that ask you to click, scan, judge. The interaction model is the same as an online shop — browse, filter, select. The 3D portfolio inverts that. Instead of a viewer selecting work, the viewer walks through a world that the work inhabits. Discovery is spatial.

Navigation & Mechanics

The viewer moves through a 3D environment using standard WASD/arrow key controls. The world is small and deliberate — not a sprawling game level, but something closer to a gallery space. Each project lives inside a ring. Standing on or near a ring triggers that project's information, acting as a physical threshold for entering a piece of work. Walking away closes it.

Visual Language

The world uses a dark, atmospheric rendering style — deep purples, volumetric light, soft glow on the rings. The aesthetic sits somewhere between a late-night planetarium and a contemplative game environment. It is designed to feel slow on purpose.

Creative Coding & Physical Prototyping

Beyond the browser, my coding practice extends into physical computing and logic-driven web experiments. Bridging the digital and physical realms often reveals how brittle code actually is when it meets gravity, friction, and network latency.

AQI Reactive Art

A physical installation fetching real-time Air Quality Index (AQI) data over WiFi.

Using an ESP32, a servo, and a DC motor, the physical movement speed maps directly to the live environmental data of different cities. The worse the air, the more frantic the motion.

ESP-NOW Timers

A hardware prototype featuring three 7-segment displays driven by dual ESP32 microcontrollers.

The boards communicate wirelessly via the ESP-NOW protocol, bypassing traditional WiFi networks to maintain a perfectly synchronized 5-minute countdown.

WordPerfect

A multiplayer web-based word game built entirely in a single HTML file.

It served as an exercise in extreme constraint and rapid iteration, taking direct user feedback to refine the game loops and logic on the fly without complex backend architecture.

What It Taught Me

Spatial Interfaces Demand Attention Building the 3D world made it very clear that spatial interfaces are arguments about how attention works. A flat grid asks for rapid scanning. A 3D world asks for dwelling.
The Performance Tax WebGL on mobile is hostile. The final version makes significant compromises to run well across devices — lower poly counts, simplified shaders, reduced draw calls. The tradeoffs are always between fidelity and reach.
Hardware is Unforgiving Working with ESP32s and motors taught me that code that works perfectly in a simulation will inevitably fail when a wire is loose or a motor draws too much current. It grounds algorithmic thinking in physical reality.

I'm not sure a 3D portfolio is the right answer for every designer. But building it, alongside these physical prototypes, permanently changed how I think about the default assumptions baked into the screens and templates we use every day.