q5 3.9.4 → 4.0.1

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 3.9
+ * @version 4.0
  * @author quinton-ashley
  * @contributors evanalulu, Tezumie, ormaq, Dukemz, LingDong-
  * @license LGPL-3.0
@@ -469,7 +469,7 @@ if (typeof window == 'object') {
 	window.WEBGPU = 'webgpu';
 } else global.window = 0;
 
-Q5.version = Q5.VERSION = '3.9';
+Q5.version = Q5.VERSION = '4.0';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -638,7 +638,7 @@ Q5.modules.canvas = ($, q) => {
 
 		let m = Q5._libMap;
 
-		if (m.width) {
+		if (m?.width) {
 			q[m.width] = w;
 			q[m.height] = h;
 			q[m.halfWidth] = q.halfWidth;
@@ -1603,7 +1603,11 @@ Q5.renderers.c2d.image = ($, q) => {
 			$._retint = true;
 
 			if ($._owner?._makeDrawable) {
-				$._texture.destroy();
+				if ($._owner._texturesToDestroy && $._texture) {
+					$._owner._texturesToDestroy.push($._texture);
+				} else {
+					$._texture.destroy();
+				}
 				delete $._texture;
 				$._owner._makeDrawable($);
 			}
@@ -1776,24 +1780,26 @@ Q5.Image = class {
 		delete $.createCanvas;
 		$._loop = false;
 
-		let libMap = Q5._libMap;
-		let imgFns = [
-			'copy',
-			'filter',
-			'get',
-			'set',
-			'resize',
-			'mask',
-			'trim',
-			'inset',
-			'pixels',
-			'loadPixels',
-			'updatePixels',
-			'smooth',
-			'noSmooth'
-		];
-		for (let name of imgFns) {
-			if (libMap[name]) $[libMap[name]] = $[name];
+		let m = Q5._libMap;
+		if (m) {
+			let imgFns = [
+				'copy',
+				'filter',
+				'get',
+				'set',
+				'resize',
+				'mask',
+				'trim',
+				'inset',
+				'pixels',
+				'loadPixels',
+				'updatePixels',
+				'smooth',
+				'noSmooth'
+			];
+			for (let name of imgFns) {
+				if (m[name]) $[m[name]] = $[name];
+			}
 		}
 	}
 	get w() {
@@ -2101,7 +2107,7 @@ Q5.renderers.c2d.text = ($, q) => {
 
 	$.textStyle = (x) => {
 		if (!x) return emphasis;
-		emphasis = x;
+		$._textStyle = emphasis = x;
 		$._fontMod = true;
 		styleHash = -1;
 	};
@@ -2231,7 +2237,6 @@ Q5.renderers.c2d.text = ($, q) => {
 			if ($._textBaseline == 'middle') tY -= leading * (lines.length - 1) * 0.5;
 			else if ($._textBaseline == 'bottom') tY -= leading * (lines.length - 1);
 		} else {
-			tX = 0;
 			tY = leading;
 
 			if (!img) {
@@ -2272,9 +2277,14 @@ Q5.renderers.c2d.text = ($, q) => {
 
 			ctx = img.ctx;
 
+			ctx.textAlign = $._textAlign;
+			if ($._textAlign == 'center') tX = img.width / 2;
+			else if ($._textAlign == 'right') tX = img.width;
+			else tX = 0;
+
 			ctx.font = $.ctx.font;
-			ctx.fillStyle = $._fill;
-			ctx.strokeStyle = $._stroke;
+			if ($._doFill && $._fillSet) ctx.fillStyle = $._fill;
+			if ($._doStroke && $._strokeSet) ctx.strokeStyle = $._stroke;
 			ctx.lineWidth = $.ctx.lineWidth;
 		}
 
@@ -2318,7 +2328,11 @@ Q5.renderers.c2d.text = ($, q) => {
 						colorCache = styleCache[hash];
 						for (let c in colorCache) {
 							let _img = colorCache[c];
-							if (_img._texture) _img._texture.destroy();
+							if (_img._texture) {
+								let owner = _img._owner || $;
+								if (owner._texturesToDestroy) owner._texturesToDestroy.push(_img._texture);
+								else _img._texture.destroy();
+							}
 							delete colorCache[c];
 						}
 					}
@@ -2348,6 +2362,79 @@ Q5.renderers.c2d.text = ($, q) => {
 		$.image(img, x, y);
 		$._imageMode = og;
 	};
+
+	$.textToPoints = (str, x = 0, y = 0, sampleRate = 0.1, density = 1) => {
+		let pd = $._pixelDensity;
+		$._pixelDensity = density;
+		let img = $.createTextImage(str);
+		$._pixelDensity = pd;
+
+		img.loadPixels();
+
+		let w = img.canvas.width,
+			h = img.canvas.height;
+
+		let points = [];
+
+		let ta = $._textAlign,
+			bl = $._textBaseline,
+			offsetX = 0,
+			offsetY = 0;
+
+		if (ta == 'center') offsetX = -w / 2;
+		else if (ta == 'right') offsetX = -w;
+
+		if (bl == 'alphabetic') offsetY = -img._leading;
+		else if (bl == 'middle') offsetY = -img._middle;
+		else if (bl == 'bottom') offsetY = -img._bottom;
+		else if (bl == 'top') offsetY = -img._top;
+
+		offsetY *= density;
+
+		let allPoints = [];
+
+		// Z-order curve (Morton code)
+		const part1by1 = (n) => {
+			n &= 0x0000ffff;
+			n = (n | (n << 8)) & 0x00ff00ff;
+			n = (n | (n << 4)) & 0x0f0f0f0f;
+			n = (n | (n << 2)) & 0x33333333;
+			n = (n | (n << 1)) & 0x55555555;
+			return n;
+		};
+
+		let r = Math.max(0.5, sampleRate);
+
+		for (let py = 0; py < h; py++) {
+			for (let px = 0; px < w; px++) {
+				let index = (py * w + px) * 4;
+
+				if ((r == 1 || $.random() < r) && img.pixels[index + 3] > 128) {
+					allPoints.push({
+						x: px,
+						y: py,
+						z: part1by1(px) | (part1by1(py) << 1)
+					});
+				}
+			}
+		}
+
+		let total = allPoints.length;
+		let numPoints = total * sampleRate * (1 / r);
+
+		if (sampleRate < 1) allPoints.sort((a, b) => a.z - b.z);
+
+		let step = total / numPoints;
+		for (let i = 0; i < total; i += step) {
+			let p = allPoints[Math.floor(i)];
+			points.push({
+				x: (p.x + offsetX) / density + x,
+				y: (p.y + offsetY) / density + y
+			});
+		}
+
+		return points;
+	};
 };
 
 Q5.fonts = [];
@@ -3317,8 +3404,8 @@ Q5.modules.dom = ($, q) => {
 		return vid;
 	};
 
-	$.findElement = (selector) => document.querySelector(selector);
-	$.findElements = (selector) => document.querySelectorAll(selector);
+	$.findEl = (selector) => document.querySelector(selector);
+	$.findEls = (selector) => document.querySelectorAll(selector);
 };
 Q5.modules.fes = ($) => {
 	$._fes = async (e) => {
@@ -3335,7 +3422,7 @@ Q5.modules.fes = ($) => {
 			idx = 0;
 			sep = '@';
 		}
-		while (stackLines[idx].indexOf('q5') >= 0) idx++;
+		while (idx > stackLines.length && stackLines[idx].indexOf('q5') >= 0) idx++;
 
 		let errFile = stackLines[idx].split(sep).at(-1);
 		if (errFile.startsWith('blob:')) errFile = errFile.slice(5);
@@ -3789,6 +3876,7 @@ Q5.modules.math = ($, q) => {
 		return {
 			setSeed(val) {
 				jsr = seed = (val == null ? Math.random() * m : val) >>> 0;
+				if (jsr === 0) jsr = 1;
 			},
 			getSeed() {
 				return seed;
@@ -5309,6 +5397,7 @@ struct Q5 {
 	$._pipelineConfigs = [];
 	$._pipelines = [];
 	$._buffers = [];
+	$._texturesToDestroy = [];
 
 	// local variables used for slightly better performance
 
@@ -6355,9 +6444,14 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 		ellipseStackIdx = 0;
 
 		// destroy buffers
+		let bufs = $._buffers;
+		let texs = $._texturesToDestroy;
+		$._buffers = [];
+		$._texturesToDestroy = [];
+
 		Q5.device.queue.onSubmittedWorkDone().then(() => {
-			for (let b of $._buffers) b.destroy();
-			$._buffers = [];
+			for (let b of bufs) b.destroy();
+			for (let t of texs) t.destroy();
 		});
 	};
 
@@ -7072,7 +7166,12 @@ fn vertexMain(v: VertexParams) -> FragParams {
 	f.position = transformVertex(pos, ellipse.matrixIndex);
 	f.outerEdge = dist / (ellipse.size + halfStrokeSize);
 	f.fillEdge = dist / ellipse.size;
-	f.innerEdge = dist / (ellipse.size - halfStrokeSize);
+	let innerSize = ellipse.size - halfStrokeSize;
+	if (innerSize.x <= 0.0 || innerSize.y <= 0.0) {
+		f.innerEdge = vec2f(2.0, 0.0);
+	} else {
+		f.innerEdge = dist / innerSize;
+	}
 	f.strokeWeight = ellipse.strokeWeight;
 
 	let fill = colors[i32(ellipse.fillIndex)];
@@ -7676,7 +7775,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		let isVideo;
 		if (img._texture == undefined) {
 			isVideo = img.tagName == 'VIDEO';
-			if (img.width <= 1 || (isVideo && !img.currentTime)) return;
+			if (!isVideo || !img.currentTime) return;
 			if (img.flipped) $.scale(-1, 1);
 		}
 
@@ -8113,9 +8212,10 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 
 	let _textSize = 18,
 		_textAlign = 'left',
+		_textStyle = 'normal',
 		_textBaseline = 'alphabetic',
 		leadingSet = false,
-		leading = 22.5,
+		_textLeading = 22.5,
 		leadDiff = 4.5,
 		leadPercent = 1.25;
 
@@ -8136,8 +8236,8 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		if (size == undefined) return _textSize;
 		_textSize = size;
 		if (!leadingSet) {
-			leading = size * leadPercent;
-			leadDiff = leading - size;
+			_textLeading = size * leadPercent;
+			leadDiff = _textLeading - size;
 		}
 	};
 
@@ -8170,29 +8270,29 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 
 	$.textLeading = (lineHeight) => {
 		if (!$._font) return $._g.textLeading(lineHeight);
-		if (!lineHeight) return leading;
-		$._font.lineHeight = leading = lineHeight;
-		leadDiff = leading - _textSize;
-		leadPercent = leading / _textSize;
+		if (!lineHeight) return _textLeading;
+		$._font.lineHeight = _textLeading = lineHeight;
+		leadDiff = _textLeading - _textSize;
+		leadPercent = _textLeading / _textSize;
 		leadingSet = true;
 	};
 
 	$.textAlign = (horiz, vert) => {
 		_textAlign = horiz;
-		if (vert) _textBaseline = vert;
+		if (vert) _textBaseline = vert[0] == 'c' ? 'middle' : vert;
 	};
 
 	$.textStyle = (style) => {
-		// stub
+		_textStyle = style;
 	};
 
 	let charStack = [],
 		textStack = [];
 
 	// Reusable array for line widths to avoid GC
-	let lineWidthsCache = new Array(100);
+	let lineWidths = new Array(100);
 
-	// Reusable buffers for text data to avoid creating new arrays
+	// Reusable buffers for text data to avoid GC
 	let charDataBuffer = new Float32Array(Q5.MAX_CHARS * 4); // reusable buffer for char data
 	let textDataBuffer = new Float32Array(Q5.MAX_TEXTS * 8); // reusable buffer for text metadata
 
@@ -8202,7 +8302,6 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 			offsetY = 0,
 			line = 0,
 			printedCharCount = 0,
-			lineWidths = lineWidthsCache, // reuse array
 			nextCharCode = text.charCodeAt(0);
 
 		for (let i = 0; i < text.length; ++i) {
@@ -8210,7 +8309,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 			nextCharCode = i < text.length - 1 ? text.charCodeAt(i + 1) : -1;
 			switch (charCode) {
 				case 10: // newline
-					lineWidths.push(offsetX);
+					lineWidths[line] = offsetX;
 					line++;
 					maxWidth = Math.max(maxWidth, offsetX);
 					offsetX = 0;
@@ -8303,8 +8402,8 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 			});
 
 			if (tb == 'alphabetic') y += _textSize * yDir;
-			else if (tb == 'center') y += _textSize * 0.5 * yDir;
-			else if (tb == 'bottom') y += leading * yDir;
+			else if (tb == 'middle') y += _textSize * 0.5 * yDir;
+			else if (tb == 'bottom') y += _textLeading * yDir;
 		} else {
 			// measure the text to get the line height before setting
 			// the x position to properly align the text
@@ -8312,7 +8411,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 
 			let offsetY = 0;
 			if (tb == 'alphabetic') y += _textSize * yDir;
-			else if (tb == 'center') offsetY = measurements.height * 0.5;
+			else if (tb == 'middle') offsetY = measurements.height * 0.5;
 			else if (tb == 'bottom') offsetY = measurements.height;
 
 			measureText($._font, str, (textX, textY, line, char) => {
@@ -8361,7 +8460,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 			$._g.textSize(_textSize);
 			return $._g.textAscent(str);
 		}
-		return leading - leadDiff;
+		return _textLeading - leadDiff;
 	};
 
 	$.textDescent = (str) => {
@@ -8372,18 +8471,29 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		return leadDiff;
 	};
 
-	$.createTextImage = (str, w, h) => {
-		$._g.textSize(_textSize);
-
-		if (doFill && fillSet) {
+	$._applyTextStylesToC2D = () => {
+		if (!doFill) $._g.noFill();
+		else if (fillSet) {
 			let fi = fillIdx * 4;
 			$._g.fill(colorStack.slice(fi, fi + 4));
 		}
-		if (doStroke && strokeSet) {
+
+		if (!doStroke) $._g.noStroke();
+		else if (strokeSet) {
 			let si = strokeIdx * 4;
 			$._g.stroke(colorStack.slice(si, si + 4));
 		}
 
+		if (sw != $._g._strokeWeight) $._g.strokeWeight(sw);
+		if (_textSize != $._g._textSize) $._g.textSize(_textSize);
+		if (_textStyle != $._g._textStyle) $._g.textStyle(_textStyle);
+		if (_textLeading != $._g.textLeading()) $._g.textLeading(_textLeading);
+		$._g.textAlign(_textAlign, _textBaseline);
+	};
+
+	$.createTextImage = (str, w, h) => {
+		$._applyTextStylesToC2D();
+
 		let g = $._g.createTextImage(str, w, h);
 		$._makeDrawable(g);
 		return g;
@@ -8401,7 +8511,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 
 		let bl = _textBaseline;
 		if (bl == 'alphabetic') y += img._leading * yDir;
-		else if (bl == 'center') y += img._middle * yDir;
+		else if (bl == 'middle') y += img._middle * yDir;
 		else if (bl == 'bottom') y += img._bottom * yDir;
 		else if (bl == 'top') y += img._top * yDir;
 
@@ -8409,6 +8519,11 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		_imageMode = og;
 	};
 
+	$.textToPoints = (str, x, y, sampleRate, density) => {
+		$._applyTextStylesToC2D();
+		return $._g.textToPoints(str, x, y, sampleRate, density);
+	};
+
 	/* SHADERS */
 
 	let pipelineTypes = ['frame', 'shapes', 'image', 'video', 'text'];