Lookup

No. 43 · Early example

One pixel’s lookup, from the probe to the plateThe 12 px grid, on the plate and through the paneWhere that pixel readsA reading stand: a clear pane on four threaded posts, held over the frost plate it reads from, both ruled with the same 12 px grid. The probe on the back rail sets one pixel on the pane, and the wire drops to the spot on the plate that pixel shows. Across the flat middle it reads straight down, and the grid passes straight through. Across the 26 px bezel it reads further out along its normal: at b 0.5, 0.75, 0.9 and 0.97 it reads 4, 14, 29 and 58 px out, so the grid seen through the bezel crowds toward the rim. The slope stops at 6, and so does the sled: its stop sits 87 px past the rim, and no pixel reads further.

A reading stand: a clear pane on threaded posts over the frost plate it reads from. A probe sets one pixel, and the wire drops to where it samples.

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

<Lookup theme="light" />

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

page.tsx

import Lookup from "anatomy-figures/lookup";

Theme it

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

page.tsx

<Lookup
  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/lookup";

define();

<anatomy-lookup theme="light"></anatomy-lookup>