Example of Preload with await using a Files class

p5.js
1

We can easily add the other functions starting with “load”.

Sketch here

Code :

function setup() {
  createCanvas(500, 400);
  textSize(30);
  textAlign(CENTER);
  imageMode(CENTER);
  
  Files.loadImage("chat01.jpg");
  Files.loadImage("chat02.jpg");
  Files.loadImage("chat03.jpg");
  Files.loadImage("chat04.jpg");
  Files.loadImage("chat05.jpg");
  Files.loadImage("chat06.jpg");
  Files.loadImage("chat07.jpg");
}

function draw() {
  background(200);
  translate(width/2, height/2);
  
  if (Files.preload) Files.wait();
  else {
    Files.get("chat06.jpg").resize(0, height);
    image(Files.get("chat06.jpg"), 0, 0);
  }
}

class Files {
  static files=new Map(); // <string,object>
  static filesToLoad=0;
  static filesLoaded=0;
  static filename="";
  static preload=true;

  static async loadImage(filename, path="") {
    Files.filesToLoad+=1;
    Files.files.set(filename, await loadImage("data/"+path+filename));
    Files.filesLoaded+=1;
    Files.filename=filename;
  }

  static get(filename) {
    return Files.files.get(filename);
  }

  static wait() {
    push();
    stroke(0);
    rect(-200, 0, 400, 50);
    noStroke();
    fill(0, 0, 255);
    rect(-200, 0, map(Files.filesLoaded/Files.filesToLoad*100, 0, 100, 0, 400), 50);
    fill(0);
    textSize(30);
    text(Files.filename, 0, 100);
    pop();
    if (Files.filesLoaded==Files.filesToLoad) {
      Files.preload=false;
      Files.filename="";
    }
  }
}
2

Nice work!

You might be interested in a lighter alternative in p5.js v2. You can use the promises returned by the load...() functions with Promise.all() inside async setup():

let images;

async function setup() {
  createCanvas(500, 400);

  const filenames = [
    "chat01.jpg",
    "chat02.jpg",
    "chat03.jpg",
    "chat04.jpg",
    "chat05.jpg",
    "chat06.jpg",
    "chat07.jpg"
  ];

  images = await Promise.all(
    filenames.map(filename => loadImage(`data/${filename}`))
  );
}

This removes much of the boilerplate, doesn’t require custom load functions, and loads the files concurrently.

Also worth noting: in p5.js, loading functions like loadImage include optional success and failure callbacks.

For example:

loadImage(
  "data/chat01.jpg",
  image => console.log("Loaded", image),
  error => console.error("Failed to load image", error)
);

Here’s a full sketch example (based on yours) which implements these concepts: load-files-with-await-fork by SableRaf -p5.js Web Editor

AI Disclosure: I used Claude for some light code generation and clarifying the explanations. The ideas are mine and I checked the outputs manually.

3

I’m going to take a little time to understand lol ! I’m interested!

My first impression is that my code is easier to understand , that’s one of the goals of my project: to have a code that is as easy to understand (and to explain) as possible.

I try to avoid using arrow functions for example, which are specific to Javascript, so that the code is more easily understood by someone who is used to Java or Python… I think with the object oriented programming paradigm with Design Patterns and it turns out that I write in Javascript. I don’t try to have the shortest code possible but the easiest to understand (and explain) as possible.

That said, I’m interested in better understanding Javascript (even though I won’t necessarily use it all in my project)… which is why I’ll be looking at this !

:slight_smile:

N.B. to have an error message if there is a problem is better ! I’d like to add this !

thanks a lot : I’m going to learn something new !!!