q5 2.5.4 → 2.6.1

package/src/q5-webgpu-image.js

@@ -1,6 +1,6 @@
 Q5.renderers.webgpu.image = ($, q) => {
 	$._textureBindGroups = [];
-	let verticesStack = [];
+	let vertexStack = [];
 
 	let vertexShader = Q5.device.createShaderModule({
 		label: 'imageVertexShader',
@@ -8,15 +8,14 @@ Q5.renderers.webgpu.image = ($, q) => {
 struct VertexOutput {
 	@builtin(position) position: vec4f,
 	@location(0) texCoord: vec2f
-};
-
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 
 @vertex
 fn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput {
@@ -77,7 +76,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		bindGroupLayouts: [...$.bindGroupLayouts, textureLayout]
 	});
 
-	$.pipelines[1] = Q5.device.createRenderPipeline({
+	$._pipelineConfigs[1] = {
 		label: 'imagePipeline',
 		layout: pipelineLayout,
 		vertex: {
@@ -88,28 +87,12 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		fragment: {
 			module: fragmentShader,
 			entryPoint: 'fragmentMain',
-			targets: [
-				{
-					format: 'bgra8unorm',
-					blend: $.blendConfigs?.normal || {
-						color: {
-							srcFactor: 'src-alpha',
-							dstFactor: 'one-minus-src-alpha',
-							operation: 'add'
-						},
-						alpha: {
-							srcFactor: 'src-alpha',
-							dstFactor: 'one-minus-src-alpha',
-							operation: 'add'
-						}
-					}
-				}
-			]
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
-		primitive: {
-			topology: 'triangle-list'
-		}
-	});
+		primitive: { topology: 'triangle-list' }
+	};
+
+	$._pipelines[1] = Q5.device.createRenderPipeline($._pipelineConfigs[1]);
 
 	let sampler = Q5.device.createSampler({
 		magFilter: 'linear',
@@ -134,7 +117,11 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 
 		Q5.device.queue.copyExternalImageToTexture(
 			{ source: img },
-			{ texture, colorSpace: $.canvas.colorSpace },
+			{
+				texture,
+				colorSpace: $.canvas.colorSpace
+				// premultipliedAlpha: true
+			},
 			textureSize
 		);
 
@@ -187,7 +174,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode);
 
 		// prettier-ignore
-		verticesStack.push(
+		vertexStack.push(
 			l, t, 0, 0, ti,
 			r, t, 1, 0, ti,
 			l, b, 0, 1, ti,
@@ -196,29 +183,29 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			r, b, 1, 1, ti
 		);
 
-		$.drawStack.push(1, img.textureIndex);
+		$.drawStack.push(1, img.textureIndex, 0);
 	};
 
 	$._hooks.preRender.push(() => {
 		if (!$._textureBindGroups.length) return;
 
 		// Switch to image pipeline
-		$.pass.setPipeline($.pipelines[1]);
-
-		// Create a vertex buffer for the image quads
-		const vertices = new Float32Array(verticesStack);
+		$.pass.setPipeline($._pipelines[1]);
 
 		const vertexBuffer = Q5.device.createBuffer({
-			size: vertices.byteLength,
-			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+			size: vertexStack.length * 4,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
 		});
 
-		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+		new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
+		vertexBuffer.unmap();
+
 		$.pass.setVertexBuffer(1, vertexBuffer);
 	});
 
 	$._hooks.postRender.push(() => {
-		verticesStack.length = 0;
+		vertexStack.length = 0;
 	});
 };
 

package/src/q5-webgpu-text.js

@@ -7,35 +7,35 @@ const pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
 
 struct VertexInput {
 	@builtin(vertex_index) vertex : u32,
-	@builtin(instance_index) instance : u32,
-};
+	@builtin(instance_index) instance : u32
+}
 struct VertexOutput {
 	@builtin(position) position : vec4f,
-	@location(0) texcoord : vec2f,
-	@location(1) colorIndex : f32
-};
+	@location(0) texCoord : vec2f,
+	@location(1) fillColor : vec4f
+}
 struct Char {
 	texOffset: vec2f,
 	texExtent: vec2f,
 	size: vec2f,
 	offset: vec2f,
-};
+}
 struct Text {
 	pos: vec2f,
 	scale: f32,
 	transformIndex: f32,
 	fillIndex: f32,
 	strokeIndex: f32
-};
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 
-@group(1) @binding(0) var<storage, read> colors : array<vec4f>;
+@group(1) @binding(0) var<storage> colors : array<vec4f>;
 
 @group(2) @binding(0) var fontTexture: texture_2d<f32>;
 @group(2) @binding(1) var fontSampler: sampler;
@@ -61,13 +61,13 @@ fn vertexMain(input : VertexInput) -> VertexOutput {
 
 	var output : VertexOutput;
 	output.position = vert;
-	output.texcoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
-	output.colorIndex = text.fillIndex;
+	output.texCoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
+	output.fillColor = colors[i32(text.fillIndex)];
 	return output;
 }
 
-fn sampleMsdf(texcoord: vec2f) -> f32 {
-	let c = textureSample(fontTexture, fontSampler, texcoord);
+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));
 }
 
