Optical Illusions #

Optical illusions are phenomena where our eyes and brain perceive things differently than they actually are in reality. These illusions can be caused by a variety of factors, such as light and shadow, color, patterns, and depth perception.

Our eyes gather information about the world around us and send signals to our brain to interpret that information. However, sometimes our brain interprets that information in a way that doesn’t match reality. This can happen because our brains use past experiences and knowledge to make sense of what we see, and always tries to consume as little energy as possible chossing the easiest interpretation of every image.

Sometimes they can be both fascinating and puzzling, generally used in art and architecture design to create interesting effects, but also in science to study the human brain and how it processes information from the environment and the amazing capabilities of facial recognition and depth perception.

Illusions classification #

Rainbow circles illusion #

The following optical illusion, that can be classified as a motion and color illusion, works by overstimulating the visual systems of the brain, it consists of 3 main parts:

• The main circle color rings that hold a color gradient.
• An inner circle ring displaced a few degrees to the left.
• An outer circle ring displaced a few degrees to the right.

Without the inner and outer rings the illusion disappears, these generate the sensation of movement in the viewer and allow them to distort the circles, below a small demonstration of this phenomenon:

Code explanation #

For the implementation of the code, we generate a general function that draws any given circle arc in a given position.

function drawCircle(stroke, size, hueArray, inverted, posX, posY) {
    push();
    strokeWeight(stroke);
    translate(posX, posY);
    rotate(frameCount * 0.32);

    // Primary Circle ring
    let colors = setColorsArray(hueArray, 0, inverted);
    setConicGradient(0, 0, 0, colors);
    if (!showEdges) ellipse(0, 0, size, size);

    strokeWeight(1);

    // Inner Edge ring
    colors = setColorsArray(hueArray, division, inverted);
    setConicGradient(0, 0, 0, colors);
    if (!discoverSecret) ellipse(0, 0, size - stroke - 1, size - stroke - 1);

    // Outter Edge ring
    colors = setColorsArray(hueArray, division, !inverted);
    setConicGradient(0, 0, 0, colors);
    if (!discoverSecret) ellipse(0, 0, size + stroke + 1, size + stroke + 1);
    pop();
}

Using this function we can draw the main circle ring, the inner and outer edge rings, the inner and outer edge rings are displaced a few degrees to the left and right respectively, this generates the illusion of movement in the viewer.

Color induction ball #

This color illusion induces a change in the color of the ball by moving it in a color gradient background, it consists of 2 main parts:

• A background with a linear gradient from dark to light in blue tones.
• A ball of intermediate color between the values at the ends of the gradient.

When we remove the gradient from the image, we see that in reality the ball does not change color as it seemed at first, but it is the same at all time.

Code explanation #

For the implementation we generate a rect with a linear gradient from dark to light in blue tones in the center of the canvas, then we draw the ball in the left of the canvas and we start moving it from left to right, when the ball reaches the right side of the canvas we start moving it from right to left.

function draw() {
    background(171, 0, 80);

    getLinearGradient(
        -320, height / 2,
        width, height / 2,
        color(231, 100, 50, 100),
        color(188, 40, 100, 100)
    )

    if (!showSecret) rect(0, 0, 1200, 800, 0);

    printBall();
}

Cornsweet illusion #

This color illusion is generated when the eye is tricked to think of a 2D image as a 3D object, so the brain will try to apply previous knowledge of 3D objects to the image, this will generate a color distortion in the image.

It consists of 5 main parts:

• A blue rect in the center of the canvas filling the top half of the canvas.
• A brown rect in the center of the canvas filling the bottom half of the canvas.
• A gray shape in the center of the canvas simulating a 3D object.
• A dark brown shape under the gray shape simulating its shadow.
• A rect filled with a special gradient in the center of the gray shape simulating that there are two different shapes, one over the other instead of one.

When we remove the gradient from the image, we see that in reality the gray shape is the same at all time, but the brain is tricked to think that there are two different shapes, one over the other instead of one.

The trick is revealed when the canvas is clicked, so a rect with the same color as the shape is drawn over the mouse position, this will reveal the illusion.

Coffee wall illusion #

This geometric illusion is generated when the eye is tricked to think that the lines aren’t parallel, so the brain will start seeing that the lines have a different angle, this will generate a geometric distortion in the image.

It consists of 2 main parts:

• A set of parallel lines spaced by a given height.
• A set of squares strip with the size of the height of the lines and separated by the same distance, each strip is moved a few pixels to the right or left generating an effect of a stair.

When we remove the squares from the image, we see that in reality the lines are parallel, but the brain is tricked to think that they aren’t.

Code explanation #

For the implementation we set a given spacing size and we draw a set of parallel lines spaced by that size, then we draw a set of squares strip with the size of the height of the lines and separated by the same distance, each strip is moved a few pixels to the right or left using the modulo 3 operator, so the movement direction is inverted each 3 strips.

const WIDTH = 600;
const HEIGHT = 350;
const SQUARE_SIZE = 28;
const STRIP_MOVEMENT = 16;

function draw() {
    createCanvas(WIDTH, HEIGHT);
    background(240);

    if (show_squares) printSquares(color(0));
    printLines(color(170));
}

function printLines(color){
    let lines_number = floor(HEIGHT / SQUARE_SIZE) + 1;

    for(let i = 0; i < lines_number; i++){
        // Move each line one square size to the bottom
        printStroke(0, SQUARE_SIZE * i, WIDTH, 2, color);
    }
}

function printSquareStrip(posX, posY, color){
    let squares_numbers = ceil((WIDTH - posX) / (SQUARE_SIZE * 2));

    for (let i = 0; i < squares_numbers; i++){
        // Print each square followed by a blank space
        printSquare(posX + (i * (2 * SQUARE_SIZE)) , posY, color)
    }
}

function printSquares(color){
    let strips_number = ceil(HEIGHT / SQUARE_SIZE);
    let translation = STRIP_MOVEMENT;

    for(let i = 0; i < strips_number; i++){
        printSquareStrip(SQUARE_SIZE / 2 + (translation * (i % STAIRS)), 
        SQUARE_SIZE * i + SQUARE_SIZE / 2,
        color);
        
        if (i % STAIRS == STAIRS - 1) translation = translation * -1;
    }
}

Final thoughts #

As we was abble to see, illusions are a great way to learn about how the brain works, and how it can be tricked to see things that aren’t real, and how we can use this knowledge to create amazing distortions in reality, and with this knowledge we can interpret differently the things that are harder to understand, and we can also use this knowledge to create amazing effects for artistics and scientific purposes.

References #

• IndiaTimes.com
• Medium.com
• MyVision.org
• Corsweet Illusion
• Color induction
• [IA - ChatGPT: Text generation only] (https://chat.openai.com/chat)