p5.js preload system REMOVED from version 2?!

The Processing Foundation is breaking p5.js backwards compatibility in a BIG way. Find out how q5.js gives users the best of both worlds: preloading and async/await.

In p5.js v2 beta, the preload system has been removed entirely.

https://github.com/processing/p5.js/releases/tag/v2.0.0-beta.2 👎

This will make all p5.js projects that use preload and load* functions, like `loadImage`, incompatible with p5 v2 upon its release. 😳

EDIT: A compatibility addon for using preload with p5 v2 is now available, but limits users to either using `preload` or `async setup`, it can’t do both like q5 can.

https://github.com/processing/p5.js-compatibility

The preload system was removed in favor of making the load* functions return await-able promises. This offers some big benefits: no more preload function or callbacks!

/* p5.js v2 async setup example */

let img;

async function setup() {
  createCanvas(200, 200);
  img = await loadImage('cat.jpg');
}

But it’s a massive breaking change: think of all the existing lessons and tutorials that will become outdated because of this.

It’s also more difficult for users to efficiently load files.

let img0, img1, img2;

async function setup() {
  createCanvas(200, 200);
  img0 = await loadImage('cat.jpg');
  img1 = await loadImage('dog.jpg');
  img2 = await loadImage('bear.jpg);
}

In the code above, `await` waits for each image to load, blocking the lines of code below it from running, which causes the images to load sequentially. This inefficiency would have an effect on page load times if a lot of data is loaded this way.

So will we all be stuck using p5 v1? 🥺

Nah, don't worry! With q5 you can have the best of both worlds.

---

By default q5.js will still use the preload system. 🥳

Note that users can already ditch the preload function with q5’s top level global mode.

createCanvas(200, 200);

let img = loadImage('cat.jpg');

function draw() {
  background(img);
}

You can also set `usePreloadSystem(false)` to make q5 match the behavior of p5 v2 regarding the load* functions.

Additionally, there’s a new function simply called `load` that loads any type of file supported by q5. It returns a promise, enabling users to take advantage of the async/await paradigm even when (by default) the preload system is enabled.

`load` can also be used on the file level with top level `await` in JS modules, eliminating the need for an async setup function and separate declaration and definition of variables. Here’s an example of that with q5 WebGPU:

let q = await Q5.WebGPU();
createCanvas(200, 200);

let levels = await load('/levels.json');

// ...then use the level data for further setup

q.draw = function () {
  // ...
};

If enabling users to write cleaner code was the goal of removing the preload system, p5 v2 is still missing the mark in that regard by not supporting top level global use, thus no JS modules support and no top level await.

---

I’m all for providing additional options to advanced users, but not at the cost of ease of use for beginners when possible.

Anyways, I never thought that q5.js would offer better backwards compatibility with p5.js v1 than p5.js v2 will! 😆

Let me know in the comments: What do you think of The Processing Foundation removing the preload system from p5.js v2?