q5 2.4.4 → 2.4.5

package/src/q5-webgpu-canvas.js

@@ -86,6 +86,37 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._setCanvasSize(w, h);
 	};
 
+	// current color index, used to associate a vertex with a color
+	let colorIndex = 0;
+	const addColor = (r, g, b, a = 1) => {
+		if (typeof r == 'string') r = $.color(r);
+		else if (b == undefined) {
+			// grayscale mode `fill(1, 0.5)`
+			a = g ?? 1;
+			g = b = r;
+		}
+		if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a);
+		else colorsStack.push(r, g, b, a);
+		colorIndex++;
+	};
+
+	$.fill = (r, g, b, a) => {
+		addColor(r, g, b, a);
+		$._doFill = true;
+		$._fillIndex = colorIndex;
+	};
+	$.stroke = (r, g, b, a) => {
+		addColor(r, g, b, a);
+		$._doStroke = true;
+		$._strokeIndex = colorIndex;
+	};
+
+	$.noFill = () => ($._doFill = false);
+	$.noStroke = () => ($._doStroke = false);
+
+	$._strokeWeight = 1;
+	$.strokeWeight = (v) => ($._strokeWeight = Math.abs(v));
+
 	$.resetMatrix = () => {
 		// Initialize the transformation matrix as 4x4 identity matrix
 
@@ -109,24 +140,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	// Stack to keep track of transformation matrix indexes
 	$._transformIndexStack = [];
 
-	$.push = $.pushMatrix = () => {
-		// Push the current matrix index onto the stack
-		$._transformIndexStack.push($._transformIndex);
-		$._pushStyles();
-	};
-
-	$.pop = $.popMatrix = () => {
-		if (!$._transformIndexStack.length) {
-			return console.warn('Matrix index stack is empty!');
-		}
-		// Pop the last matrix index from the stack and set it as the current matrix index
-		let idx = $._transformIndexStack.pop();
-		$._matrix = $.transformStates[idx].slice();
-		$._transformIndex = idx;
-		$._matrixDirty = false;
-		$._popStyles();
-	};
-
 	$.translate = (x, y, z) => {
 		if (!x && !y && !z) return;
 		// Update the translation values
@@ -172,6 +185,57 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._matrixDirty = true;
 	};
 
+	$.shearX = (ang) => {
+		if (!ang) return;
+		if ($._angleMode) ang *= $._DEGTORAD;
+
+		let tanAng = Math.tan(ang);
+
+		let m0 = $._matrix[0],
+			m1 = $._matrix[1],
+			m4 = $._matrix[4],
+			m5 = $._matrix[5];
+
+		$._matrix[0] = m0 + m4 * tanAng;
+		$._matrix[1] = m1 + m5 * tanAng;
+
+		$._matrixDirty = true;
+	};
+
+	$.shearY = (ang) => {
+		if (!ang) return;
+		if ($._angleMode) ang *= $._DEGTORAD;
+
+		let tanAng = Math.tan(ang);
+
+		let m0 = $._matrix[0],
+			m1 = $._matrix[1],
+			m4 = $._matrix[4],
+			m5 = $._matrix[5];
+
+		$._matrix[4] = m4 + m0 * tanAng;
+		$._matrix[5] = m5 + m1 * tanAng;
+
+		$._matrixDirty = true;
+	};
+
+	$.applyMatrix = (...args) => {
+		let m;
+		if (args.length == 1) m = args[0];
+		else m = args;
+
+		if (m.length == 9) {
+			// Convert 3x3 matrix to 4x4 matrix
+			m = [m[0], m[1], 0, m[2], m[3], m[4], 0, m[5], 0, 0, 1, 0, m[6], m[7], 0, m[8]];
+		} else if (m.length != 16) {
+			throw new Error('Matrix must be a 3x3 or 4x4 array.');
+		}
+
+		// Overwrite the current transformation matrix
+		$._matrix = m.slice();
+		$._matrixDirty = true;
+	};
+
 	// Function to save the current matrix state if dirty
 	$._saveMatrix = () => {
 		$.transformStates.push($._matrix.slice());
@@ -179,37 +243,31 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._matrixDirty = false;
 	};
 
-	// current color index, used to associate a vertex with a color
-	let colorIndex = 0;
-	const addColor = (r, g, b, a = 1) => {
-		if (typeof r == 'string') r = $.color(r);
-		else if (b == undefined) {
-			// grayscale mode `fill(1, 0.5)`
-			a = g ?? 1;
-			g = b = r;
+	// Push the current matrix index onto the stack
+	$.pushMatrix = () => {
+		if ($._matrixDirty) $._saveMatrix();
+		$._transformIndexStack.push($._transformIndex);
+	};
+	$.popMatrix = () => {
+		if (!$._transformIndexStack.length) {
+			return console.warn('Matrix index stack is empty!');
 		}
-		if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a);
-		else colorsStack.push(r, g, b, a);
-		colorIndex++;
+		// Pop the last matrix index from the stack and set it as the current matrix index
+		let idx = $._transformIndexStack.pop();
+		$._matrix = $.transformStates[idx].slice();
+		$._transformIndex = idx;
+		$._matrixDirty = false;
 	};
 
-	$.fill = (r, g, b, a) => {
-		addColor(r, g, b, a);
-		$._doFill = true;
-		$._fillIndex = colorIndex;
+	$.push = () => {
+		$.pushMatrix();
+		$.pushStyles();
 	};
-	$.stroke = (r, g, b, a) => {
-		addColor(r, g, b, a);
-		$._doStroke = true;
-		$._strokeIndex = colorIndex;
+	$.pop = () => {
+		$.popMatrix();
+		$.popStyles();
 	};
 
-	$.noFill = () => ($._doFill = false);
-	$.noStroke = () => ($._doStroke = false);
-
-	$._strokeWeight = 1;
-	$.strokeWeight = (v) => ($._strokeWeight = Math.abs(v));
-
 	$._calcBox = (x, y, w, h, mode) => {
 		let hw = w / 2;
 		let hh = h / 2;

package/src/q5-webgpu-drawing.js

@@ -224,6 +224,15 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.endShape(1);
 	};
 
+	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.vertex(x4, y4);
+		$.endShape(1);
+	};
+
 	$.rectMode = (x) => ($._rectMode = x);
 
 	$.rect = (x, y, w, h) => {
@@ -245,6 +254,8 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		drawStack.push(0, 6);
 	};
 
+	$.square = (x, y, s) => $.rect(x, y, s, s);
+
 	$.point = (x, y) => {
 		colorIndex = $._strokeIndex;
 		let sw = $._strokeWeight;

package/src/q5-webgpu-image.js

@@ -204,3 +204,12 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
 		verticesStack.length = 0;
 	});
 };
+
+Q5.THRESHOLD = 1;
+Q5.GRAY = 2;
+Q5.OPAQUE = 3;
+Q5.INVERT = 4;
+Q5.POSTERIZE = 5;
+Q5.DILATE = 6;
+Q5.ERODE = 7;
+Q5.BLUR = 8;

package/src/readme.md

@@ -181,15 +181,15 @@ Implemented functions:
 
 > Use `textFill` and `textStroke` to set text colors.
 
-WebGPU (and WebGL) don't have HTML5 based text rasterization functionality like Canvas2D does.
+WebGPU (and WebGL) don't have fast HTML5 based text rasterization functionality, like Canvas2D does.
 
-In p5.js WebGL mode, text is drawn directly to the canvas. This is a complex task, since letters have intricate geometry: thus many triangles must be used to render text at high resolution. For typical use, the performance cost is actually negligible. Yet since p5.js depends on opentype.js for this, which is 528kb (171kb minified), a different approach was needed to keep q5 lightweight.
+In p5.js WebGL mode, text is drawn directly to the canvas. This is a complex task, since letters have intricate geometry: thus many triangles must be used to render text at high resolution. Unless a user wants to render a lot of text, the performance cost is actually negligible. Yet since p5.js depends on opentype.js for this, which is 528kb (171kb minified), a different approach was needed to keep q5 lightweight.
 
-Internally, q5's WebGPU renderer uses a q5 graphics object to draw text to a Canvas2D canvas via `createTextImage`, then converts that canvas to a WebGPU texture. Each texture is cached so it doesn't have to be recreated every frame that users want to display the same text.
+Internally, q5's WebGPU renderer uses a q5 graphics object to draw text to a Canvas2D canvas via `createTextImage`, then converts that canvas to a WebGPU texture. Each texture is cached, so it doesn't have to be recreated every frame that users want to display the same text.
 
-As long as text content doesn't change often, this method is 4x more efficient.
+Creating a text image is slower than rendering text if it's only displayed for one frame, but displaying static text multiple frames from a cached image is way faster than re-rendering the text. So just try not to have long strings of text that change every frame.
 
-As a best practice, separate static text from dynamic text rendering. For example render labels like "Score: " and corresponding values with separate calls to `text`.
+For typical use cases, this is a great trade-off!
 
 Complete implementation of text rendering in WebGPU.