Tourettic Text - Beginner drowning in "too many ways to do things in javascript"

[brandtryan]

I want to create a p5js sketch that displays a short(ish) memoir piece I wrote about growing up with Tourette's. The piece contains more or less 3500 words, and around 17000 characters (including spaces). I want to be able to control each individual character in the p5 sketch.

I'm getting stuck in the "design" phase as there are too many ways to do this project. I'm fairly new to programming and I'll find a new way, go down that rabbit hole for a few days, then find out there's a better way, go down that rabbit-hole, etc. I've tried:

• straight p5 sketch with a "Letter" class with various properties/methods (current). Problem: I want to use "variable" fonts to control various axes and apparently p5 doesn't support this.

• created text in Illustrator, exported as SVG and assigned unique ID to each path(letter). Problem: performance killer.

• (No p5) Straight HTML/CSS Animation. Problem: limited capabilities.

Does this library essentially take a font, and then a glyph from that font and turn it into a vector image? Similar to "Create Outlines" from text in Illustrator?

I have a good idea of what I want the text to do (e.g. the methods associated with the "Letter" class above) - but when I discovered "variable" fonts and their capabilities, my head exploded as it opened up all kinds of interesting things I could do to make the text "have Tourette's".

So my question is: does this library effectively introduce variability to a font, albeit not through "axes" but through points/paths created?

Thank you for any replies!

[Connum]

You can get SVG paths using this library, but variable fonts are currently not yet supported.