Patt Vira | p5.js Coding Tutorial | 3-Dimensional Kinetic Typography @pattvira | Uploaded December 2023 | Updated October 2024, 3 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
🔗 3-Dimensional Kinetic Typography Code: editor.p5js.org/pattvira/sketches/r8ykXZaHd
🔗 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:
🔗 Image Rastering Tutorial: youtu.be/ruth6FZ2RK0?si=lVuLtmNVPiTiD2-Z

Timestamps:
0:00 Intro
0:17 Drawing a box in WEBGL mode
2:45 Drawing a grid of boxes
9:06 Creating a Box class
13:30 Using textToPoints for text outline
23:03 Moving text up and down (z-direction)