The Ship You Can't Read | Blog | Artificial Noodles

Inspired by Dazzle camouflage on Wikipedia

Built with Raw WebGL · GLSL Fragment Shader

Techniques Procedural XOR Stripe Generation · Scroll-Driven Phase Modulation · Text Contour Sampling · Gaussian Legibility Curve

Direction Recreate WWI dazzle camouflage as a real-time WebGL shader that hides text in procedural geometric patterns, with scroll position controlling stripe angles

Result A full-screen field of bold geometric shapes with text hidden inside — scroll to hunt for brief legibility windows where words surface before the patterns consume them again

The Story

In 1917, a British marine artist named Norman Wilkinson had an idea that sounded insane. He proposed painting warships in bold geometric patterns — black and white stripes, chevrons, curves — not to hide them, but to make them impossible to read.

The ships were still completely visible. You could see them on the horizon. But you couldn’t judge their range, speed, or heading. The geometric patterns disrupted the very act of interpretation.

Naval rangefinders worked by splitting the target into two half-images that an operator aligned. When they matched, you had the distance. Dazzle made alignment impossible — the patterns created false edges, false perspectives, false bow waves. Even when the reading was correct, it looked wrong.

Over 4,000 ships were dazzle-painted during WWI. No two had the same pattern. And the designers weren’t military personnel — they were artists. Wilkinson recruited from art schools and studios. Cubism and dazzle camouflage emerged from the same moment in visual culture. Art and war used the same language to disrupt perception.

2025 research from Aston University found that dazzle’s effectiveness was overestimated — the “horizon effect” (ships appear to travel along the horizon regardless of actual direction) accounted for most of the confusion. But here’s the thing: crews on dazzled ships had higher morale. They felt safer. The perception of protection mattered, whether or not the protection was real.

The Take

We dazzle ourselves constantly.

Social media profiles, curated personas, the way we dress — we’re not hiding. We’re fully visible. But we’re painting ourselves in patterns that prevent anyone from reading our direction, our speed, our range. You can see me clearly. You can’t read me.

Dazzle camouflage is the only camouflage that doesn’t try to make you disappear. It accepts total visibility and bets everything on confusion. The ship is right there. The ship is unreadable. These are not contradictory statements.

The word DAZZLE comes from a frequentative of “daze” — to lose clarity repeatedly. Not once, but over and over. Each time you look, you lose it again. The patterns don’t resolve. They actively resist resolution. They generate their own interference.

The Tech

The Dazzle is a WebGL fragment shader experience with procedural pattern generation from text contour data.

The core mechanics:

Text as texture: “YOU ARE LOOKING DIRECTLY AT THIS” is rendered in Bebas Neue to an offscreen canvas and uploaded as a WebGL texture. The shader samples this texture to determine whether each pixel is inside or outside a letter.
XOR stripe generation: Four layers of hard-edged stripes at different angles, frequencies, and duty cycles are combined using XOR blending (a + b - 2ab). This produces complex geometric shapes — diamonds, chevrons, triangles — from simple sine-wave stripes. The intersections create the bold, hard-edged dazzle vocabulary.
Dazzle mixing: Inside text, the pattern lerps toward solid white as legibility increases. Outside text, the pattern suppresses toward black. At zero legibility, both inside and outside show the same pattern — the text boundary becomes invisible. This is exactly how dazzle worked on ships: figure and ground become indistinguishable.
Power-curve legibility: A pow(legibility, 2.5) curve keeps the text invisible at low legibility values and only reveals it near the peaks. Without this, even a 5% brightness bias makes the text detectable — the human eye is remarkably good at finding coherent shapes.
Scroll-driven phase: Scroll position modulates the angles and phases of all four stripe layers at different rates. The patterns morph continuously, creating evolving geometric configurations. Brief “legibility windows” open at specific scroll positions where stripe angles happen to align with letter strokes.

The shader runs at 60fps, computing the pattern for every pixel every frame. No pre-rendered textures, no image assets. The dazzle pattern IS the code.

The Experience

You open the page. A field of bold black and white geometric shapes fills the screen. Diamonds, chevrons, angular patches — high contrast, hard edges. It looks like abstract art. Or a warship.

Somewhere in this field, there is text. You can’t see it.

Scroll. The patterns shift — angles rotate, frequencies morph, the geometry reconfigures. The field stays intense, stays abstract. But occasionally, for a fraction of the scroll range, something surfaces. A word. “LOOKING.” Then the patterns shift again and it’s gone.

Keep scrolling. More flashes. Brief moments where a word or two emerge from the disruption, visible for an instant before the stripes consume them again. You’re trying to read text that is right there, fully present, staring back at you. But the patterns prevent it.

At around 85%, something happens. The stripe angles align with the letter strokes. All four words surface at once: “YOU ARE LOOKING DIRECTLY AT THIS.” The self-referential payoff. The text has been telling you exactly what the experience is doing to you — and you couldn’t read it until now.

Then you scroll past. The patterns surge back. Denser, more complex. The text disappears again, consumed by the interference. At the bottom, in quiet gray on black: “You were looking directly at it. 4,000 ships. No two alike.”

The camouflage won.

Experience The Dazzle

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.