Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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);
}

Original file line number Diff line number Diff line change
@@ -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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.