Loading screen with preload

p5.js Coding Questions
2

Hi @Omri,

Well you are spicing stuff a bit! :wink:

So you want to display a loading screen that is basically a p5 sketch itself.

Basically since loadImage can be asynchronous and accepts a callback, you can call it in setup() and in draw() display your loader if not loaded:

let bigImage;
let loaded = false;

function setup() {
  createCanvas(400, 400);
  
  bigImage = loadImage(
    "https://images.pexels.com/photos/358457/pexels-photo-358457.jpeg",
    () => loaded = true
  );
}

function draw() {
  if (!loaded) {
    background(0);
    // Your spinner here
  } else {
    background(220);
  }
}
1 Like