2.20.7

Author: quinton-ashley

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.20.6",
+	"version": "2.20.7",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

q5.d.ts

@@ -2726,14 +2726,14 @@ function draw() {
 	/** 🎞️
 	 * Creates a recorder. Simply hit record to start recording!
 	 * 
-	 * `format` is set to "H.264" by default. Encoding in "VP9" may not
-	 * be possible on some devices.
+	 * The following properties can be set via the recorder UI or
+	 * programmatically.
 	 * 
-	 * `bitrate` is a number in megabits per second (mbps). Its default
+	 * - `format` is set to "H.264" by default. Encoding in "VP9" may not
+	 * be possible on some devices.
+	 * - `bitrate` is a number in megabits per second (mbps). Its default
 	 * value is determined by the height of the canvas. Increasing the
 	 * bitrate will increase the quality and file size of the recording.
-	 * 
-	 * These properties can be set via the recorder UI or programmatically.
 	 * @returns {HTMLElement} a recorder, q5 DOM element
 	 * @example
 createCanvas(200);

q5.js

@@ -409,6 +409,8 @@ Q5.modules.canvas = ($, q) => {
 		}
 		if ($._beginRender) $._beginRender();
 
+		c.mousePressed = (cb) => c.addEventListener('mousedown', cb);
+
 		return rend;
 	};
 
@@ -2607,6 +2609,8 @@ Q5.modules.dom = ($, q) => {
 			return el;
 		};
 
+		el.mousePressed = (cb) => el.addEventListener('mousedown', cb);
+
 		$._elements.push(el);
 		if ($.canvas) $.canvas.parentElement.append(el);
 		else document.body.append(el);
@@ -5147,9 +5151,7 @@ Q5.renderers.webgpu.drawing = ($, q) => {
 	const TAU = Math.PI * 2;
 	const HALF_PI = Math.PI / 2;
 
-	let drawingShader = Q5.device.createShaderModule({
-		label: 'drawingShader',
-		code: `
+	let drawingShaderCode = `
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
@@ -5168,12 +5170,17 @@ struct FragmentParams {
 @group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 @group(0) @binding(2) var<storage> colors : array<vec4f>;
 
-@vertex
-fn vertexMain(v: VertexParams) -> FragmentParams {
-	var vert = vec4f(v.pos, 0.0, 1.0);
-	vert = transforms[i32(v.matrixIndex)] * vert;
+fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
+	var vert = vec4f(pos, 0.0, 1.0);
+	vert = transforms[i32(matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
+	return vert;
+}
+
+@vertex
+fn vertexMain(v: VertexParams) -> FragmentParams {
+	var vert = transformVertex(v.pos, v.matrixIndex);
 
 	var f: FragmentParams;
 	f.position = vert;
@@ -5182,10 +5189,14 @@ fn vertexMain(v: VertexParams) -> FragmentParams {
 }
 
 @fragment
-fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
-	return color;
+fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
+	return f.color;
 }
-`
+`;
+
+	let drawingShader = Q5.device.createShaderModule({
+		label: 'drawingShader',
+		code: drawingShaderCode
 	});
 
 	let vertexBufferLayout = {
@@ -5786,13 +5797,13 @@ struct VertexParams {
 	@location(1) texCoord: vec2f,
 	@location(2) tintIndex: f32,
 	@location(3) matrixIndex: f32,
-	@location(4) globalAlpha: f32
+	@location(4) imageAlpha: f32
 }
 struct FragmentParams {
 	@builtin(position) position: vec4f,
 	@location(0) texCoord: vec2f,
-	@location(1) tintIndex: f32,
-	@location(2) globalAlpha: f32
+	@location(1) tintColor: vec4f,
+	@location(2) imageAlpha: f32
 }
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -5802,29 +5813,33 @@ struct FragmentParams {
 @group(1) @binding(0) var samp: sampler;
 @group(1) @binding(1) var texture: texture_2d<f32>;
 
-@vertex
-fn vertexMain(v: VertexParams) -> FragmentParams {
-	var vert = vec4f(v.pos, 0.0, 1.0);
-	vert = transforms[i32(v.matrixIndex)] * vert;
+fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
+	var vert = vec4f(pos, 0.0, 1.0);
+	vert = transforms[i32(matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
+	return vert;
+}
+
+@vertex
+fn vertexMain(v: VertexParams) -> FragmentParams {
+	var vert = transformVertex(v.pos, v.matrixIndex);
 
 	var f: FragmentParams;
 	f.position = vert;
 	f.texCoord = v.texCoord;
-	f.tintIndex = v.tintIndex;
-	f.globalAlpha = v.globalAlpha;
+	f.tintColor = colors[i32(v.tintIndex)];
+	f.imageAlpha = v.imageAlpha;
 	return f;
 }
 
 @fragment
 fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
-		let texColor = textureSample(texture, samp, f.texCoord);
-		let tintColor = colors[i32(f.tintIndex)];
-		
-		// Mix original and tinted colors using tint alpha as blend factor
-		let tinted = vec4f(texColor.rgb * tintColor.rgb, texColor.a * f.globalAlpha);
-		return mix(texColor, tinted, tintColor.a);
+	let texColor = textureSample(texture, samp, f.texCoord);
+	
+	// Mix original and tinted colors using tint alpha as blend factor
+	let tinted = vec4f(texColor.rgb * f.tintColor.rgb, texColor.a * f.imageAlpha);
+	return mix(texColor, tinted, f.tintColor.a);
 }
 `;
 
@@ -5849,7 +5864,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			{ shaderLocation: 1, offset: 8, format: 'float32x2' },
 			{ shaderLocation: 2, offset: 16, format: 'float32' }, // tintIndex
 			{ shaderLocation: 3, offset: 20, format: 'float32' }, // matrixIndex
-			{ shaderLocation: 4, offset: 24, format: 'float32' } // globalAlpha
+			{ shaderLocation: 4, offset: 24, format: 'float32' } // imageAlpha
 		]
 	};
 
@@ -6020,7 +6035,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 
 	$.imageMode = (x) => ($._imageMode = x);
 
-	const addVert = (x, y, u, v, ci, ti, ga) => {
+	const addVert = (x, y, u, v, ci, ti, ia) => {
 		let s = vertexStack,
 			i = vertIndex;
 		s[i++] = x;
@@ -6029,7 +6044,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		s[i++] = v;
 		s[i++] = ci;
 		s[i++] = ti;
-		s[i++] = ga;
+		s[i++] = ia;
 		vertIndex = i;
 	};
 
@@ -6085,12 +6100,12 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			v1 = (sy + sh) / h,
 			ti = $._matrixIndex,
 			ci = $._tint,
-			ga = $._globalAlpha;
+			ia = $._imageAlpha;
 
-		addVert(l, t, u0, v0, ci, ti, ga);
-		addVert(r, t, u1, v0, ci, ti, ga);
-		addVert(l, b, u0, v1, ci, ti, ga);
-		addVert(r, b, u1, v1, ci, ti, ga);
+		addVert(l, t, u0, v0, ci, ti, ia);
+		addVert(r, t, u1, v0, ci, ti, ia);
+		addVert(l, b, u0, v1, ci, ti, ia);
+		addVert(r, b, u1, v1, ci, ti, ia);
 
 		if (!isVideo) {
 			$.drawStack.push(1, img.textureIndex);
@@ -6214,9 +6229,7 @@ Q5.DILATE = 6;
 Q5.ERODE = 7;
 Q5.BLUR = 8;
 Q5.renderers.webgpu.text = ($, q) => {
-	let textShader = Q5.device.createShaderModule({
-		label: 'MSDF text shader',
-		code: `
+	let textShaderCode = `
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
@@ -6228,7 +6241,9 @@ struct VertexParams {
 struct FragmentParams {
 	@builtin(position) position : vec4f,
 	@location(0) texCoord : vec2f,
-	@location(1) fillColor : vec4f
+	@location(1) fillColor : vec4f,
+	@location(2) strokeColor : vec4f,
+	@location(3) strokeWeight : f32
 }
 struct Char {
 	texOffset: vec2f,
@@ -6241,7 +6256,8 @@ struct Text {
 	scale: f32,
 	matrixIndex: f32,
 	fillIndex: f32,
-	strokeIndex: f32
+	strokeIndex: f32,
+	strokeWeight: f32
 }
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -6257,52 +6273,73 @@ struct Text {
 
 const quad = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
 
+fn sampleMsdf(texCoord: vec2f) -> f32 {
+	let c = textureSample(fontTexture, fontSampler, texCoord);
+	return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
+}
+
+fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
+	var vert = vec4f(pos, 0.0, 1.0);
+	vert = transforms[i32(matrixIndex)] * vert;
+	vert.x /= uniforms.halfWidth;
+	vert.y /= uniforms.halfHeight;
+	return vert;
+}
+
 @vertex
 fn vertexMain(v : VertexParams) -> FragmentParams {
 	let char = textChars[v.instance];
-
 	let text = textMetadata[i32(char.w)];
-
 	let fontChar = fontChars[i32(char.z)];
 
 	let charPos = ((quad[v.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;
 
-	var vert = vec4f(charPos, 0.0, 1.0);
-	vert = transforms[i32(text.matrixIndex)] * vert;
-	vert.x /= uniforms.halfWidth;
-	vert.y /= uniforms.halfHeight;
+	var vert = transformVertex(charPos, text.matrixIndex);
 
 	var f : FragmentParams;
 	f.position = vert;
 	f.texCoord = (quad[v.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
 	f.fillColor = colors[i32(text.fillIndex)];
+	f.strokeColor = colors[i32(text.strokeIndex)];
+	f.strokeWeight = text.strokeWeight;
 	return f;
 }
 
-fn sampleMsdf(texCoord: vec2f) -> f32 {
-	let c = textureSample(fontTexture, fontSampler, texCoord);
-	return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
-}
-
 @fragment
 fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
-	// pxRange (AKA distanceRange) comes from the msdfgen tool,
-	// uses the default which is 4.
 	let pxRange = 4.0;
 	let sz = vec2f(textureDimensions(fontTexture, 0));
-	let dx = sz.x*length(vec2f(dpdxFine(f.texCoord.x), dpdyFine(f.texCoord.x)));
-	let dy = sz.y*length(vec2f(dpdxFine(f.texCoord.y), dpdyFine(f.texCoord.y)));
+	let dx = sz.x * length(vec2f(dpdxFine(f.texCoord.x), dpdyFine(f.texCoord.x)));
+	let dy = sz.y * length(vec2f(dpdxFine(f.texCoord.y), dpdyFine(f.texCoord.y)));
 	let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
 	let sigDist = sampleMsdf(f.texCoord) - 0.5;
 	let pxDist = sigDist * toPixels;
 	let edgeWidth = 0.5;
-	let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
-	if (alpha < 0.001) {
+
+	if (f.strokeWeight == 0.0) {
+		let fillAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
+		var color = vec4f(f.fillColor.rgb, f.fillColor.a * fillAlpha);
+		if (color.a < 0.01) {
+			discard;
+		}
+		return color;
+	}
+
+	let halfStroke = f.strokeWeight / 2.0;
+	let fillAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist - halfStroke);
+	let strokeAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist + halfStroke);
+	var color = mix(f.strokeColor, f.fillColor, fillAlpha);
+	color = vec4f(color.rgb, color.a * strokeAlpha);
+	if (color.a < 0.01) {
 		discard;
 	}
-	return vec4f(f.fillColor.rgb, f.fillColor.a * alpha);
+	return color;
 }
-`
+`;
+
+	let textShader = Q5.device.createShaderModule({
+		label: 'textShader',
+		code: textShaderCode
 	});
 
 	let textBindGroupLayout = Q5.device.createBindGroupLayout({
@@ -6701,6 +6738,8 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		txt[3] = $._matrixIndex;
 		txt[4] = $._fillSet ? $._fill : 0;
 		txt[5] = $._stroke;
+		txt[6] = $._strokeSet ? $._strokeWeight : 0;
+		txt[7] = 0; // padding
 
 		textStack.push(txt);
 		$.drawStack.push(3, measurements.printedCharCount, $._font.index);
@@ -6777,7 +6816,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		charBuffer.unmap();
 
 		// calculate total buffer size for metadata
-		let totalMetadataSize = textStack.length * 6 * 4;
+		let totalMetadataSize = textStack.length * 8 * 4;
 
 		// create a single buffer for all metadata
 		let textBuffer = Q5.device.createBuffer({

q5.min.js

@@ -86,6 +86,8 @@ Q5.modules.canvas = ($, q) => {
 		}
 		if ($._beginRender) $._beginRender();
 
+		c.mousePressed = (cb) => c.addEventListener('mousedown', cb);
+
 		return rend;
 	};
 

src/q5-canvas.js

@@ -86,6 +86,8 @@ Q5.modules.dom = ($, q) => {
 			return el;
 		};
 
+		el.mousePressed = (cb) => el.addEventListener('mousedown', cb);
+
 		$._elements.push(el);
 		if ($.canvas) $.canvas.parentElement.append(el);
 		else document.body.append(el);