Six classic illusions on graph paper, and a lab that measures how much they fool you.
A notebook of classic geometric illusions, each drawn exactly from its geometry with live parameters: the cafe wall (gray mortar between shifted rows of tiles), Zollner hatching, the Poggendorff bar, Ebbinghaus circles, Muller-Lyer fins and the Fraser spiral, whose concentric rings of twisted cord sit on a log-spiral checkerboard. Measuring uses the method of adjustment with a nulling stimulus: the lab introduces a real counter-distortion from a random starting point (tilted mortar, turned lines, a shifted segment, a bigger circle, a longer shaft) and you adjust it until the figure looks right. Where you stop is the strength of the illusion for you, in degrees, pixels or percent, and the notebook keeps your results. 'Show the truth' overlays red rulers and dimension lines on the real geometry.
Try it. Pick an illusion from the tabs (keys 1 to 6) and drag its sliders, such as the row shift and mortar gray of the cafe wall or the fin angle of the Muller-Lyer. Press 'Measure me' (M), drag across the figure or use the arrow keys until it looks right, then press Done (Enter). T toggles the truth overlay; on the Fraser spiral, click a ring to trace it.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a small geometric illusions lab with JavaScript and the HTML canvas element, starting with the cafe wall illusion. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), resizes with the window and looks like paper: a cream background with a faint grid.
- Draw the cafe wall: rows of alternating black and white tiles separated by thin mid-gray mortar lines. Shift every other row sideways by about a quarter to a third of a tile. The perfectly horizontal mortar lines should now look like wedges.
- Add sliders for the row shift, the mortar gray and the mortar width. Notice that black or white mortar makes the illusion disappear.
- Add a 'Show the truth' button that draws red rulers along the mortar lines.
Once that works, add a second illusion and turn it into a measurement:
- Add the Muller-Lyer figure: two equal shafts, one with arrowheads, one with fins pointing outward, and a slider for the fin angle.
- Add a 'Measure me' button: set the lower shaft to a random wrong length, let me drag left and right until the two shafts look equal, then show how far off I was in percent. That number is the strength of the illusion for me.
- Keep a little results table, and use a clean diagram style: ink-black lines, red annotations, small dimension arrows.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as the Ebbinghaus circles, the Poggendorff bar or the Fraser spiral.
