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



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

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

    richards_animation_final_process11.gif



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

    rotate_more.gif


Log in to reply