Explore the Lab
A series of small creative coding experiments where I use p5.js to play with motion, sound, and interactivity, focusing on what happens when code becomes expressive.
🏒 Air Hockey
Move your paddle with the mouse to deflect the puck. Press Play to start and Pause to freeze the game.
A fun air hockey sketch where the user controls a paddle with the mouse while a left-side paddle moves automatically.
This sketch re-creates a simple air hockey experience. The puck moves across the rink with independent horizontal and vertical speeds, bouncing off the canvas edges. The player controls a custom paddle graphic on the right side by moving the mouse, while the computer’s paddle glides smoothly along the left using a sine-wave motion. When the puck collides with either paddle, its direction flips, keeping it in play and creating a dynamic back-and-forth rhythm.
📷 Pixel Cam Filter
Smile for the camera! Move your mouse left and right to adjust the pixel size.
A live webcam filter that redraws the video as circles, letting the user control the pixelation level with their mouse.
This sketch uses p5.js to transform a live webcam feed into a stylized, pixelated portrait made of circles. For each frame, the camera image is sampled in a grid, and the sketch calculates the brightness of each sample to determine the size of a magenta circle drawn in its place. This piece demonstrates live video processing, pixel-level sampling, and interactive control over visual resolution.
🫧 Bubble Popping
Click each bubble to make it disappear. Press Play to animate, Pause to freeze, and Restart to generate a new set.
A playful p5.js sketch that animates 100 drifting bubbles and lets users burst them with a click.
This interactive sketch generates 100 colorful bubbles that glide horizontally across the canvas. Each bubble is assigned a random size, color, position, and speed, giving the animation an organic, floating feel. This sketch demonstrates array-based object management, hit-testing, motion logic, and UI controls within a dynamic canvas.
🔊 Audio Reaction
Press Play to start the music, then drag the slider to change the song’s speed and watch the circles react.
An audio-reactive sketch that visualizes a song as a grid of pulsing circles, with a slider to control playback rate in real time.
This sketch uses p5.js and p5.sound to turn audio into a responsive visual pattern. A song is analyzed each frame using p5.Amplitude(), and its overall volume level drives both the size and color of the circles on screen. The slider at the top of the canvas also lets the user adjust the playback rate from 0x to 2x, directly altering both the sound and the motion of the visualization.
💥 Collision Detection
Click to activate the game. Use the arrow keys to move the circle. Touch the square to trigger a collision.
A simple sketch demonstrating real-time collision detection between a movable circle and a repositioning square.
This sketch illustrates the basics of collision detection using distance-based calculations in p5.js. The user controls a circle with the arrow keys, moving freely across the canvas. This highlights foundational concepts like keyboard input handling, movement logic, shape rendering, and geometric distance checks.
My Lab