Code is not executed in Processing, but in p5.js Web Editor

p5.js Beginners
6

Callback preload() only works for p5js asset loading functions such as loadImage(), loadJSON(), loadFont(), etc.

Also for addon libraries which internally register their own loading functions into the p5js such as loadSound() from the p5.sound library.

Anything else preload() won’t await for them to get fully finished!

Yes, many ways! But IMO the easiest approach would be to postpone the automatically initialization of the p5js library until your callback getDevices() has finished its job.

When p5js library is loaded it searches for callbacks setup() & draw() in the browser’s global context.

So the trick to cancel that is to hide both setup() & draw() until all your unregistered loadings have been finished.

In order to hide both setup() & draw() we’ll have to slightly modify their function declaration so they won’t automatically go into the global context:

Instead of function setup() {} go w/ const setup = function () {};.

Same for function draw() {}. Just replace it w/ const draw = function () {};.

Let’s now create a function which will manually start the p5js library:

function startP5() {
  globalThis.setup = setup; // place callback setup() into global context
  globalThis.draw  = draw;  // place callback draw()  into global context

  new p5; // manually instantiate the p5js library
}

Invoke startP5() at the end of getDevices() callback after its devices[] loop:

And of course move your navigator loading stuff out of callback preload(), b/c it won’t be automatically called back until p5js is manually started. :wink:

P.S.: You won’t be able to access anything from the p5js API until after you invoke startP5(). :warning: