Color Mixing Game
Overview
Color Mixing Game is an interactive web-based painting tool I designed and built with p5.js and SVG. Players mix colors on a digital palette by dragging orbs together, then apply those colors to fill shapes in an illustrated scene. I wanted the experience to feel closer to mixing real paint while introducing players to basic color theory.
How to Play
I kept the interactions simple: two areas work together, a palette on the right for mixing, and an illustrated canvas on the left for painting.
- Drag two color orbs together on the palette to mix a new color.
- Double-click any orb to select its color.
- Click a shape on the canvas to fill it with the selected color.
- Click Clear to remove all mixed colors from the palette.
- Click Save to download your finished artwork as a PNG.
- Click Restart to reset everything and start over.
Design
Visual Style
I designed the illustration from the start as a composition of geometric shapes, built to serve as a coloring book for color experimentation. At the time, SVG code was written directly into the page, which made the file size grow quickly. Working within that constraint, I went through several rounds of simplification, arriving at the flat, pared-down scene in the final version.
Layout & Architecture
I split the interface into two halves. An SVG illustration on the left serves as the canvas, and a p5.js sketch on the right acts as the palette. The two systems run separately but share one color state. Colors mixed on the p5.js side become the fill values applied to SVG shapes on click.
Color Mixing
I used p5.js's lerpColor() to interpolate between orbs, but RGB math doesn't always match real pigments. I made targeted adjustments through testing so the mixing behavior feels intuitive rather than mathematically correct.
Closing the Loop
I rounded out the game with three buttons: Clear, Save, and Restart. Small pieces, but they're what make the experience feel complete.
Reflection
This project made me rethink how SVG should be planned and applied. Writing long SVG code directly into the page bloated the file and slowed the workflow, but going through that gave me a more thoughtful approach in later projects. The other limitation is responsiveness. The canvas was built for desktop only, without accounting for mobile screen sizes or touch-based dragging. Revisiting it today, responsive design would be my first priority.