Patt Vira | p5.js Coding Tutorial | Oscillating Kinetic Typography @pattvira | Uploaded December 2023 | Updated October 2024, 14 hours ago.
✨ Get your '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
🔗 Oscillating Kinetic Typography Code: editor.p5js.org/pattvira/sketches/4BroUvdr8
🔗 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

Timestamps:
0:00 Intro
0:10 Using external libraries: opentype.js and g.js
0:50 Step 1: Loading font
3:13 Step 2: Using opentype.js to get path data
4:36 Step 3: Using g.js to resample path
6:06 Step 4: Converting from 1D to 2D array
9:22 Working with array of points
12:24 Creating wavy text