Color Mixing Game
Overview
Color Mixing Game is an interactive web-based painting tool 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. The project explores how digital color interaction can feel closer to mixing real paint, while introducing players to basic color theory.
How to Play
The game runs on simple mouse interactions, with two areas working 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
The illustration was designed 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 seen in the final version.
Layout & Architecture
The interface is split 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
New colors are generated by interpolating between two orbs using p5.js's lerpColor() function. But strict RGB math doesn't always match how real pigments behave, so I made targeted adjustments through testing and iteration. For example, blending blue (0, 0, 255) and yellow (255, 255, 0) by the numbers produces a muddy gray instead of green. To fix this, I overrode that single case so blue and yellow always produce green. The drag-to-mix interaction follows the same intent, echoing the physical act of blending paint on a real palette.
Closing the Loop
The game runs on three buttons: Clear, Save, and Restart. Their names speak for themselves, but these small pieces are what make the game feel complete, closing the loop from start to finish.
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.