P5.js: Variable Font / JavaScript / Generative Type

Created on 4 May 2020 · 6Comments · Source: processing/p5.js

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!

feature request

Source

HiImDaniel-type

👍1

All 6 comments

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

welcome[bot] on 4 May 2020

hi @HiImDaniel-type, welcome!
i am not familiar with what you are asking,
but maybe you can engage in a wider discussion on our forum
https://discourse.processing.org/ :)

montoyamoraga on 4 May 2020

👍1

i explained myself bad... variable fonts is what i mean ... sorry

HiImDaniel-type on 5 May 2020

👍1

It is better to ask on the discourse that montoyamoraga mentioned.
In p5 you can use the dom .style() function and you need to code the css as js, I use https://css2js.dotenv.dev/ to do that.

hellonearthis on 5 May 2020

👍1

@HiImDaniel-type while I agree it would be great to have built-in support for variable fonts within the canvas – what you described, sounds like the built in textToPoints() function can do just that – adding generative/motion elements to type based on their structures (allows you to do far more than variable type can). Once you want to save fonts with your manipulations, look into opentype.js to export.