Work How I built it

Visualizer

I first wrote this animated background for a local web server. Here it runs on its own page: a MilkDrop-style shader with 19 patterns and ripples where you click or drag.

How it works

Feedback

The shader uses two framebuffers below screen resolution, swapping between them each frame. It zooms, turns and fades the previous image, then paints new color over it.

Fractal noise

The shader uses layered fractal noise: two octaves by default and four on GPU Max. It blends into a new pattern every 15 seconds.

Ripples

Each click adds a ripple with its own speed and spacing. Hold the button and drag to leave a trail of ripples behind the pointer.

On laptops with integrated and dedicated graphics, Use GPU asks the browser for the faster chip. Auto starts at the highest quality, measures the frame rate for the first few seconds and lowers the quality if needed.

Privacy