q5 2.14.4 → 2.15.0

package/README.md

@@ -1,10 +1,20 @@
-# <img src="q5js_logo.webp" height="64"> <img src="q5js_brand.webp" height="64">
+# <img src="https://q5js.org/q5js_logo.webp" height="64"> <img src="https://q5js.org/q5js_brand.webp" height="64">
 
-[**q5.js**](https://q5js.org) is a spiritual successor to the [p5.js][] and [Processing Java][] graphics libraries.
+## Visit [q5js.org](https://q5js.org)! 🌟
 
-q5 was designed to make creative coding even more fun and accessible for a new generation of artists, educators, and beginners!
+[q5.js](https://q5js.org) is a spiritual successor to the [p5.js][] and [Processing Java][] graphics libraries.
 
-If you're already familiar with p5, you'll find yourself right at home with q5. It's also compatible with popular addons, including [p5.sound][] and [p5play][].
+- performance optimized for interactive art 🚀
+- includes a brand new renderer powered by WebGPU 💪
+- up to 32x faster than p5.js 🏎️
+- HDR color support 🌈
+- compatible with popular addons, including [p5.sound][] and [p5play][] 🎮
+- no dependencies, less than 100kb minified 📦
+- LGPL licensed (just like p5.js) 🆓
+
+q5.js was designed to make creative coding fun and accessible for a new generation of artists, designers, educators, and beginners. 🤝
+
+If you're already familiar with p5, you'll find yourself right at home with q5. 🏡
 
 ```js
 function setup() {
@@ -13,40 +23,11 @@ function setup() {
 }
 ```
 
-## No Installation Required
-
-Try out the [q5.js template sketch](https://aijs.io/editor?user=quinton-ashley&project=logoSpin) for the Aijs online code editor.
-
-Use q5.js in your own project by adding this line to your HTML file:
-
-```html
-<script src="https://q5js.org/q5.js"></script>
-```
-
-q5 is also available on [npm](https://www.npmjs.com/package/q5)!
-
-```bash
-npm install q5
-```
-
-## Using p5 Addon Libraries
-
-q5 is compatible with popular p5 addons and projects that use p5, such as [p5play][], because it aliases `Q5` to `p5`.
-
-To use addons, simply load them after q5.js:
-
-```html
-<script src="https://q5js.org/q5.js"></script>
-<!-- load p5 addons after q5 -->
-<script src="https://p5play.org/v3/planck.min.js"></script>
-<script src="https://p5play.org/v3/p5play.js"></script>
-```
-
 ## Documentation
 
 Browse the [q5 reference pages](https://q5js.org/learn) to learn how to use q5.js.
 
-See the [wiki](https://github.com/q5js/q5.js/wiki) for extended documentation of q5's exclusive features.
+See the [wiki](https://github.com/q5js/q5.js/wiki) for extended documentation.
 
 Use the [q5.d.ts](q5.d.ts) file in Visual Studio Code to get autocompletion and inline hover-over documentation. Simply add this `jsconfig.json` file to your project folder:
 
@@ -59,27 +40,21 @@ Use the [q5.d.ts](q5.d.ts) file in Visual Studio Code to get autocompletion and
 }
 ```
 
-## Support this project 🤝
+## Support q5 💙
 
 q5 is open source and anyone can use it for free under the terms of the LGPL (just like p5.js). 🎉
 
 We need your support though! If you enjoy using q5.js, please donate via [GitHub Sponsors](https://github.com/sponsors/quinton-ashley) or [Patreon](https://www.patreon.com/p5play).
 
-## Modular Use
-
-q5 has no dependencies and the default bundle is just 126kb unminified.
-
-But for extremely lightweight use, you can load a subset of scripts from the `src` folder. See the [src/readme.md](src/readme.md) for more info on modular use.
-
 ## Contributing
 
-Please report issues or comment on existing issues before working on a pull request.
+Are you interested in volunteering to write code for q5.js or improve the q5 ecosystem? Contributions are welcome!
 
-Check out the [q5 planning board](https://github.com/orgs/q5js/projects/1/views/1).
+Please report issues or comment on existing issues before working on a pull request. Check out the [q5 planning board](https://github.com/orgs/q5js/projects/1/views/1).
 
-If the q5 project is successful, all contributing developers will be paid for their work. The project will be run as a [worker co-op](https://en.wikipedia.org/wiki/Worker_cooperative).
+All contributors must agree to the [code of conduct](CODE_OF_CONDUCT.md).
 
-Contributors must agree to the [code of conduct](CODE_OF_CONDUCT.md).
+If the q5 project becomes as successful as The Processing Foundation, all contributing developers will be fairly paid for their work. The project will be run as a [worker co-op](https://en.wikipedia.org/wiki/Worker_cooperative).
 
 ## Licensing
 

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "2.12.0",
+	"version": "2.15.0",
 	"license": "LGPL-3.0",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
@@ -19,6 +19,7 @@
 			".vscode",
 			"assets",
 			"dev",
+			"src",
 			"fonts",
 			"home",
 			"lang",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.14.4",
+	"version": "2.15.0",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [
@@ -11,7 +11,7 @@
 	"homepage": "https://q5js.org/home",
 	"main": "q5-server.js",
 	"scripts": {
-		"bundle": "cat src/q5-core.js src/q5-canvas.js src/q5-2d-canvas.js src/q5-2d-drawing.js src/q5-2d-image.js src/q5-2d-soft-filters.js src/q5-2d-text.js src/q5-ai.js src/q5-color.js src/q5-display.js src/q5-input.js src/q5-math.js src/q5-sound.js src/q5-util.js src/q5-vector.js src/q5-webgpu-canvas.js src/q5-webgpu-drawing.js src/q5-webgpu-image.js src/q5-webgpu-text.js > q5.js",
+		"bundle": "cat src/q5-core.js src/q5-canvas.js src/q5-c2d-canvas.js src/q5-c2d-drawing.js src/q5-c2d-image.js src/q5-c2d-soft-filters.js src/q5-c2d-text.js src/q5-ai.js src/q5-color.js src/q5-display.js src/q5-input.js src/q5-math.js src/q5-sound.js src/q5-util.js src/q5-vector.js src/q5-webgpu-canvas.js src/q5-webgpu-drawing.js src/q5-webgpu-image.js src/q5-webgpu-text.js > q5.js",
 		"min": "terser q5.js --compress ecma=2024 --mangle > q5.min.js",
 		"dist": "bun bundle && bun min",
 		"dist-p5play": "bun dist && cp q5.js ../../web/p5play-web/v3/q5.js && cp q5.min.js ../../web/p5play-web/v3/q5.min.js",

package/q5.d.ts

@@ -243,7 +243,7 @@ function draw() {
 		 * anywhere in your code. You can also start Q5 in global mode by 
 		 * running [`createCanvas`](https://q5js.org/learn/#canvas-createCanvas).
 		 * 
-		 * By default q5 uses the CanvasRenderingContext2D based q2d renderer.
+		 * By default q5 uses the CanvasRenderingContext2D based c2d renderer.
 		 * 
 		 * To use the q5 WebGPU renderer, run `Q5.webgpu()` after the creation of file level variables. For more information read the [q5-webgpu modules documentation](https://github.com/q5js/q5.js/blob/main/src/readme.md#webgpu-canvas).
 		 * @param {string | Function} [scope]
@@ -1389,7 +1389,7 @@ text(info, 12, 30, 20, 6);
 	 * Loads a font from a URL and optionally runs a callback function
 	 * with the font name once it's loaded.
 	 * 
-	 * In q5 q2d, you can load fonts in any format accepted in CSS, such as
+	 * In q5 c2d, you can load fonts in any format accepted in CSS, such as
 	 * .ttf and .otf files.
 	 * 
 	 * The example below loads "Robotica.ttf" created by Courtney Novits:
@@ -1422,7 +1422,7 @@ function setup() {
 	 * By default, the font is set to "sans-serif" or the last font
 	 * loaded.
 	 * 
-	 * In q5 q2d, you can set the font to any font accepted in CSS,
+	 * In q5 c2d, you can set the font to any font accepted in CSS,
 	 * such as "serif" or "monospace".
 	 * https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
 	 * @param {string} fontName name of the font or font family
@@ -1664,7 +1664,7 @@ function draw() {
 	/** 🎨
 	 * Sets the color mode for the sketch. Changes the type of color object created by color functions.
 	 * 
-	 * In q2d, the default color mode is RGB in legacy integer format.
+	 * In c2d, the default color mode is RGB in legacy integer format.
 	 *
 	 * In WebGPU, the default color mode is RGB in float format.
 	 * 

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.14
+ * @version 2.15
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -11,7 +11,7 @@ function Q5(scope, parent, renderer) {
 	$._parent = parent;
 	if (renderer == 'webgpu-fallback') {
 		$._webgpuFallback = true;
-		$._renderer = 'q2d';
+		$._renderer = 'c2d';
 	} else {
 		$._renderer = renderer || Q5.render;
 	}
@@ -275,7 +275,7 @@ function Q5(scope, parent, renderer) {
 	else setTimeout(_start, 32);
 }
 
-Q5.render = 'q2d';
+Q5.render = 'c2d';
 
 Q5.renderers = {};
 Q5.modules = {};
@@ -310,7 +310,7 @@ function createCanvas(w, h, opt) {
 	}
 }
 
-Q5.version = Q5.VERSION = '2.14';
+Q5.version = Q5.VERSION = '2.15';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -684,9 +684,9 @@ Q5.canvasOptions = {
 if (!window.matchMedia || !matchMedia('(dynamic-range: high) and (color-gamut: p3)').matches) {
 	Q5.canvasOptions.colorSpace = 'srgb';
 } else Q5.supportsHDR = true;
-Q5.renderers.q2d = {};
+Q5.renderers.c2d = {};
 
-Q5.renderers.q2d.canvas = ($, q) => {
+Q5.renderers.c2d.canvas = ($, q) => {
 	let c = $.canvas;
 
 	if ($.colorMode) {
@@ -886,7 +886,7 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		return vid;
 	};
 };
-Q5.renderers.q2d.drawing = ($) => {
+Q5.renderers.c2d.drawing = ($) => {
 	$._doStroke = true;
 	$._doFill = true;
 	$._strokeSet = false;
@@ -1285,7 +1285,7 @@ Q5.renderers.q2d.drawing = ($) => {
 		return $.ctx.isPointInStroke(x * pd, y * pd);
 	};
 };
-Q5.renderers.q2d.image = ($, q) => {
+Q5.renderers.c2d.image = ($, q) => {
 	class Q5Image {
 		constructor(w, h, opt) {
 			let $ = this;
@@ -1293,7 +1293,7 @@ Q5.renderers.q2d.image = ($, q) => {
 			$.canvas = $.ctx = $.drawingContext = null;
 			$.pixels = [];
 			Q5.modules.canvas($, $);
-			let r = Q5.renderers.q2d;
+			let r = Q5.renderers.c2d;
 			for (let m of ['canvas', 'image', 'soft_filters']) {
 				if (r[m]) r[m]($, $);
 			}
@@ -1616,7 +1616,7 @@ Q5.renderers.q2d.image = ($, q) => {
 	$.noTint = () => ($._tint = null);
 };
 /* software implementation of image filters */
-Q5.renderers.q2d.soft_filters = ($) => {
+Q5.renderers.c2d.soft_filters = ($) => {
 	let u = null; // uint8 temporary buffer
 
 	function ensureBuf() {
@@ -1760,7 +1760,7 @@ Q5.renderers.q2d.soft_filters = ($) => {
 		$.ctx.putImageData(imgData, 0, 0);
 	};
 };
-Q5.renderers.q2d.text = ($, q) => {
+Q5.renderers.c2d.text = ($, q) => {
 	$._textAlign = 'left';
 	$._textBaseline = 'alphabetic';
 	$._textSize = 12;
@@ -2180,10 +2180,13 @@ Q5.modules.color = ($, q) => {
 				} else if ($._namedColors[c0]) {
 					[c0, c1, c2, c3] = $._namedColors[c0];
 				} else {
-					console.error(
-						"q5 can't parse color: " + c0 + '\nOnly numeric input, hex, and common named colors are supported.'
-					);
-					return new C(0, 0, 0);
+					// css color string not parsed
+					let c = new C(0, 0, 0);
+					c._css = c0;
+					c.toString = function () {
+						return this._css;
+					};
+					return c;
 				}
 
 				if ($._colorFormat == 1) {
@@ -3598,7 +3601,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	c.width = $.width = 500;
 	c.height = $.height = 500;
 
-	// q2d graphics context
+	// c2d graphics context
 	$._g = $.createGraphics(1, 1);
 
 	if ($.colorMode) $.colorMode('rgb', 1);
@@ -3919,6 +3922,12 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._matrixDirty = false;
 	};
 
+	let _pushStyles = $.pushStyles;
+	$.pushStyles = () => {
+		_pushStyles();
+		$.strokeWeight($._strokeWeight);
+	};
+
 	$.push = () => {
 		$.pushMatrix();
 		$.pushStyles();
@@ -4746,26 +4755,19 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	};
 
 	$.background = (r, g, b, a) => {
-		let mi = $._matrixIndex;
-		$._matrixIndex = 0;
-		$._doStroke = false;
+		$.push();
+		$.resetMatrix();
 		if (r.src) {
 			let img = r;
-			let im = $._imageMode;
 			$._imageMode = 'corner';
 			$.image(img, -c.hw, -c.hh, c.w, c.h);
-			$._imageMode = im;
 		} else {
-			let rm = $._rectMode;
 			$._rectMode = 'corner';
-			let fill = $._fill;
 			$.fill(r, g, b, a);
+			$._doStroke = false;
 			$.rect(-c.hw, -c.hh, c.w, c.h);
-			$._rectMode = rm;
-			$._fill = fill;
 		}
-		$._doStroke = true;
-		$._matrixIndex = mi;
+		$.pop();
 	};
 
 	$._hooks.preRender.push(() => {