v2.20

2.20.0

Video can now be played on the webgpu canvas using importExternalTexture. This functionality was added in q5-webgpu-image.js because the shader for video is nearly the same as the one for displaying images, and it uses the same vertex buffer.

createCapture implemented in q5-dom.js

v2.19

2.19.4

q5-record recorder video quality can now be set by adjusting the video bitrate directly. A certain bitrate may be enough to capture a particular sketch at a "high" visual quality, but it may be far too low for another.

2.19.2

Implemented save/saveCanvas in q5 WebGPU #92

2.19.1

Implemented canvas drawing permanence and background with alpha in q5 WebGPU #99

In q5 WebGPU images are just c2d images that get converted to gpu textures on load and modification.

Various bug fixes.

v2.18

2.18.2

q5-record added to q5.js! Big thanks to @Tezumie for his work on this.

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

v2.17

2.17.4

Implemented q5-dom and added it to the main bundle!

https://q5js.substack.com/p/q5-dom-html-creation-tools-added

v2.16

2.16.5

Added async load function while keeping the preload system enabled by default. It can now be disabled with disablePreloadSystem.

https://q5js.substack.com/p/p5js-preload-system-removed-from

v2.15

2.15.4

Added sound.pause() capability, which pauses all instances of sound playback. If sound.play() is called while sound.paused is true, then all instances of sound playback are resumed.

Also added getters for the sound's properties.

Documentation for q5-sound is now available:
https://q5js.org/learn/#sound-section

2.15.3

Q5.Sound objects, created in loadSound, are now fully backed by the WebAudio API, which has low latency and that's better for interactive art. Also if a sound is playing and the play function is called again, layered playback will occur over any previous playback of the sound.

The tradeoff is that q5 sounds have to load completely to be considered loaded. Use loadAudio for quicker preloading of long audio files, since it marks the audio file as loaded after the canplaythrough event triggers. Also note that q5 sounds can not be played on mobile with silent mode on (aka ringer off) but Audio elements can.

Fixed issues where errors or the audio context being in an interrupted state (when silence mode is on), caused audio to fail to load and not decrement the preloadCount, causing q5 to be stuck in the preloading state.

2.15.0

The default renderer of q5.js, based on CanvasRenderingContext2D (aka Canvas2D), will now be consistently referred to as the c2d renderer instead of q2d. Source files for this renderer were renamed, the "2d" prefix was replaced with "c2d". This is to avoid confusion because the webgpu renderer is also 2D.

v2.14

2.14.6

color will accept css strings without throwing an error, it just won't parse their color components

2.14.5

q5 webgpu: Fixed the background function

2.14.4

q5 webgpu: scaling taken into account to determine how many triangles that arcs and ellipses have

2.14.0

New default font system in q5 WebGPU for lazy loading msdf fonts from q5js.org when the user tries to set textFont to a generic font family like "sans-serif" or "monospace".

The q5 npm package now includes a builtinFonts folder which has msdf fonts that can be used offline.

v2.13

v2.13.3

opacity added to q5 WebGPU, it only affects images.

postProcess function added, as recommended by @Tezumie ! Useful for post processing after draw and all q5 postDraw hook functions are run.

v2.13.0

Added tint in q5 WebGPU.

Heavily optimized image as well as matrix creation and storage.

q5 WebGPU is now roughly 2x faster at transformations!

v2.12

2.12.8

Fixed two issues with filter caught by @Dukemz! In v1 of q5, in lingdong's code, an entirely new temporary copy of the canvas was created and the filter was applied to it, then that image was drawn onto the canvas. I realized this was unnecessary while working on v2.1, the filter can just be applied to the canvas and then the canvas can be redrawn using the filter. Yet I needed to ensure the ctx.globalCompositeOperator is "source-over" during this process, otherwise blend modes will affect the process, which is incorrect.

2.12.6

When multiple p5.js instances with separate canvases are running on-screen at once, they all receive mouse events from the window.

In this update I made it so that users have to start pressing the mouse inside a canvas for it to trigger mousePressed or set mouseIsPressed to true. Releasing the mouse can be done off the canvas.

v2.11

2.11.7

text(str, x, y, w, h) in p5 optionally lets users define a bounding box in pixels to constrain rendering text within. However, this is not performance friendly, it requires ensuring each line can fit within a pixel width limit. I hadn't documented this yet, but the width limit has always been a character width limit in q5, not a pixel width limit. I changed the height limit to be a line limit, this behavior is consistent in q2d and webgpu. See the documentation for text: https://q5js.org/learn/#text

2.11.6

Fixed issue with creating Q5.Sound objects. The audio context needs to be created after a user interaction, then the pan property can be added to the Q5.Sound object.

2.11.3

textFont is now automatically set to the last font loaded.

2.11.2

Introducing q5.js server side support for Bun and Deno! Node.js support has also been improved.

// node
require('q5');
// bun
import 'q5';
// deno
import '@q5/q5';

You can optionally enable canvas rendering support when running q5 with node or bun by installing the skia-canvas and jsdom npm packages. I switched to supporting "skia-canvas" instead of "node-canvas" (cairo based) because Skia is faster. It's the same tech that powers CanvasRenderingContext2D in Chrome.
https://www.npmjs.com/package/skia-canvas

Also, q5 is now available on JSR. It's an open source package registry for modern JavaScript.
https://jsr.io/@q5/q5