Creative Coding

This is the capstone. You're going to combine everything — canvas, Three.js, animation, interaction — with one new ingredient: your microphone. The Web Audio API lets you capture audio in real-time and extract frequency data from it. Feed that data into 3D visuals and you get art that responds to your voice.

Heads up: These playgrounds request microphone access when you hit Run. Your browser will show a permission prompt. Audio data stays local — nothing is sent anywhere. Hit Stop to release the mic.

The Web Audio API

The browser can capture your mic with navigator.mediaDevices.getUserMedia(). Feed that stream into an AudioContext with an AnalyserNode, and you get an array of numbers representing the frequency spectrum — updated every frame. Low indices are bass, high indices are treble. Each value goes from 0 to 255.

Speak or clap and watch the bars jump. The left side is bass, the right side is treble. Try changing fftSize to 512 for more detail (256 bins) or 64 for fewer, chunkier bars.

3D frequency bars

Same concept, now in Three.js. An array of boxes whose height is driven by the frequency data. Lighting and perspective make it feel like a real object you could walk around.

The camera drifts gently so you see the 3D depth. Try changing barCount and fftSize together (fftSize must be a power of 2). Make the bars wider, or arrange them in a circle instead of a line using Math.cos/sin on the position.

The reactive blob

Here's where it gets fun. Take a sphere, access its individual vertices, and push each one outward based on a frequency value. When it's quiet you get a smooth sphere. When you speak or clap, it deforms into an organic, spiky shape — like a living creature reacting to sound.

Speak loudly and watch it spike outward. Whisper and it smooths back. Try changing displacement multiplier from 0.6 to 1.5 for more dramatic deformation. Switch wireframe to true for a completely different aesthetic. Try adding + Math.sin(i * 0.5 + t * 2) * 0.05 to the displacement for an organic idle animation even when silent.

Particles

A cloud of points arranged in a sphere. Volume drives expansion — loud sounds push particles outward, silence lets them drift back. Individual particles wiggle based on their frequency bin, giving the whole thing an alive, breathing quality.

The particle cloud breathes with your voice. Try increasing count to 2000 for a denser cloud. Change expand multipliers for more or less dramatic expansion. Can you make the particles spiral outward instead of expanding uniformly?

Putting it all together

The finale: the reactive blob at the centre, surrounded by a particle cloud, with colour shifts driven by frequency range and a gentle camera orbit. Everything you've learned across all ten lessons — canvas, drawing, transforms, animation, interaction, pixels, WebGL, Three.js, and now audio — in one piece.

Speak, clap, play music — the blob deforms, particles expand, colours shift between warm and cool, the light pulses, and the fog lifts. This is creative coding: using everything you've learned to make something that feels alive. Change the fog density, swap the blob material to wireframe: true, make the camera orbit faster, add a second blob. It's your canvas now.