Dispersion

No. 45 · Early example

Blue, offset × 0.955Green, offsetRed, offset × 1.045A lens bench at true scale, one unit to a pixel. A 72 px disc of clear glass sits in a ring mount on a jointed arm, over a ruled plate it reads from. The ring of light marks one pixel in its 26 px bezel, the probe, on a track ruled in tenths of b; it reads the plate three times along its normal, and a vernier slider rides the rail to wherever green lands. Move the probe toward the rim and the three reads spread with the reach: red and blue land 1.6 px apart at b 0.8, 3.3 at 0.93 and 7.4 at 0.985. The dashed line is as far as any read can land, red at the cap, 91 px past the rim.

A lens bench at true scale: a disc of clear glass on a jointed arm over a ruled plate, splitting one probed pixel into red, green and blue reads.

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 { LensBench } from "anatomy-figures";

<LensBench theme="light" />

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

page.tsx

import LensBench from "anatomy-figures/lens-bench";

Theme it

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

page.tsx

<LensBench
  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/lens-bench";

define();

<anatomy-lens-bench theme="light"></anatomy-lens-bench>