some fixes Co-authored-by: Mamatha1718

Author: perminder-17

src/content/examples/en/16_Parallel_Loading_Promise/code.js

@@ -0,0 +1,46 @@
+// 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 untill ALL images are loaded before continuing
+  [img1, img2, img3] = await Promise.all([
+    loadImageAsync('https://picsum.photos/100/100?random=1'), // Replace the image links with user wanted images.
+    loadImageAsync('https://picsum.photos/100/100?random=2'),
+    loadImageAsync('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);
+}
+
+// Helper function to load images using a Promise
+// Makes loadImage compatible with async/await style
+function loadImageAsync(url) {
+  return new Promise((resolve, reject) => {
+    // Try to load the image from the given URL.
+    //If successful, resolve the promise with the image. If it fails, reject with the error.
+    loadImage(url, img => resolve(img), err => reject(err));
+  });
+}

src/content/examples/en/16_Parallel_Loading_Promise/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
+<a href="https://beta.p5js.org/reference/p5/async_await/" target="_blank"> async/await </a>
+together with
+<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all" target="_blank">Promise.all()</a>
+
+Three random images are fetched asynchronously from the internet.
+After all images finish loading, they are drawn together on the canvas.
+Using
+<a href="https://beta.p5js.org/reference/p5/loadimage/" target="_blank">loadImage()</a>
+wrapped inside a promise allows better control over loading multiple resources efficiently.