Enable lazy loading in setup

Increasing access

Making lazy loading in parallel possible in setup, in a way that's already familiar to users of p5 v1, would enable beginners to make sketches that use images and other assets without having to learn about async/await yet.

EDIT: Lazy loading is a tactic to reduce loading times, thereby reducing bounce rates, especially in the context of games and long form sketches, in which many assets are not needed immediately when the sketch loads. A goal of offering this feature is to get students in the mindset that they should generally expedite the initial load of their sketch by not halting it to load stuff first.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

I'm not trying to retread old ground here 😅 but yesterday I found out about an interesting feature of JavaScript that can enable both async/await and lazy loading in setup! 🤩

Currently in p5 v2 lazy loading can be done like this, which requires async/await.

let dog;

async function setup() {
  createCanvas(200, 200);

  // not awaited
  lazyLoading();
}

async function lazyLoading() {
  dog = await loadImage('dog.png');
}

function draw() {
  image(dog, 100, 100);
}

Currently in p5 v2 the following example wouldn't work because loadImage returns a promise, not the p5.Image object itself. dog would be a promise and it would not be displayed after it loads.

let dog;

function setup() {
  createCanvas(200, 200);
  dog = loadImage('dog.png');
}

function draw() {
  image(dog, 100, 100);
}

But it would work if loadImage returns a p5.Image object with a then method. That way, beginners could lazy load images in setup before learning about async/await! 🥳

After users learn async/await, they could very easily choose whether to load an asset sequentially (with await) or via lazy loading.

let cat, dog;

async function setup() {
  createCanvas(200, 200);

  cat = await loadImage('cat.png');

  dog = loadImage('dog.png');
}

function draw() {
  image(cat, -100, 100);
  image(dog, 100, 100);
}

This feature also could provide a better way for p5 v2 to do preload compatibility while also supporting async/await at any point in the sketch, which I previously thought was impossible. loadImage would not need to be changed from promise returning to object returning, it could simply return an object with a then method. Magic!

@ksen0 @davepagurek @kjhollen Does this change things? Do you still want to require beginners to use async/await? EDIT: More importantly, is this a good way to support lazy loading in p5 v2?

I'm going to implement this feature in q5.js and share working examples soon!

Start by reviewing the p5.js v2 behavior of setup, loadImage, and draw, along with the examples in the issue. Determine how lazy loading should interact with promises, async/await, and preload compatibility. Done means a settled API design and working lazy-loading behavior that supports both the shown setup patterns.