@@ -77,25 +77,83 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 	// uses the default which is 4.
 	let pxRange = 4.0;
 	let sz = vec2f(textureDimensions(fontTexture, 0));
-	let dx = sz.x*length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x)));
-	let dy = sz.y*length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y)));
+	let dx = sz.x*length(vec2f(dpdxFine(input.texCoord.x), dpdyFine(input.texCoord.x)));
+	let dy = sz.y*length(vec2f(dpdxFine(input.texCoord.y), dpdyFine(input.texCoord.y)));
 	let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
-	let sigDist = sampleMsdf(input.texcoord) - 0.5;
+	let sigDist = sampleMsdf(input.texCoord) - 0.5;
 	let pxDist = sigDist * toPixels;
 	let edgeWidth = 0.5;
 	let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
 	if (alpha < 0.001) {
 		discard;
 	}
-	let fillColor = colors[i32(input.colorIndex)];
-	return vec4f(fillColor.rgb, fillColor.a * alpha);
+	return vec4f(input.fillColor.rgb, input.fillColor.a * alpha);
 }
 `
 	});
 
+	let textBindGroupLayout = Q5.device.createBindGroupLayout({
+		label: 'MSDF text group layout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: { type: 'read-only-storage' }
+			},
+			{
+				binding: 1,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: { type: 'read-only-storage' }
+			}
+		]
+	});
+
+	let fontSampler = Q5.device.createSampler({
+		minFilter: 'linear',
+		magFilter: 'linear',
+		mipmapFilter: 'linear',
+		maxAnisotropy: 16
+	});
+	let fontBindGroupLayout = Q5.device.createBindGroupLayout({
+		label: 'MSDF font group layout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				texture: {}
+			},
+			{
+				binding: 1,
+				visibility: GPUShaderStage.FRAGMENT,
+				sampler: {}
+			},
+			{
+				binding: 2,
+				visibility: GPUShaderStage.VERTEX,
+				buffer: { type: 'read-only-storage' }
+			}
+		]
+	});
+
+	let fontPipelineLayout = Q5.device.createPipelineLayout({
+		bindGroupLayouts: [...$.bindGroupLayouts, fontBindGroupLayout, textBindGroupLayout]
+	});
+
+	$._pipelineConfigs[2] = {
+		label: 'msdf font pipeline',
+		layout: fontPipelineLayout,
+		vertex: { module: textShader, entryPoint: 'vertexMain' },
+		fragment: {
+			module: textShader,
+			entryPoint: 'fragmentMain',
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
+		},
+		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' }
+	};
+	$._pipelines[2] = Q5.device.createRenderPipeline($._pipelineConfigs[2]);
+
 	class MsdfFont {
-		constructor(pipeline, bindGroup, lineHeight, chars, kernings) {
-			this.pipeline = pipeline;
+		constructor(bindGroup, lineHeight, chars, kernings) {
 			this.bindGroup = bindGroup;
 			this.lineHeight = lineHeight;
 			this.chars = chars;
@@ -121,22 +179,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 	}
 
-	let textBindGroupLayout = Q5.device.createBindGroupLayout({
-		label: 'MSDF text group layout',
-		entries: [
-			{
-				binding: 0,
-				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: { type: 'read-only-storage' }
-			},
-			{
-				binding: 1,
-				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: { type: 'read-only-storage' }
-			}
-		]
-	});
-
+	$._fonts = [];
 	let fonts = {};
 
 	let createFont = async (fontJsonUrl, fontName, cb) => {
@@ -199,74 +242,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 		charsBuffer.unmap();
 
-		let fontSampler = Q5.device.createSampler({
-			minFilter: 'linear',
-			magFilter: 'linear',
-			mipmapFilter: 'linear',
-			maxAnisotropy: 16
-		});
-		let fontBindGroupLayout = Q5.device.createBindGroupLayout({
-			label: 'MSDF font group layout',
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.FRAGMENT,
-					texture: {}
-				},
-				{
-					binding: 1,
-					visibility: GPUShaderStage.FRAGMENT,
-					sampler: {}
-				},
-				{
-					binding: 2,
-					visibility: GPUShaderStage.VERTEX,
-					buffer: { type: 'read-only-storage' }
-				}
-			]
-		});
-		let fontPipeline = Q5.device.createRenderPipeline({
-			label: 'msdf font pipeline',
-			layout: Q5.device.createPipelineLayout({
-				bindGroupLayouts: [...$.bindGroupLayouts, fontBindGroupLayout, textBindGroupLayout]
-			}),
-			vertex: {
-				module: textShader,
-				entryPoint: 'vertexMain'
-			},
-			fragment: {
-				module: textShader,
-				entryPoint: 'fragmentMain',
-				targets: [
-					{
-						format: 'bgra8unorm',
-						blend: {
-							color: {
-								srcFactor: 'src-alpha',
-								dstFactor: 'one-minus-src-alpha'
-							},
-							alpha: {
-								srcFactor: 'one',
-								dstFactor: 'one'
-							}
-						}
-					}
-				]
-			},
-			primitive: {
-				topology: 'triangle-strip',
-				stripIndexFormat: 'uint32'
-			}
-		});
-
 		let fontBindGroup = Q5.device.createBindGroup({
 			label: 'msdf font bind group',
 			layout: fontBindGroupLayout,
 			entries: [
-				{
-					binding: 0,
-					resource: texture.createView()
-				},
+				{ binding: 0, resource: texture.createView() },
 				{ binding: 1, resource: fontSampler },
 				{ binding: 2, resource: { buffer: charsBuffer } }
 			]
@@ -284,10 +264,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			}
 		}
 
-		$._font = new MsdfFont(fontPipeline, fontBindGroup, atlas.common.lineHeight, chars, kernings);
+		$._font = new MsdfFont(fontBindGroup, atlas.common.lineHeight, chars, kernings);
 
+		$._font.index = $._fonts.length;
+		$._fonts.push($._font);
 		fonts[fontName] = $._font;
-		$.pipelines[2] = $._font.pipeline;
 
 		q._preloadCount--;
 
@@ -316,12 +297,6 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 
 	$.textFont = (fontName) => {
 		$._font = fonts[fontName];
-
-		// replay the change of font in the draw stack
-		$.drawStack.push(-1, () => {
-			$._font = fonts[fontName];
-			$.pipelines[2] = $._font.pipeline;
-		});
 	};
 	$.textSize = (size) => {
 		$._textSize = size;
@@ -434,7 +409,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			}
 		}
 
-		let charsData = new Float32Array((str.length - spaces) * 4);
+		let charsData = [];
 
 		let ta = $._textAlign,
 			tb = $._textBaseline,
@@ -480,7 +455,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 		$._charStack.push(charsData);
 
-		let text = new Float32Array(6);
+		let text = [];
 
 		if ($._matrixDirty) $._saveMatrix();
 
@@ -488,11 +463,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		text[1] = -y;
 		text[2] = $._textSize / 44;
 		text[3] = $._transformIndex;
-		text[4] = $._fillIndex;
+		text[4] = $._fillSet ? $._fillIndex : 0;
 		text[5] = $._strokeIndex;
 
 		$._textStack.push(text);
-		$.drawStack.push(2, measurements.printedCharCount);
+		$.drawStack.push(2, measurements.printedCharCount, $._font.index);
 	};
 
 	$.textWidth = (str) => {
@@ -505,11 +480,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 
 		if ($._doFill) {
 			let fi = $._fillIndex * 4;
-			g.fill(colorsStack.slice(fi, fi + 4));
+			g.fill(colorStack.slice(fi, fi + 4));
 		}
 		if ($._doStroke) {
 			let si = $._strokeIndex * 4;
-			g.stroke(colorsStack.slice(si, si + 4));
+			g.stroke(colorStack.slice(si, si + 4));
 		}
 
 		let img = g.createTextImage(str, w, h);
@@ -560,21 +535,15 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			totalTextSize += charsData.length * 4;
 		}
 
-		// Create a single buffer for all text data
+		// Create a single buffer for all char data
 		let charBuffer = Q5.device.createBuffer({
-			label: 'charBuffer',
 			size: totalTextSize,
 			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		});
 
 		// Copy all text data into the buffer
-		let textArray = new Float32Array(charBuffer.getMappedRange());
-		let o = 0;
-		for (let array of $._charStack) {
-			textArray.set(array, o);
-			o += array.length;
-		}
+		new Float32Array(charBuffer.getMappedRange()).set($._charStack.flat());
 		charBuffer.unmap();
 
 		// Calculate total buffer size for metadata
@@ -589,12 +558,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		});
 
 		// Copy all metadata into the buffer
-		let metadataArray = new Float32Array(textBuffer.getMappedRange());
-		o = 0;
-		for (let array of $._textStack) {
-			metadataArray.set(array, o);
-			o += array.length;
-		}
+		new Float32Array(textBuffer.getMappedRange()).set($._textStack.flat());
 		textBuffer.unmap();
 
 		// Create a single bind group for the text buffer and metadata buffer
@@ -602,14 +566,8 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			label: 'msdf text bind group',
 			layout: textBindGroupLayout,
 			entries: [
-				{
-					binding: 0,
-					resource: { buffer: charBuffer }
-				},
-				{
-					binding: 1,
-					resource: { buffer: textBuffer }
-				}
+				{ binding: 0, resource: { buffer: charBuffer } },
+				{ binding: 1, resource: { buffer: textBuffer } }
 			]
 		});
 	});

package/src/readme.md

@@ -1,6 +1,6 @@
-# Modular Use
+# q5.js Source Documentation
 
-To use q5 modules, "q5.js" (the default bundle) or the "q5-core.js" module must be loaded first!
+For modular use, the "q5-core.js" module must be loaded first.
 
 ```html
 <script src="https://q5js.org/src/q5-core.js"></script>
