# 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
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
y = rad * (sin(2 * t)/2)
scale = 2/(3 - cos(2 * 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
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
y = rad * (sin(2 * t)/2)
scale = 2/(3 - cos(2 * 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

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
rect(-50, -50, 100, 100)
with savedState():
fill(1,0,1)
translate(width()/2, height()/2)
rotate(-360 * n/nFrames) 