q5 2.9.20 → 2.9.22

package/src/q5-vector.js

@@ -11,15 +11,18 @@ Q5.Vector = class {
 		this._cn = null;
 		this._cnsq = null;
 	}
+
 	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);
 	}
+
 	_arg2v(x, y, z) {
 		if (x?.x !== undefined) return x;
 		if (y !== undefined) {
@@ -27,10 +30,12 @@ Q5.Vector = class {
 		}
 		return { x: x, y: x, z: x };
 	}
+
 	_calcNorm() {
 		this._cnsq = this.x * this.x + this.y * this.y + this.z * this.z;
 		this._cn = Math.sqrt(this._cnsq);
 	}
+
 	add() {
 		let u = this._arg2v(...arguments);
 		this.x += u.x;
@@ -38,6 +43,7 @@ Q5.Vector = class {
 		this.z += u.z;
 		return this;
 	}
+
 	rem() {
 		let u = this._arg2v(...arguments);
 		this.x %= u.x;
@@ -45,6 +51,7 @@ Q5.Vector = class {
 		this.z %= u.z;
 		return this;
 	}
+
 	sub() {
 		let u = this._arg2v(...arguments);
 		this.x -= u.x;
@@ -52,6 +59,7 @@ Q5.Vector = class {
 		this.z -= u.z;
 		return this;
 	}
+
 	mult() {
 		let u = this._arg2v(...arguments);
 		this.x *= u.x;
@@ -59,6 +67,7 @@ Q5.Vector = class {
 		this.z *= u.z;
 		return this;
 	}
+
 	div() {
 		let u = this._arg2v(...arguments);
 		if (u.x) this.x /= u.x;
@@ -69,18 +78,22 @@ Q5.Vector = class {
 		else this.z = 0;
 		return this;
 	}
+
 	mag() {
 		this._calcNorm();
 		return this._cn;
 	}
+
 	magSq() {
 		this._calcNorm();
 		return this._cnsq;
 	}
+
 	dot() {
 		let u = this._arg2v(...arguments);
 		return this.x * u.x + this.y * u.y + this.z * u.z;
 	}
+
 	dist() {
 		let u = this._arg2v(...arguments);
 		let x = this.x - u.x;
@@ -88,6 +101,7 @@ Q5.Vector = class {
 		let z = this.z - u.z;
 		return Math.sqrt(x * x + y * y + z * z);
 	}
+
 	cross() {
 		let u = this._arg2v(...arguments);
 		let x = this.y * u.z - this.z * u.y;
@@ -98,6 +112,7 @@ Q5.Vector = class {
 		this.z = z;
 		return this;
 	}
+
 	normalize() {
 		this._calcNorm();
 		let n = this._cn;
@@ -110,6 +125,7 @@ Q5.Vector = class {
 		this._cnsq = 1;
 		return this;
 	}
+
 	limit(m) {
 		this._calcNorm();
 		let n = this._cn;
@@ -123,6 +139,7 @@ Q5.Vector = class {
 		}
 		return this;
 	}
+
 	setMag(m) {
 		this._calcNorm();
 		let n = this._cn;
@@ -134,15 +151,18 @@ Q5.Vector = class {
 		this._cnsq = m * m;
 		return this;
 	}
+
 	heading() {
 		return this._$.atan2(this.y, this.x);
 	}
+
 	setHeading(ang) {
 		let mag = this.mag();
 		this.x = mag * this._$.cos(ang);
 		this.y = mag * this._$.sin(ang);
 		return this;
 	}
+
 	rotate(ang) {
 		let costh = this._$.cos(ang);
 		let sinth = this._$.sin(ang);
@@ -152,12 +172,14 @@ Q5.Vector = class {
 		this.y = vy;
 		return this;
 	}
+
 	angleBetween() {
 		let u = this._arg2v(...arguments);
 		let o = Q5.Vector.cross(this, u);
 		let ang = this._$.atan2(o.mag(), this.dot(u));
 		return ang * Math.sign(o.z || 1);
 	}
+
 	lerp() {
 		let args = [...arguments];
 		let amt = args.at(-1);
@@ -168,6 +190,7 @@ Q5.Vector = class {
 		this.z += (u.z - this.z) * amt;
 		return this;
 	}
+
 	slerp() {
 		let args = [...arguments];
 		let amt = args.at(-1);
@@ -206,17 +229,21 @@ Q5.Vector = class {
 		this.z = this.z * cosMultiplier + ey.z * sinMultiplier;
 		return this;
 	}
+
 	reflect(n) {
 		n.normalize();
 		return this.sub(n.mult(2 * this.dot(n)));
 	}
+
 	array() {
 		return [this.x, this.y, this.z];
 	}
+
 	equals(u, epsilon) {
 		epsilon ??= Number.EPSILON || 0;
 		return Math.abs(u.x - this.x) < epsilon && Math.abs(u.y - this.y) < epsilon && Math.abs(u.z - this.z) < epsilon;
 	}
+
 	fromAngle(th, l) {
 		if (l === undefined) l = 1;
 		this._cn = l;
@@ -226,6 +253,7 @@ Q5.Vector = class {
 		this.z = 0;
 		return this;
 	}
+
 	fromAngles(th, ph, l) {
 		if (l === undefined) l = 1;
 		this._cn = l;
@@ -239,18 +267,22 @@ Q5.Vector = class {
 		this.z = l * sinth * cosph;
 		return this;
 	}
+
 	random2D() {
 		this._cn = this._cnsq = 1;
 		return this.fromAngle(Math.random() * Math.PI * 2);
 	}
+
 	random3D() {
 		this._cn = this._cnsq = 1;
 		return this.fromAngles(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2);
 	}
+
 	toString() {
 		return `[${this.x}, ${this.y}, ${this.z}]`;
 	}
 };
+
 Q5.Vector.add = (v, u) => v.copy().add(u);
 Q5.Vector.cross = (v, u) => v.copy().cross(u);
 Q5.Vector.dist = (v, u) => Math.hypot(v.x - u.x, v.y - u.y, v.z - u.z);
@@ -267,6 +299,7 @@ Q5.Vector.mult = (v, u) => v.copy().mult(u);
 Q5.Vector.normalize = (v) => v.copy().normalize();
 Q5.Vector.rem = (v, u) => v.copy().rem(u);
 Q5.Vector.sub = (v, u) => v.copy().sub(u);
+
 for (let k of ['fromAngle', 'fromAngles', 'random2D', 'random3D']) {
 	Q5.Vector[k] = (u, v, t) => new Q5.Vector()[k](u, v, t);
 }

package/src/q5-webgpu-canvas.js

@@ -314,6 +314,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		if ($._matrixDirty) $._saveMatrix();
 		$._transformIndexStack.push($._transformIndex);
 	};
+
 	$.popMatrix = () => {
 		if (!$._transformIndexStack.length) {
 			return console.warn('Matrix index stack is empty!');
@@ -329,6 +330,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$.pushMatrix();
 		$.pushStyles();
 	};
+
 	$.pop = () => {
 		$.popMatrix();
 		$.popStyles();
@@ -410,6 +412,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	}
 
 	$._blendMode = 'normal';
+
 	$.blendMode = (mode) => {
 		if (mode == $._blendMode) return;
 		if (mode == 'source-over') mode = 'normal';
@@ -554,10 +557,7 @@ Q5.initWebGPU = async () => {
 Q5.webgpu = async function (scope, parent) {
 	if (!scope || scope == 'global') Q5._hasGlobal = true;
 	if (!(await Q5.initWebGPU())) {
-		let q = new Q5(scope, parent);
-		q.colorMode('rgb', 1);
-		q._beginRender = () => q.translate(q.canvas.hw, q.canvas.hh);
-		return q;
+		return new Q5(scope, parent, 'webgpu-fallback');
 	}
 	return new Q5(scope, parent, 'webgpu');
 };

package/src/q5-webgpu-drawing.js

@@ -322,10 +322,12 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 
 	let shapeVertCount;
 	let sv = []; // shape vertices
+	let curveVertices = []; // curve vertices
 
 	$.beginShape = () => {
 		shapeVertCount = 0;
 		sv = [];
+		curveVertices = [];
 	};
 
 	$.vertex = (x, y) => {
@@ -334,12 +336,58 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		shapeVertCount++;
 	};
 
+	$.curveVertex = (x, y) => {
+		if ($._matrixDirty) $._saveMatrix();
+		curveVertices.push({ x: x, y: -y });
+	};
+
 	$.endShape = (close) => {
+		if (curveVertices.length > 0) {
+			// Duplicate start and end points if necessary
+			let points = [...curveVertices];
+			if (points.length < 4) {
+				// Duplicate first and last points
+				while (points.length < 4) {
+					points.unshift(points[0]);
+					points.push(points[points.length - 1]);
+				}
+			}
+
+			for (let i = 0; i < points.length - 3; i++) {
+				let p0 = points[i];
+				let p1 = points[i + 1];
+				let p2 = points[i + 2];
+				let p3 = points[i + 3];
+
+				for (let t = 0; t <= 1; t += 0.1) {
+					let t2 = t * t;
+					let t3 = t2 * t;
+
+					let x =
+						0.5 *
+						(2 * p1.x +
+							(-p0.x + p2.x) * t +
+							(2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
+							(-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3);
+
+					let y =
+						0.5 *
+						(2 * p1.y +
+							(-p0.y + p2.y) * t +
+							(2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
+							(-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);
+
+					sv.push(x, y, $._fill, $._transformIndex);
+					shapeVertCount++;
+				}
+			}
+		}
+
 		if (shapeVertCount < 3) {
 			throw new Error('A shape must have at least 3 vertices.');
 		}
 
-		// close the stroke if required
+		// Close the shape if needed
 		if (close) {
 			let firstIndex = 0;
 			let lastIndex = (shapeVertCount - 1) * 4;
@@ -350,14 +398,13 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 			let lastY = sv[lastIndex + 1];
 
 			if (firstX !== lastX || firstY !== lastY) {
-				// append the first vertex to close the shape
 				sv.push(firstX, firstY, sv[firstIndex + 2], sv[firstIndex + 3]);
 				shapeVertCount++;
 			}
 		}
 
 		if ($._doFill) {
-			// triangulate the shape
+			// Triangulate the shape
 			for (let i = 1; i < shapeVertCount - 1; i++) {
 				let v0 = 0;
 				let v1 = i * 4;
@@ -371,7 +418,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		}
 
 		if ($._doStroke) {
-			// draw lines between vertices
+			// Draw lines between vertices
 			for (let i = 0; i < shapeVertCount - 1; i++) {
 				let v1 = i * 4;
 				let v2 = (i + 1) * 4;
@@ -384,9 +431,10 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 			}
 		}
 
-		// reset for the next shape
+		// Reset for the next shape
 		shapeVertCount = 0;
 		sv = [];
+		curveVertices = [];
 	};
 
 	$.triangle = (x1, y1, x2, y2, x3, y3) => {

package/src/q5-webgpu-text.js

@@ -114,6 +114,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		mipmapFilter: 'linear',
 		maxAnisotropy: 16
 	});
+
 	let fontBindGroupLayout = Q5.device.createBindGroupLayout({
 		label: 'MSDF font group layout',
 		entries: [
@@ -151,6 +152,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
 		multisample: { count: 4 }
 	};
+
 	$._pipelines[2] = Q5.device.createRenderPipeline($._pipelineConfigs[2]);
 
 	class MsdfFont {
@@ -299,6 +301,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 	$.textFont = (fontName) => {
 		$._font = fonts[fontName];
 	};
+
 	$.textSize = (size) => {
 		$._textSize = size;
 		if (!leadingSet) {
@@ -306,12 +309,14 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			leadDiff = leading - size;
 		}
 	};
+
 	$.textLeading = (lineHeight) => {
 		$._font.lineHeight = leading = lineHeight;
 		leadDiff = leading - $._textSize;
 		leadPercent = leading / $._textSize;
 		leadingSet = true;
 	};
+
 	$.textAlign = (horiz, vert) => {
 		$._textAlign = horiz;
 		if (vert) $._textBaseline = vert;