Patt Vira | p5.js Coding Tutorial | Wiper Typography @pattvira | Uploaded April 2024 | Updated October 2024, 14 hours ago.
LET'S CONNECT
✨ Sign up for my newsletter at pattvira.com
✨ Instagram: instagram.com/pattvira
✨ Twitter: twitter.com/pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Wiper Typography Code: editor.p5js.org/pattvira/sketches/hkOFrj4Y5
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn

Credit:
🔸 This tutorial is a re-creation of a piece by Jongmin Kim: @cmiscm (Looking for more inspiration, check out his work here: https://links.cmiscm.com)

References:
🔗 p5.js textBounds() function reference: p5js.org/reference/#/p5.Font/textBounds

Timestamps:
0:00 Intro
0:20 Display text on canvas
3:07 Use font.textBounds() to get text's bounding box
5:20 Create vectors to store 4 corner points
12:01 Write a Letter class
18:12 Write functions to check when a letter object hits a wiper
26:41 Write a Wiper class
37:45 Final touches