CP2: Text Basics – Interactive Typography

Опубликовано: 02 Июнь 2026
на канале: Jeff Thompson
1,168
23

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/...

ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/...

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