Skip to content

Adding documentation Example on how to do parallel loading with Promi… #825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 6, 2025
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.