How do I rotate individual squares?

I'm currently working on an animation that involves four squares that I want to rotate. I want the outer squares to rotate inwards and the two overlapping squares to rotate outwards. Any help would be greatly appreciated! Thanks!
nFrames = 120
fps = 1/30
rad = 600
size = 100for n in range(nFrames):
newPage(1920, 1080)
frameDuration(fps)
fill(1)
rect(0, 0, width(), height())
translate(width()/2, height()/2)
t = n * (2 * pi)/nFrames
t2 = n * (2 * pi)/nFrames
x = rad * cos(t)
y = rad * (sin(2 * t)/2)
scale = 2/(3  cos(2 * t))
x2 = rad * cos(t)
y2 = rad * (sin(2 * t2)/2)
fill(0, 0, 1)
oval(x  size/2, y  size/2, size, size)
fill(1, 0, 0)
oval(x2  size/2, y2  size/2, size, size)
for n in range(nFrames):
fill(0)
rect(50, 50, 100, 100)
fill(0)
rect(50, 50, 100, 100)
fill(0)
rect(650, 50, 100, 100)
fill(0)
rect(550, 50, 100, 100)

Maybe check out savedState(). Translate and rotate affect the whole canvas, wrapping separate objects in savedState() makes it easier to keep track what is happening.
nFrames = 30 fps = 1/30 for n in range(nFrames): newPage(480, 270) frameDuration(fps) with savedState(): fill(1,0,0) translate(width()/3, height()/2) rotate(90 * n/nFrames) rect(50, 50, 100, 100) with savedState(): fill(0,0,1) translate(width()*2/3, height()/2) rotate(360 * n/nFrames) rect(50, 50, 100, 100) saveImage('rotating.gif')

@monomonnik Thank you! This got me where I needed to be with my center squares. Now I am having the issue of my two outer squares orbiting around the center, rather than spinning in place.
nFrames = 120
fps = 1/30
rad = 600
size = 100for n in range(nFrames):
newPage(1920, 1080)
frameDuration(fps)
fill(1)
rect(0, 0, width(), height())
translate(width()/2, height()/2)
t = n * (2 * pi)/nFrames
t2 = n * (2 * pi)/nFrames
x = rad * cos(t)
y = rad * (sin(2 * t)/2)
scale = 2/(3  cos(2 * t))
x2 = rad * cos(t)
y2 = rad * (sin(2 * t2)/2)
fill(0, 0, 1)
oval(x  size/2, y  size/2, size, size)
fill(1, 0, 0)
oval(x2  size/2, y2  size/2, size, size)
with savedState():
fill(0)
rotate(180 * n/nFrames)
rect(50, 50, 100, 100)
with savedState():
fill(0)
rotate(180 * n/nFrames)
rect(50, 50, 100, 100)
with savedState():
fill(0)
rotate(360 * n/nFrames)
rect(650, 50, 100, 100)
with savedState():
fill(0)
rotate(360 * n/nFrames)
rect(550, 50, 100, 100)

nFrames = 60 fps = 1/30 radius = 120 for n in range(nFrames): newPage(480, 270) frameDuration(fps) with savedState(): fill(0,1,0) # move origin of the canvas to the center translate(width()/2, height()/2) # rotate the canvas rotate(360 * n/nFrames) # move the origin again translate(radius, 0) rect(50, 50, 100, 100) with savedState(): fill(1,0,1) translate(width()/2, height()/2) rotate(360 * n/nFrames) translate(radius, 0) # counterrotate the canvas so the rect appears to not rotate rotate(360 * n/nFrames) rect(50, 50, 100, 100) saveImage('rotate_more.gif')