How do I rotate individual squares?

hereforaclass

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 = 100

for 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)

monomonnik

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')

hereforaclass

@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 = 100

for 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)

monomonnik

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)
        # counter-rotate the canvas so the rect appears to not rotate
        rotate(360 * n/nFrames)
        rect(-50, -50, 100, 100)
        
saveImage('rotate_more.gif')