A Flashlight in a Dark Dimension
The story behind The Aperture
Inspired by Introspection illusion on Wikipedia
Built with Pure WebGL2 (no Three.js) · GLSL Fragment Shaders · Canvas Font Atlas
Techniques 5D Rotation Matrices · Volumetric Glyph Extrusion · Stereographic Cross-Section · Chromatic Aberration at Boundary · Critically-Damped Spring Aperture · Multi-Pass Gaussian Bloom
Direction Embed readable text as five-dimensional solids, then give the user a cursor-driven aperture that forces the projection to the one angle where letters look like letters
Result A lens you move across a field of alien geometry — inside, crisp readable text about the introspection illusion; outside, the same letters writhing as spectral five-dimensional forms
The Story
In 2002, psychologist Emily Pronin at Princeton coined a term for something everyone does but nobody notices: the introspection illusion. It’s the belief that when you look inward, you see your own mind clearly — while treating everyone else’s self-knowledge as unreliable. You trust your introspection completely. You’re wrong.
The mechanism is simple and devastating. Biases operate below the threshold of consciousness. When you search your thoughts for evidence of bias, you find nothing — not because there’s no bias, but because introspection can’t reach it. The absence of evidence from self-reflection is mistaken for evidence of absence.
What fascinated me wasn’t the psychology. It was the geometry. Introspection is a projection — a low-dimensional shadow of something far more complex. You see the shadow and call it self-knowledge.
The Take
What if the letters you read every day were five-dimensional objects? In our normal experience, we see them from exactly one angle — the angle that makes them look like letters. We never question this. We never wonder what they look like from every other direction.
The Aperture makes this literal. Every character on screen is embedded in R⁵ and rotated through four of the ten independent rotation planes. What reaches your screen is a two-dimensional cross-section of a five-dimensional solid. At most angles, the cross-section is alien — abstract geometry with no resemblance to language. At exactly one angle, it’s a letter.
Your cursor is the aperture — a circular lens that forces the projection to the readable angle. Inside the circle, text snaps into crisp legibility. Outside, the same letters seethe as spectral alien forms. The experience has no win state. The aperture can never cover the full field. There is always more outside it. Patience grows the aperture — stillness literally expands comprehension. But you can never see it all.
Move the aperture. Read the fragments. They’re about the introspection illusion itself: “YOU ARE NOT WHO YOU THINK YOU ARE.” “EVERY SHADOW BELIEVES IT IS THE OBJECT.” “WHAT YOU CALL SELF IS A PROJECTION.”
The Tech
5D Rotation. Each character is assigned four rotation planes from the six that mix screen axes (X, Y) with extra dimensions (Z, W, V): XZ, XW, XV, YZ, YW, YV. Rotation angles are driven by time * frequency + phase, with unique irrational frequencies per character so the combined motion never repeats. The aperture smoothly interpolates rotation angles between zero (inside) and the time-driven values (outside), creating uncanny half-readable forms at the boundary.
Volumetric Extrusion. Letters aren’t flat cards — they’re extruded solids in 5D. The shader samples each glyph at three depth slices through the z/w/v dimensions, takes the maximum, and applies a thickness fade via smoothstep. When rotation tilts the letter, different slices project differently, revealing sides and edges that a flat billboard would never show.
Font Atlas. A 2048×2048 canvas renders all 27 glyphs (A-Z + space) into a grid at 128px resolution. This is uploaded as an R8 texture — only the red channel matters for SDF-like sampling. Character layout data (positions, rotation planes, frequencies, phases, drift parameters) is packed into a 6-row RGBA32F data texture, read per-character with texelFetch.
Aperture Physics. The lens follows the cursor on a critically-damped second-order spring (ω = 8.0, ζ = 0.85). The spring equation accel = ω²·displacement − 2ωζ·velocity produces smooth pursuit without overshoot. Aperture radius breathes — growing during stillness, shrinking during fast movement — so patience is literally rewarded with wider comprehension.
Boundary Chromatic Aberration. At the aperture edge (0.05 < aBlend < 0.95), the shader evaluates the 5D rotation at three slightly different angle multipliers (1+ε, 1, 1-ε) to split red, green, and blue channels. The result is prismatic fringing — like light refracting through a lens edge. A warm amber ring (exp(-((dist-r)/0.015)²)) marks where comprehension ends.
Spectral Color Mapping. Outside the aperture, dimensional displacement (sqrt(z² + w² + v²)) maps to hue via atan(w, z), producing spectral colors — violet, teal, rose — that encode how far the character has rotated out of the readable plane. The further from legibility, the more saturated and alien the color.
Per-Pixel Bounds Check. Each pixel tests all ~60 characters. A bounding-box early-out (|| not &&) skips characters whose projected position is too far from the current pixel on either axis, scaled by 1 + aBlend * 4 to account for rotational stretching outside the aperture.
Post-Processing. Multi-pass bloom (brightness extraction at threshold 0.7 → half-resolution Gaussian blur → additive composite at 0.45 strength), film grain, and vignette. All FBOs use RGBA8 — the scene doesn’t need HDR precision.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.