Painterly flow guide

Overview

Painterly flow repaints a picture in strokes that follow its own edges, and can paint one picture into another.

A gold-haloed figure and a pearl-crowned figure before spires, blended half and half and softened into small flat daubs
The Broad oil preset halfway through a run: both pictures painted in flat daubs, half A and half B.

The tool first works out which way the detail runs at each point. A Sobel operator measures how brightness changes, and a Gaussian blur smooths those measures into a structure tensor: a direction for every pixel.

Then it paints along those directions, never across them. Oil uses a Kuwahara filter: it looks at eight slices of an oval around each pixel, stretched along the edge, and favours the calmest ones, so flat areas turn into daubs while edges stay sharp. See oil paint look.

Comb uses line integral convolution: it averages the colours along each line of flow, and nudges the brightness of neighbouring lines apart so they read as bristles. See comb strokes.

With B paints in on, as the page opens, a run plays: the painting of picture A crossfades into the painting of picture B while the brush swells to its largest at the middle and shrinks back by the end. See image transition and picture A and picture B. After each run the direction flips.

Five presets set the look at once: Broad oil, Swirl comb, Palette knife, Gouache wash and Fibre storm. You can swap in your own two pictures, and keep a PNG or a video.

Open Painterly flow Start here

In this guide

  1. StartWhat you need and your first painting in six steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree presets caught mid-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, in a fragment shader on the GPU. Your pictures stay on your device and nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.