Concept
My concept for this work came from an in-class moment. When Professor Mang was demonstrating looping horizontal and vertical lines, my eyes were tricked into seeing illusory diagonal lines that weren’t actually there.
After chatting with a psychology major friend who is taking a course on visual perception, I learned this effect is called optical illusion (our brain “fills in” missing shapes or creates illusions). She also introduced me to a set of famous illusions, and I was especially fascinated by the Cafe Wall Illusion, where parallel lines look slanted (not parallel as they really are) when black and white tiles are offset. I decided to recreate that illusion using nested loops, because it is simple yet powerful in showing how math and art can merge to create perceptual and artistic effects.
The effect turned out to be amazing. You can actually feel the tiles appear sloped when you look at them from a certain distance. I noticed that the illusion doesn’t work really well when you are too close.
Embedded sketch
The interactivity of p5.js also inspired me to experiment with different ways of breaking the illusion, so I found that adding bold lines between the tiles is a surprisingly effective method.
A highlight of some code that you’re particularly proud of
My favorite pieces of code are the row offset logic and interactive show lines feature:
for (let y=0; y<rows; y++) {
//all even rows' first tile was pushed half way in
let offset = 0;
if (y%2 == 1) {
offset = tileSize/2;
}
//for every column
for (let x = 0; x < columns; x++) {
//all even row tiles are white
//all odd row tiles are black
if (x%2 == 0) {
fill(0);
} else {
fill(255);
}
//create tileSize tiles
//created half way in when it's on the even row
rect(x * tileSize+offset, y * tileSize, tileSize, tileSize)
}
}
//display the breaking illusion lines when clicked
if (showLines) {
fill(150);
for (let y=1; y <rows; y++) {
rect(0, y*tileSize, width, 5);
}
}
This small conditional offset, embedded in a loop, shifts every other row half a tile, which is what makes the illusion possible. The most basic function of showing lines gives me the immediate initiative to stop the illusion. I specifically love these parts because it shows how a very minimal algorithm can have a huge impact on the final visual. Without it, the grid reverses back to ordinary.
Reflection and ideas for future work or improvements
This project inspired me to think about how simple loops and conditions can recreate complex psychological effects. It reminded me that coding is not only technical but also artistic—it can play with human perception in surprising ways. In the future, I would like to expand this piece by making the illusion interactive: for example, letting the user adjust the tile size or the offset with a slider, or animating the tiles so that the illusion shifts dynamically. I would also like to try building other illusions, like the Zollner illusion or the Kanizsa triangle, to see how far p5.js can push visual trickery.
