The basics of creating type in p5.js is easy, though typography is a field that takes a lifetime to master, which is why it's so fascinating! In this example, we'll see some of the basic text commands – in the next example we'll look at how to load unique fonts.
👩💻 https://editor.p5js.org/jeffThompson/sketches/NmIGj08jq
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Can you create text that follows your mouse? Hint: you'll need to remove noLoop() from the setup() so you can have interactivity
❓ Since text is drawn like any other shape, can you apply animation to text? What text settings would you need to think about to do that? For example, if you wanted text to rotate around its center, you'd probably want to use textAlign(CENTER, CENTER) so you're drawing it from 0,0
SEE ALSO
💡 https://p5js.org/reference/#/p5/text
💡 https://p5js.org/reference/#/p5/textFont
Download
0 formats
No download links available.
CP2: Text Basics – Interactive Typography | NatokHD