Animation tutorial screencast

justvanrossum

Here's an 18 minute screencast that shows some techniques to make animations with DrawBot:

Here is the source code:

CANVAS = 500
SQUARESIZE = 158
NSQUARES = 50
SQUAREDIST = 6

width = NSQUARES * SQUAREDIST

NFRAMES = 50

for frame in range(NFRAMES):
    newPage(CANVAS, CANVAS)
    frameDuration(1/20)
    
    fill(0)
    rect(0, 0, CANVAS, CANVAS)

    phase = 2 * pi * frame / NFRAMES  # angle in radians
    startAngle = 90 * sin(phase)
    endAngle = 90 * sin(phase + 0.5 * pi)

    translate(CANVAS/2 - width / 2, CANVAS/2)

    fill(1)
    stroke(0)

    for i in range(NSQUARES + 1):
        f = i / NSQUARES
        save()
        translate(i * SQUAREDIST, 0)
        scale(0.7, 1)
        rotate(startAngle + f * (endAngle - startAngle))
        rect(-SQUARESIZE/2, -SQUARESIZE/2, SQUARESIZE, SQUARESIZE)
        restore()

saveImage("StackOfSquares.gif")

ThunderNixon

This video is fantastic!This is some fun code to experiment with, as well.

ThunderNixon

Or should I say...

rapazote

Hey I'm new to drawbot and python but I'd like to show you my variation of your tutorial.
Thanks!Please post more when you have time!:~)

long season

Hey Van,
I’m very new to Python and Drawbot and followed your tutorial to great results but I have no idea of how to use text instead of a rectangle. Would you or anybody else be able to help me?
Thanks!

jo

@long-season
at what part are you stuck?

did you have a look at the documentation?
http://www.drawbot.com/content/text/drawingText.html