q5 2.2.2 → 2.2.4

package/README.md

@@ -339,13 +339,13 @@ Unminified:
 
 - p5.js **5112kb** ⚠️
 - p5.sound.js 488kb
-- q5.js 83kb
+- q5.js 90kb
 
 Minified:
 
 - p5.min.js 1034kb ⚠️
 - p5.sound.min.js 200kb
-- q5.min.js **54kb** 🎉
+- q5.min.js **58kb** 🎉
 
 ## Benchmarks
 
@@ -410,6 +410,9 @@ https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline
 ziggurat:
 http://ziggurat.glitch.me/
 
+Vector.slerp:
+https://github.com/processing/p5.js/blob/v1.10.0/src/math/p5.Vector.js#L2803
+
 random:
 https://github.com/processing/p5.js/blob/1.1.9/src/math/noise.js
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.2.2",
+	"version": "2.2.4",
 	"description": "A sequel to p5.js that's smaller and faster",
 	"author": "quinton-ashley",
 	"contributors": [
@@ -12,9 +12,8 @@
 	"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-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-q2d": "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 > q5-q2d.js",
-		"min": "terser q5.js --compress ecma=2024 --mangle > q5.min.js && terser q5-q2d.js --compress ecma=2024 --mangle > q5-q2d.min.js",
-		"dist": "bun bundle && bun bundle-q2d && bun min",
+		"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",
 		"v": "npm version patch --force",
 		"V": "npm version minor --force",

package/q5.js

@@ -219,7 +219,7 @@ function Q5(scope, parent, renderer) {
 					return t[k]();
 				} catch (e) {
 					if ($._aiErrorAssistance) $._aiErrorAssistance(e);
-					else console.error(e);
+					throw e;
 				}
 			};
 		}
@@ -551,7 +551,12 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		$.ctx.lineWidth = n || 0.0001;
 	};
 	$.noStroke = () => ($._doStroke = false);
-	$.clear = () => $.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
+	$.clear = () => {
+		$.ctx.save();
+		$.ctx.resetTransform();
+		$.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
+		$.ctx.restore();
+	};
 
 	// DRAWING MATRIX
 
@@ -717,15 +722,17 @@ Q5.renderers.q2d.drawing = ($) => {
 	// DRAWING
 
 	$.background = function (c) {
-		if (c.canvas) return $.image(c, 0, 0, $.width, $.height);
 		$.ctx.save();
 		$.ctx.resetTransform();
-		if (Q5.Color) {
-			if (!c._q5Color && typeof c != 'string') c = $.color(...arguments);
-			else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+		if (c.canvas) $.image(c, 0, 0, $.width, $.height);
+		else {
+			if (Q5.Color) {
+				if (!c._q5Color && typeof c != 'string') c = $.color(...arguments);
+				else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			}
+			$.ctx.fillStyle = c.toString();
+			$.ctx.fillRect(0, 0, $.canvas.width, $.canvas.height);
 		}
-		$.ctx.fillStyle = c.toString();
-		$.ctx.fillRect(0, 0, $.canvas.width, $.canvas.height);
 		$.ctx.restore();
 	};
 
@@ -1596,8 +1603,7 @@ Q5.modules.ai = ($) => {
 
 	$._aiErrorAssistance = async (e) => {
 		let askAI = e.message?.includes('Ask AI ✨');
-		if (!askAI) console.error(e);
-		if (Q5.disableFriendlyErrors) return;
+		if (Q5.disableFriendlyErrors && !askAI) return;
 		if (askAI || !Q5.errorTolerant) $.noLoop();
 		let stackLines = e.stack?.split('\n');
 		if (!e.stack || stackLines.length <= 1) return;
@@ -1608,7 +1614,7 @@ Q5.modules.ai = ($) => {
 			idx = 0;
 			sep = '@';
 		}
-		while (stackLines[idx].indexOf('q5.js:') >= 0) idx++;
+		while (stackLines[idx].indexOf('q5') >= 0) idx++;
 
 		let parts = stackLines[idx].split(sep).at(-1);
 		parts = parts.split(':');
@@ -1646,11 +1652,11 @@ Q5.modules.ai = ($) => {
 				'%0A%0AExcerpt+for+context%3A%0A%0A' +
 				encodeURIComponent(context);
 
-			if (!askAI) console.log('Error in ' + fileBase + ' on line ' + lineNum + ':\n\n' + errLine);
+			console.warn('Error in ' + fileBase + ' on line ' + lineNum + ':\n\n' + errLine);
 
 			console.warn('Ask AI ✨ ' + url);
 
-			if (askAI) window.open(url, '_blank');
+			if (askAI) return window.open(url, '_blank');
 		} catch (err) {}
 	};
 };
@@ -1728,27 +1734,22 @@ Q5.modules.color = ($, q) => {
 						c0 = parseInt(c0.slice(1, 3), 16);
 					}
 				} else if ($._namedColors[c0]) {
-					c0 = $._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);
 				}
