Week 2 Assignment: Rotating Optical Illusion

Concept

I was influenced by the optical illusions that I encountered during my childhood. Consequently, I resolved to develop something similar. The code uses the way motion, shape, and color interact with each other to make a dynamic visual experience that looks like an optical illusion.

Optical illusions use the way our brains handle patterns, color changes, and movement to make us feel things like depth, movement, or distortion that aren’t really there.

The squares’s lineup here make it look like the image is spinning and pulsing in the opposite direction when the user “pauses” the rotating effect by pressing the “Space” button because the speed of the movement changes abruptly. The slowly changing colors and the many concentric squares’ borders also mess with how we think about depth, drawing our attention inward while the colors in the background change easily, throwing us off.

Sketch

Code I am proud of

“For()” loops are very important to this sketch because they let you make grids of circular squares over and over again. The ‘for()’ loops make placing each square easier by going through different places over and over again. Without them, it would be hard to do by hand. The design of these loops is both organized and complicated, which improves the illusion itself.

// Loop for centers of every possible square patterns
for (let x = -500 + 50; x < 500; x += 100) {
  for (let y = -500 + 50; y < 500; y += 100) {
    // Variable stroke color based on a sine wave
    changeCol = sin(t * 100);
    let newCol = map(changeCol, -1, 1, 0, 255);

    // Draw multiple concentric squares with decreasing sizes and random RGB values
    stroke(newCol);
    strokeWeight(3);
    fill(r, g, b, 60); // Random RGB with fixed alpha
    rect(x, y, 80, 80);

    stroke(newCol / 2);
    fill(r, g, b, 80); // RGB for smaller square
    rect(x, y, 60, 60);

    stroke(newCol / 4);
    fill(r, g, b, 120); // RGB for even smaller square
    rect(x, y, 40, 40);

    stroke(newCol / 6);
    fill(r, g, b, 140); // RGB with different alpha
    rect(x, y, 20, 20);

    stroke(newCol / 8);
    fill(r, g, b, 160); // RGB with a different alpha
    rect(x, y, 10, 10);
  }
}

These loops also make the sketch scalable and easy to edit in the future.

Future Improvements

• There should be a live control panel with settings for things like spinning speed, background color transition speed, and square size. This would give people more control over the illusion and let them make the experience their own.
• Adding a z-axis or moving based on depth would make things even more complicated. The sense of 3D space could be better created by making the squares bigger in the center and smaller in the background to show depth.
• Random colors add variety, but a color pattern that works well together can make something look better.