q5 2.7.6 → 2.9.0

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.7
+ * @version 2.9
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -290,6 +290,13 @@ if (Q5._nodejs) global.p5 ??= global.Q5 = Q5;
 else if (typeof window == 'object') window.p5 ??= window.Q5 = Q5;
 else global.window = 0;
 
+function createCanvas(w, h, opt) {
+	if (!Q5._hasGlobal) {
+		let q = new Q5();
+		q.createCanvas(w, h, opt);
+	}
+}
+
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
 		if (!Q5._hasGlobal) new Q5('auto');
@@ -486,6 +493,8 @@ Q5.modules.canvas = ($, q) => {
 		c.h = h = Math.ceil(h);
 		c.hw = w / 2;
 		c.hh = h / 2;
+
+		// changes the actual size of the canvas
 		c.width = Math.ceil(w * $._pixelDensity);
 		c.height = Math.ceil(h * $._pixelDensity);
 
@@ -498,6 +507,17 @@ Q5.modules.canvas = ($, q) => {
 		else $._adjustDisplay();
 	};
 
+	$._setImageSize = (w, h) => {
+		q.width = c.w = w;
+		q.height = c.h = h;
+		c.hw = w / 2;
+		c.hh = h / 2;
+
+		// changes the actual size of the canvas
+		c.width = Math.ceil(w * $._pixelDensity);
+		c.height = Math.ceil(h * $._pixelDensity);
+	};
+
 	if ($._scope == 'image') return;
 
 	if (c && $._scope != 'graphics') {
@@ -552,6 +572,12 @@ Q5.modules.canvas = ($, q) => {
 		return v;
 	};
 
+	$.defaultImageScale = (scale) => {
+		if (!scale) return $._defaultImageScale;
+		return ($._defaultImageScale = scale);
+	};
+	$.defaultImageScale(0.5);
+
 	$.flexibleCanvas = (unit = 400) => {
 		if (unit) {
 			$._da = c.width / (unit * $._pixelDensity);
@@ -705,6 +731,10 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		$.ctx.rotate(r);
 	};
 	$.scale = (x, y) => {
+		if (x.x) {
+			y = x.y;
+			x = x.x;
+		}
 		y ??= x;
 		$.ctx.scale(x, y);
 	};
@@ -712,8 +742,10 @@ Q5.renderers.q2d.canvas = ($, q) => {
 	$.shearX = (ang) => $.ctx.transform(1, 0, $.tan(ang), 1, 0, 0);
 	$.shearY = (ang) => $.ctx.transform(1, $.tan(ang), 0, 1, 0, 0);
 	$.resetMatrix = () => {
-		$.ctx.resetTransform();
-		$.scale($._pixelDensity);
+		if ($.ctx) {
+			$.ctx.resetTransform();
+			$.scale($._pixelDensity);
+		}
 	};
 
 	$.pushMatrix = () => $.ctx.save();
@@ -776,6 +808,7 @@ Q5.renderers.q2d.drawing = ($) => {
 	$.background = function (c) {
 		$.ctx.save();
 		$.ctx.resetTransform();
+		$.ctx.globalAlpha = 1;
 		if (c.canvas) $.image(c, 0, 0, $.canvas.width, $.canvas.height);
 		else {
 			if (Q5.Color && !c._q5Color) {
@@ -888,20 +921,20 @@ Q5.renderers.q2d.drawing = ($) => {
 		} else $.ellipse(x, y, d, d);
 	};
 	$.point = (x, y) => {
-		if (x.x) {
-			y = x.y;
-			x = x.x;
-		}
-		if ($._da) {
-			x *= $._da;
-			y *= $._da;
+		if ($._doStroke) {
+			if (x.x) {
+				y = x.y;
+				x = x.x;
+			}
+			if ($._da) {
+				x *= $._da;
+				y *= $._da;
+			}
+			$.ctx.beginPath();
+			$.ctx.moveTo(x, y);
+			$.ctx.lineTo(x, y);
+			$.ctx.stroke();
 		}
-		$.ctx.save();
-		$.ctx.beginPath();
-		$.ctx.arc(x, y, $.ctx.lineWidth / 2, 0, $.TAU);
-		$.ctx.fillStyle = $.ctx.strokeStyle;
-		$.ctx.fill();
-		$.ctx.restore();
 	};
 	function rect(x, y, w, h) {
 		if ($._da) {
@@ -1218,9 +1251,15 @@ Q5.renderers.q2d.image = ($, q) => {
 		opt = typeof last == 'object' ? last : null;
 
 		let g = $.createImage(1, 1, opt);
+		let pd = (g._pixelDensity = opt?.pixelDensity || 1);
 
 		function loaded(img) {
-			g.resize(img.naturalWidth || img.width, img.naturalHeight || img.height);
+			g.canvas.defaultWidth = img.width * $._defaultImageScale;
+			g.canvas.defaultHeight = img.height * $._defaultImageScale;
+			g.naturalWidth = img.naturalWidth;
+			g.naturalHeight = img.naturalHeight;
+			g._setImageSize(Math.ceil(g.naturalWidth / pd), Math.ceil(g.naturalHeight / pd));
+
 			g.ctx.drawImage(img, 0, 0);
 			q._preloadCount--;
 			if (cb) cb(g);
@@ -1237,7 +1276,7 @@ Q5.renderers.q2d.image = ($, q) => {
 			let img = new window.Image();
 			img.src = url;
 			img.crossOrigin = 'Anonymous';
-			img._pixelDensity = 1;
+			img._pixelDensity = pd;
 			img.onload = () => loaded(img);
 			img.onerror = (e) => {
 				q._preloadCount--;
@@ -1254,8 +1293,9 @@ Q5.renderers.q2d.image = ($, q) => {
 		if (Q5._createNodeJSCanvas) {
 			drawable = drawable.context.canvas;
 		}
-		dw ??= img.width || img.videoWidth;
-		dh ??= img.height || img.videoHeight;
+
+		dw ??= drawable.defaultWidth || drawable.width || img.videoWidth;
+		dh ??= drawable.defaultHeight || drawable.height || img.videoHeight;
 		if ($._imageMode == 'center') {
 			dx -= dw * 0.5;
 			dy -= dh * 0.5;
@@ -1316,15 +1356,16 @@ Q5.renderers.q2d.image = ($, q) => {
 
 	if ($._scope == 'image') {
 		$.resize = (w, h) => {
-			let o = new $._OffscreenCanvas($.canvas.width, $.canvas.height);
+			let c = $.canvas;
+			let o = new $._OffscreenCanvas(c.width, c.height);
 			let tmpCtx = o.getContext('2d', {
-				colorSpace: $.canvas.colorSpace
+				colorSpace: c.colorSpace
 			});
-			tmpCtx.drawImage($.canvas, 0, 0);
-			$._setCanvasSize(w, h);
+			tmpCtx.drawImage(c, 0, 0);
+			$._setImageSize(w, h);
 
-			$.ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
-			$.ctx.drawImage(o, 0, 0, $.canvas.width, $.canvas.height);
+			$.ctx.clearRect(0, 0, c.width, c.height);
+			$.ctx.drawImage(o, 0, 0, c.width, c.height);
 		};
 	}
 
@@ -1721,8 +1762,9 @@ Q5.modules.ai = ($) => {
 		}
 		while (stackLines[idx].indexOf('q5') >= 0) idx++;
 
-		let parts = stackLines[idx].split(sep).at(-1);
-		parts = parts.split(':');
+		let errFile = stackLines[idx].split(sep).at(-1);
+		if (errFile.startsWith('blob:')) errFile = errFile.slice(5);
+		let parts = errFile.split(':');
 		let lineNum = parseInt(parts.at(-2));
 		if (askAI) lineNum++;
 		parts[3] = parts[3].split(')')[0];
@@ -2085,7 +2127,7 @@ main {
 			if ($.noSmooth) $.noSmooth();
 			if ($.textFont) $.textFont('monospace');
 		}
-		if (c.displayMode == 'normal') {
+		if (c.displayMode == 'default' || c.displayMode == 'normal') {
 			p.classList.remove('q5-centered', 'q5-maxed', 'q5-fullscreen');
 			s.width = c.w * c.displayScale + 'px';
 			s.height = c.h * c.displayScale + 'px';
@@ -2110,7 +2152,7 @@ main {
 		}
 	};
 
-	$.displayMode = (displayMode = 'normal', renderQuality = 'default', displayScale = 1) => {
+	$.displayMode = (displayMode = 'normal', renderQuality = 'smooth', displayScale = 1) => {
 		if (typeof displayScale == 'string') {
 			displayScale = parseFloat(displayScale.slice(1));
 		}
@@ -2313,7 +2355,7 @@ Q5.modules.math = ($, q) => {
 	$.abs = Math.abs;
 	$.ceil = Math.ceil;
 	$.exp = Math.exp;
-	$.floor = Math.floor;
+	$.floor = $.int = Math.floor;
 	$.loge = Math.log;
 	$.mag = Math.hypot;
 	$.max = Math.max;
@@ -3590,8 +3632,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 					// v is the texture index
 					pass.setBindGroup(2, $._textureBindGroups[v]);
 				}
-				pass.draw(6, 1, imageVertOffset);
-				imageVertOffset += 6;
+				pass.draw(4, 1, imageVertOffset);
+				imageVertOffset += 4;
 			} else if (curPipelineIndex == 2) {
 				let o = drawStack[i + 2];
 				pass.setBindGroup(2, $._fonts[o].bindGroup);
@@ -3746,29 +3788,6 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		vertIndex = i;
 	};
 
-	const addTri = (x1, y1, x2, y2, x3, y3, ci, ti) => {
-		let v = vertexStack,
-			i = vertIndex;
-
-		v[i++] = x1;
-		v[i++] = y1;
-		v[i++] = ci;
-		v[i++] = ti;
-
-		v[i++] = x2;
-		v[i++] = y2;
-		v[i++] = ci;
-		v[i++] = ti;
-
-		v[i++] = x3;
-		v[i++] = y3;
-		v[i++] = ci;
-		v[i++] = ti;
-
-		vertIndex = i;
-		drawStack.push(0, 3);
-	};
-
 	const addRect = (x1, y1, x2, y2, x3, y3, x4, y4, ci, ti) => {
 		let v = vertexStack,
 			i = vertIndex;
@@ -3852,21 +3871,40 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		if ($._doStroke) {
 			ci = $._strokeIndex;
 
-			// outer rectangle coordinates
+			// stroke weight adjustment
 			let sw = $._strokeWeight / 2;
-			let to = t + sw,
-				bo = b - sw,
-				lo = l - sw,
-				ro = r + sw;
-
-			// stroke is simply a bigger rectangle drawn first
-			addRect(lo, to, ro, to, ro, bo, lo, bo, ci, ti);
 
-			// inner rectangle coordinates
-			t -= sw;
-			b += sw;
-			l += sw;
-			r -= sw;
+			if ($._doFill) {
+				// existing behavior: draw stroke as one big rectangle
+				let to = t + sw,
+					bo = b - sw,
+					lo = l - sw,
+					ro = r + sw;
+
+				// draw stroke rectangle
+				addRect(lo, to, ro, to, ro, bo, lo, bo, ci, ti);
+
+				// adjust inner rectangle coordinates
+				t -= sw;
+				b += sw;
+				l += sw;
+				r -= sw;
+			} else {
+				// new behavior: draw stroke as four rectangles (sides)
+				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
+				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 ($._doFill) {
@@ -4041,11 +4079,16 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		$.vertex(x1, y1);
 		$.vertex(x2, y2);
 		$.vertex(x3, y3);
-		$.endShape();
+		$.endShape(true);
 	};
 
 	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
-		addRect(x1, y1, x2, y2, x3, y3, x4, y4, $._fillIndex, $._transformIndex);
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.vertex(x4, y4);
+		$.endShape(true);
 	};
 
 	$.background = (r, g, b, a) => {
@@ -4178,7 +4221,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			entryPoint: 'fragmentMain',
 			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
-		primitive: { topology: 'triangle-list' },
+		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
 		multisample: { count: 4 }
 	};
 
@@ -4210,7 +4253,6 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			{
 				texture,
 				colorSpace: $.canvas.colorSpace
-				// premultipliedAlpha: true
 			},
 			textureSize
 		);
@@ -4242,6 +4284,11 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		const img = new Image();
 		img.crossOrigin = 'Anonymous';
 		img.onload = () => {
+			// calculate the default width and height that the image
+			// should be drawn at if the user doesn't specify a display size
+			img.defaultWidth = img.width * $._defaultImageScale;
+			img.defaultHeight = img.height * $._defaultImageScale;
+
 			$._createTexture(img);
 			q._preloadCount--;
 		};
@@ -4258,8 +4305,8 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._transformIndex;
 
-		w ??= img.width / $._pixelDensity;
-		h ??= img.height / $._pixelDensity;
+		w ??= img.defaultWidth;
+		h ??= img.defaultHeight;
 
 		let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode);
 
@@ -4268,8 +4315,6 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			l, t, 0, 0, ti,
 			r, t, 1, 0, ti,
 			l, b, 0, 1, ti,
-			r, t, 1, 0, ti,
-			l, b, 0, 1, ti,
 			r, b, 1, 1, ti
 		);