Back

Optical Illusion

Description


Design Process:
I really wanted to do an optical illusion with colors rather than a black and white one. I found this optical illusion that I saw people painting on paper and decided to implement it through code.
I used for loops to add the squares and circles between them to form the basic pattern of shapes. The challenge was to change the colors of the space between the squares as the pattern isn't very simple like alternating or every third column or similar.
After a lot of staring and observing the pattern, I figured out the structure and realized the pattern moves by one to the right for every row.
Using that as the starting point and using the help of arrays, I was able to code in the pattern and ended up with the trippy, wavy, grid of squares.
I played around with different colors for the squares and found that a good contrast is needed to make this illusion stand out. Colors that are too close to each other like red and orange don't make the illusion obvious and it looks a plain grid.
I also added an animation on mouse click to make it look like the waves are moving through. It is not as trippy as the static version but the more you look, the more it gets weird.
I also wanted to save my output as a gif so I used the save gif function (which I added as a comment)

How might your optical illusion get deployed in the world around you?
I think a straightforward way would be to use it on a poster or something to grab attention but I wonder if it will have a positive or negative effect on viewers because of how strange it is to look at something like an optical illusion. It would be very interesting to use optical illusions that are uncomfortable to look at for a long time to get people to reduce their screen time on their phones and laptops.
Even as I am typing this reflection with the optical illusion output to the right, I feel a little bit uncomfortable and keep feeling the urge to close this screen because I've been looking at it too long.