Something is amiss, are they moving or not? How can this be.
What: This illusion is an example of the reverse phi phenomenon, fooling your brain into seeing motion when there is very little, that is, colors are changing but the primary object is not.
This example I’ve built is inspired by the Twitter user, @Jagarikin [1] who has posted multiple videos of similar effects including spirals and other shapes, that I also hope to re-create. However, I wanted an interactive version.
How To: As you move your mouse (or tap) around the central circle you should experience what will feel like the circles on the page changing direction, and in some ways the feeling that they’re moving in said direction. There are a few fun things you can do with the settings too, like changing the speed of the color change, or the size of the circles, as well as changing the background which will significantly alter the effect.
For me the different speeds along with interaction give me a great effect, but it’s also cool to see that the effect persists and sometimes feels stronger when in grayscale. When in Grayscale you’ll also be able to see the “trick” of the effect a little easier, as the colors are part of the distraction.
Explain it: Firstly I’ll link to a great paper about this effect [3] and a quick quote, and then do my best explanation of how it works based on how I built this (again, based on Jagarikin’s [2] video).
Reversed apparent motion (or reversed phi) can be seen during a continuous dissolve between a positive and a spatially shifted negative version of the same image. Similar reversed effects can be seen in stereo when positive and spatially shifted negative images are presented separately to the two eyes or in a Vernier alignment task when the two images are juxtaposed one above the other.
In this case, we have an RGB gradient collection that alternates between light and dark at the 25%, 50%, and 75% marks of the total gradient (100%) … we then apply this gradient to the circles with a small inset of 1 pixel to the 25% and the 75% which are rotated to the direction chosen. This means that at any given moment the circle will alternate on its directional edges light and dark, which causes the mind (when set to the right background!) to create a false movement.
You’ll also notice that the movement feels even stronger in the center, and when changing direction, perhaps due to the alternating patterns of the arrows and the circles.
[1] The Twitter user @Jagarikin who posts neat illusions and unique code-art.
[2] The first video I had seen of this effect. By quickly changing the directions the effect feels very strong, compared to mine where you can control the direction.
[3] Big ole paper on Reversed Phi … Usually I get bamboozled by these, and while this is quite bamboozling some solid graphics are explaining the effect and some of the science behind it.
I've researched these optical illusions in my spare time but am clearly not any kind of expert and my explainations are pretty smooth brained, if you find something mis-cited, earlier examples, or general mistakes please new let me know via toymaker@toms.toys, be kind!