✕

Colorspill

A real-time generative painting made of folded sine waves.

What it is

Everything you see is calculated live by your graphics card, one pixel at a time, sixty times a second. There are no images, videos or particles. A tiny program (a fragment shader) runs once for every pixel and turns that pixel's position, plus the current time, into a color.

The starting look comes from a seed (an fxhash-style hash) mixed with a little live randomness, so every visit begins slightly differently.

How it works

1. Start with a point. Each pixel becomes a 3D point: its x/y position on screen and time as the third axis.
2. Rotate it. A fixed 3×3 matrix turns the point to a new angle, so every layer looks at the pattern from a different direction.
3. Bend it with sine waves. The point is pushed by sin() of its own coordinates. Twist controls how hard it gets pushed.
4. Repeat, smaller each time. The loop runs once per Layer, and each pass works at a finer scale (set by Detail falloff). Feeding the bent point into the next layer is called domain warping. That's where the liquid, marbled swirls come from.
5. Turn it into color. The summed waves (x, y, z) become red, green and blue. Saturation blends between greyscale and full color, and the Color section adjusts the result after that.

p = vec3(pixel, time)
repeat for each layer:
    p  = rotate(p)
    s  = sin(p / scale) * scale
    p += s * twist        // warp the space
    n += s                // remember the wave
    scale *= falloff      // go finer
color = n * contrast + brightness

Moving through time slides the point along the third axis, so the pattern flows smoothly instead of jumping.

Controls

Use the panel sliders, or click ⌨ in the panel header (or press K) to see all keyboard and mouse shortcuts.

Tip: low Twist gives calm, silky gradients. Above about 1.5 it becomes turbulent marble. Try Posterize for a screen-print look.