v3.2

3.2.2

Most of q5's WebGPU buffers used to be created and destroyed each frame. Now they are retained unless they need to increase in size. writeBuffer and the Float32Array.subarray() function is used to write data. This is in line with WebGPU best practices and maybe will improve performance on low spec devices.

Fixed WebGPU textImage which was needlessly creating a new WebGPU texture every frame, even for cached text images. Eventually unused image textures need to be destroyed, will work on that soon.

3.2.1

Fixed bug with the Canvas2D renderer that caused push() and pushMatrix() to override the font setting.

v3.1

3.1.4

Added new pointers API

Fixed multi-touch support for p5play

3.1.1

q5-webgpu: fixed noTint

3.1.0

q5 WebGPU can now draw significantly more shapes!

Shape	Unstroked	Stroked
Rect (un-rounded)	1x	2.5x
Rounded Rect	10x	15x
Ellipse, Circles, & Arcs	2x	6x
Line	-	4x

It's about ~30-50x more shapes than p5 v2 can draw.

These performance gains were achieved via the addition of two new shaders for rounded rects and elliptical arcs. These specialized shaders use instanced rendering, a newish feature of WebGPU.

The new approach gives more work to the GPU, freeing up the CPU. That's an especially good tradeoff for q5 when used with CPU heavy addons such as the upcoming q5play!

Here's a breakdown of which shader is used to draw which q5 functions.

Rounded rectangle shader used by:
rect, square, line, and capsule (new!)

Elliptical arc shader used by:
ellipse, circle, arc, point

Custom shapes shader used by:
triangle, quad, plane, beginShape/endShape

Visual quality of the shapes that use the new shaders was also improved. Strokes are no longer made up of separate lines and ellipses, which were visible when using a translucent stroke. Also, curved edges are now smooth and anti-aliased since they're drawn in the fragment shader step, not via triangle strips.

A new function for stroked capsule drawing capsule has been added! A capsule is basically pill shaped. It'll be used extensively by q5play.

https://q5js.org/learn/#capsule

Demo: https://beta.openprocessing.org/sketch/2658148

One caveat is the performance gains from this new method only compound if you're drawing shapes in the same family of shapes (rounded rects or elliptical arcs). Performance is diminished if your sketch requires that q5 frequently switch shaders which also changes pipelines in WebGPU. For example, it'd be best to draw 50,000 rects, then 50,000 ellipses rather than trying to draw a rect then an ellipse 100,000 times.

v3.0

3.0.6

ellipseMode now fully implemented in q5 WebGPU.

3.0.5

Fixed an issue with image.get when used to create an image that should be drawable by the WebGPU renderer.

3.0.3

Fixed touch handling issues caused by changes when I added support for the new Pointer API which I didn't test out well enough. Now q5 only disables default touch behavior, such as scrolling and pinch-to-zoom, when users start the touch on the canvas. touches is still still updated if the user touches anywhere in the browser window, as long as the canvas is visible within the viewport.

3.0.1

Usually on devices that don't support WebGPU, q5 will attempt to fallback to the default renderer. But on the q5 Learn pages, in WebGPU mini examples, in place of the canvas I put text stating that their browser doesn't support WebGPU.

Ideally this should only be done for mini examples that really require WebGPU, like the shader page ones, otherwise a warning indicator could be placed above sketches running in WebGPU fallback mode.

3.0.0

MAJOR version bump!

https://q5js.substack.com/p/q5js-v30-is-finally-here

v3.0 beta 7 (Release Candidate)

q5.js v3.0 release candidate! If there are no other issues found with this release it'll be released as v3.0.

2.30.2

Fixed q5 sounds failing to load and server side usage bugs.

Added more unit tests.

2.30.1

To match Canvas2D, q5's WebGPU renderer needs to flip the y axis. This was previously done by negating y values in JavaScript. Now it's done via a y flipped identity matrix. This ensures complex transformations can be made accurately: shearing no longer breaks translation. Also it's slightly better for performance.

2.30.0

version bump

v3.0 beta 6

2.29.10

The friendly error system now handles top-level errors in the user's sketch file that they create a new q5 instance in.

q5 canvases will immediately be given a parent element (main) to simplify the code in displayMode.

q5 canvas will now be added to document.documentElement the html tag root of the DOM if document.body doesn't exist.

2.29.7

Created a simple Q5.addHook function for adding lifecycle hooks the q5 way.
https://github.com/q5js/q5.js/wiki/Addons

2.29.4

Refined displayMode

2.29.2

Improved get, which needed to get pixel data from cached pixels array for best efficiency. See the new example:
https://q5js.org/learn/#get

Fixed regression that caused q5 WebGPU to crash in instance mode.

2.29.1

Fixed set function.

Added check that warns users if they're not using the latest minor version of q5.

2.29.0

q5 objects now have booleans for checking what type of object they are such as _isImage and _isGraphics. This way is faster than using instanceof or checking a string prop.

