Patt Vira | p5.js Coding Tutorial | Intro to textToPoints (Kinetic Typography) @pattvira | Uploaded December 2023 | Updated October 2024, 7 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
π Intro to textToPoints Code: editor.p5js.org/pattvira/sketches/JDwgmoZEr
π 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:11 How to use textToPoints() function
0:40 Loading font into sketch
2:30 Using textToPoints()
5:27 Path angle (alpha)
6:10 Font size
8:59 Sample Factor and Simplify Threshold
11:09 Example: Making an oscillating letter A
β¨ 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
π Intro to textToPoints Code: editor.p5js.org/pattvira/sketches/JDwgmoZEr
π 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:11 How to use textToPoints() function
0:40 Loading font into sketch
2:30 Using textToPoints()
5:27 Path angle (alpha)
6:10 Font size
8:59 Sample Factor and Simplify Threshold
11:09 Example: Making an oscillating letter A