p5play Progress: July 2025

Improved sprite sheet support and group array editing.

Check out the new p5play.org Learn page: “Sprite Sheet of Images”.

“Traffic Simulator 2025” was my first relatively big project (~1000 lines of code) made with q5.js WebGPU and p5play, so it was a great way to find and fix real-world bugs.

q5.js

Using `await` on the top (file) level could cause q5.js to prematurely conclude that preloads were finished, causing it to try to run `setup` and `draw` before they’re defined. Fixed in q5.js v3.3.

Also rendering during preloading, before `setup` and `draw` runs, is now enabled for q5’s WebGPU renderer. Useful for displaying loading progress, which was not possible in p5.js v1.

Some great news about WebGPU is that it’ll be enabled by default in Safari on iOS 26 and macOS 26!

p5play

I fully implemented `group.splice` (extended Array.splice) and other group array editing functions in p5play v3.32.

Additionally, I added support for loading subtextures in a sprite sheet via a texture atlas file. In this code excerpt, the texture atlas and sprite sheet image are preloaded, then used in setup to add the animations. Remember that preloading loads assets in parallel, which is more efficient than loading in sequence.

let emoteAtlas = load('assets/emotes_atlas.xml');

let emotes = new Group();
emotes.spriteSheet = 'assets/emotes.png';
emotes.anis.cutFrames = true;

q.setup = () => {
  emoteAtlas = parseTextureAtlas(emoteAtlas);
  emotes.addAnis(emoteAtlas);
}

However, in cases like this you may prefer to use q5’s `await load()` to write more straightforward, synchronous code. This code excerpt is on the top level of a JavaScript module file, so `await` is enabled outside of an async function.

let emoteAtlas = await load('assets/emotes_atlas.xml');
emoteAtlas = parseTextureAtlas(emoteAtlas);

let emotes = new Group();
emotes.spriteSheet = 'assets/emotes.png';
emotes.anis.cutFrames = true;
emotes.addAnisq5pl(emoteAtlas);

I recommend using `await load()` sparingly, since it prevents the rest of the code below it from running until the file is downloaded.

p5play GDF Curriculum

Soon I’ll be adding some more lessons and activities to the p5play Game Design Fundamentals curriculum (free sample available).

q5play

My first full school year of selling educational licenses went pretty well, so I’ll be able to continue working on this project.

Thank you all for the support, which I’m so grateful for!

p5play v3 is now complete, but I won’t be resting on my laurels. My aim with the next iteration, q5play (p5play v4), is to offer even greater ease of use and performance.

Development of q5play will occur in a separate GitHub repo and website, q5play.org. p5play and p5play.org will receive long term support.

The current timeline for q5play is to have a beta ready before spring semester, then release v4.0 before next summer!