diff --git a/content/tracks/side-tracks/p5js-2.0/index.json b/content/tracks/side-tracks/p5js-2.0/index.json index d087255ca..3c990491f 100644 --- a/content/tracks/side-tracks/p5js-2.0/index.json +++ b/content/tracks/side-tracks/p5js-2.0/index.json @@ -1,5 +1,5 @@ { "title": "p5.js 2.0", "description": "A collection of videos exploring the new features and capabilities introduced in p5.js 2.0, including loading with async and await, fonts and typography, custom shapes and curves, and more!", - "videos": ["p5js-2.0/async-await", "livestreams/p5js-2.0"] + "videos": ["p5js-2.0/async-await", "p5js-2.0/loading-data", "livestreams/p5js-2.0"] } diff --git a/content/videos/mastodon/what-is-mastodon/index.json b/content/videos/mastodon/what-is-mastodon/index.json index 905338535..ccde4416f 100644 --- a/content/videos/mastodon/what-is-mastodon/index.json +++ b/content/videos/mastodon/what-is-mastodon/index.json @@ -14,7 +14,7 @@ "time": "6:07", "title": "federation - all instances communicate with each other" }, - { "time": "7:12", "title": "AcitvityPub" }, + { "time": "7:12", "title": "ActivityPub" }, { "time": "8:24", "title": "Choochoo.space" } ], "codeExamples": [ diff --git a/content/videos/p5js-2.0/async-await/index.json b/content/videos/p5js-2.0/async-await/index.json index 11dad59a4..037d4f2d0 100644 --- a/content/videos/p5js-2.0/async-await/index.json +++ b/content/videos/p5js-2.0/async-await/index.json @@ -74,6 +74,12 @@ { "title": "Videos", "links": [ + { + "icon": "🚂", + "title": "Loading Data with p5.js 2.0", + "url": "/tracks/p5js-2.0/p5js-2.0/loading-data", + "description": "Learn more about loading data in p5.js 2.0." + }, { "icon": "🚂", "title": "Promises Part 1", @@ -89,5 +95,8 @@ ] } ], - "credits": [] + "credits": [ + { "title": "Editing", "name": "Mathieu Blanchette" }, + { "title": "Animations", "name": "Jason Heglund" } + ] } diff --git a/content/videos/p5js-2.0/loading-data/images/choochoo.png b/content/videos/p5js-2.0/loading-data/images/choochoo.png new file mode 100644 index 000000000..b722bdd2a Binary files /dev/null and b/content/videos/p5js-2.0/loading-data/images/choochoo.png differ diff --git a/content/videos/p5js-2.0/loading-data/images/dogs1.png b/content/videos/p5js-2.0/loading-data/images/dogs1.png new file mode 100644 index 000000000..e1ba13154 Binary files /dev/null and b/content/videos/p5js-2.0/loading-data/images/dogs1.png differ diff --git a/content/videos/p5js-2.0/loading-data/images/dogs2.png b/content/videos/p5js-2.0/loading-data/images/dogs2.png new file mode 100644 index 000000000..f17df19e2 Binary files /dev/null and b/content/videos/p5js-2.0/loading-data/images/dogs2.png differ diff --git a/content/videos/p5js-2.0/loading-data/images/download.png b/content/videos/p5js-2.0/loading-data/images/download.png new file mode 100644 index 000000000..b3200c55c Binary files /dev/null and b/content/videos/p5js-2.0/loading-data/images/download.png differ diff --git a/content/videos/p5js-2.0/loading-data/images/kittens1.png b/content/videos/p5js-2.0/loading-data/images/kittens1.png new file mode 100644 index 000000000..059c6646a Binary files /dev/null and b/content/videos/p5js-2.0/loading-data/images/kittens1.png differ diff --git a/content/videos/p5js-2.0/loading-data/images/kittens2.png b/content/videos/p5js-2.0/loading-data/images/kittens2.png new file mode 100644 index 000000000..3f636b025 Binary files /dev/null and b/content/videos/p5js-2.0/loading-data/images/kittens2.png differ diff --git a/content/videos/p5js-2.0/loading-data/index.json b/content/videos/p5js-2.0/loading-data/index.json new file mode 100644 index 000000000..f3f1e23d5 --- /dev/null +++ b/content/videos/p5js-2.0/loading-data/index.json @@ -0,0 +1,106 @@ +{ + "title": "p5.js 2.0: Loading Data (Images, APIs, JSON)", + "description": "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.", + "videoId": "25omXt_OjD4", + "nebulaSlug": "codingtrain-how-to-load-data-with-p5js-20", + "date": "2025-10-03", + "languages": ["p5.js", "JavaScript"], + "topics": ["async/await", "promises", "p5.js 2", "loading images", "API", "JSON", "Promise.all"], + "canContribute": true, + "relatedChallenges": [], + "timestamps": [ + { "time": "0:00:00", "title": "Hello!" }, + { "time": "0:00:54", "title": "How to Load an Image in p5.js" }, + { "time": "0:02:16", "title": "Asynchronous Code: promises, async, and await" }, + { "time": "0:04:10", "title": "Common Mistakes to Avoid" }, + { "time": "0:05:51", "title": "Loading Data from a Live API" }, + { "time": "0:08:21", "title": "Loading Multiple Items in a Sequence" }, + { "time": "0:09:12", "title": "Creating a Custom Loading Animation" }, + { "time": "0:13:39", "title": "Faster Parallel Loading with Promise.all()" }, + { "time": "0:16:48", "title": "Challenge for you!" } + ], + "codeExamples": [ + { + "title": "Loading a Single Image", + "description": "A basic example of loading an image into a p5.js 2.0 sketch using async and await in setup().", + "image": "choochoo.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/NPKPIYhBR" } + }, + { + "title": "Sequential Loading", + "description": "Demonstrates JSON from the Dog API and then loading an image from the JSON.", + "image": "dogs1.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/lQxT7PTKC" } + }, + { + "title": "API and Loading Animation", + "description": "Demonstrates loading JSON from the Dog API and then creating a loading bar while fetching multiple images.", + "image": "dogs2.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/M_NGGyqr4" } + }, + { + "title": "Parallel Loading with Promise.all", + "description": "An example showing how to load multiple images in parallel for better performance using Promise.all().", + "image": "kittens1.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/MgrJuSvJt" } + }, + { + "title": "Loading images with placeholders exercise", + "description": "A demonstration of loading images from an array of files, displaying a placeholder while each image loads.", + "image": "kittens2.png", + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/Ur6plDyKK" } + } + ], + "groupLinks": [ + { + "title": "References", + "links": [ + { + "icon": "📖", + "title": "p5.js 2.0 Beta", + "url": "https://beta.p5js.org/", + "description": "The beta website for p5.js 2.0 with updated references and examples." + }, + { + "icon": "📖", + "title": "Promise.all", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all", + "description": "MDN documentation on Promise.all for handling multiple promises in parallel." + }, + { + "icon": "🎨", + "title": "Dog API", + "url": "https://dog.ceo/dog-api/", + "description": "A public API for dog images used in the examples." + } + ] + }, + { + "title": "Videos", + "links": [ + { + "icon": "🚂", + "title": "p5.js 2.0: async and await", + "url": "/tracks/p5js-2.0/p5js-2.0/async-await", + "description": "How to transition from p5.js 1.0 to 2.0 with async and await." + }, + { + "icon": "🚂", + "title": "Promises Part 1", + "url": "/tracks/topics-in-native-javascript/js/promises-part-1", + "description": "Learn more about JavaScript Promises in depth." + }, + { + "icon": "🚂", + "title": "Promises Part 2", + "url": "/tracks/topics-in-native-javascript/js/promises-part-2", + "description": "Continue learning about JavaScript Promises." + } + ] + } + ], + "credits": [ + { "title": "Editing", "name": "Mathieu Blanchette" }, + { "title": "Animations", "name": "Jason Heglund" } + ] +} diff --git a/content/videos/teachable-machine/3-sound-classification/index.json b/content/videos/teachable-machine/3-sound-classification/index.json index 5c903ccc4..39ce98a97 100644 --- a/content/videos/teachable-machine/3-sound-classification/index.json +++ b/content/videos/teachable-machine/3-sound-classification/index.json @@ -2,7 +2,7 @@ "title": "Teachable Machine 3: Sound Classification", "description": "Introducing Teachable Machine 2.0 (from Google Creative Lab)! Train a computer to recognize your own images, sounds, & poses. In this video, I train a sound classifier and import the machine learning model into a p5.js sketch with the ml5.js library", "videoNumber": "3", - "nebulaSlug": "the-coding-train-yt-teachable-machine-3-sound-classifiication", + "nebulaSlug": "the-coding-train-yt-teachable-machine-3-sound-classification", "videoId": "TOrVsLklltM", "date": "2019-11-11", "languages": ["JavaScript", "p5.js", "ml5.js"],