Digital Pixel Canvas

Raster resolution 20×20

Pattern

Color mixing

Brush flow speed 1.00

Active pixels

–

Color buckets

–

Blend mode

–

How it works

Every cell of the grid samples two independent color fields at its (u, v) position — a base layer and a slower-moving overlay, each a hue swept over time. The two colors are then combined per RGB channel using one of two real compositing rules: additive mixing (the screen formula used by light-emitting displays, RGB) or subtractive mixing (the multiply formula used by pigments and ink, CMYK). The result's lightness drives each cell's extrusion height, and its hue selects which of a fixed set of color buckets renders it — one InstancedMesh per bucket, since assigning a unique color to each instance individually is unreliable in this renderer.

screen  (RGB, additive):  L = 1 − (1 − A)(1 − B)
multiply (CMYK, subtractive): L = A · B
height = 0.15 + 1.8 · lightness(L)

Raster resolution — cells per side of the pixel grid; higher resolution samples the color field more finely, exactly like raising a raster image's pixel density.
Pattern — the procedural function driving both color layers: rippling rings, a crossed interference wave, or a drifting plasma field.
Color mixing — switches the blend formula between additive (light gets brighter where layers overlap, as on a screen) and subtractive (pigment gets darker where layers overlap, as with ink).
Brush flow speed — how fast the two color layers drift, simulating a brush stroke moving across the canvas.

The smooth tube beside the grid is a true vector path — a curve defined by a handful of control points, not by sampled pixels. Zoom in on either object: the vector stroke stays perfectly smooth at any scale, while the raster grid's blocky cells become more visible — the core trade-off between the two image models described in the article.

Raster pixel grid Vector brush stroke

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.