Deconstructing the Ames window illusion
One of my favorite videos on the internet right now is this mind-boggling demonstration of the Ames window illusion.
I have so many burning questions still: What would happen with more rulers added? Or the trapezoid painted one solid color? Or…
Simulating an Ames window sounds easier than creating a real one. Rather than being sensible and importing a battle-tested library like Three.js, let’s directly use the 3D Web Graphics Library built into the browser. I’m talking, of course, about CSS.
Centering the trapezoid
Although CSS’s 3D capabilities are fairly limited, the simple illusion boils down to a rotating flat image.
@keyframes rotating-y-ccw {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
/* This parent element will have two children:
- An <img> of a window
- An <img> of a ruler */
.rotating-parent {
position: relative;
/* Make sure the window and ruler don't combine into a single rotating image. */
transform-style: preserve-3d;
animation: rotating-y-ccw 15s linear infinite;
}
.rotating-parent > img.ruler {
/* Position the ruler image on top of the window with an initial 90 degree rotation. */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: rotateY(90deg);
}
With our fairly terrible-looking recreation, we can start experimenting.
First, what happens with more rulers attached? Testing this is just a matter of duplicating the ruler img element and tweaking positions with transform: translate().
For me, this weakens the illusion but not substantially.
A fun thing to do is to initially hide the rulers; then, right when the window begins to oscillate back, immediately select the multiple rulers option. My brain instantly snaps from seeing an oscillating window to a rotating one.
What about painting the window a single color?
Surprisingly, the trapezoid shape alone is enough to create the illusion.
Continuing with shape, let’s try a rectangular window but keeping the same trapezoidal holes (and vice versa).
A rectangular window makes a big difference for me but rectangular holes, almost none.
In the examples so far, we’ve defaulted to a CSS perspective value that is five times the width of the content. Think of this as a view pyramid where the tip is five times further away relative to the length of the base — in this case, the window.
Moving the tip closer, or using a wider field of view, greatly affects the strength of the illusion.
Here’s one final crazy idea: what if instead of a ruler, we intersected another Ames window? Maybe the illusion would somehow cancel itself out?
Err… what in the world?!
Contrary to my initial reaction, this isn’t an error in the CSS. Here it is again with all the previous settings.
I’ve tried scouring the internet but as far as I can tell, nobody else has ever tried sticking two Ames windows together? Please, somebody make this for real and film it!
I’m going to lie down in the meantime…