HalftoneMagnifier

Options

paper #fbfaf4

css colour

The sheet the picture is printed on. It shows between the dots, so it is most of what you see in the light passages under the glass.

cyan #1fb6e3

css colour

The cyan plate.

magenta #e5157f

css colour

The magenta plate.

yellow #ffe800

css colour

The yellow plate. Barely visible on its own, which is why it goes at zero degrees where the interference would show most.

black #2b2721

css colour

The black plate, which also tints the barrel. A desaturated near-black reads as ink; pure black reads as a hole.

size 0.26

0.05 to 0.6

Radius of the glass, as a share of the short side, so it keeps its size when the element changes shape. Past about 0.4 it stops being a glass on a picture and becomes a picture with a border.

zoom 2.6

1 to 12

How much it magnifies. This magnifies the screen as well as the picture, because the ruling belongs to the press: turning it up makes the dots bigger, never finer.

screen 2

1 to 12

The print's screen ruling, as a cell in CSS pixels before magnification. Low is a fine screen and a magazine; high is a coarse one and a newspaper. Below about 2 the rosette is finer than the glass can show and you get tone under the glass as well as outside it, which is the one setting that defeats the whole thing.

bulge 0.35

0 to 1

How much the magnification eases off towards the rim, the way a real lens does. At 0 the glass magnifies evenly and the edge reads as a hole cut in the picture rather than as something resting on it.

fringe 0.012

0 to 0.06

Lateral colour at the rim. Every simple lens has it and every one shows it most at the edge, so a little is what makes the glass read as glass. Past about 0.03 it reads as a broken monitor.

rim 0.8

0 to 1

How strongly the barrel reads: the ring and the short fall into shade just inside it. This is what makes the glass an object sitting on the page rather than a filter applied to part of it.

grain 0.3

0 to 1

Paper tooth over the whole thing, inside the glass and out.

What it needs

Category

Surfaces, an effect

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1 ms · 1 context

Pinned to

v0.12.0

• The picture is the host element's own <img> child. It is hidden from sight and left in the document, so the alt text is whatever you wrote and a page with no JavaScript still shows it
• The screen ruling belongs to the print rather than to the viewer, so the cell is magnified along with everything else and turning the zoom up makes the dots bigger rather than finer
• Four plates at 15, 75, 0 and 45 degrees, with grey component replacement, so what resolves under the glass is a rosette rather than four screens fighting
• Nothing is integrated against the previous frame. The glass is exactly where the pointer is, so renderAtTime is pure in t and a scripted path replays identically
• No fwidth anywhere. The lens sits inside a branch and derivatives in non-uniform control flow are undefined, so every edge width is worked out from the device pixel ratio instead
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• Outside the glass it is one texture read per pixel. Everything expensive is inside a branch that most of the frame never takes
• Inside the glass: three texture reads for the lateral colour, then four screens each testing nine neighbouring cells. The neighbours are what stop a dot past half a cell being clipped square
• The image uploads once, on load. Nothing is uploaded per frame