q5 4.6.1 → 4.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "4.6.1",
+	"version": "4.6.3",
 	"description": "Beginner friendly graphics powered by WebGPU, optimized for interactive art!",
 	"author": "quinton-ashley",
 	"license": "LGPL-3.0-only",
@@ -46,7 +46,7 @@
 		"dist": "bun bundle && bun min",
 		"tests": "jest test",
 		"bld": "node lang/build.js",
-		"dts": "node lang/types.js",
+		"types": "node lang/types.js",
 		"v": "npm version patch --force",
 		"V": "npm version minor --force",
 		"version": "git add -A",

package/q5.d.ts

@@ -1875,10 +1875,18 @@ declare global {
 	function blendMode(val: string): void;
 
 	/** 💅
-	 * Set the line cap style to `ROUND`, `SQUARE`, or `PROJECT`.
-	 * 
-	 * Not available in q5 WebGPU.
+	 * Set the line cap style to `SQUARE` or `PROJECT`.
 	 * @param {CanvasLineCap} val line cap style
+	 * @example
+	 * await Canvas(200);
+	 * background(0.8);
+	 * strokeWeight(20);
+	 * 
+	 * strokeCap(SQUARE);
+	 * line(-50, -25, 50, -25);
+	 * 
+	 * strokeCap(PROJECT);
+	 * line(-50, 25, 50, 25);
 	 */
 	function strokeCap(val: CanvasLineCap): void;
 
@@ -4073,12 +4081,13 @@ declare global {
 	/** ⚡
 	 * Creates a shader that q5 can use to draw frames.
 	 * 
-	 * You must create a canvas before using this function.
-	 * 
 	 * Use this function to customize a copy of the
 	 * [default frame shader](https://github.com/q5js/q5.js/blob/main/src/shaders/frame.wgsl).
 	 * @example
-	 * await Canvas(200);
+	 * await Canvas(200, 400);
+	 * stroke(1);
+	 * strokeWeight(8);
+	 * strokeCap(PROJECT);
 	 * 
 	 * let boxy = createFrameShader(`
 	 * @fragment
@@ -4090,8 +4099,6 @@ declare global {
 	 * }`);
 	 * 
 	 * q5.draw = function () {
-	 * 	stroke(1);
-	 * 	strokeWeight(8);
 	 * 	line(mouseX, mouseY, pmouseX, pmouseY);
 	 * 	mouseIsPressed ? resetShaders() : shader(boxy);
 	 * };
@@ -4106,7 +4113,7 @@ declare global {
 	 * @param {string} code WGSL shader code excerpt
 	 * @returns {GPUShaderModule} a shader program
 	 * @example
-	 * await Canvas(200);
+	 * await Canvas(200, 400);
 	 * imageMode(CENTER);
 	 * 
 	 * let logo = loadImage('/q5js_logo.avif');

package/q5.js

@@ -6309,13 +6309,6 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 			}
 
 			Q5.device.queue.writeBuffer(imgVertBuff, 0, imgVertStack.subarray(0, imgVertIdx));
-
-			$._pass.setVertexBuffer(1, imgVertBuff);
-
-			if (vidFrames) {
-				$._pass.setPipeline($._pipelines[3]); // video pipeline
-				$._pass.setVertexBuffer(1, imgVertBuff);
-			}
 		}
 
 		// prepare to render text
@@ -6415,6 +6408,12 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 				curPipelineIndex = drawStack[i];
 				pass.setPipeline($._pipelines[curPipelineIndex]);
 
+				if (curPipelineIndex == 2 || curPipelineIndex == 3 || curPipelineIndex >= 2000) {
+					pass.setVertexBuffer(0, imgVertBuff);
+				} else if (curPipelineIndex == 1 || (curPipelineIndex >= 1000 && curPipelineIndex < 2000)) {
+					pass.setVertexBuffer(0, shapesVertBuff);
+				}
+
 				if (curPipelineIndex == 5) {
 					pass.setIndexBuffer(rectIndexBuffer, 'uint16');
 					pass.setBindGroup(1, rectBindGroup);
@@ -7327,10 +7326,29 @@ fn vertexMain(v: VertexParams) -> FragParams {
 
 		let len = Math.sqrt(sqLen),
 			ratio = hsw / len,
-			nx = -dy * ratio,
-			ny = dx * ratio;
-
-		addQuad(x1 + nx, y1 + ny, x1 - nx, y1 - ny, x2 - nx, y2 - ny, x2 + nx, y2 + ny, strokeIdx, matrixIdx);
+			nx = -dy * ratio, // line thickness
+			ny = dx * ratio,
+			ex = 0,
+			ey = 0;
+
+		if (_strokeCap[0] === 's') {
+			// 'square' PROJECT
+			ex = ny;
+			ey = -nx;
+		}
+
+		addQuad(
+			x1 - ex + nx,
+			y1 - ey + ny,
+			x1 - ex - nx,
+			y1 - ey - ny,
+			x2 + ex - nx,
+			y2 + ey - ny,
+			x2 + ex + nx,
+			y2 + ey + ny,
+			strokeIdx,
+			matrixIdx
+		);
 	};
 
 	/* ELLIPSE */
@@ -7790,7 +7808,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		vertex: {
 			module: imageShader,
 			entryPoint: 'vertexMain',
-			buffers: [{ arrayStride: 0, attributes: [] }, imgVertBuffLayout]
+			buffers: [imgVertBuffLayout]
 		},
 		fragment: {
 			module: imageShader,
@@ -7809,7 +7827,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		vertex: {
 			module: videoShader,
 			entryPoint: 'vertexMain',
-			buffers: [{ arrayStride: 0, attributes: [] }, imgVertBuffLayout]
+			buffers: [imgVertBuffLayout]
 		},
 		fragment: {
 			module: videoShader,
@@ -9437,6 +9455,10 @@ const parseLangs = function (data, lang) {
 	return map;
 };
 
+const unaccent = function (s) {
+	return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+};
+
 Object.defineProperty(Q5, 'lang', {
 	get: () => Q5._lang,
 	set: (val) => {
@@ -9502,6 +9524,40 @@ for (let l of supportedLangs) {
 	}
 }
 
+Q5.applyLang = function (q, libs, classes) {
+	let val = Q5._lang;
+	if (val == 'en') return;
+
+	let map = parseLangs(libs, val);
+	for (let name in map) {
+		let translatedName = map[name];
+		q[translatedName] = q[name];
+		if (val == 'es') {
+			let unaccentedName = unaccent(translatedName);
+			if (unaccentedName != translatedName) q[unaccentedName] = q[name];
+		}
+	}
+
+	if (!classes) return;
+
+	for (let className in classes) {
+		let target = q[className].prototype;
+		let map = parseLangs(classes[className], val);
+		for (let name in map) {
+			let translatedName = map[name];
+			if (target.hasOwnProperty(translatedName)) continue;
+			Object.defineProperty(target, translatedName, {
+				get: function () {
+					return this[name];
+				},
+				set: function (v) {
+					this[name] = v;
+				}
+			});
+		}
+	}
+};
+
 Q5.modules.lang = ($) => {
 	let userFnsMap = Q5._userFnsMap;
 
@@ -9526,7 +9582,7 @@ Q5.addHook('init', (q) => {
 		q[translatedName] = q[name];
 
 		if (Q5._lang == 'es') {
-			let unaccentedName = translatedName.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+			let unaccentedName = unaccent(translatedName);
 			if (unaccentedName != translatedName) {
 				q[unaccentedName] = q[name];
 			}
@@ -9560,7 +9616,7 @@ Q5.addHook('predraw', (q) => {
 		if (!m[p]) continue;
 		q[m[p]] = q[p];
 		if (Q5._lang == 'es') {
-			let unaccentedName = m[p].normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+			let unaccentedName = unaccent(m[p]);
 			if (unaccentedName != m[p]) {
 				q[unaccentedName] = q[p];
 			}