Animation tutorial screencast

justvanrossum · 7 Jan 2018, 18:55

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 · 14 Jan 2018, 11:26

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

ThunderNixon · 14 Jan 2018, 12:39

Or should I say...

rapazote · 14 Feb 2018, 11:43

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 · 2 Jul 2018, 16:31

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 · 4 Jul 2018, 08:36

@long-season
at what part are you stuck?

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