5 ms·

Had to do a basic CSS implementation to see how it looks in 60fps https://jsbin.com/ledomilaso/edit?output https://jsbin.com/ledomilaso/edit?output

twelfthnight 7y ago
Is it just me, or does the illusion change a little? Instead of the step, it almost seems like the yellow and blue rectangles are expanding and contracting at alternating times. (hmm, only when I don't focus on the rectangles, but somewhere else on the page)
- cakoose 7y ago
  I noticed that too. I think it's because the buses are 3 stripes long instead of 4. After I changed the "--bus" CSS variable from 30px to 40px, I got the stepping effect.
  - ehsankia 7y ago
    That's really fascinating. Multiples of 20 give the stepping effect, while the other offsets of 10 grow and shrink. Stuff in between do a strange shrink and stop and grow. I thought 20 looked the best though. I always loved making web remakes of common GIF illusions [0] where you can mess with variables and see what impact it has. This is a perfect example of that. [0] https://ehsankia.com/cjs/#19 https://ehsankia.com/cjs/#19
    - equanimitivity 7y ago
      This makes some sense: to maximize the illusion, both leading and tailing edges of the bus should be going through the light and dark strips at the same time.
- Angostura 7y ago
  Yup. Have to rename it the "inchworm illusion"
jonplackett 7y ago
This is great. Looks like two racing jellies now. My brain feels broken.
_Microft 7y ago
I reversed the direction, changed the scale and the colors and got a moonwalk-like motion instead. Change the colors back to #ff0 and #00f to see what difference they make! https://jsbin.com/dunovayewu/edit?css,output https://jsbin.com/dunovayewu/edit?css,output
- _Microft 7y ago
  The oscillating look might mainly be an effect of the small scale. The black and white lines in the background are only 1px wide and after moving one pixel, the busses touch a black bar either at the left or the right.
tda 7y ago
Great, I was just wondering what the stripe width influence was on the illusion, made it very easy to find out

twelfthnight 7y ago

Is it just me, or does the illusion change a little? Instead of the step, it almost seems like the yellow and blue rectangles are expanding and contracting at alternating times. (hmm, only when I don't focus on the rectangles, but somewhere else on the page)

cakoose 7y ago
I noticed that too. I think it's because the buses are 3 stripes long instead of 4. After I changed the "--bus" CSS variable from 30px to 40px, I got the stepping effect.
- ehsankia 7y ago
  That's really fascinating. Multiples of 20 give the stepping effect, while the other offsets of 10 grow and shrink. Stuff in between do a strange shrink and stop and grow. I thought 20 looked the best though. I always loved making web remakes of common GIF illusions [0] where you can mess with variables and see what impact it has. This is a perfect example of that. [0] https://ehsankia.com/cjs/#19 https://ehsankia.com/cjs/#19
  - equanimitivity 7y ago
    This makes some sense: to maximize the illusion, both leading and tailing edges of the bus should be going through the light and dark strips at the same time.
Angostura 7y ago
Yup. Have to rename it the "inchworm illusion"

jonplackett 7y ago

This is great. Looks like two racing jellies now. My brain feels broken.

_Microft 7y ago

I reversed the direction, changed the scale and the colors and got a moonwalk-like motion instead. Change the colors back to #ff0 and #00f to see what difference they make! https://jsbin.com/dunovayewu/edit?css,output https://jsbin.com/dunovayewu/edit?css,output

_Microft 7y ago
The oscillating look might mainly be an effect of the small scale. The black and white lines in the background are only 1px wide and after moving one pixel, the busses touch a black bar either at the left or the right.

tda 7y ago

Great, I was just wondering what the stripe width influence was on the illusion, made it very easy to find out