HomeRendering & Computer GraphicsDigital Pixel Canvas

Digital Pixel Canvas

Interactive raster-vs-vector canvas: a resolution-tunable grid of extruded pixels blends two color fields with additive (RGB/light) or subtractive (CMYK/pigment) mixing, next to a scale-independent vector brush stroke.

Rendering & Computer Graphics3DEasy60 FPS
digital-art ↗ Open standalone

Digital art is built on two fundamentally different image models: raster graphics, made of a fixed grid of pixels, and vector graphics, made of mathematically defined curves that scale without limit. This simulator renders both side by side. A resolution-tunable grid of extruded "pixels" samples a procedural color field — the same kind of layered, flowing color a digital painter builds up with brushes — and blends two color layers using either additive (RGB, light-based, the way displays mix color) or subtractive (CMYK, pigment-based, the way ink and paint mix) compositing. Beside it, a smooth vector brush stroke demonstrates why vector art never pixelates: it is defined by a curve, not by samples. Tune the resolution, pattern, blend mode and flow speed to see how each choice reshapes the canvas.

⚙ Under the hood

Interactive raster-vs-vector canvas: tune the pixel grid resolution and watch two flowing color layers blend additively (RGB/light) or subtractively (CMYK/pigment), next to a scale-independent vector brush stroke that never pixelates.

Three.jsdigital-artraster-vs-vectorcolor-theoryrenderinginstanced-mesh

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)