v3.0 beta 5

2.28.5

Stopped using canvas.toDataUrl as recommended by the MDN doc page.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Implemented canvas.convertToBlob polyfill on q5 canvases, works with either c2d or webgpu.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/convertToBlob

Fixed q5-webgpu color parsing regression from v2.28.0.

2.28.1

Preventing scrolling on the canvas should be the default when q5 is used in global mode. This improves the experience of viewing fullscreen interactive art on mobile devices especially.

2.28.0

Nearly complete with #119 Major Refactoring for q5 WebGPU.

The q5 WebGPU renderer is now contained within a single file because using local variables within a single scope is faster than sharing data between scopes via properties on an object. This is a tradeoff made with intent to favor performance over modularity and best practices for code organization.

The goal with q5 WebGPU is to push JavaScript to its limits and achieve the best performance possible.

Up to 30% performance improvement to shape drawing!

Up to 800% performance improvement to push and pop! Previously this was done by copying style props from the q5 instance object to an object that stored the styles and back. Now its done by storing the style settings (most of which are local variables) in an array when styles are pushed and then destructuring the array to assign to the local variables when styles are popped.

Also fixed a regression from 2.27 that kinda broke ESM support.

v3.0 beta4

2.27.8

Implemented p5 v2's addon system.

https://dev.to/limzykenneth/designing-an-addon-library-system-for-p5js-20-3d4p

2.27.4

loadImage and other load* functions still support success callbacks, but their use is now deprecated and undocumented. Use then and catch with promise based loading instead.

2.27.3

For better p5 v2 interoperability, q5 makes load* functions return promises in async setup to match v2's behavior.

If the setup function is not async, then lazy loading in setup can still be preformed.

https://q5js.org/learn/#usePromiseLoading

When q5 is run in global mode, input event listeners are now attached to the window, not the canvas element, besides 'wheel' events**. q5 input handler functions like mousePressed can run even without a canvas or with HTML elements placed above the canvas, which enables users to add HTML based UI or CSS based post processing effects.

When q5 is run in instance mode, only interaction on the canvas will trigger functions like mousePressed.

**Making the window level event listener for wheel events not passive would be necessary to be able to use e.preventDefault but browsers warn that it's bad for performance.

2.27.2

Google fonts support added by @evanalulu ! 🥳

https://q5js.org/learn/#loadFont
https://openprocessing.org/sketch/2613258

2.27.1

doubleClicked, requestPointerLock and exitPointerLock, setOutputVolume, and sound.onended added.

q5's core system, that runs preload, setup, and initiates the draw loop has been modified to allow for more flexibility regarding the timing of user sketch loading in global mode. User defined functions, besides preload, are now wrapped with FES and added to q5 after preloading is finished.

v3.0 beta3

2.26.1

q5-webgpu: The saveCanvas function now works in the middle of draw or anywhere else (just like with the Canvas2D renderer). Previously saveCanvas only let users save the previous frame if it had finished rendering, so it failed if you tried to save during the first draw call. Now it can finish rendering a frame and initiates rendering a new frame so additional drawing can occur after its used, but importantly it doesn't increase frameCount.

2.26.0

After more extensive testing and improvements made to createGraphics in q5 WebGPU, I got it mostly working but decided that it's probably best for it to be disabled by default. See issue #104 for more info.

storeItem and other localStorage functions didn't work when used in a sketch file loaded from a different domain, fixed that.

v3.0 beta2

2.25.1

createTextImage and textImage now support multi-line text!

Multi-line text and text images now vertically align properly when using the CENTER ("middle") and BOTTOM settings.

q5 WebGPU: Fixed regression, graphics and images can now be saved.

2.25.0

The new entirely Promise based preload system is complete.

Q5.prototype.registerPreloadMethod now calls _incrementPreload() before calling the registered preload method.

Each load* function immediately returns an object by default when using q5's preload system. This object now has a property .promise that can be awaited. Though this may be useful in specific cases, I recommend using the async load function instead of this for typical file loading.

let q = await Q5.WebGPU();

// what's being loaded is unclear
await load('monospace');

// makes it clear that a font is being loaded
await loadFont('monospace').promise;

textCache function (undocumented) was removed. Using textImage or createTextImage is now the only way to make text images. Editing the size of the cache is something I don't really expect anyone to need to do, but just in case I made it accessible on the q5 instance as _textCacheMaxSize.

q5 WebGPU:

• textWeight implemented!
• load now works with font family category names (like "monospace")
• saveCanvas working again

v3.0 beta1

2.24.4

The preload system now uses Promise.all behind the scenes.

Fixed frameRate bug reported by @codingMASTER398. If called multiple times before setup finished, it created multiple draw loops.

2.24.3

q5-webgpu: blendMode can now be used in draw to switch blend modes.

2.24.2

Added jit function

2.24.0

Version bump.