Releases: q5js/q5.js
v2.13
<script src="https://q5js.org/q5.js"></script>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!
Contributors
Assets 2
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.
Contributors
Assets 2
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
v2.10
2.10.2
q5 is now 10000x faster than p5 at drawing an image multiple times with the same tint color applied. q5 is 2x faster at tinting than p5, but will avoid the process unless the tint color is changed or the image is edited.
2.10.1
Should've used the image's size for the tintImg not the display size.
Fringing around the image, where colors from the original image are visible, is still affecting pixels on the edge between visible and transparent pixels, but it's nearly unnoticeable unless you zoom in on a saved image of a canvas. I'll see if this approach can be refined further though.
2.10.0
q5.js v2.10 introduces shadow support in the q2d renderer! See the documentation of the new shadow, noShadow, and shadowBox functions:
https://q5js.org/learn/#shadow
Also fixed tinting, now the tint color is only applied to the non-transparent parts of images and canvases with an alpha channel.
Check Q5.version to see which version of q5 is loaded, currently set to "2.10".
Added documentation for image functions: https://q5js.org/learn/#image-section
v2.9
2.9.22
Edited all files to add new lines between functions, unless the functions are one liners.
2.9.21
Removed LingDong's Catmull Rom spline code in favor of the canvas2d api ctx.bezierCurveTo with the spline points adjusted to fit a bezier curve (much faster).
Implemented curveVertex in q5 WebGPU.
2.9.20
- Fixed lines and points not showing up after
noFill()is called. - Fixed lines not being y positioned correctly.
- Fixed rotation function not combining rotations correctly
Had to re-implement line and point which are now optimized. line now does the calculations needed make the line from a rect (and two circles for rounded caps if strokeWeight is greater than 2), without messing with the transformation matrix.
2.9.13
Fixed a regression in v2.9.0 that caused Q5.Graphics objects to display at an incorrect default size.
When images are resized, a new default width and height are calculated.
2.9.10
pushStyles() and popStyles() now affect the fill and stroke colors, as documented.
In WebGPU circle and ellipse are now drawn at the proper y coordinates.
2.9.3
Q5.Image and Q5.Graphics props defaultWidth and defaultHeight store the pre-calculated default size of each image loaded.
Setting the displayMode render quality to "pixelated" sets defaultImageScale(1), as users would expect.
2.9.0
In q5.js v2.9, if display size isn't provided to the image function, and pixelDensity is 2, the image will display at its actual size!
defaultImageScale(0.5) is the default in q5, which is ideal for displays with a pixel density of 2.
Also, createCanvas can now be used to initiate top-level global mode, internally it calls new Q5().
v2.8
2.8.0
Initial tests show that q5.js WebGPU is up to 5x faster than Java Processing!
point in the canvas2d renderer now makes points using line strokes for better performance instead of arcs, so if what you really want is a 1x1 rect use the rect function instead.
v2.7
2.7.7
Thanks to user @ Jan_Niek on discord for reporting a bug that prevented noCanvas sketches from running, now fixed.
2.7.3
Fixed variable undefined in setup in top-level global mode.
Fixes I did to enable use of preload with q5's instance mode broke top-level global mode.
new Q5();
let img = loadImage('hello.png');
function setup() {
log(img); // img is undefined if Q5 doesn't wait to run setup
}Q5 needs to wait for the rest of the script, or at least one of the "load" functions to run.
2.7.2
Fixed issues with q5 webgpu modules, all pipelines need to have multisample set to 4.
2.7.1
core module documentation added.
https://q5js.org/learn/#core
Bug fix enables use of the preload function with q5's "instance" mode (previously called "namespace" mode).
q5 will now be more error tolerant by default, only stopping the draw loop if an error occurs in the draw loop, not in other user defined q5 functions. If an error happens in mousePressed for example, the draw loop will keep looping.
v2.6
2.6.9
q5 sketches with a canvas will only loop if the canvas is visible. Implemented using the Intersection Observer API
2.6.0
Basic strokes have been implemented for q5-webgpu!
Also q5-webgpu-drawing now uses an index buffer for shape drawing.
v2.5
2.5.2
Forgot to bump the version number to v2.5 in the q5-core.js file.
2.5.1
textImage now accepts a string for easy creation of text images which are just stored internally by the textCache and do not need to be managed by the user.
textImage('🐶', 0, 0);Added a new function, inset/img.inset, which has similar functionality to p5's oddly named copy/img.copy function. It displays a region of the image on another region of the image. Can be used to create a detail inset, aka a magnifying glass effect.
https://en.wikipedia.org/wiki/Map_layout#:~:text=A-,Detail%20inset,-is%20of%20a
In q5, copy and image.copy will do what users expect, simply making a copy of the canvas or image. Same as using get(). #63
Fixed #72 by having it return an RGBA array, since q5 Image objects do not have access to the Color constructor or the canvas' color mode.
get also unnecessarily used getImageData and putImageData when really all it needs to do is draw a subsection of the source image to the image it returns.
2.5.0
WebGPU realtime text rendering added!
https://github.com/q5js/q5.js/tree/main/src#webgpu-text
v2.4
2.4.8
Tried editing the text image cache system so that it doesn't have to recreate a canvas if the text only needs to be redrawn with a different color. Found out that the real bottleneck is not creating OffscreenCanvases or GPU textures but GPUQueue copyExternalImageToTexture.
2.4.7
Text rendering in q5 q2d is now so fast that I disabled the text cache system by default in q2d mode.
I also refactored and upgraded the text image cache system.
More info: https://github.com/q5js/q5.js/wiki/Developer-Log#text-caching-system-upgraded--september-20-2024
2.4.6
Added TypeScript definition file q5.d.ts for use with Visual Studio Code for auto-completion and hover over documentation.
2.4.3
Fix for setting pixelDensity on graphics objects created before createCanvas is run.
2.4.2
Fixed image dimension pixel density scaling, which should only be applied if display width and height are not specified
2.4.1
Prevent "Uncaught SecurityError: Failed to execute 'copyExternalImageToTexture' on 'GPUQueue': The external image is tainted by cross-origin data." by setting img.crossOrigin = 'Anonymous';
2.4.0
Text image rendering added to the q5-webgpu renderer!
- fixed
translatey value not being flipped to match the canvas' pixel coordinates