Tutorial request: how to animate a variable font

Christine

Thanks, well explained!

I wrote a version using a slider to access the axis, instead of making an animation:

size(300,150) # canvas

# get minimum and maximum values of the font’s axis
min_val = listFontVariations('Skia-Regular')['wght']['minValue']
max_val = listFontVariations('Skia-Regular')['wght']['maxValue']
print min_val, max_val

Variable([
    # create a variable called 'weight' and the related ui is a Slider.
    dict(name="weight", ui="Slider",
        args=dict(
                value=1,
                minValue = min_val, # value from variable font
                maxValue = max_val)), # value from variable font
    ], globals())
    
font("Skia-Regular")
fontSize(60)
fontVariations(wght= weight)

text("Variable", (20,60))    
print weight

0_1523566630676_d94582bf-a745-41e2-be8b-1da15a9e2134-image.png

HanaFolkwang

@jo Hi, thanks a lot for this!
I created a font with 6 axis and wonder how I can animate it. Is it possible that you add something how it can work with more axis? That would be awesome!
Thanks a lot, Hannah

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