Tutorial request: how to animate a variable font

MIKEDUG

thanks for this. i got it to work, but the output gif is very low resolution? just wondering how to output to higher resolution
thanks
mike

jo

@mikedug hello mike,
if you want higher resolution you just increase the values for width and height within newPage().

In case you are looking for better quality and not higher resolution you might want to generate separate pngs first and then use ffmpeg from the command line to generate a gif. ffmpeg has a lot of settings,
this link might be a starting point.

MIKEDUG

thank you, great help

jo

@hanafolkwang hi, this is half a year too late and probably not even what you were looking for but I made a few more examples to generate .gifs of variable fonts.
Since there are several files I put them on github.

Anna

Hi there!

I am trying to learn. The first thing I would like to get is using some different fonts. I am choosing some I think they're installed but when i change code there are some fails.

Thank you very much

Anna

@Anna

jo

@Anna hi
do you get error messages?
if so you should post them.
and maybe post some code.
what is going wrong and what would you like it to do?

Sabina

@Mattipa Hi there! I like the very simple result of this tutorial, I was wondering if I could make a centered alignment of the word in the middle of the page. Thank you!

jo

@Sabina

to center the text on the page you should set the align parameter to center and set the x coordinate of the text to half of the page width:

    text(txt, (width()/2, 70), align ='center')

Anna

This post is deleted!

Anna

This post is deleted!

Sabina

@jo Thank you! Solved : D

ticoflavio

Anyone knows how can I animate individual characters in a word?

gferreira

@ticoflavio have a look at this example

ticoflavio

@gferreira Thanks!

yoshigoshi

@gferreira does the example code make 2 gifs, one width and one weight separately? When I run it, it prints only the weight axis. Thank you in advance!

gferreira

hello @yoshigoshi,

the axis is selected by index in line 11:

axis = list(variations.keys())[0] # 0 = first

the width axis is the second one in this case, so you can get it with [1].

cheers!

yoshigoshi

@gferreira Thank you!!

hzinn

@jo hello jo,
im curious about this solution because my animation seems a bit shaky and its not about the number of frames. It looks like it always snaps the points to an invisible grid which has a lot bigger units than pixels. Thanks in advance!

jo

@hzinn hi,
maybe some calculation is going wrong. maybe the variable font has some issues? but it is really hard to say what is happening without some code or image.
does it work if you use the Skia font?