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

v1.8

v1.8.7

Now compatible with p5.sound!

v1.8.4

When run in global mode via new Q5() (no input args), then the sketch file can act as the preload function, allowing for file level variable declarations. If the user provides a setup function, it will be run when loading is complete.

v1.8.2

Forgot to give all images a default pixelDensity of 1. Fixed!

v1.8.1

Previous update needed some more work regarding the pixelDensity stuff.

I also re-implemented loadFont using the FontFace API, now q5 can actually wait for fonts to load in preload before letting the user's setup function run.
https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load

v1.8.0

Fully compatible with v1.8.0 of p5.js! ✨

For this release I decided to change the version numbering of q5 to follow p5' version numbering.

In p5.js v1.8.0 a breaking change was made to p5.Image and p5.Graphics, which enables support for pixel density (which fixed issue processing/p5.js#6114) by @Gaurav-1306 in processing/p5.js#6447 . I implemented these features in q5 to maintain compatibility.

v1.5

1.5.3

Fixed vector.angleBetween

1.5.2

Added _setupDone boolean property

1.5.1

touch start fixed

v1.4

1.4.4

Q5.Image now only has the same properties and methods as p5.Image (excluding copy).

1.4.1

q5 now follows the default textLeading behavior of p5.

1.4.0

The default for new Q5() is now "global" mode. To use "namespace" mode use new Q5("namespace"). This breaking change was made because "global" mode is used more than "namespace". Using "global" mode is the best way to enable type based auto-completion for p5play:
https://github.com/quinton-ashley/p5play/wiki/FAQ#why-does-vscode-auto-completion-only-work-inside-the-p5js-setup-function

Added displayDensity function and q5 now uses the same methodology as p5, Math.ceil(displayDensity()), to calculate a sketch's default pixelDensity value.

v1.3

1.3.2

90x faster rotated text rendering, using text image caching!

Added methods: createTextImage(str, w, h), textImage(img, x, y), and textCache(boolean, maxSize).