How to Load Data with p5.js (2.0)

This video covers how to load external assets like images, JSON files, and data from APIs into your p5.js 2.0 sketches. Learn the fundamentals of asynchronous operations in p5.js using Promises with async/await. Code: https://thecodingtrain.com/tracks/p5js-2.0/p5js-2.0/loading-data 🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-how-to-load-data-with-p5js-20 p5.js Web Editor Sketches: 🕹️ Loading a Single Image: https://editor.p5js.org/codingtrain/sketches/NPKPIYhBR 🕹️ Sequential Loading: https://editor.p5js.org/codingtrain/sketches/lQxT7PTKC 🕹️ API and Loading Animation: https://editor.p5js.org/codingtrain/sketches/M_NGGyqr4 🕹️ Parallel Loading with Promise.all: https://editor.p5js.org/codingtrain/sketches/MgrJuSvJt 🕹️ Loading images with placeholders exercise: https://editor.p5js.org/codingtrain/sketches/Ur6plDyKK 🎥 Previous: https://youtu.be/0Ad5Frf8NBM 🎥 Next: https://youtu.be/1KqQeqZ3R9Y References: 📖 p5.js 2.0 Beta: https://beta.p5js.org/ 📖 Promise.all: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all 🎨 Dog API: https://dog.ceo/dog-api/ Videos: 🚂 https://youtu.be/0Ad5Frf8NBM 🚂 https://youtu.be/QO4NXhWo_NM 🚂 https://youtu.be/AwyoVjVXnLk Timestamps: 0:00:00 Hello! 0:00:54 How to Load an Image in p5.js 0:02:16 Asynchronous Code: promises, async, and await 0:04:10 Common Mistakes to Avoid 0:05:51 Loading Data from a Live API 0:08:21 Loading Multiple Items in a Sequence 0:09:12 Creating a Custom Loading Animation 0:13:39 Faster Parallel Loading with Promise.all() 0:16:48 Challenge for you! 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 #asyncawait #promises #p5js2 #loadingimages #api #json #promiseall #p5js #javascript =====================================================