q5 2.9.20 → 2.9.22

package/src/q5-2d-drawing.js

@@ -47,12 +47,7 @@ Q5.renderers.q2d.drawing = ($) => {
 
 	$.line = (x0, y0, x1, y1) => {
 		if ($._doStroke) {
-			if ($._da) {
-				x0 *= $._da;
-				y0 *= $._da;
-				x1 *= $._da;
-				y1 *= $._da;
-			}
+			$._da && ((x0 *= $._da), (y0 *= $._da), (x1 *= $._da), (y1 *= $._da));
 			$.ctx.beginPath();
 			$.ctx.moveTo(x0, y0);
 			$.ctx.lineTo(x1, y1);
@@ -92,6 +87,7 @@ Q5.renderers.q2d.drawing = ($) => {
 			$.ctx.stroke();
 		}
 	}
+
 	$.arc = (x, y, w, h, start, stop, mode) => {
 		if (start == stop) return $.ellipse(x, y, w, h);
 
@@ -101,7 +97,6 @@ Q5.renderers.q2d.drawing = ($) => {
 			w *= $._da;
 			h *= $._da;
 		}
-
 		mode ??= $.PIE_OPEN;
 
 		if ($._ellipseMode == $.CENTER) {
@@ -120,6 +115,7 @@ Q5.renderers.q2d.drawing = ($) => {
 		$.ctx.ellipse(x, y, w / 2, h / 2, 0, 0, $.TAU);
 		ink();
 	}
+
 	$.ellipse = (x, y, w, h) => {
 		h ??= w;
 		if ($._da) {
@@ -138,6 +134,7 @@ Q5.renderers.q2d.drawing = ($) => {
 			ellipse((x + w) / 2, (y + h) / 2, w - x, h - y);
 		}
 	};
+
 	$.circle = (x, y, d) => {
 		if ($._ellipseMode == $.CENTER) {
 			if ($._da) {
@@ -179,6 +176,7 @@ Q5.renderers.q2d.drawing = ($) => {
 		$.ctx.rect(x, y, w, h);
 		ink();
 	}
+
 	function roundedRect(x, y, w, h, tl, tr, br, bl) {
 		if (tl === undefined) {
 			return rect(x, y, w, h);
@@ -211,30 +209,34 @@ Q5.renderers.q2d.drawing = ($) => {
 			roundedRect(x, y, w - x, h - y, tl, tr, br, bl);
 		}
 	};
+
 	$.square = (x, y, s, tl, tr, br, bl) => {
 		return $.rect(x, y, s, s, tl, tr, br, bl);
 	};
 
 	$.beginShape = () => {
-		curveBuff = [];
+		curveBuff.length = 0;
 		$.ctx.beginPath();
 		firstVertex = true;
 	};
+
 	$.beginContour = () => {
 		$.ctx.closePath();
-		curveBuff = [];
+		curveBuff.length = 0;
 		firstVertex = true;
 	};
+
 	$.endContour = () => {
-		curveBuff = [];
+		curveBuff.length = 0;
 		firstVertex = true;
 	};
+
 	$.vertex = (x, y) => {
 		if ($._da) {
 			x *= $._da;
 			y *= $._da;
 		}
-		curveBuff = [];
+		curveBuff.length = 0;
 		if (firstVertex) {
 			$.ctx.moveTo(x, y);
 		} else {
@@ -242,6 +244,7 @@ Q5.renderers.q2d.drawing = ($) => {
 		}
 		firstVertex = false;
 	};
+
 	$.bezierVertex = (cp1x, cp1y, cp2x, cp2y, x, y) => {
 		if ($._da) {
 			cp1x *= $._da;
@@ -251,9 +254,10 @@ Q5.renderers.q2d.drawing = ($) => {
 			x *= $._da;
 			y *= $._da;
 		}
-		curveBuff = [];
+		curveBuff.length = 0;
 		$.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 	};
+
 	$.quadraticVertex = (cp1x, cp1y, x, y) => {
 		if ($._da) {
 			cp1x *= $._da;
@@ -261,15 +265,17 @@ Q5.renderers.q2d.drawing = ($) => {
 			x *= $._da;
 			y *= $._da;
 		}
-		curveBuff = [];
+		curveBuff.length = 0;
 		$.ctx.quadraticCurveTo(cp1x, cp1y, x, y);
 	};
+
 	$.bezier = (x1, y1, x2, y2, x3, y3, x4, y4) => {
 		$.beginShape();
 		$.vertex(x1, y1);
 		$.bezierVertex(x2, y2, x3, y3, x4, y4);
 		$.endShape();
 	};
+
 	$.triangle = (x1, y1, x2, y2, x3, y3) => {
 		$.beginShape();
 		$.vertex(x1, y1);
@@ -277,6 +283,7 @@ Q5.renderers.q2d.drawing = ($) => {
 		$.vertex(x3, y3);
 		$.endShape($.CLOSE);
 	};
+
 	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
 		$.beginShape();
 		$.vertex(x1, y1);
@@ -285,69 +292,12 @@ Q5.renderers.q2d.drawing = ($) => {
 		$.vertex(x4, y4);
 		$.endShape($.CLOSE);
 	};
+
 	$.endShape = (close) => {
-		curveBuff = [];
+		curveBuff.length = 0;
 		if (close) $.ctx.closePath();
 		ink();
 	};
-	function catmullRomSpline(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y, numPts, alpha) {
-		function catmullromSplineGetT(t, p0x, p0y, p1x, p1y, alpha) {
-			let a = Math.pow(p1x - p0x, 2.0) + Math.pow(p1y - p0y, 2.0);
-			let b = Math.pow(a, alpha * 0.5);
-			return b + t;
-		}
-		let pts = [];
-
-		let t0 = 0.0;
-		let t1 = catmullromSplineGetT(t0, p0x, p0y, p1x, p1y, alpha);
-		let t2 = catmullromSplineGetT(t1, p1x, p1y, p2x, p2y, alpha);
-		let t3 = catmullromSplineGetT(t2, p2x, p2y, p3x, p3y, alpha);
-
-		for (let i = 0; i < numPts; i++) {
-			let t = t1 + (i / (numPts - 1)) * (t2 - t1);
-			let s = [
-				(t1 - t) / (t1 - t0),
-				(t - t0) / (t1 - t0),
-				(t2 - t) / (t2 - t1),
-				(t - t1) / (t2 - t1),
-				(t3 - t) / (t3 - t2),
-				(t - t2) / (t3 - t2),
-				(t2 - t) / (t2 - t0),
-				(t - t0) / (t2 - t0),
-				(t3 - t) / (t3 - t1),
-				(t - t1) / (t3 - t1)
-			];
-			for (let j = 0; j < s.length; j += 2) {
-				if (isNaN(s[j])) {
-					s[j] = 1;
-					s[j + 1] = 0;
-				}
-				if (!isFinite(s[j])) {
-					if (s[j] > 0) {
-						s[j] = 1;
-						s[j + 1] = 0;
-					} else {
-						s[j] = 0;
-						s[j + 1] = 1;
-					}
-				}
-			}
-			let a1x = p0x * s[0] + p1x * s[1];
-			let a1y = p0y * s[0] + p1y * s[1];
-			let a2x = p1x * s[2] + p2x * s[3];
-			let a2y = p1y * s[2] + p2y * s[3];
-			let a3x = p2x * s[4] + p3x * s[5];
-			let a3y = p2y * s[4] + p3y * s[5];
-			let b1x = a1x * s[6] + a2x * s[7];
-			let b1y = a1y * s[6] + a2y * s[7];
-			let b2x = a2x * s[8] + a3x * s[9];
-			let b2y = a2y * s[8] + a3y * s[9];
-			let cx = b1x * s[2] + b2x * s[3];
-			let cy = b1y * s[2] + b2y * s[3];
-			pts.push([cx, cy]);
-		}
-		return pts;
-	}
 
 	$.curveVertex = (x, y) => {
 		if ($._da) {
@@ -356,20 +306,24 @@ Q5.renderers.q2d.drawing = ($) => {
 		}
 		curveBuff.push([x, y]);
 		if (curveBuff.length < 4) return;
-		let p0 = curveBuff.at(-4);
-		let p1 = curveBuff.at(-3);
-		let p2 = curveBuff.at(-2);
-		let p3 = curveBuff.at(-1);
-		let pts = catmullRomSpline(...p0, ...p1, ...p2, ...p3, $._curveDetail, $._curveAlpha);
-		for (let i = 0; i < pts.length; i++) {
-			if (firstVertex) {
-				$.ctx.moveTo(...pts[i]);
-			} else {
-				$.ctx.lineTo(...pts[i]);
-			}
+
+		let p0 = curveBuff.at(-4),
+			p1 = curveBuff.at(-3),
+			p2 = curveBuff.at(-2),
+			p3 = curveBuff.at(-1);
+
+		let cp1x = p1[0] + (p2[0] - p0[0]) / 6,
+			cp1y = p1[1] + (p2[1] - p0[1]) / 6,
+			cp2x = p2[0] - (p3[0] - p1[0]) / 6,
+			cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+
+		if (firstVertex) {
+			$.ctx.moveTo(p1[0], p1[1]);
 			firstVertex = false;
 		}
+		$.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2[0], p2[1]);
 	};
+
 	$.curve = (x1, y1, x2, y2, x3, y3, x4, y4) => {
 		$.beginShape();
 		$.curveVertex(x1, y1);
@@ -378,6 +332,7 @@ Q5.renderers.q2d.drawing = ($) => {
 		$.curveVertex(x4, y4);
 		$.endShape();
 	};
+
 	$.curvePoint = (a, b, c, d, t) => {
 		const t3 = t * t * t,
 			t2 = t * t,
@@ -387,6 +342,7 @@ Q5.renderers.q2d.drawing = ($) => {
 			f4 = 0.5 * t3 - 0.5 * t2;
 		return a * f1 + b * f2 + c * f3 + d * f4;
 	};
+
 	$.bezierPoint = (a, b, c, d, t) => {
 		const adjustedT = 1 - t;
 		return (
@@ -396,6 +352,7 @@ Q5.renderers.q2d.drawing = ($) => {
 			Math.pow(t, 3) * d
 		);
 	};
+
 	$.curveTangent = (a, b, c, d, t) => {
 		const t2 = t * t,
 			f1 = (-3 * t2) / 2 + 2 * t - 0.5,
@@ -404,6 +361,7 @@ Q5.renderers.q2d.drawing = ($) => {
 			f4 = (3 * t2) / 2 - t;
 		return a * f1 + b * f2 + c * f3 + d * f4;
 	};
+
 	$.bezierTangent = (a, b, c, d, t) => {
 		const adjustedT = 1 - t;
 		return (

package/src/q5-2d-image.js

@@ -81,6 +81,7 @@ Q5.renderers.q2d.image = ($, q) => {
 	};
 
 	$.imageMode = (mode) => ($._imageMode = mode);
+
 	$.image = (img, dx, dy, dw, dh, sx = 0, sy = 0, sw, sh) => {
 		if (!img) return;
 		let drawable = img?.canvas || img;

package/src/q5-2d-text.js

@@ -36,6 +36,7 @@ Q5.renderers.q2d.text = ($, q) => {
 		fontMod = true;
 		styleHash = -1;
 	};
+
 	$.textSize = (x) => {
 		if (x == undefined || x == $._textSize) return $._textSize;
 		if ($._da) x *= $._da;
@@ -47,12 +48,14 @@ Q5.renderers.q2d.text = ($, q) => {
 			leadDiff = leading - x;
 		}
 	};
+
 	$.textStyle = (x) => {
 		if (!x || x == emphasis) return emphasis;
 		emphasis = x;
 		fontMod = true;
 		styleHash = -1;
 	};
+
 	$.textLeading = (x) => {
 		leadingSet = true;
 		if (x == undefined || x == leading) return leading;
@@ -61,6 +64,7 @@ Q5.renderers.q2d.text = ($, q) => {
 		leadDiff = x - $._textSize;
 		styleHash = -1;
 	};
+
 	$.textAlign = (horiz, vert) => {
 		$.ctx.textAlign = $._textAlign = horiz;
 		if (vert) {
@@ -90,6 +94,7 @@ Q5.renderers.q2d.text = ($, q) => {
 		if (enable !== undefined) useCache = enable;
 		return useCache;
 	};
+
 	$.createTextImage = (str, w, h) => {
 		genTextImage = true;
 		img = $.text(str, 0, 0, w, h);
@@ -98,6 +103,7 @@ Q5.renderers.q2d.text = ($, q) => {
 	};
 
 	let lines = [];
+
 	$.text = (str, x, y, w, h) => {
 		if (str === undefined || (!$._doFill && !$._doStroke)) return;
 		str = str.toString();
@@ -223,6 +229,7 @@ Q5.renderers.q2d.text = ($, q) => {
 			$.textImage(img, x, y);
 		}
 	};
+
 	$.textImage = (img, x, y) => {
 		if (typeof img == 'string') img = $.createTextImage(img);
 

package/src/q5-canvas.js

@@ -146,7 +146,7 @@ Q5.modules.canvas = ($, q) => {
 		return g;
 	};
 
-	$._save = async (data, name, ext) => {
+	async function saveFile(data, name, ext) {
 		name = name || 'untitled';
 		ext = ext || 'png';
 		if (ext == 'jpg' || ext == 'png' || ext == 'webp') {
@@ -174,18 +174,19 @@ Q5.modules.canvas = ($, q) => {
 		a.download = name + '.' + ext;
 		a.click();
 		URL.revokeObjectURL(a.href);
-	};
+	}
+
 	$.save = (a, b, c) => {
 		if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
 			c = b;
 			b = a;
 			a = $.canvas;
 		}
-		if (c) return $._save(a, b, c);
+		if (c) return saveFile(a, b, c);
 		if (b) {
 			b = b.split('.');
-			$._save(a, b[0], b.at(-1));
-		} else $._save(a);
+			saveFile(a, b[0], b.at(-1));
+		} else saveFile(a);
 	};
 
 	$._setCanvasSize = (w, h) => {

package/src/q5-color.js

@@ -146,6 +146,7 @@ Q5.Color = class {
 		this._q5Color = true;
 	}
 };
+
 Q5.ColorOKLCH = class extends Q5.Color {
 	constructor(l, c, h, a) {
 		super();
@@ -158,6 +159,7 @@ Q5.ColorOKLCH = class extends Q5.Color {
 		return `oklch(${this.l} ${this.c} ${this.h} / ${this.a})`;
 	}
 };
+
 Q5.ColorRGBA = class extends Q5.Color {
 	constructor(r, g, b, a) {
 		super();
@@ -173,11 +175,13 @@ Q5.ColorRGBA = class extends Q5.Color {
 		return `color(srgb ${this.r} ${this.g} ${this.b} / ${this.a})`;
 	}
 };
+
 Q5.ColorRGBA_P3 = class extends Q5.ColorRGBA {
 	toString() {
 		return `color(display-p3 ${this.r} ${this.g} ${this.b} / ${this.a})`;
 	}
 };
+
 // legacy 8-bit (0-255) integer color format
 Q5.ColorRGBA_8 = class extends Q5.ColorRGBA {
 	constructor(r, g, b, a) {
@@ -202,6 +206,7 @@ Q5.ColorRGBA_8 = class extends Q5.ColorRGBA {
 		return `rgb(${this.r} ${this.g} ${this.b} / ${this.a / 255})`;
 	}
 };
+
 // p3 10-bit color in integer color format, for backwards compatibility
 Q5.ColorRGBA_P3_8 = class extends Q5.ColorRGBA {
 	constructor(r, g, b, a) {

package/src/q5-core.js

@@ -9,7 +9,12 @@ function Q5(scope, parent, renderer) {
 	let $ = this;
 	$._q5 = true;
 	$._parent = parent;
-	$._renderer = renderer || 'q2d';
+	if (renderer == 'webgpu-fallback') {
+		$._webgpuFallback = true;
+		$._renderer = 'q2d';
+	} else {
+		$._renderer = renderer || 'q2d';
+	}
 	$._preloadCount = 0;
 
 	let autoLoaded = scope == 'auto';
@@ -172,6 +177,11 @@ function Q5(scope, parent, renderer) {
 		delete Q5.Q5;
 	}
 
+	if ($._webgpuFallback) {
+		$.colorMode('rgb', 1);
+		$._beginRender = () => $.translate($.canvas.hw, $.canvas.hh);
+	}
+
 	for (let m of Q5.methods.init) {
 		m.call($);
 	}

package/src/q5-input.js

@@ -59,6 +59,7 @@ Q5.modules.input = ($, q) => {
 		q.moveX = e.movementX;
 		q.moveY = e.movementY;
 	};
+
 	$._onmousedown = (e) => {
 		$._startAudio();
 		$._updateMouse(e);
@@ -66,22 +67,26 @@ Q5.modules.input = ($, q) => {
 		q.mouseButton = mouseBtns[e.button];
 		$.mousePressed(e);
 	};
+
 	$._onmousemove = (e) => {
 		$._updateMouse(e);
 		if ($.mouseIsPressed) $.mouseDragged(e);
 		else $.mouseMoved(e);
 	};
+
 	$._onmouseup = (e) => {
 		$._updateMouse(e);
 		q.mouseIsPressed = false;
 		$.mouseReleased(e);
 	};
+
 	$._onclick = (e) => {
 		$._updateMouse(e);
 		q.mouseIsPressed = true;
 		$.mouseClicked(e);
 		q.mouseIsPressed = false;
 	};
+
 	$._onwheel = (e) => {
 		$._updateMouse(e);
 		e.delta = e.deltaY;
@@ -99,9 +104,11 @@ Q5.modules.input = ($, q) => {
 		}
 		$.canvas.style.cursor = name + pfx;
 	};
+
 	$.noCursor = () => {
 		$.canvas.style.cursor = 'none';
 	};
+
 	if (window) {
 		$.requestPointerLock = document.body?.requestPointerLock;
 		$.exitPointerLock = document.exitPointerLock;
@@ -117,6 +124,7 @@ Q5.modules.input = ($, q) => {
 		$.keyPressed(e);
 		if (e.key.length == 1) $.keyTyped(e);
 	};
+
 	$._onkeyup = (e) => {
 		q.keyIsPressed = false;
 		q.key = e.key;
@@ -124,6 +132,7 @@ Q5.modules.input = ($, q) => {
 		keysHeld[$.keyCode] = keysHeld[$.key.toLowerCase()] = false;
 		$.keyReleased(e);
 	};
+
 	$.keyIsDown = (v) => !!keysHeld[typeof v == 'string' ? v.toLowerCase() : v];
 
 	function getTouchInfo(touch) {
@@ -136,6 +145,7 @@ Q5.modules.input = ($, q) => {
 			id: touch.identifier
 		};
 	}
+
 	$._ontouchstart = (e) => {
 		$._startAudio();
 		q.touches = [...e.touches].map(getTouchInfo);
@@ -148,6 +158,7 @@ Q5.modules.input = ($, q) => {
 		}
 		if (!$.touchStarted(e)) e.preventDefault();
 	};
+
 	$._ontouchmove = (e) => {
 		q.touches = [...e.touches].map(getTouchInfo);
 		if (!$._isTouchAware) {
@@ -157,6 +168,7 @@ Q5.modules.input = ($, q) => {
 		}
 		if (!$.touchMoved(e)) e.preventDefault();
 	};
+
 	$._ontouchend = (e) => {
 		q.touches = [...e.touches].map(getTouchInfo);
 		if (!$._isTouchAware && !$.touches.length) {

package/src/q5-math.js

@@ -42,13 +42,15 @@ Q5.modules.math = ($, q) => {
 			return Math.min(Math.max(val, ostop), ostart);
 		}
 	};
-	$.lerp = (a, b, t) => a * (1 - t) + b * t;
-	$.constrain = (x, lo, hi) => Math.min(Math.max(x, lo), hi);
+
 	$.dist = function () {
 		let a = arguments;
 		if (a.length == 4) return Math.hypot(a[0] - a[2], a[1] - a[3]);
 		else return Math.hypot(a[0] - a[3], a[1] - a[4], a[2] - a[5]);
 	};
+
+	$.lerp = (a, b, t) => a * (1 - t) + b * t;
+	$.constrain = (x, lo, hi) => Math.min(Math.max(x, lo), hi);
 	$.norm = (value, start, stop) => $.map(value, start, stop, 0, 1);
 	$.sq = (x) => x * x;
 	$.fract = (x) => x - Math.floor(x);
@@ -69,7 +71,6 @@ Q5.modules.math = ($, q) => {
 		let a = Math.atan(x);
 		return !angleMode ? a : a * RADTODEG;
 	};
-
 	$.atan2 = (y, x) => {
 		let a = Math.atan2(y, x);
 		return !angleMode ? a : a * RADTODEG;
@@ -93,6 +94,7 @@ Q5.modules.math = ($, q) => {
 			}
 		};
 	}
+
 	function shr3() {
 		let jsr, seed;
 		let m = 4294967295;
@@ -111,6 +113,7 @@ Q5.modules.math = ($, q) => {
 			}
 		};
 	}
+
 	let rng1 = shr3();
 	rng1.setSeed();
 
@@ -127,6 +130,7 @@ Q5.modules.math = ($, q) => {
 			return a[Math.trunc(a.length * rng1.rand())];
 		}
 	};
+
 	$.randomGenerator = (method) => {
 		if (method == $.LCG) rng1 = lcg();
 		else if (method == $.SHR3) rng1 = shr3();
@@ -282,13 +286,16 @@ Q5.modules.math = ($, q) => {
 		q.Noise = Q5[mode[0].toUpperCase() + mode.slice(1) + 'Noise'];
 		_noise = null;
 	};
+
 	$.noiseSeed = (seed) => {
 		_noise = new $.Noise(seed);
 	};
+
 	$.noise = (x = 0, y = 0, z = 0) => {
 		_noise ??= new $.Noise();
 		return _noise.noise(x, y, z);
 	};
+
 	$.noiseDetail = (lod, falloff) => {
 		_noise ??= new $.Noise();
 		if (lod > 0) _noise.octaves = lod;

package/src/q5-record.js

@@ -0,0 +1,2 @@
+/* help wanted! */
+Q5.modules.record = ($) => {};