diff --git a/src/content/examples/en/16_Parallel_Loading_Promise/00_Async_Image_Loader/code.js b/src/content/examples/en/16_Parallel_Loading_Promise/00_Async_Image_Loader/code.js new file mode 100644 index 0000000000..84d1657441 --- /dev/null +++ b/src/content/examples/en/16_Parallel_Loading_Promise/00_Async_Image_Loader/code.js @@ -0,0 +1,37 @@ +// PromiseAllExample.js + +// Declare variables to hold the images we'll load +let img1, img2, img3; + +async function setup() { + // Add screen reader-friendly text description + textOutput(); + + // Create a canvas where the images will be drawn + createCanvas(600, 400); + + // Set background color to gray + background(220); + + // Configure text appearance + textAlign(CENTER, CENTER); + textSize(18); + + // Use async/await with Promise.all to load all three images at once + // This waits until ALL images are loaded before continuing + [img1, img2, img3] = await Promise.all([ + loadImage('https://picsum.photos/100/100?random=1'), // Replace the image links with user wanted images. + loadImage('https://picsum.photos/100/100?random=2'), + loadImage('https://picsum.photos/100/100?random=3') + ]); + + // Once all images are ready, draw them on the canvas + image(img1, 100, 150); // Draw first image at x=100 + image(img2, 250, 150); // Second image at x=250 + image(img3, 400, 150); // Third image at x=400 + + // Display a message showing that everything is loaded + fill(0); // Set text color to black + text("All images loaded!", width / 2, 50); +} + diff --git a/src/content/examples/en/16_Parallel_Loading_Promise/00_Async_Image_Loader/description.mdx b/src/content/examples/en/16_Parallel_Loading_Promise/00_Async_Image_Loader/description.mdx new file mode 100644 index 0000000000..906af2c6bc --- /dev/null +++ b/src/content/examples/en/16_Parallel_Loading_Promise/00_Async_Image_Loader/description.mdx @@ -0,0 +1,17 @@ +--- +featuredImage: "../../../images/featured/16_Async_Await_PromiseAll-thumbnail.png" +featuredImageAlt: Three random images loaded and displayed on a canvas after using async/await and Promise.all. +title: Async Await with Promise.all +oneLineDescription: Load multiple resources asynchronously before drawing. +--- + +This example demonstrates how to use + async/await +together with +Promise.all() + +Three random images are fetched asynchronously from the internet. +After all images finish loading, they are drawn together on the canvas. +Using +loadImage() +wrapped inside a promise allows better control over loading multiple resources efficiently. \ No newline at end of file diff --git a/src/content/examples/images/featured/16_Async_Await_PromiseAll-thumbnail.png b/src/content/examples/images/featured/16_Async_Await_PromiseAll-thumbnail.png new file mode 100644 index 0000000000..3c568dd749 Binary files /dev/null and b/src/content/examples/images/featured/16_Async_Await_PromiseAll-thumbnail.png differ