-			}
-			if (Array.isArray(c0)) {
-				c1 = c0[1];
-				c2 = c0[2];
-				c3 = c0[3];
-				c0 = c0[0];
-			}
-		}
 
-		if ($._colorFormat == 1) {
-			c0 /= 255;
-			if (c1) c1 /= 255;
-			if (c2) c2 /= 255;
-			if (c3) c3 /= 255;
+				if ($._colorFormat == 1) {
+					c0 /= 255;
+					if (c1) c1 /= 255;
+					if (c2) c2 /= 255;
+					if (c3) c3 /= 255;
+				}
+			}
+			if (Array.isArray(c0)) [c0, c1, c2, c3] = c0;
 		}
 
 		if (c2 == undefined) return new C(c0, c0, c0, c1);
@@ -1760,11 +1761,11 @@ Q5.modules.color = ($, q) => {
 	$.blue = (c) => c.b;
 	$.alpha = (c) => c.a;
 	$.lightness = (c) => {
-		if ($._colorMode == 'oklch') return c.l;
+		if (c.l) return c.l;
 		return ((0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) * 100) / 255;
 	};
 	$.hue = (c) => {
-		if ($._colorMode == 'oklch') return c.h;
+		if (c.h) return c.h;
 		let r = c.r;
 		let g = c.g;
 		let b = c.b;
@@ -2680,18 +2681,19 @@ Q5.modules.vector = ($) => {
 };
 
 Q5.Vector = class {
-	constructor(_x, _y, _z, _$) {
-		this.x = _x || 0;
-		this.y = _y || 0;
-		this.z = _z || 0;
-		this._$ = _$ || window;
+	constructor(x, y, z, $) {
+		this.x = x || 0;
+		this.y = y || 0;
+		this.z = z || 0;
+		this._$ = $ || window;
 		this._cn = null;
 		this._cnsq = null;
 	}
-	set(_x, _y, _z) {
-		this.x = _x || 0;
-		this.y = _y || 0;
-		this.z = _z || 0;
+	set(x, y, z) {
+		this.x = x?.x || x || 0;
+		this.y = x?.y || y || 0;
+		this.z = x?.z || z || 0;
+		return this;
 	}
 	copy() {
 		return new Q5.Vector(this.x, this.y, this.z);
@@ -2813,6 +2815,12 @@ Q5.Vector = class {
 	heading() {
 		return this._$.atan2(this.y, this.x);
 	}
+	setHeading(ang) {
+		let mag = this.mag(); // Calculate the magnitude of the vector
+		this.x = mag * this._$.cos(ang); // Set the new x component
+		this.y = mag * this._$.sin(ang); // Set the new y component
+		return this;
+	}
 	rotate(ang) {
 		let costh = this._$.cos(ang);
 		let sinth = this._$.sin(ang);
@@ -2830,13 +2838,52 @@ Q5.Vector = class {
 	}
 	lerp() {
 		let args = [...arguments];
-		let u = this._arg2v(...args.slice(0, -1));
 		let amt = args.at(-1);
+		if (amt == 0) return this;
+		let u = this._arg2v(...args.slice(0, -1));
 		this.x += (u.x - this.x) * amt;
 		this.y += (u.y - this.y) * amt;
 		this.z += (u.z - this.z) * amt;
 		return this;
 	}
+	slerp() {
+		let args = [...arguments];
+		let amt = args.at(-1);
+		if (amt == 0) return this;
+		let u = this._arg2v(...args.slice(0, -1));
+		if (amt == 1) return this.set(u);
+
+		let v0Mag = this.mag();
+		let v1Mag = u.mag();
+
+		if (v0Mag == 0 || v1Mag == 0) {
+			return this.mult(1 - amt).add(u.mult(amt));
+		}
+
+		let axis = Q5.Vector.cross(this, u);
+		let axisMag = axis.mag();
+		let theta = Math.atan2(axisMag, this.dot(u));
+
+		if (axisMag > 0) {
+			axis.div(axisMag);
+		} else if (theta < this._$.HALF_PI) {
+			return this.mult(1 - amt).add(u.mult(amt));
+		} else {
+			if (this.z == 0 && u.z == 0) axis.set(0, 0, 1);
+			else if (this.x != 0) axis.set(this.y, -this.x, 0).normalize();
+			else axis.set(1, 0, 0);
+		}
+
+		let ey = axis.cross(this);
+		let lerpedMagFactor = 1 - amt + (amt * v1Mag) / v0Mag;
+		let cosMultiplier = lerpedMagFactor * Math.cos(amt * theta);
+		let sinMultiplier = lerpedMagFactor * Math.sin(amt * theta);
+
+		this.x = this.x * cosMultiplier + ey.x * sinMultiplier;
+		this.y = this.y * cosMultiplier + ey.y * sinMultiplier;
+		this.z = this.z * cosMultiplier + ey.z * sinMultiplier;
+		return this;
+	}
 	reflect(n) {
 		n.normalize();
 		return this.sub(n.mult(2 * this.dot(n)));
@@ -2889,6 +2936,7 @@ Q5.Vector.div = (v, u) => v.copy().div(u);
 Q5.Vector.dot = (v, u) => v.copy().dot(u);
 Q5.Vector.equals = (v, u, epsilon) => v.equals(u, epsilon);
 Q5.Vector.lerp = (v, u, amt) => v.copy().lerp(u, amt);
+Q5.Vector.slerp = (v, u, amt) => v.copy().slerp(u, amt);
 Q5.Vector.limit = (v, m) => v.copy().limit(m);
 Q5.Vector.heading = (v) => this._$.atan2(v.y, v.x);
 Q5.Vector.magSq = (v) => v.x * v.x + v.y * v.y + v.z * v.z;
@@ -3200,7 +3248,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 Q5.webgpu = async function (scope, parent) {
 	if (!scope || scope == 'global') Q5._hasGlobal = true;
 	if (!navigator.gpu) {
-		console.error('q5 WebGPU not supported on this browser!');
+		console.warn('q5 WebGPU not supported on this browser!');
 		let q = new Q5(scope, parent);
 		q.colorMode('rgb', 1);
 		q._beginRender = () => q.translate(q.canvas.hw, q.canvas.hh);
@@ -3563,5 +3611,190 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.pass.setBindGroup(2, colorsBindGroup);
 	});
 };
-Q5.renderers.webgpu.image = ($, q) => {};
+Q5.renderers.webgpu.image = ($, q) => {
+	$.imageStack = [];
+	$.textures = [];
+
+	$._hooks.postCanvas.push(() => {
+		let imageVertexShader = Q5.device.createShaderModule({
+			code: `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+    @location(1) textureIndex: f32
+};
+
+struct Uniforms {
+    halfWidth: f32,
+    halfHeight: f32
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(1) @binding(0) var<storage, read> transforms: array<mat4x4<f32>>;
+
+@vertex
+fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @location(2) transformIndex: f32, @location(3) textureIndex: f32) -> VertexOutput {
+    var vert = vec4<f32>(pos, 0.0, 1.0);
+    vert *= transforms[i32(transformIndex)];
+    vert.x /= uniforms.halfWidth;
+    vert.y /= uniforms.halfHeight;
+
+    var output: VertexOutput;
+    output.position = vert;
+    output.texCoord = texCoord;
+    output.textureIndex = textureIndex;
+    return output;
+}
+`
+		});
+
+		let imageFragmentShader = Q5.device.createShaderModule({
+			code: `
+@group(0) @binding(0) var samp: sampler;
+@group(0) @binding(1) var textures: array<texture_2d<f32>>;
+
+@fragment
+fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32) -> @location(0) vec4<f32> {
+    return textureSample(textures[i32(textureIndex)], samp, texCoord);
+}
+`
+		});
+
+		const bindGroupLayouts = [
+			Q5.device.createBindGroupLayout({
+				entries: [
+					{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
+					{ binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+					{ binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { viewDimension: '2d', sampleType: 'float' } }
+				]
+			}),
+			Q5.device.createBindGroupLayout({
+				entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } }]
+			})
+		];
+
+		const pipelineLayout = Q5.device.createPipelineLayout({
+			bindGroupLayouts: bindGroupLayouts
+		});
+
+		$.pipelines[1] = Q5.device.createRenderPipeline({
+			layout: pipelineLayout,
+			vertex: {
+				module: imageVertexShader,
+				entryPoint: 'vertexMain',
+				buffers: [
+					{
+						arrayStride: 5 * 4, // 4 floats for position and texCoord, 1 float for textureIndex
+						attributes: [
+							{ shaderLocation: 0, offset: 0, format: 'float32x2' },
+							{ shaderLocation: 1, offset: 2 * 4, format: 'float32x2' },
+							{ shaderLocation: 2, offset: 4 * 4, format: 'float32' } // textureIndex
+						]
+					}
+				]
+			},
+			fragment: {
+				module: imageFragmentShader,
+				entryPoint: 'fragmentMain',
+				targets: [{ format: 'bgra8unorm' }]
+			},
+			primitive: {
+				topology: 'triangle-list'
+			}
+		});
+
+		$.sampler = Q5.device.createSampler({
+			magFilter: 'linear',
+			minFilter: 'linear'
+		});
+	});
+
+	$.loadImage = async (src) => {
+		const img = new Image();
+		img.onload = async () => {
+			const imageBitmap = await createImageBitmap(img);
+			const texture = Q5.device.createTexture({
+				size: [img.width, img.height, 1],
+				format: 'bgra8unorm',
+				usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+			});
+
+			Q5.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [img.width, img.height, 1]);
+
+			img.texture = texture;
+			img.index = $.textures.length;
+			$.textures.push(texture);
+		};
+		img.src = src;
+		return img;
+	};
+
+	$._hooks.preRender.push(() => {
+		if (!$.imageStack.length) return;
+
+		// Switch to image pipeline
+		$.pass.setPipeline($.pipelines[1]);
+
+		// Create a vertex buffer for the image quads
+		const vertices = new Float32Array($.vertexStack);
+
+		const vertexBuffer = Q5.device.createBuffer({
+			size: vertices.byteLength,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+		});
+
+		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+		$.pass.setVertexBuffer(0, vertexBuffer);
+
+		// Set the bind group for the sampler and textures
+		if ($.textures.length !== previousTextureCount) {
+			previousTextureCount = $.textures.length;
+
+			// Create the bind group for all textures
+			const textureViews = $.textures.map((tex) => tex.createView());
+
+			$.textureBindGroup = Q5.device.createBindGroup({
+				layout: $.pipelines[1].getBindGroupLayout(0),
+				entries: [
+					{ binding: 0, resource: $.sampler },
+					...textureViews.map((view, i) => ({ binding: i + 1, resource: view }))
+				]
+			});
+		}
+
+		// Set the bind group for the sampler and textures
+		$.pass.setBindGroup(0, $.textureBindGroup);
+	});
+
+	$.image = (img, x, y, w, h) => {
+		if ($._matrixDirty) $._saveMatrix();
+		let ti = $._transformIndex;
+
+		$.imageStack.push(img.index);
+
+		// Calculate half-width and half-height
+		let hw = w / 2;
+		let hh = h / 2;
+
+		// Calculate vertices positions
+		let left = x - hw;
+		let right = x + hw;
+		let top = -(y - hh); // y is inverted in WebGPU
+		let bottom = -(y + hh);
+
+		let ii = img.index;
+
+		// prettier-ignore
+		$.vertexStack.push(
+			left, top, 0, 0, ti, ii,
+			right, top, 1, 0, ti, ii,
+			left, bottom, 0, 1, ti, ii,
+			right, top, 1, 0, ti, ii,
+			left, bottom, 0, 1, ti, ii,
+			right, bottom, 1, 1, ti, ii
+		);
+
+		$.drawStack.push(6);
+	};
+};
 Q5.renderers.webgpu.text = ($, q) => {};