Variable Font / JavaScript / Generative Type

p5.js Project Guidance
1

Hello guys, im Daniel, a graphic designer from Portugal ending my master degree about manipulation of variable fonts to produce kinetic typography experiments.
Im creating this topic because my main ideia is to create a web system where the user can manipulate a variable font (that i created) and add some graphic elements (circles… generative elements etc…)
Since until now in p5.js the only way to add a variable font is through DOM elements, not on canvas, how on earth will i be able to add generative elements to a variable font ?
Hope you can help me!

Have a good day!

1 Like
2

Hello @DaniT3K,

Sound like fun and an exciting topic for a master thesis.

I see that you asked this question a while back. Have you explored the alternatives that were proposed back then? They look promising to me. Spot on even, like this example from Rune’s tutorial using opentype.js.

Could you build upon that?

1 Like
3

Hello daniel
my nave is steve. i might have something that might help. its not p5 but i was having some fun with spans. check this out https://codepen.io/handeman67/pen/RwWxWvm via @CodePen

4

Hey! The problem that i see is that opentype.js doesn’t support variable fonts… but yesterday i found a library called variablefont.js (https://github.com/Monotype/variableFont.js)
I haven’t tried it yet!

1 Like
5

Looks great! Thank you! I’ll check it out

6

Variable fonts are generative by nature. If you need any more control, I believe you’d have to go for opentype.js.

If you are simply looking to combine text and shapes, you could position your text DOM elements on top of the canvas. Or behind a transparent canvas.