Vein growth guide

Overview

Vein growth grows a network of glowing branches over one picture and, with the transition on, lets the next picture show through as they grow.

Bright white veins spreading from the centre over a pearl-crowned figure before tall spires
Leaf veins late in a run: picture B has almost filled the frame under the veins.

The branches grow by space colonisation. Hidden attraction points are scattered over the picture; each one pulls the nearest branch tip towards it and is removed once a tip reaches it. Tips pulled in different directions split, which is where the branching comes from.

More points land where the picture is bright and along its edges, so the veins follow its shapes. See luminance and edge detection.

The whole network is grown once, before the run starts, then drawn on the GPU in the order it grew. One number, the transition progress, runs from 0 to 1 over the run, and an easing curve sets how it speeds up and slows down.

With A → B transition on, as the page opens, picture B shows through in branch-shaped patches right under the veins as they grow, then fills the whole frame by the end. See growth reveal and picture A and picture B. Turned off, the veins grow over picture A only, and the frame stays on picture A.

With the transition on, the direction flips after each run: the next run carries B back into A.

Five presets set every slider at once: Leaf veins, Root rise, Gold circuit, Coral fan and Nerve net. You can swap in your own two pictures, and keep a PNG or a video.

Open Vein growth Start here

In this guide

  1. StartWhat you need and your first run in six steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree presets caught late in the run, and how each was made.
  4. Keep your workThe PNG and the video.
  5. HelpWhat to do when something goes wrong.

It runs in your browser with WebGL. Your pictures stay on your device and nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.