Variable Font Animation Jiggle



  • Hi, I'm trying to make a very simple animation of a variable font. However at slow speeds and especially at smaller font sizes a weird jiggle appears.

    Is there a way to get rid of it or is this a bug?

    Here is a video of the animation.

    And here is my code:

    w = 1080
    h = 1080
    
    path = "SpaceGroteskVariable.ttf"
    customFont = installFont(path)
    
    nframes = 800
    fps = 30
    
    for i in range(nframes):
        newPage(w, h)
        frameDuration(1.0/fps)
        
        fill(1, 1, 1)
        rect(0, 0, w, h)
        
        fill(0, 0, 0)
        font(customFont, 200)
        
        fontVariations(wght = 300 + 400 * (i/nframes))
        text("Hamburg", (w/2, h/2-100), align="center")
        
    saveImage("animation.mp4")
    

    I'm using DrawBot v3.126 on MacOS 11.0.1.



  • hello @paul,

    I’ve adapted your script to use the Skia font, and was able to reproduce the issue. I think it‘s related to hinting and text rasterization on low resolutions.

    you can reduce the jiggle effect by converting the text to curves – that is, setting it with BezierPath instead of text().

    the script below generates two movies for comparison, one with each approach.

    w = 1080
    h = 1080
    customFont = 'Skia'
    nframes = 500
    fps = 30
    
    var = listFontVariations(customFont)
    varMin = var['wght']['minValue']
    varMax = var['wght']['maxValue']
    
    for mode in range(2):
        for i in range(nframes):
            newPage(w, h)
            frameDuration(1.0/fps)
            fill(1)
            rect(0, 0, w, h)
            fill(0)    
            wt = varMin + i * ((varMax - varMin) / nframes)
    
            # mode 0: text as text
            if mode == 0:
                font(customFont, 200)
                fontVariations(wght=wt)
                text("Hamburg", (w/2, h/2-100), align="center")
            
            # mode 1: text as bezierPath
            else:
                txt = FormattedString()
                txt.append("Hamburg", font=customFont, fontSize=200, fontVariations=dict(wght=wt))
                B = BezierPath()
                B.text(txt, (w/2, h/2-100), align="center")
                drawPath(B)
        
        saveImage(f"animation-{mode}.mp4")
        newDrawing()
    

    hope this helps! cheers



  • @gferreira Yes, that works for me! Thank you so much for the workaround! 🙂



  • Hi @gferreira, this workaround is really helpful in making variable font animations not so jittery (run into that a lot). However, when using BezierPath, one loses selecting fill within some words of the FormattedString. Is it possible not flatten it all to one color with BezierPath?