Infinite Colour Craft

Mix/Create/Invent/Discover/'what ever you call it' colour pigments. Synthesize spectrums, and Express them in 2D by painting.

Comment

Inspiration

A few months ago, I found myself hooked on sandbox combination games like Infinite Craft, endlessly dragging words together at 1:00 AM just to see what surprising outcome would appear next. Around the same time, my desk was cluttered with acrylic paints, palette knives, and swatch sheets. I had spent nearly half an hour trying to mix a delicate Burnt Sienna for a background wash, only to end up with a dull, muddy brown.

Sitting there with paint on my fingers and a dozen browser tabs open, a thought struck me: Why does learning color theory feel like slogging through a dry textbook, while sandbox crafting games feel so instantly rewarding and intuitive?

In almost every digital art software, you are immediately handed an arbitrary 16-million-color hex picker. It gives you infinite choices, but completely strips away the tactile intuition of how pigments relate to one another. I wanted to build an experience where every single shade is discovered, earned, and understood—where the thrill of an elemental alchemy game feeds directly into a full-featured digital painting studio.

What it does

Infinite Colour Craft transforms the study of color physics and art history into an addictive, hands-on creative workspace:

  1. The Alchemy Board: You begin with five elementary spectrum pigments: Red, Yellow, Blue, White, and Black. By dragging, sliding, and colliding tiles across an interactive workspace, you fuse pigments into hundreds of authentic historical colors, geological minerals, and celestial shades—from ancient Egyptian Blue and Tyrian Purple to modern Vantablack and mythical Cosmic Void.
  2. True Chromatic Discovery: Every successful fusion is recorded in your personal Grimoire, revealing rarity tiers (Common to God-tier), category tags, historical pigment trivia, and full recipe heritage trees.
  3. The Living Paint Studio: Every color you discover immediately becomes an active pigment in your studio palette. The digital art studio includes custom brush engines (Ink, Watercolor, Chisel Marker, Airbrush, Rainbow, and Flood Fill), procedural acoustic feedback, symmetry mirrors, and canvas paper textures.
  4. Vector Coloring Overlay Architecture: Features hand-drawn vector line art templates with an independent rendering layer, allowing paint strokes and bucket fills to stay cleanly contained beneath crisp vector outlines without bleeding or edge degradation.
  5. Multiplayer & AI Vision: Room codes let friends join a shared canvas over WebSockets to discover recipes together, while the Chromatic AI Lab features an on-device neural network trained on Google QuickDraw data for real-time sketch classification and speed challenges.

How I built it

The project was built with a high-performance, zero-latency TypeScript architecture:

1. Color Physics & Blending Mathematics

Naive RGB averaging produces muddy, lifeless grays because computer monitors display color additively while real-world pigments absorb light subtractively. Furthermore, human eyes perceive brightness along a logarithmic curve.

To create realistic optical mixing, the engine converts colors into a gamma-corrected linear space using (\gamma = 2.2):

$$C_{\text{linear}} = \left( \frac{C_{\text{sRGB}}}{255} \right)^\gamma$$

We then blend each channel via power-mean interpolation:

$$C_{\text{blend}} = 255 \times \left( \frac{C_{1,\text{linear}} + C_{2,\text{linear}}}{2} \right)^{\frac{1}{\gamma}}$$

To determine hue transitions on the cylindrical HSL wheel without boundary artifacts at the (0^\circ / 360^\circ) split, we compute the circular mean using trigonometric decomposition:

$$\bar{\theta} = \operatorname{atan2}\left(\frac{\sin \theta_1 + \sin \theta_2}{2}, \; \frac{\cos \theta_1 + \cos \theta_2}{2}\right)$$

2. Dual-Canvas Rendering Engine

Instead of flattening line art directly into the drawing buffer, I engineered a dual-layer HTML5 Canvas architecture:

  • paintCanvas (Lower Layer): Handles continuous pixel manipulation, brush composite operations (source-over), and Bresenham line interpolation to prevent gaps during rapid cursor movement.
  • outlineOverlayCanvas (Upper Layer): Renders vector SVG path contours independently, ensuring flood fills and dense brushes never overwrite clean outlines.

3. Procedural Audio Synthesis

To avoid downloading large audio sprite assets, I built an on-the-fly audio synthesizer using the native browser Web Audio API. It mathematically constructs short envelope waves: harmonic pentatonic chimes for successful tile fusions, high-frequency white noise bursts for marker strokes, and bubbly sine sweeps for paint bucket fills.

4. Real-time Networking & Local ML

  • Collaboration Server: Node.js and Express running a native WebSocket server that synchronizes tile positions, z-indexes, and cursor coordinates with delta compression.
  • Doodle Vision: An in-browser Convolutional Neural Network (CNN) trained on vector sketch datasets that classifies drawings client-side in under (15\text{ms}) without external API overhead.

Challenges I ran into

1. Overcoming the "Muddy Gray" Mixing Trap

Standard digital averaging:

$$\frac{(R_1, G_1, B_1) + (R_2, G_2, B_2)}{2}$$

routinely turns vibrant Yellow and rich Blue into a dull, desaturated gray rather than lush Green. Displays emit light (additive RGB), whereas real pigments absorb light (subtractive CMY/RYB). Finding the right balance required tuning a hybrid formula that protects chroma and shifts hue toward physical pigment expectations while keeping calculations lightweight enough to run at 60 FPS on mobile devices.

2. Flood Fill Performance on High-DPI Canvases

A recursive breadth-first search (BFS) flood fill on an (800 \times 600) canvas involves traversing up to (480{,}000) pixels. In unoptimized JavaScript, managing an object queue triggers severe garbage collection stutter that freezes the thread for (250\text{ms}).

I rewrote the tool as a scanline fill algorithm operating directly on a 32-bit integer Uint32Array view of the ImageData buffer:

const pixelView = new Uint32Array(imageData.data.buffer);

Built With

+ 1 more
Share this project:

Updates