Variable Font Animation Jiggle

paul

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.

gferreira

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

paul

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

ryan

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?