WatermarkSheet

Options

paper #efede7

css colour

The sheet seen front on, before any light comes through it. Slightly deeper than the page, so there is somewhere for the thin parts to brighten into.

light #fffdf6

css colour

What comes through where the sheet is thinnest. Everything here lightens toward this; nothing darkens, because every feature is somewhere the paper is thinner.

laid 0.18

0 to 1

How much light the close-set mould wires let through. A ripple rather than hard lines: the sheet follows fine wires rather than being drawn down over them.

laidPitch 210

40 to 600

Laid wires across the sheet. A real mould has them roughly a millimetre apart, so this wants to be high enough that they are a texture rather than a pattern.

chain 0.3

0 to 1

How much light the heavy cross wires let through. A narrow band rather than a ripple, because the sheet is drawn down sharply over a thick wire.

chainPitch 1.6

0.3 to 8

Chain wires across the sheet. Rarely more than a handful: they sit about an inch apart on a real mould, and crowding them is the quickest way to stop it looking like paper.

formation 0.5

0 to 1.5

How unevenly the fibres settled. This is most of what separates a handmade sheet from a machine one, and at 0 you have made cartridge paper.

cloud 2.4

0.3 to 10

Size of the cloudiness. Lower is a coarser, blotchier sheet.

device 0.45

0 to 1

How brightly the wire device shows. The sheet is much thinner there than anywhere else, so it is the brightest thing present. Zero for a plain laid sheet with no watermark.

deviceSize 0.26

0.05 to 0.6

Size of the device, as a share of the short side.

angle 4

-45 to 45

Angle of the mould to the frame. A few degrees off square, because a sheet is not laid down obediently aligned to anything.

grain 0.35

0 to 1

Paper tooth over the whole thing.

period 16

4 to 180

Seconds for one slow tilt against the light. Nothing moves on the sheet; the sheet moves. A closed orbit, so it returns to exactly where it began.

What it needs

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1 ms · 1 context

Pinned to

v0.11.0

• Everything here is thickness rather than ink. Paper is translucent, so what shows against a light is where the sheet is thinner, and every term lightens rather than darkens
• Laid lines are a ripple and chain lines are a band, because a sheet follows fine wires and is drawn down sharply over thick ones
• The device is drawn as a signed distance, so the wire keeps an even thickness all the way round, which a wire does
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• Four octaves of value noise for the formation, two trigonometric terms for the wires, one distance for the device
• Nothing is uploaded per frame. Only uniforms change
• No loops and no branching, so the cost is flat across the frame