Animation tutorial screencast



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


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



  • Or should I say...
    0_1515933534370_StackOfNice9.gif



  • 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!:~)

    Image



  • 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!



  • @long-season
    at what part are you stuck?

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


Log in to reply