|
| 1 | +{ |
| 2 | + "title": "p5.js 2.0: async and await", |
| 3 | + "description": "This video tackles one of the bigger changes in p5.js 2: loading data with async and await! Fear not, I'll cover how to transition from preload and callbacks in p5.js 1.0 to using promises with async/await in 2.0.", |
| 4 | + "videoId": "0Ad5Frf8NBM", |
| 5 | + "date": "2025-09-29", |
| 6 | + "languages": ["p5.js", "JavaScript"], |
| 7 | + "topics": ["async/await", "promises", "p5.js 2", "preload", "callbacks"], |
| 8 | + "canContribute": true, |
| 9 | + "relatedChallenges": [], |
| 10 | + "timestamps": [ |
| 11 | + { "time": "0:00:00", "title": "p5.js 2.0!" }, |
| 12 | + { "time": "0:03:00", "title": "Switching versions in the web editor" }, |
| 13 | + { "time": "0:05:02", "title": "Loading with p5.js 1" }, |
| 14 | + { "time": "0:06:11", "title": "Synchronous vs Asynchronous Code" }, |
| 15 | + { "time": "0:08:37", "title": "Promises!" }, |
| 16 | + { "time": "0:11:29", "title": "switching from preload to async setup()" }, |
| 17 | + { "time": "0:13:57", "title": "Loading with callbacks in p5.js 1.0" }, |
| 18 | + { "time": "0:17:15", "title": "Sequencing loading data in p5.js 1.0" }, |
| 19 | + { "time": "0:19:26", "title": "Sequencing with async and await in p5.js 2.0" }, |
| 20 | + { "time": "0:20:09", "title": "Creating a custom Async Function" }, |
| 21 | + { "time": "0:22:13", "title": "Thank you for watching!" } |
| 22 | + ], |
| 23 | + "codeExamples": [ |
| 24 | + { |
| 25 | + "title": "p5.js 2 - async and await", |
| 26 | + "description": "Basic example of loading an image with async and await.", |
| 27 | + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/Q6S38g0rS" } |
| 28 | + }, |
| 29 | + { |
| 30 | + "title": "p5.js 2 - loading animation", |
| 31 | + "description": "How to use a custom async function to load data without blocking draw.", |
| 32 | + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/JLIxyHrkn" } |
| 33 | + }, |
| 34 | + { |
| 35 | + "title": "p5.js 2 - loading in a sequence", |
| 36 | + "description": "How to load data with sequential calls with await.", |
| 37 | + "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/lQxT7PTKC" } |
| 38 | + } |
| 39 | + ], |
| 40 | + "groupLinks": [ |
| 41 | + { |
| 42 | + "title": "References", |
| 43 | + "links": [ |
| 44 | + { |
| 45 | + "icon": "π", |
| 46 | + "title": "p5.js 2.0 Beta", |
| 47 | + "url": "https://beta.p5js.org/", |
| 48 | + "description": "The beta website for p5.js 2.0 with updated references and examples." |
| 49 | + }, |
| 50 | + { |
| 51 | + "icon": "π", |
| 52 | + "title": "p5.js 2.0", |
| 53 | + "url": "https://github.com/processing/p5.js/issues/7488", |
| 54 | + "description": "p5.js GitHub issue: Beta, Timeline, and Compatibility Addons" |
| 55 | + }, |
| 56 | + { |
| 57 | + "icon": "π", |
| 58 | + "title": "p5.js 2.0: You Are Here & How to Contribute!", |
| 59 | + "url": "https://discourse.processing.org/t/dev-updates-p5-js-2-0-you-are-here-how-to-contribute/46130", |
| 60 | + "description": "p5.js Discourse thread on the 2.0 release." |
| 61 | + }, |
| 62 | + { |
| 63 | + "icon": "π¨", |
| 64 | + "title": "Dog API", |
| 65 | + "url": "https://dog.ceo/dog-api/", |
| 66 | + "description": "A public API for dog images used in the examples." |
| 67 | + } |
| 68 | + ] |
| 69 | + }, |
| 70 | + { |
| 71 | + "title": "Videos", |
| 72 | + "links": [ |
| 73 | + { |
| 74 | + "icon": "π", |
| 75 | + "title": "Promises Part 1", |
| 76 | + "url": "/tracks/topics-in-native-javascript/js/promises-part-1", |
| 77 | + "description": "Learn more about JavaScript Promises in depth." |
| 78 | + }, |
| 79 | + { |
| 80 | + "icon": "π", |
| 81 | + "title": "Promises Part 2", |
| 82 | + "url": "/tracks/topics-in-native-javascript/js/promises-part-2", |
| 83 | + "description": "Continue learning about JavaScript Promises." |
| 84 | + } |
| 85 | + ] |
| 86 | + } |
| 87 | + ], |
| 88 | + "credits": [] |
| 89 | +} |
0 commit comments