The Stroboscopic Effect: Illusions on the Web Part 3
This is the third in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and learn from them). Due to the nature of the methods discussed here, some animations will be fast, fill large screen space, and/or be shaky. All animations are paused by default.
In the 19th Century, many toys were created to take several static images and trick the mind into animating them by flashing elements between them. We will explore a few of these toys, recreate them on the web, and then look at some other related tricks we can do in the digital-only realm.
The General Principles
All of these tricks in the physical world rely on a collection of images moving rapidly and some device that creates a stroboscopic effect to keep the mind from simply blurring the fast images. This effect could be achieved from a barrier with slits that alternates between showing you the images beneath and not, or in modern times with a strobe light. By coordinating the speed of the images with the timing of the stroboscopic effect, you can essentially keep focus in one area and the images will animate in a similar fashion to a film projector.
Perhaps the best example of this approach (at least that is still remembered in the 21st Century) is the Zoetrope.
Exploring the Zoetrope
The basic construction of a Zoetrope consists of a cylinder with a set number of slits, usually around an 1/8th of an inch. Additionally there are the same number of images on the inside of the cylinder. If you move the Zoetrope at an appropriately fast speed and focus on one section, you can see a looping animation with as many frames as there are images.
Without the outer cylinder, you will just see the images spinning around in a blur. The barrier breaks the images up much like a flipbook. Here we build this on the web using 3D Transforms (with some CSS Variables) where you can toggle the barrier on and off to see the difference.
See the Pen Zoetrope (Smiley) by Dan Wilson (@danwilson) on CodePen.
3D Zoetropes
In a similar vein, 3D Zoetropes often take images or sculptures and place them around a circle as well, but instead of a barrier cylinder to create the flipping effect, a strobe light is used. One of the more recent examples of this approach is with Toy Story.
The timing of the strobe and the spin can be so precise that characters can stand perfectly in place if desired.
We can recreate this on the web as well, with an added bit of glitch due to pushing the limits on framerates. We first create a barrier div of solid black that covers the entire page and toggle its opacity from 1 to 0 as fast as possible. Then we spin our Zoetrope built via 3D Transforms to match the strobe. If we have twelve frames, and our strobe is in the on state for X milliseconds (and also in the off state for X milliseconds) we will want one full rotation to take (12 × 2 × X)ms so that the on and off states can be activated during each frame.
See the Pen 3D Zoetrope Final by Dan Wilson (@danwilson) on CodePen.
The Human Eye vs. Computers
Tricking our eyes with the physical toys is a little different than we do it on a computer. In 2018, we are most likely getting at best 60 frames per second on the web with our animations, so we can get a frame every 16 2/3 milliseconds. The browser and the eye can work together and do its typical “blur things things that go fast” most of the time.
However, we can take our Zoetrope based in its 1860s roots and update it for the computer age by trying to match its rotation to the 60 frames per second ideal. So if we have a 24 frame animation, we can spin our Zoetrope a full turn (without its outer cylinder) at 24 × 16 2/3 milliseconds (which equals 400ms) and get a similar, but clearer, animation effect.
Even without the outer barrier, it might still shake a little or stutter, especially on lower powered devices… but that’s half the fun of animating on the web in the style of the 150 years ago.
This approach can be extended to other related moving picture toys like the Phénakistiscope. This was a flat circular toy that had images around the edge and slits in the middle of the circle. If you held the images towards a mirror and looked through the slits as you spin, you’d see a similar animation as our Zoetropes. But with our “spin it as fast you can” technique we can get rid of the slits and mirrors to spin the CSS Phénakistiscope circle around every 16 2/3 × number of frames milliseconds.
Or we can get rid of our needs for circles and spinning by simplifying and move left and right. If we align our images in a row, and animate a translateX(-100%) matching our 60 frames per second we get the same effect.
See the Pen Zoetrope Strip: 48 frames + 60fps by Dan Wilson (@danwilson) on CodePen.
An Aside: But What about the steps() Timing Function?
You got me… we didn’t need to take this as far as we did to create images that flip through a bunch of frames, because we can do this by using a steps() timing function in CSS (or easing property if you are in the Web Animations API world). And now we don’t necessarily have to max out our speed to get a smooth frame by frame animation.
See the Pen Zoetrope Strip: Steps() by Dan Wilson (@danwilson) on CodePen.
But… Can We Spin One More Thing before We Conclude?
Sure. A friend of mine once had a spinning top with a specific arrangement of arcs on its surface, and once it is spinning the eye sees complete circles. I made the following demo to reproduce the effect (to an extent), but I soon found out this effect is even more involved and can cause different people to see different colors in the circles. This toy goes by the name of Benham’s Top.
See the Pen Spinning Fast to Fill the Gaps by Dan Wilson (@danwilson) on CodePen.
Adding the solid black half circle introduces the color effects for some people. Interestingly, reversing the spin reverses where the colors appear.
The Limits of Today
Many people might see the limitation of today’s browsers and screens to animate at 60 frames per second as a problem. We always want more power, more speed, and more bandwidth working on the web, but sometimes the limitations give us new abilities and new ways to play.
And the limits of today are not necessarily the limitations of tomorrow.