Hacker News Reader

Comment by gnagatomo | Hacker News Reader

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

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)

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.

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

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.

Yup. Have to rename it the "inchworm illusion"

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

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.

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

This is great. Looks like two racing jellies now.

My brain feels broken.

Reply on news.ycombinator.com