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!

https://github.com/q5js/q5.js/wiki/Developer-Log#changing-the-default-display-size-for-images--october-23-2024

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!

https://github.com/q5js/q5.js/wiki/Developer-Log#q5js-webgpu-is-now-faster-than-java-processing--october-21-2024

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 translate y value not being flipped to match the canvas' pixel coordinates

v2.3

<script src="https://q5js.org/q5.js"></script>

2.3.0

Image loading and rendering support added to the q5 WebGPU renderer!

v2.2

v2.2.4

Removed the q5-q2d.js and q5-q2d.min.js files. I don't think it's necessary to maintain two separate bundles for q5, since the default bundle file size is so small anyway. If anyone just wants to use the q2d renderer only, they can load from the src folder or make their own bundle.

Implemented Vector.setHeading and Vector.slerp #60

Fix for #69

v2.2.3

Q5.webgpu() should be run at the bottom* of sketch files (not the top), otherwise variables might not be initialized before setup is run.

Bug fix for float color format conversion in color function.

Bug fix for clear and background which are no longer affected by transformations.

v2.2.2

It's now easier to use q5's WebGPU mode, simply run Q5.webgpu() at the bottom of your sketch!

v2.2.1

q5.js now contains the webgpu and q2d renderers as part of the default bundle.

v2.2.0

Added transformations (scaling, rotation, translation) and blendMode support to the webgpu renderer!

Demo: https://aijs.io/editor?user=quinton-ashley&project=q5-webgpu_transformations

Also, the sketches you create with the q5-webgpu renderer will still display properly if WebGPU is not supported on a viewer's browser!

In that case, q5 will put a warning in the console and fall back to the q2d renderer. A compatibility layer is applied which sets the color mode to "rgba" in float format and translates the origin to the center of the canvas on every frame. For now, be sure to set noStroke in your setup code and clear the canvas at the start of your draw function to match current q5 webgpu limitations.

Changes:

• webgpu: color function fully works with the default rgba float format

Internal changes:

• q2d: clear function moved to the q2d-canvas module, so even if q2d-drawing is not loaded, the canvas can be cleared
• q2d: rectangles with rounded corners are now drawn using ctx.roundRect()
• webgpu: scaling from pixels to normalized coordinates is now done in the vertex shader after transformations are applied

v2.1

v2.1.0

Proof of concept support for WebGPU rendering added!

Changes:

• For modular use, the q5-canvas module must be loaded before renderer modules #58
• colorMode updated to support the "float" color format for RGBA colors, which is the default for the webgpu renderer #57
• fill and stroke persist between draw loops with the q2d renderer #56
• mouse position can be updated without a canvas element
• color can now parse three and four character rgb hex color codes (ex. "#fff")
• tint doesn't change the opacity of an image, instead the tint's alpha value specifies how strong the tint should be. To dynamically change the opacity of anything drawn to the canvas, use opacity(globalAlpha).

Internal changes:

• p for the q5 instance proxy changed to q
• Renderer modules are now added to the Q5.renderModules object, instead of Q5.modules. This enables individual renderers to be loaded separately.
• canvas creation and resizing moved to q5-canvas.js and significantly refactored, resulting in a smaller file size
• Q5.ColorRGBA_8, Q5.ColorRGBA_P3_8 classes store colors in the legacy 0-255 8-bit format
• Q5.ColorRGBA, Q5.ColorRGBA_P3 classes store colors in the modern 0-1 float format
• fullscreen function moved to the display module
• fill, noFill, stroke, strokeWeight, and noStroke functions moved from q2d-canvas module because they can also apply to text, without needing to load the q2d-drawing module.

v2.0

v2.0.15

Fixed oklch color mode support.

sRGB vs oklch demo from @spctrm404

function setup() {
	createCanvas(400, 400);

	colorMode('rgb');
	fill('#ff0c52');
	rect(0, 0, width / 2, height);

	colorMode('oklch');
	fill(0.637, 0.28, 16.57, 1);
	rect(width / 2, 0, width / 2, height);
}

v2.0.12

Made image color space the same as the canvas color space by default.

Other misc bug fixes

v2.0.6

Implemented #47 and added errors for if q5 can't parse a color string, since otherwise that'll be an FAQ.

v2.0.5

Fixed the async setup implementation (q5 needed to return the async function's Promise in global mode)

Also fixed arc not working when angleMode is set to degrees.

v2.0.0

Many of the features planned for p5.js 2.0 have already been implemented in q5! 🎉

• modular design with a functional core that additional modules can attach to
  processing/p5.js#7014

• a rewritten color module that has support for HDR colors and enables users to change color components via property editing which is idiomatic to JavaScript. functions like fill and stroke support css color strings. For more info see: #24
  processing/p5.js#7018

• q5 has canvas context attribute support
  processing/p5.js#6781

• q5's bundle size is already 70x smaller than p5 unminified and q5.min is 20x smaller than p5.min
  processing/p5.js#6776

• async/await is supported in setup and can already be used with fetch. I also like the idea of a simple load function which I'll implement soon. #45
  processing/p5.js#6767

• q5 has already pruned the suggested items, many of which made sense in Java Processing but were not idiomatic to JavaScript from the start. the http functions were pruned in q5 because users can now use fetch instead. Color functions like red, green, and blue were made obsolete in q5 by color instance property editing, for example colorInst.r = 50 to change the amount of red.
  processing/p5.js#7090

• q5's askAI() provides improved debugging support compared to the FES
  processing/p5.js#6888

Other p5 issues not planned for p5 2.0:

• hit detection for 2D shapes inFill and inStroke was much easier to implement than in the way this issue poster suggested but I'd never heard of those canvas2d methods before.
  https://github.com/q5js/q5.js/blob/8692fa40eee1f3f4943e2b944128ef9d430ee28e/src/q5-2d-drawing.js#L508
  processing/p5.js#7081

• Added noiseMode and simplex noise. Also the existing p5 noise is not actually perlin noise, if you view it at one octave it looks nothing like perlin noise, the implementation is incorrect, I renamed in "blocky" noise. It's still nice to use for generating noise with only one or two iterative inputs. @Tezumie correctly implemented Q5.PerlinNoise which is the default noise algorithm in q5. He also made simplex noise.
  https://github.com/q5js/q5.js/blob/main/src/q5-math.js
  https://github.com/q5js/q5.js/blob/main/src/q5-noisier.js
  processing/p5.js#6152

• q5 supports cached rendering of rotated text and a user facing function createTextImage and textImage for displaying them. This is my own issue, which admittedly mainly affected p5play users making games where lot of rotated gamer tags are displayed. Although I've found some more widely appealing use cases for this in creating emoji images for p5play sprites. Students are loving it!
  https://p5play.org/learn/sprite.html?page=2
  processing/p5.js#6427

• q5 has opacity(globalAlpha)
  processing/p5.js#6756