@@ -9,6 +9,7 @@ To use q5 modules, "q5.js" (the default bundle) or the "q5-core.js" module must
 These modules are included in the default "q5.js" bundle:
 
 ```html
+<script src="https://q5js.org/src/q5-core.js"></script>
 <script src="https://q5js.org/src/q5-2d-canvas.js"></script>
 <script src="https://q5js.org/src/q5-2d-drawing.js"></script>
 <script src="https://q5js.org/src/q5-2d-image.js"></script>
@@ -37,19 +38,21 @@ WebGPU rendering modules are in development:
 ```html
 <script src="https://q5js.org/src/q5-webgpu-canvas.js"></script>
 <script src="https://q5js.org/src/q5-webgpu-drawing.js"></script>
+<script src="https://q5js.org/src/q5-webgpu-image.js"></script>
+<script src="https://q5js.org/src/q5-webgpu-text.js"></script>
 ```
 
 # Module Info
 
-- [Modular Use](#modular-use)
+- [q5.js Source Documentation](#q5js-source-documentation)
 - [Module Info](#module-info)
-  - [core](#core)
-  - [canvas](#canvas)
+  - [q5-core](#q5-core)
+  - [q5-canvas](#q5-canvas)
   - [q2d-canvas](#q2d-canvas)
-  - [q2d-drawing](#q2d-drawing)
-  - [q2d-image](#q2d-image)
-  - [q2d-soft-filters](#q2d-soft-filters)
-  - [q2d-text](#q2d-text)
+  - [q5-q2d-drawing](#q5-q2d-drawing)
+  - [q5-q2d-image](#q5-q2d-image)
+  - [q5-q2d-soft-filters](#q5-q2d-soft-filters)
+  - [q5-q2d-text](#q5-q2d-text)
   - [webgpu-canvas](#webgpu-canvas)
   - [webgpu-drawing](#webgpu-drawing)
   - [webgpu-image](#webgpu-image)
@@ -59,19 +62,19 @@ WebGPU rendering modules are in development:
     - [Load a MSDF font](#load-a-msdf-font)
     - [Displaying Emojis](#displaying-emojis)
     - [Lightweight Use](#lightweight-use)
-    - [Implemented functions](#implemented-functions)
+    - [Limitations](#limitations)
   - [math](#math)
   - [noisier](#noisier)
 
-## core
+## q5-core
 
 The core module provides the absolute basic functionality necessary to run q5.
 
 It loads other modules by passing `$` (alias for `this`) and `q` (which in global mode is a proxy for `this` and `window` or `global`).
 
-## canvas
+## q5-canvas
 
-The canvas module provides shared functionality for all canvas renderers, such as adding the canvas to the DOM, resizing the canvas, setting pixel density,
+The canvas module provides shared functionality for all canvas renderers, such as adding the canvas to the DOM, resizing the canvas, setting pixel density.
 
 ## q2d-canvas
 
@@ -81,17 +84,17 @@ All other 2D modules depend on this module.
 
 Though loading q5-color is recommend, it's not required since `fill` and `stroke` can be set to a CSS color string.
 
-## q2d-drawing
+## q5-q2d-drawing
 
 Adds Canvas2D drawing functions to q5.
 
-## q2d-image
+## q5-q2d-image
 
 Adds Canvas2D image support to q5.
 
 The filters in q5-image use the [CanvasRenderingContext2D.filter](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter) property to apply native hardware-accelerated filters to images.
 
-## q2d-soft-filters
+## q5-q2d-soft-filters
 
 Software implementation of image filters.
 
@@ -101,23 +104,17 @@ These filters are slow. Real-time use of them is not recommended.
 
 As of April 2024, Safari Technology Preview supports `ctx.filter` under a flag. Hopefully in the near future this module can be omitted from the default bundle.
 
-## q2d-text
+## q5-q2d-text
 
 Adds Canvas2D text rendering support to q5.
 
 Image based features in this module require the q5-2d-image module.
 
-`createTextImage(str, w, h)` provides a simple way for users to create images from text.
-
-`textImage(img, x, y)` displays text images, complying with the user's text position settings instead of their image position settings. The idea is that text will appear in the same place as it would if it were drawn with the `text` function.
-
-`textCache(bool, maxSize)` enables or disables text caching.
-
 ## webgpu-canvas
 
 > ⚠️ Experimental features! ⚠️
 
-To use q5's WebGPU renderer, run `Q5.webgpu()` at the bottom of your sketch. Explicit use of `createCanvas` is required.
+To use q5's WebGPU renderer, run `Q5.webgpu()` at the bottom of your sketch.
 
 ```js
 function setup() {
@@ -135,53 +132,24 @@ Q5.webgpu();
 
 WebGPU has different default settings compared to q5's q2d renderer and p5's P2D and WEBGL modes.
 
+- Explicit use of `createCanvas` is required before anything can be drawn.
 - The default color mode is RGB in 0-1 "float" format: `colorMode(RGB, 1)`.
 - The origin of the canvas (0, 0) is in the center, not the top left.
-- Mouse and touch coordinates correspond to canvas pixels.
-- Use `textFill` and `textStroke` to set text colors.
-- For now, strokes are only implemented for the `point`, `line`, and `text` functions.
+- Mouse and touch coordinates correspond to canvas pixels (unlike in p5 WEBGL mode).
 
 The sketches you create with the q5-webgpu renderer will still display properly if WebGPU is not supported on a viewer's browser. q5 will put a warning in the console and apply a compatibility layer to display sketches with the fallback q2d renderer.
 
-Use of top level global mode with the WebGPU renderer requires that you make your sketch file a js module and await for `Q5.webgpu()` to return the Q5 instance (`q`), which you can then use to set q5 functions such as `draw`.
-
-```html
-<script type="module" src="sketch.js">
-```
-
-```js
-let q = await Q5.webgpu();
-
-createCanvas(200, 200);
-noStroke();
-
-q.draw = () => {
-	clear();
-	rect(50, 50, 100, 100);
-};
-```
-
-Implemented functions:
-
-`createCanvas`, `resizeCanvas`, `fill`, `clear`, `push`, `pop`, `resetMatrix`, `translate`, `rotate`, `scale`
-
 ## webgpu-drawing
 
 > Uses `colorMode(RGB, 1)` by default. Changing it to 'oklch' is not supported yet for the webgpu renderer.
 
-All basic shapes are drawn from their center. Strokes are not implemented yet.
-
 q5's WebGPU renderer drawing functions like `rect` don't immediately draw on the canvas. Instead, they prepare vertex and color data to be sent to the GPU in bulk, which occurs after the user's `draw` function and any post-draw functions are run. This approach better utilizes the GPU, so it doesn't have to repeatedly wait for the CPU to send small chunks of data that describe each individual shape. It's the main reason why WebGPU is faster than Canvas2D.
 
-Implemented functions:
-
-`rect`, `circle`, `ellipse`, `triangle`, `beginShape`, `vertex`, `endShape`, `blendMode`
+Rounded rectangles, stroke modes, and functions for drawing curves like `bezier` and `curve` are not implemented yet.
 
 ## webgpu-image
 
-Implemented functions:
-
-`loadImage`, `loadTexture`, `image`, `imageMode`
+Using `image` to drawn a subsection of an image and most blending modes are not yet implemented.
 
 ## webgpu-text
 
@@ -260,9 +228,9 @@ For super lightweight use load <https://q5js.org/fonts/YaHei-256-msdf.json>, whi
 !@'",-.0123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
 ```
 
-### Implemented functions
+### Limitations
 
-`loadFont`, `text`, `textFont`, `textSize`, `textAlign`, `textWidth`, `createTextImage`, `textImage`
+Text strokes are not supported yet, except with `textImage`.
 
 ## math