Separable blur

No. 40 · Early example

The comb at work: one pass, 49 tapsThe pin block: one pass over the square, for comparisonA bench with one blur dial and two ways to spend it. Every pin and every tooth is a tap; I draw every fourth, as tall as its weight. On the left, the pin block is the blur as one pass: its bed stands for 49 × 49 = 2,401 reads of the picture for each pixel. On the right is what the renderer runs. The first comb’s teeth lie along x: it reads across x and writes scratch, where the grid’s columns go soft. Once it has passed, the second comb’s teeth lie along y: it reads scratch across y and writes frosted. That is 49 + 49 = 98 reads. Dragging turns the dial, and only the spacing moves: there are always 8 taps per sigma, 3 sigma each way. At 0 both read one tap, the first comb stays parked, and frosted is a plain copy, because the renderer leaves scratch out.

A bench with one blur dial and two ways to spend it: a single pass that reads a whole square of taps, or two passes that read a row and then a column.

Drawn while the skill was being made, for a long article on rendering frosted panes in WebGL.

Install

npm install anatomy-figures

In your code

page.tsx

import { SeparableBlur } from "anatomy-figures";

<SeparableBlur theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import SeparableBlur from "anatomy-figures/separable-blur";

Theme it

Early examples keep their own light and dark palettes: theme picks one, and --anatomy-card sets the ground.

page.tsx

<SeparableBlur
  theme="dark"
  tokens={{ "--anatomy-card": "#000000" }}
/>

Without React

It still draws with React inside, so install react and react-dom next to it.

index.html

import { define } from "anatomy-figures/element/separable-blur";

define();

<anatomy-separable-blur theme="light"></anatomy-separable-blur>