Patt Vira | p5.js Coding Tutorial | Rotating Type (Kinetic Typography) @pattvira | Uploaded December 2023 | Updated October 2024, 23 hours ago.
✨ Get your FREE 'Basic toolkit to Getting Started with Creative Coding' on my website: https://www.pattvira.com. Let me know if you find it useful! ✨
—
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Rotating Type Code: editor.p5js.org/pattvira/sketches/GkwmD5D2q
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn

🔗 Kinetic Typography Series:
🔗 Intro to textToPoints: youtu.be/eZHclqx2eJY
🔗 Intro to OpenType.js: youtu.be/97VC4PZTX7U
🔗 Rotating Type Tutorial: youtu.be/84AKFhqynvs
🔗 Wavy Letter T Tutorial: youtu.be/izZTqwamsKI
🔗 3-Dimensional Kinetic Typography Tutorial: youtu.be/lUqKie4Cc00
🔗 Oscillating Kinetic TypographyTutorial: youtu.be/KCp0RgEvV3c

🔗 Useful resources:
🔗 textToPoints() Function: p5js.org/reference/#/p5.Font/textToPoints
🔗 p5.Font Class: p5js.org/reference/#/p5.Font
🔗 Google Fonts - Roboto: fonts.google.com/specimen/Roboto

Timestamps:
0:00 Intro
0:40 Pre-loading font
1:54 Using textToPoints()
5:08 Rotating text in a circular motion
7:53 Adding text on top
9:53 Moving text in an oscillating motion
12:30 Explaining sampleFactor and simplifyThreshold (textToPoints arguments)