StippleField

Options

paper #fbfaf4

css colour

The paper behind the marks. `auto` takes it from the page, so the effect adopts whatever it is dropped onto.

ink #36362f

css colour

The nib. A light-dark() pair picks by the ground it lands on.

accent #c44400

css colour

A second nib, on a small share of the marks. A light-dark() pair picks by the ground it lands on.

pitch 7

3 to 30

Cell size in CSS pixels. There is at most one mark per cell, so this is the spacing of the stipple rather than its weight. Laid out in pixels so the marks keep their size whatever shape the element is.

jitter 0.75

0 to 1

How far each mark is thrown off the centre of its cell. At 0 the marks sit on a grid and it stops being a stipple; at 1 they are anywhere in their cell and the grid is undetectable.

scale 1.6

0.2 to 8

Size of the tone field the marks follow. Lower is broader country with slower changes in density.

weight 0.19

0.05 to 0.45

Radius of a mark, measured in cells. Every mark is the same size, which is the point: an engraver has one nib. Past about 0.4 they touch at full density and it becomes a solid.

contrast 1.9

0.5 to 5

How hard the tone field pushes away from the midtone. Applied about 0.5, so raising it opens the field out rather than dragging the whole thing dark.

accentShare 0.06

0 to 0.5

Share of marks that take the second nib. Small: this is a second pass over a drawing, not a second drawing.

grain 0.4

0 to 1

Paper tooth under the marks.

touch 0.65

0 to 1

How much tone the cursor works up under itself. Tone is how many marks there are, so this is the hand adding marks, not a light being shone on the drawing. Zero leaves the field ambient.

reach 0.45

0.05 to 1.5

How far the hand reaches, as a share of the short side. The falloff is a Gaussian and has no edge to find, so this is where it has mostly faded rather than where it stops.

period 36

2 to 120

Seconds for one loop of the drift. The tone field travels a closed circle through noise space, so it returns to exactly where it began and the loop is seamless. Slow on purpose: the marks should seem to be settling rather than moving.

What it needs

Category

Backdrops, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1.5 ms · 1 context

Pinned to

v0.13.0

• Tone is carried by the number of marks rather than their size, which is what separates a stipple from a halftone: an engraver has one nib, so darker means more marks rather than fatter ones
• Each mark is tested against the nine surrounding cells, because a mark thrown off centre crosses into its neighbour and testing only its own cell would slice it at the boundary
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• The cursor raises the tone it is over, which adds marks rather than enlarging them. It is a plain function of the pointer position with nothing integrated, so a scripted path replays identically and renderAtTime stays pure
• Nine cell tests per pixel, each a hash and a distance, plus four octaves of value noise for the tone field
• Most cells fail the tone test and cost one hash, so the lighter the field the cheaper it is
• Nothing is uploaded per frame. Only uniforms change