Posted on

Scroll down to change the colors, I added buttons for you to customize (I was a bit lazy to customize the design)

Stare at the middle, and the white squares appear coloured.Stare at the middle for a while, and the white squares appear coloured. It's a kind of a "lilac" illusion.

The animation is inspired by a tweet by twitter/Gavin Buckingham, in which he shared an intriguing variation of the Lilac Chaser illusion. The animation is interactive, as the user can adjust the speed, colors of the rotating square, as well as the colors of the square patterns using sliders and color pickers.

Additionally, The code uses the p5.js library to create the animation and allows the user to customize their viewing experience by adjusting various parameters. The code generates squares on the canvas and uses a loop to update the positions of the squares, creating the illusion of rotation. You can adjust the speed of the animation with a built-in frame rate, choose colors for the rotation square and background.