Two Lights

What it is

In 2015 a photograph of a dress split the internet into people who saw white and gold and people who saw blue and black. The explanation is colour constancy: your visual system is trying to work out what colour the light was, so it can discount the light and report the colour of the cloth. The photograph was ambiguous about its illuminant, so brains that assumed cool daylight subtracted blue and reported white and gold, and brains that assumed warm indoor light subtracted gold and reported blue and black. What made it unlike other famous illusions is that people got stuck: you can flip a Necker cube or a vase-and-faces at will, but most people could never see the dress the other way.

This is that mechanism with the ambiguity taken out and handed to you. Two swatches of banded fabric hang on a wall that is lit warm at one end and cool at the other, and they read as different colours. They are the same colour. The light is applied to the wall and never to the swatches: the wall is drawn as a single horizontal gradient, and each swatch is a stack of solid filled rectangles with no shadow, no transparency and no blend mode, so nothing in the drawing path is able to tint them.

Drag anywhere to move the boundary between the two lights, sweeping the illuminant across the swatches and watching them change identity under your finger while their pixel values sit still. Two reveals close the loop. Join them slides the two swatches together until their inner edges meet, and the seam disappears, because a single connected surface is exactly the geometry that defeats this illusion — the visual system groups it as one object and assigns it one colour. Lights off fades the wall back to flat grey and leaves the swatches untouched.

The readout in the corner is the piece checking itself: it samples the live canvas at the centre of each swatch with getImageData and prints both hex values, which are always identical. The lights are a warm tungsten and a cool open shade, applied as a per-channel gain normalised to a mean of one so a light re-tints a surface without also dimming it. The wall is the current theme's own background pulled most of the way to mid grey, because a near-white or near-black ground clips the tint and the effect dies. Four fabrics ship, and the first is the 2015 photograph's own pair of colours. It is one 2D canvas with no WebGL, it redraws only when something changes, and reduce-motion turns both reveals into instant cuts.

How to use it

• Look at the two swatches. They are the same colour.
• Drag anywhere to sweep the boundary between the warm and cool light.
• Hit Join them to slide the swatches together until the seam vanishes.
• Hit Lights off to flatten the wall and see them plainly.
• Swap the fabric: The Dress, Stone, Sand or Slate.

More experiments

• Magic Eye — canvas, stereogram, autostereogram
• Chladni Plate — canvas, physics, simulation
• Marble Ink — canvas, generative, computational-geometry

See every experiment