What the font?

Let's explore new typography features in p5.js 2.0! In this video, I cover how to work with variable fonts, convert text to 3D models with textModel(), extract contours with textContours(), and control the detail of your typography with sampleFactor and simplifyThreshold. Code: https://thecodingtrain.com/tracks/p5js-2.0/p5js-2.0/typography 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-what-the-font p5.js Web Editor Sketches: 🕹️ Variable Font Weights: https://editor.p5js.org/codingtrain/sketches/9SZYb2vX3 🕹️ textContours(): https://editor.p5js.org/codingtrain/sketches/ffDf3LmKi 🕹️ textModel() - 3D Text: https://editor.p5js.org/codingtrain/sketches/Z4DkmlvyM 🕹️ Coding Challenge 59 - p5.js 2.0: https://editor.p5js.org/codingtrain/sketches/cetWD9rvY 🕹️ One Letter, Two Contours: https://editor.p5js.org/codingtrain/sketches/2xr1TAmXK 🕹️ sampleFactor Diagram: https://editor.p5js.org/codingtrain/sketches/c23YgfIhC 🕹️ simplifyThreshold Demo: https://editor.p5js.org/codingtrain/sketches/9_CnA7lrl 🎥 Previous: https://youtu.be/25omXt_OjD4 🎥 Next: https://youtu.be/1KqQeqZ3R9Y References: 📖 p5.js 2.0: You Are Here & How to Contribute!: https://discourse.processing.org/t/dev-updates-p5-js-2-0-you-are-here-how-to-contribute/46130 🔤 Google Fonts: https://fonts.google.com 🐞 Typography questions and possible bugs (Issue #8177): https://github.com/processing/p5.js/issues/8177 🐞 Reference errors: textToContours() and textToModel() (Issue #8623): https://github.com/processing/p5.js/issues/8623 📖 loadFont() Reference: https://beta.p5js.org/reference/p5/loadFont/ 📖 textWeight() Reference: https://beta.p5js.org/reference/p5/textWeight 📖 textContours() Reference: https://beta.p5js.org/reference/p5/textContours 📖 textModel() Reference: https://beta.p5js.org/reference/p5/textModel Videos: 🎥 https://youtu.be/1KqQeqZ3R9Y 🚂 https://youtu.be/0Ad5Frf8NBM 🚂 https://youtu.be/25omXt_OjD4 🚂 https://youtu.be/o9sgjuh-CBM 🎯 https://youtu.be/4hA7G3gup-4 Related Coding Challenges: 🚂 https://youtu.be/4hA7G3gup-4 Timestamps: 0:00 Welcome! 0:49 Finding Fonts (Google Fonts) 1:01 Loading Fonts with Async/Await 2:30 Variable Fonts 3:17 textWeight() 4:03 Animated Text Weight 4:31 Coding Challenge 59 - Steering Behaviors 5:15 textContours() Introduction 6:00 sampleFactor and simplifyThreshold 9:00 sampleFactor Explained 12:00 simplifyThreshold Explained 14:00 Updating Challenge 59 to p5.js 2.0 15:00 Angle Property of Contours 17:00 textModel() for 3D Text 19:00 Extrude Option 20:11 Goodbye! Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://thecodingtrain.com/discord 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #typography #fonts #text #p5js2 #variablefonts #3dtext #textcontours #p5js #javascript