CP2: Text to Points (the hard way) – Interactive Typography
In the "easy way" version, we just drew text onscreen and used the color to determine if a letter was there. But what if we want the outline of text instead?
While p5.js does have a textToPoints() function built in (https://p5js.org/reference/#/p5.Font/..., it has limited capability, namely that it just gives you a big list of points and we don't have a way of knowing when one part of a letter begins and the next ends. But, being an open-source project, we can take a peek at the code for textToPoints() and make our own version! (You could also fork p5.js from Github and make modifications that way, even submit a change to the project!) The basics are pretty simple but the details get real gnarly.
There are still some limitations, the big one being that we don't have a good way to tell if a shape is the outside or a cutout, like we'd have in the letter 'o'. It also doesn't work with textAlign()... :(
👩💻 https://editor.p5js.org/jeffThompson/...
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/...
CHALLENGES
❓ Can you try other ways of displaying the letters? What about points or circles? Experiment with size and color to see how it changes the look
❓ The list of lists of lists gets a litte complicated, especially if you want to have more than one text. Can you create a class (or nested classes) that keep track of all this?
❓ Bonus: if you create a class, can you keep track of each character ('p', 't', etc) as well as its points? Can you watch for the line break character (\n) and have the x/y positions change when it hits one?
SEE ALSO
💡 The opentype library: https://github.com/opentypejs/opentyp...
💡 And this rad demo of it: https://opentype.js.org