Creative Coding
A collection of interactive p5.js experiments exploring visual art, sound, and machine learning.
A collection of interactive experiments created during my creative coding journey. Each project explores different aspects of visual programming, from basic drawing to machine learning-powered interactions.
LightsUp
An interactive ray casting simulation with 300 rotating mirrors. Light rays bounce and reflect, creating mesmerizing patterns that follow mouse movement.
Features:
- 300 rotating mirror segments
- Real-time ray casting with multiple bounces
- Blend modes for visual effects
▶ Play on p5.js Editor
Process
1. Cast rays blocked by walls
2. Walls become mirrors (2 bounces)
3. Rotating mirrors
4. Hide mirrors, show intersections
5. More mirrors (3 bounces)
6. Color and blend modes
LightClock
A mesmerizing color clock using HSB color mode. Rotating rays create an ever-changing display of colors.
Features:
- HSB color mode animation
- Blend modes (DIFFERENCE, SCREEN)
- Rotating ray patterns
▶ Play on p5.js Editor
HouseBeats
An interactive music visualizer with slider controls. Drag the sliders to control the visual grid.
Features:
- Horizontal slider controls circle size
- Vertical slider controls grid density
- Click on slider to randomize colors
▶ Play on p5.js Editor
Trajectory of Light Box
A 3D WebGL light box simulation. Mouse position controls light direction, creating dynamic shadows and highlights.
Features:
- WebGL 3D rendering
- Directional and ambient lighting
- Click to change color scheme
- Mouse controls light direction
▶ Play on p5.js Editor
RockPaperScissors
A rock-paper-scissors game powered by ml5.js hand pose detection. Make a fist to start, then play against the computer with real hand gestures.
Features:
- ml5.js hand pose detection via webcam
- Gesture recognition (rock, paper, scissors)
- Visual feedback with countdown
▶ Play on p5.js Editor
Snorlax
A catch-the-falling-objects game with physics. Use a Pokeball to catch falling Snorlax sprites before they escape.
Features:
- Physics simulation with collision detection
- Mouse-controlled Pokeball catcher
- Bouncing sprites with velocity
▶ Play on p5.js Editor
Self-Portrait
A stylized self-portrait created entirely with p5.js drawing primitives.
Features:
- Built with arcs, curves, triangles
- Custom color palette
- Stylized illustration technique
▶ View on p5.js Editor
Credits
All projects created using p5.js and ml5.js.
Get in Touch
Have questions or want to collaborate? Feel free to reach out!