q5 2.14.3 → 2.14.5

package/README.md

@@ -1,4 +1,4 @@
-# <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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.14.3",
+	"version": "2.14.5",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

package/q5.js

@@ -151,8 +151,6 @@ function Q5(scope, parent, renderer) {
 	$._elements = [];
 	$.describe = () => {};
 
-	$.TWO_PI = $.TAU = Math.PI * 2;
-
 	$.log = $.print = console.log;
 
 	for (let m in Q5.modules) {
@@ -945,17 +943,18 @@ Q5.renderers.q2d.drawing = ($) => {
 		}
 	};
 
+	const TAU = Math.PI * 2;
+
 	function arc(x, y, w, h, lo, hi, mode) {
 		if ($._angleMode) {
 			lo = $.radians(lo);
 			hi = $.radians(hi);
 		}
-		let full = $.TAU;
-		lo %= full;
-		hi %= full;
-		if (lo < 0) lo += full;
-		if (hi < 0) hi += full;
-		if (lo > hi) hi += full;
+		lo %= TAU;
+		hi %= TAU;
+		if (lo < 0) lo += TAU;
+		if (hi < 0) hi += TAU;
+		if (lo > hi) hi += TAU;
 		if (lo == hi) return $.ellipse(x, y, w, h);
 
 		w /= 2;
@@ -1002,7 +1001,7 @@ Q5.renderers.q2d.drawing = ($) => {
 
 	function ellipse(x, y, w, h) {
 		$.ctx.beginPath();
-		$.ctx.ellipse(x, y, w / 2, h / 2, 0, 0, $.TAU);
+		$.ctx.ellipse(x, y, w / 2, h / 2, 0, 0, TAU);
 		ink();
 	}
 
@@ -1033,7 +1032,7 @@ Q5.renderers.q2d.drawing = ($) => {
 				d *= $._da;
 			}
 			$.ctx.beginPath();
-			$.ctx.arc(x, y, d / 2, 0, $.TAU);
+			$.ctx.arc(x, y, d / 2, 0, TAU);
 			ink();
 		} else $.ellipse(x, y, d, d);
 	};
@@ -2750,6 +2749,7 @@ Q5.modules.math = ($, q) => {
 	$.PI = Math.PI;
 	$.HALF_PI = Math.PI / 2;
 	$.QUARTER_PI = Math.PI / 4;
+	$.TWO_PI = $.TAU = Math.PI * 2;
 
 	$.abs = Math.abs;
 	$.ceil = Math.ceil;
@@ -3742,7 +3742,14 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$.noTint = () => ($._tint = 1);
 
 	$._strokeWeight = 1;
-	$.strokeWeight = (v) => ($._strokeWeight = Math.abs(v));
+	$._hsw = 0.5;
+	$._scaledSW = 1;
+	$.strokeWeight = (v) => {
+		v = Math.abs(v);
+		$._strokeWeight = v;
+		$._scaledSW = v * $._scale;
+		$._hsw = v / 2;
+	};
 
 	const MAX_TRANSFORMS = 1e7, // or whatever maximum you need
 		MATRIX_SIZE = 16, // 4x4 matrix
@@ -3810,6 +3817,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._matrixDirty = true;
 	};
 
+	$._scale = 1;
+
 	$.scale = (x = 1, y, z = 1) => {
 		y ??= x;
 
@@ -4146,6 +4155,8 @@ Q5.renderers.webgpu.drawing = ($, q) => {
 		drawStack = $.drawStack,
 		vertexStack = new Float32Array(1e7),
 		vertIndex = 0;
+	const TAU = Math.PI * 2;
+	const HALF_PI = Math.PI / 2;
 
 	let drawingShader = Q5.device.createShaderModule({
 		label: 'drawingShader',
@@ -4259,10 +4270,10 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		drawStack.push(0, 4);
 	};
 
-	const addEllipse = (x, y, a, b, n, ci, ti) => {
-		y = -y;
-		let t = 0,
-			angleIncrement = $.TAU / n;
+	const addArc = (x, y, a, b, startAngle, endAngle, n, ci, ti) => {
+		let angleRange = endAngle - startAngle;
+		let angleIncrement = angleRange / n;
+		let t = startAngle;
 
 		let v = vertexStack,
 			i = vertIndex;
@@ -4287,27 +4298,14 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 			t += angleIncrement;
 		}
 
-		// close the triangle strip
-		// add center vertex
-		v[i++] = x;
-		v[i++] = y;
-		v[i++] = ci;
-		v[i++] = ti;
-
-		// add first perimeter vertex
-		v[i++] = x + a;
-		v[i++] = y;
-		v[i++] = ci;
-		v[i++] = ti;
-
 		vertIndex = i;
-		drawStack.push(0, (n + 1) * 2 + 2);
+		drawStack.push(0, (n + 1) * 2);
 	};
 
-	const addEllipseStroke = (x, y, outerA, outerB, innerA, innerB, n, ci, ti) => {
-		y = -y;
-		let angleIncrement = $.TAU / n;
-		let t = 0;
+	const addArcStroke = (x, y, outerA, outerB, innerA, innerB, startAngle, endAngle, n, ci, ti) => {
+		let angleRange = endAngle - startAngle;
+		let angleIncrement = angleRange / n;
+		let t = startAngle;
 
 		let v = vertexStack,
 			i = vertIndex;
@@ -4336,45 +4334,106 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		}
 
 		vertIndex = i;
-		drawStack.push(0, (n + 1) * 2); // Use triangle strip
+		drawStack.push(0, (n + 1) * 2);
 	};
 
 	$.rectMode = (x) => ($._rectMode = x);
 
-	$.rect = (x, y, w, h) => {
+	$.rect = (x, y, w, h, rr = 0) => {
 		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
 		let ci, ti;
 		if ($._matrixDirty) $._saveMatrix();
 		ti = $._matrixIndex;
 
-		if ($._doFill) {
-			ci = $._fill;
-			addRect(l, t, r, t, r, b, l, b, ci, ti);
+		if (!rr) {
+			if ($._doFill) {
+				ci = $._fill;
+				addRect(l, t, r, t, r, b, l, b, ci, ti);
+			}
+
+			if ($._doStroke) {
+				ci = $._stroke;
+				let sw = $._strokeWeight / 2;
+
+				// Calculate stroke positions
+				let lsw = l - sw,
+					rsw = r + sw,
+					tsw = t + sw,
+					bsw = b - sw,
+					lpsw = l + sw,
+					rpsw = r - sw,
+					tpsw = t - sw,
+					bpsw = b + sw;
+
+				addRect(lsw, tpsw, rsw, tpsw, rsw, tsw, lsw, tsw, ci, ti); // Top
+				addRect(lsw, bsw, rsw, bsw, rsw, bpsw, lsw, bpsw, ci, ti); // Bottom
+
+				// Adjust side strokes to avoid overlapping corners
+				tsw = t - sw;
+				bsw = b + sw;
+
+				addRect(lsw, tsw, lpsw, tsw, lpsw, bsw, lsw, bsw, ci, ti); // Left
+				addRect(rpsw, tsw, rsw, tsw, rsw, bsw, rpsw, bsw, ci, ti); // Right
+			}
+			return;
 		}
 
-		if ($._doStroke) {
-			ci = $._stroke;
-			let sw = $._strokeWeight / 2;
+		l += rr;
+		r -= rr;
+		t -= rr;
+		b += rr;
 
-			// Calculate stroke positions
-			let lsw = l - sw,
-				rsw = r + sw,
-				tsw = t + sw,
-				bsw = b - sw,
-				lpsw = l + sw,
-				rpsw = r - sw,
-				tpsw = t - sw,
-				bpsw = b + sw;
+		// Clamp radius
+		rr = Math.min(rr, Math.min(w, h) / 2);
 
-			addRect(lsw, tpsw, rsw, tpsw, rsw, tsw, lsw, tsw, ci, ti); // Top
-			addRect(lsw, bsw, rsw, bsw, rsw, bpsw, lsw, bpsw, ci, ti); // Bottom
+		let n = getArcSegments(rr * $._scale);
 
-			// Adjust side strokes to avoid overlapping corners
-			tsw = t - sw;
-			bsw = b + sw;
+		let trr = t + rr,
+			brr = b - rr,
+			lrr = l - rr,
+			rrr = r + rr;
+
+		if ($._doFill) {
+			ci = $._fill;
+			// Corner arcs
+			addArc(r, b, rr, rr, -HALF_PI, 0, n, ci, ti);
+			addArc(l, b, rr, rr, -Math.PI, -HALF_PI, n, ci, ti);
+			addArc(l, t, rr, rr, Math.PI, HALF_PI, n, ci, ti);
+			addArc(r, t, rr, rr, 0, HALF_PI, n, ci, ti);
+
+			addRect(l, trr, r, trr, r, brr, l, brr, ci, ti); // center
+			addRect(l, t, lrr, t, lrr, b, l, b, ci, ti); // Left
+			addRect(rrr, t, r, t, r, b, rrr, b, ci, ti); // Right
+		}
 
-			addRect(lsw, tsw, lpsw, tsw, lpsw, bsw, lsw, bsw, ci, ti); // Left
-			addRect(rpsw, tsw, rsw, tsw, rsw, bsw, rpsw, bsw, ci, ti); // Right
+		if ($._doStroke) {
+			ci = $._stroke;
+			let hsw = $._hsw;
+
+			let outerA = rr + hsw,
+				outerB = rr + hsw,
+				innerA = rr - hsw,
+				innerB = rr - hsw;
+			// Corner arc strokes
+			addArcStroke(r, b, outerA, outerB, innerA, innerB, -HALF_PI, 0, n, ci, ti);
+			addArcStroke(l, b, outerA, outerB, innerA, innerB, -Math.PI, -HALF_PI, n, ci, ti);
+			addArcStroke(l, t, outerA, outerB, innerA, innerB, Math.PI, HALF_PI, n, ci, ti);
+			addArcStroke(r, t, outerA, outerB, innerA, innerB, 0, HALF_PI, n, ci, ti);
+
+			let lrrMin = lrr - hsw,
+				lrrMax = lrr + hsw,
+				rrrMin = rrr - hsw,
+				rrrMax = rrr + hsw,
+				trrMin = trr - hsw,
+				trrMax = trr + hsw,
+				brrMin = brr - hsw,
+				brrMax = brr + hsw;
+
+			// Side strokes - positioned outside
+			addRect(lrrMin, t, lrrMax, t, lrrMax, b, lrrMin, b, ci, ti); // Left
+			addRect(rrrMin, t, rrrMax, t, rrrMax, b, rrrMin, b, ci, ti); // Right
+			addRect(l, trrMin, r, trrMin, r, trrMax, l, trrMax, ci, ti); // Top
+			addRect(l, brrMin, r, brrMin, r, brrMax, l, brrMax, ci, ti); // Bottom
 		}
 	};
 
@@ -4411,6 +4470,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		d < 2400 ? 90 :
 		100;
 
+	$._ellipseMode = Q5.CENTER;
 	$.ellipseMode = (x) => ($._ellipseMode = x);
 
 	$.ellipse = (x, y, w, h) => {
@@ -4422,17 +4482,70 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		let ti = $._matrixIndex;
 
 		if ($._doFill) {
-			addEllipse(x, y, a, b, n, $._fill, ti);
+			addArc(x, -y, a, b, 0, TAU, n, $._fill, ti);
 		}
 		if ($._doStroke) {
 			let sw = $._strokeWeight / 2;
 			// Draw the stroke as a ring using triangle strips
-			addEllipseStroke(x, y, a + sw, b + sw, a - sw, b - sw, n, $._stroke, ti);
+			addArcStroke(x, -y, a + sw, b + sw, a - sw, b - sw, 0, TAU, n, $._stroke, ti);
 		}
 	};
 
 	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
 
+	$.arc = (x, y, w, h, start, stop) => {
+		if (start === stop) return $.ellipse(x, y, w, h);
+
+		// Convert angles if needed
+		if ($._angleMode) {
+			start = $.radians(start);
+			stop = $.radians(stop);
+		}
+
+		// Normalize angles
+		start %= TAU;
+		stop %= TAU;
+		if (start < 0) start += TAU;
+		if (stop < 0) stop += TAU;
+		if (start > stop) stop += TAU;
+		if (start == stop) return $.ellipse(x, y, w, h);
+
+		// Calculate position based on ellipseMode
+		let a, b;
+		if ($._ellipseMode == $.CENTER) {
+			a = w / 2;
+			b = h / 2;
+		} else if ($._ellipseMode == $.RADIUS) {
+			a = w;
+			b = h;
+		} else if ($._ellipseMode == $.CORNER) {
+			x += w / 2;
+			y += h / 2;
+			a = w / 2;
+			b = h / 2;
+		} else if ($._ellipseMode == $.CORNERS) {
+			x = (x + w) / 2;
+			y = (y + h) / 2;
+			a = (w - x) / 2;
+			b = (h - y) / 2;
+		}
+
+		let ti = $._matrixIndex;
+		if ($._matrixDirty) $._saveMatrix();
+		let n = getArcSegments(Math.max(Math.abs(w), Math.abs(h)) * $._scale);
+
+		// Draw fill
+		if ($._doFill) {
+			addArc(x, -y, a, b, start, stop, n, $._fill, ti);
+		}
+
+		// Draw stroke
+		if ($._doStroke) {
+			let sw = $._strokeWeight;
+			addArcStroke(x, -y, a + sw, b + sw, a - sw, b - sw, start, stop, n, $._stroke, ti);
+		}
+	};
+
 	$.point = (x, y) => {
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._matrixIndex,
@@ -4443,9 +4556,9 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 			let [l, r, t, b] = $._calcBox(x, y, sw, sw, 'corner');
 			addRect(l, t, r, t, r, b, l, b, ci, ti);
 		} else {
-			let n = getArcSegments(sw);
+			let n = getArcSegments($._scaledSW);
 			sw /= 2;
-			addEllipse(x, y, sw, sw, n, ci, ti);
+			addArc(x, -y, sw, sw, 0, TAU, n, ci, ti);
 		}
 	};
 
@@ -4460,7 +4573,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		let ti = $._matrixIndex,
 			ci = $._stroke,
 			sw = $._strokeWeight,
-			hsw = sw / 2;
+			hsw = $._hsw;
 
 		// calculate the direction vector and length
 		let dx = x2 - x1,
@@ -4475,8 +4588,8 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 
 		if ($._scaledSW > 2 && $._strokeJoin != 'none') {
 			let n = getArcSegments($._scaledSW);
-			addEllipse(x1, y1, hsw, hsw, n, ci, ti);
-			addEllipse(x2, y2, hsw, hsw, n, ci, ti);
+			addArc(x1, -y1, hsw, hsw, 0, TAU, n, ci, ti);
+			addArc(x2, -y2, hsw, hsw, 0, TAU, n, ci, ti);
 		}
 	};
 
@@ -4513,6 +4626,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 				}
 			}
 
+			// calculate catmull-rom spline curve points
 			for (let i = 0; i < points.length - 3; i++) {
 				let p0 = points[i];
 				let p1 = points[i + 1];
@@ -4587,17 +4701,25 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		}
 
 		if ($._doStroke) {
+			let hsw = $._hsw,
+				n = getArcSegments($._scaledSW),
+				ti = $._matrixIndex,
+				ogStrokeJoin = $._strokeJoin;
+			$._strokeJoin = 'none';
 			// draw lines between vertices
 			for (let i = 0; i < shapeVertCount - 1; i++) {
 				let v1 = i * 4;
 				let v2 = (i + 1) * 4;
 				$.line(sv[v1], -sv[v1 + 1], sv[v2], -sv[v2 + 1]);
+
+				addArc(sv[v1], sv[v1 + 1], hsw, hsw, 0, TAU, n, $._stroke, ti);
 			}
 			if (close) {
 				let v1 = (shapeVertCount - 1) * 4;
 				let v2 = 0;
 				$.line(sv[v1], -sv[v1 + 1], sv[v2], -sv[v2 + 1]);
 			}
+			$._strokeJoin = ogStrokeJoin;
 		}
 
 		// reset for the next shape
@@ -4624,26 +4746,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(() => {