I would guess you would have to do something like this:
rect(0, 0, width * 0.5, height * 0.5);
Now the square is half of your screenwidht and half of your screenheight, but when somebody has a non-square screen your rectangle wont be square, so something like this might work better:
rect(0, 0, width * 0.5, width * 0.5);
this way your square will always be a square altough if someone had a weird screen size of 800 * 200 the square will be larger then your screen is, since the width is 800 the height and the width of the square will become 400, (I dont think you would find screens like this often though)
and then of course if you want the rects to be below each other you could just add the height of the square + the height of the screen * 0.1 to also make that responsive.
Answers
I would guess you would have to do something like this:
rect(0, 0, width * 0.5, height * 0.5);
Now the square is half of your screenwidht and half of your screenheight, but when somebody has a non-square screen your rectangle wont be square, so something like this might work better:
rect(0, 0, width * 0.5, width * 0.5);
this way your square will always be a square altough if someone had a weird screen size of 800 * 200 the square will be larger then your screen is, since the width is 800 the height and the width of the square will become 400, (I dont think you would find screens like this often though)
and then of course if you want the rects to be below each other you could just add the height of the square + the height of the screen * 0.1 to also make that responsive.
I hope this messy answer somehow helps you