How to create box illusion in SDL?

Question

I want to create a optical illusion for now just using rects and nothing else I am able to pull it off with 2 rects but I can't think of any way to keep generating rects after one another. Right now the code I have only generates 2 rects but I want to know how I can change my code where it keep generating rects and do not stop until user presses exit. Below is my code any help will be appreciated.

 #include <iostream>
#include <math.h>
#include "SDL.h"

using namespace std;

const int screen_width = 500;
const int screen_height = 500;

int main(int argc, char ** argv)
{
    SDL_Init(SDL_INIT_VIDEO);
    SDL_Window *window = SDL_CreateWindow("SDLDEMOSCENE", 50, 50, screen_width, screen_height, SDL_WINDOW_SHOWN);
    SDL_Renderer *renderer = SDL_CreateRenderer(window, 0, SDL_RENDERER_ACCELERATED);

    SDL_Rect rectangle, rectangle2;

    double rect1_x = screen_width / 2;
    double rect1_y = screen_height / 2;
    double rect1_width = 5;
    double rect1_height = 5;

    double rect2_x = screen_width / 2;
    double rect2_y = screen_height / 2;
    double rect2_width = 5;
    double rect2_height = 5;



    bool quit = false;

    while (quit == false)
    {
        SDL_Event event;
        while (SDL_PollEvent(&event))
        {
            if (event.type == SDL_QUIT)
            {
                quit = true;
            }
        }

        rectangle.x = rect1_x;
        rectangle.y = rect1_y;
        rectangle.h = rect1_height;
        rectangle.w = rect1_width;

        rectangle2.x = rect2_x;
        rectangle2.y = rect2_y;
        rectangle2.h = rect2_height;
        rectangle2.w = rect2_width;


        SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
        SDL_RenderFillRect(renderer, &rectangle);

        rect1_x -= 0.01;
        rect1_y -= 0.01;
        rect1_width += 0.02;
        rect1_height += 0.02;

        if (rect1_x < 200 || rect1_y < 200)
        {
            SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
            SDL_RenderFillRect(renderer, &rectangle2);

            rect2_x -= 0.01;
            rect2_y -= 0.01;
            rect2_width += 0.02;
            rect2_height += 0.02;
        }

        if (rect2_x < 0 || rect2_y < 0)
        {
            rect2_height = 0;
            rect2_width = 0;
            rect2_x = 250;
            rect2_y = 250;
            rect1_height = 5;
            rect1_width = 5;
            rect1_x = 250;
            rect1_y = 250;
        }



        SDL_RenderPresent(renderer);
    }

    SDL_Quit();
    return 0;
}

With this edited code now 2 squares are coming and the program is running continuously but they are coming like pulses both rects are forming together now I just want the help to make the changes where there is no delay and the 2 rects should form continuously so it gives the feel of illusion.

Answer 1

Here's it: You forgot to reset rect1's properties after rect2 finishes it's turn. Change the block if(rect2_x<0 || rect2_y<0) to this:

if (rect2_x < 0 || rect2_y < 0)
        {
            rect2_height = 0;
            rect2_width = 0;
            rect2_x = 250;
            rect2_y = 250;
            rect1_height = 5;
            rect1_width = 5;
            rect1_x = 250;
            rect1_y = 250;
        }

Why does if(rect1_x<0 || rect1_y<0) contain if(rect1_x<250 || rect1_y<250) inside it? rect_x<0 implies rect1_x<250

So you can remove that extra nesting if-block and place it in the previous one.

Not part of the answer, but heres what random things I did with your program: https://pastebin.com/zBBn7eBQ Call it inside any SDL_Window!