v2.7

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

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

v2.0-beta

2.0-beta22

Added inFill and inStroke wrappers for CanvasRenderingContext2D's isPointInPath and isPointInStroke.

function setup() {
  createCanvas(100, 100);
}

function draw() {
  cursor('default');
  fill('blue');
  rect(25, 25, 50);
  
  if (inFill(mouseX, mouseY)) {
    cursor('pointer');
    fill('red');
    rect(25, 25, 50);
  }
}

I can't believe p5 doesn't have these yet! Will def need to feature on the home page.

2.0-beta19

_OffscreenCanvas needed to be a instance level variable.

Image filter constants like THRESHOLD and BLUR shouldn't have been in q5-2d-drawing, not sure why I did that lol.

Also I'd like to clean up Q5.Image instances, which have a lot of props and functions added to them that aren't needed. For starters I made the image filter constants defined on Q5 which are only added to non-image instances.

I also created q5-2d-soft-filters (5kb) to separate software implemented image filters from q5-2d-image. This is in anticipation of when it can be excluded from the default bundle since every browser besides Safari implements them as hardware accelerated CSS filters. Safari Technology Preview supports testing ctx.filter but there's an issue with it which I reported.

WebKit/WebKit#3793 (comment)
https://bugs.webkit.org/show_bug.cgi?id=275436

Updated the src folder readme file. It'll contain documentation of each q5 module, mainly the differences from p5.
https://github.com/q5js/q5.js/tree/main/src

2.0-beta18

Fixed p (the proxy used to change global and instance mode props at the same time) not be defined in some files.

When the canvas is removed its parent's size changes, triggering _adjustDisplay which should be exited since the canvas no longer has a parent element.

2.0-beta17

canvasResize will now draw the existing canvas image onto the resized canvas.

2.0-beta16

Initial release for public beta testing!

https://q5js.org/q5.js

v1.9

1.9.21

@Tezumie optimized the point function by filling a full arc with the stroke color, which is up to 10x faster than the previous method of stroking an ellipse!

Fixed windowResize not being called and fixed noise returning NaN if no z value was given (regressions).

Added initial website code.

1.9.20

Changed license to LGPLv3

1.9.19

Fixed image.save() so it'll work with images in q5, which use OffscreenCanvas.

Added image.trim() which creates a new image with transparent borders cropped out.trim() will do the same with the canvas.

1.9.18

Graphics should have an alpha channel by default, fixed that.

1.9.15

Fixed endShape doing a fill even if noFill was used.

1.9.14

Fixed "namespace" mode bug

1.9.13

Added fullscreen function and fixed nf

1.9.10

The desynchronized canvas attribute is now false by default. That's because I learned that it can cause screen tearing, which for general use is undesirable.

v1.9.9

image can now render frames from a video, matching p5's implementation.

Images by default should have an alpha channel! Whoops. Fixed that.

v1.9.7

In q5, createCanvas by default creates a canvas with no alpha channel for efficiency. Typical use doesn't require it.

v1.9.6

Partial fix for resizeCanvas

Made some loading optimizations.

v1.9.5

Added more intelligent auto-assigning of Color based whether the device supports HDR, then its potentially re-assign after the canvas is created and its color space is defined.

Fix for image.filters

v1.9.4

Fix for tint

v1.9.3

The future is here: q5.js now supports HDR color space! ✨

Completing #21, #22, #23, and #24

See the README.md page for documentation.

Check out my "HDR Web Design Guide" for more info on how to use HDR in your own projects. 🤝
https://quinton-ashley.github.io/hdr-web-design-guide/

Added opacity function.

q5 now requires users to explicitly create a canvas.

v1.9.2

Fixed Vector instance functions #20

v1.9.0

Implemented changes made to p5.Graphics.get in v1.9.0 of p5.js