q5 4.7.3 → 4.7.5

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "4.7.0",
+	"version": "4.7.5",
 	"license": "LGPL-3.0-only",
 	"description": "Beginner friendly graphics powered by WebGPU, optimized for interactive art!",
 	"author": "quinton-ashley",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "4.7.3",
+	"version": "4.7.5",
 	"description": "Beginner friendly graphics powered by WebGPU, optimized for interactive art!",
 	"author": "quinton-ashley",
 	"license": "LGPL-3.0-only",
@@ -70,9 +70,9 @@
 	],
 	"devDependencies": {
 		"jest-cli": "^29.7.0",
-		"jsdom": "^25.0.1",
+		"jsdom": "^29.1.1",
 		"json2csv": "^6.0.0-alpha.2",
-		"skia-canvas": "^1.0.2",
+		"skia-canvas": "^3.0.8",
 		"terser": "^5.46.1"
 	},
 	"trustedDependencies": [

package/q5.d.ts

@@ -1,4 +1,3 @@
-/** @module q5 */
 declare global {
 
 	// ⭐ core
@@ -2341,7 +2340,7 @@ declare global {
 	 * 	redraw(10);
 	 * };
 	 */
-	function redraw(n?: number): void;
+	function redraw(n?: number): Promise<void>;
 
 	/** 💻
 	 * Starts the draw loop again if it was stopped.
@@ -2500,6 +2499,8 @@ declare global {
 	 */
 	const WEBGPU: 'webgpu';
 
+	function remove(): Promise<void>;
+
 	// 🧮 math
 
 	/** 🧮
@@ -3398,7 +3399,7 @@ declare global {
 	 * 	else saveRecording('squares');
 	 * };
 	 */
-	function saveRecording(fileName: string): void;
+	function saveRecording(fileName: string): Promise<void>;
 
 	/** 🎞
 	 * True if the canvas is currently being recorded.
@@ -3430,8 +3431,8 @@ declare global {
 	 * 
 	 * await load('/assets/Robotica.ttf');
 	 * 
-	 * textSize(28);
-	 * text('Hello, world!', -97, 100);
+	 * textSize(64);
+	 * text('Hello!', -97, 97);
 	 * @example
 	 * await Canvas(200);
 	 * 
@@ -3484,7 +3485,7 @@ declare global {
 	 * 	save(bolt, 'bolt.png');
 	 * };
 	 */
-	function save(data?: object, fileName?: string): void;
+	function save(data?: object, fileName?: string): Promise<void>;
 
 	/** 🛠
 	 * Returns the number of milliseconds since the program started.
@@ -4370,7 +4371,7 @@ declare global {
 		/** ⚙
 		 * The q5 draw function is run 60 times per second by default.
 		 */
-		static draw(): void;
+		static draw(): void | Promise<void>;
 
 		/** ⚙
 		 * Runs after each `draw` function call and post-draw q5 addon processes, if any.
@@ -4380,12 +4381,12 @@ declare global {
 		 * addons like q5play that auto-draw to the canvas after the `draw`
 		 * function is run.
 		 */
-		static postProcess(): void;
+		static postProcess(): void | Promise<void>;
 		//-
 			static update(): void;
 			update(): void;
-			draw(): void;
-			postProcess(): void;
+			draw(): void | Promise<void>;
+			postProcess(): void | Promise<void>;
 			Canvas: typeof Canvas;
 			log: typeof log;
 			circle: typeof circle;

package/q5.js

@@ -5420,6 +5420,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	if ($.colorMode) $.colorMode('rgb', 1);
 
+	const CANVAS_FORMAT = navigator.gpu.getPreferredCanvasFormat();
+
 	$._baseShaderCode = /* wgsl */ `
 struct Q5 {
 	width: f32,
@@ -6608,7 +6610,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		fragment: {
 			module: shapesShader,
 			entryPoint: 'fragMain',
-			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs['source-over'] }]
+			targets: [{ format: CANVAS_FORMAT, blend: $.blendConfigs['source-over'] }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
 		multisample: { count: 4 }
@@ -7170,7 +7172,7 @@ fn vertexMain(v: VertexParams) -> FragParams {
 			entryPoint: 'fragMain',
 			targets: [
 				{
-					format: 'bgra8unorm',
+					format: CANVAS_FORMAT,
 					blend: $.blendConfigs['source-over']
 				}
 			]
@@ -7532,7 +7534,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 			entryPoint: 'fragMain',
 			targets: [
 				{
-					format: 'bgra8unorm',
+					format: CANVAS_FORMAT,
 					blend: $.blendConfigs['source-over']
 				}
 			]
@@ -7805,7 +7807,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		fragment: {
 			module: imageShader,
 			entryPoint: 'fragMain',
-			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs['source-over'] }]
+			targets: [{ format: CANVAS_FORMAT, blend: $.blendConfigs['source-over'] }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
 		multisample: { count: 4 }
@@ -7824,7 +7826,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		fragment: {
 			module: videoShader,
 			entryPoint: 'fragMain',
-			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs['source-over'] }]
+			targets: [{ format: CANVAS_FORMAT, blend: $.blendConfigs['source-over'] }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
 		multisample: { count: 4 }
@@ -7922,7 +7924,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 
 			texture = Q5.device.createTexture({
 				size: textureSize,
-				format: 'bgra8unorm',
+				format: CANVAS_FORMAT,
 				usage:
 					GPUTextureUsage.TEXTURE_BINDING |
 					GPUTextureUsage.COPY_SRC |
@@ -8294,7 +8296,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		fragment: {
 			module: textShader,
 			entryPoint: 'fragMain',
-			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs['source-over'] }]
+			targets: [{ format: CANVAS_FORMAT, blend: $.blendConfigs['source-over'] }]
 		},
 		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' },
 		multisample: { count: 4 }
@@ -8858,7 +8860,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 				entryPoint: 'fragMain',
 				targets: [
 					{
-						format: 'bgra8unorm',
+						format: CANVAS_FORMAT,
 						blend: $.blendConfigs[blend]
 					}
 				]
@@ -9014,61 +9016,67 @@ Q5.MAX_CHARS = 100000;
 Q5.MAX_TEXTS = 10000;
 
 Q5.initWebGPU = async () => {
-	if (!navigator.gpu) {
-		console.warn('q5 WebGPU not supported on this browser! Use Google Chrome or Edge.');
-		return;
-	}
+	Q5._gpuTask ??= Q5._requestGPU();
+	return Q5._gpuTask;
+};
 
-	// fn can only be called once
-	if (Q5.requestedGPU) return;
-	Q5.requestedGPU = true;
+Q5._requestGPU = async () => {
+	try {
+		if (!navigator.gpu) {
+			console.warn('q5 WebGPU not supported on this browser! Use Google Chrome or Edge.');
+			return false;
+		}
 
-	let adapter = await navigator.gpu.requestAdapter();
+		let adapter = await navigator.gpu.requestAdapter();
 
-	adapter ??= await navigator.gpu.requestAdapter({
-		featureLevel: 'compatibility'
-	});
+		adapter ??= await navigator.gpu.requestAdapter({
+			featureLevel: 'compatibility'
+		});
 
-	if (!adapter) {
-		console.warn('q5 WebGPU could not start! No appropriate GPUAdapter found, Vulkan may need to be enabled.');
-		return;
-	}
+		if (!adapter) {
+			console.warn('q5 WebGPU could not start! No appropriate GPUAdapter found, Vulkan may need to be enabled.');
+			return false;
+		}
 
-	let device = await adapter.requestDevice();
+		let device = await adapter.requestDevice();
 
-	const vertexStorageLimit =
-		device.limits.maxStorageBuffersInVertexStage ?? device.limits.maxStorageBuffersPerShaderStage;
-	if (vertexStorageLimit < 3) {
-		console.warn('q5 WebGPU requires vertex storage buffers, which are not supported by this device.');
-		return;
-	}
+		const vertexStorageLimit =
+			device.limits.maxStorageBuffersInVertexStage ?? device.limits.maxStorageBuffersPerShaderStage;
+		if (vertexStorageLimit < 3) {
+			console.warn('q5 WebGPU requires vertex storage buffers, which are not supported by this device.');
+			return false;
+		}
 
-	// Update to fit device limits
-	const maxStorage = device.limits.maxStorageBufferBindingSize;
+		// Update to fit device limits
+		const maxStorage = device.limits.maxStorageBufferBindingSize;
 
-	let min = Math.min,
-		floor = Math.floor;
+		let min = Math.min,
+			floor = Math.floor;
 
-	Q5.MAX_TRANSFORMS = min(Q5.MAX_TRANSFORMS, floor(maxStorage / 64));
-	Q5.MAX_RECTS = min(Q5.MAX_RECTS, floor(maxStorage / 64));
-	Q5.MAX_ELLIPSES = min(Q5.MAX_ELLIPSES, floor(maxStorage / 64));
-	Q5.MAX_CHARS = min(Q5.MAX_CHARS, floor(maxStorage / 16));
-	Q5.MAX_TEXTS = min(Q5.MAX_TEXTS, floor(maxStorage / 32));
+		Q5.MAX_TRANSFORMS = min(Q5.MAX_TRANSFORMS, floor(maxStorage / 64));
+		Q5.MAX_RECTS = min(Q5.MAX_RECTS, floor(maxStorage / 64));
+		Q5.MAX_ELLIPSES = min(Q5.MAX_ELLIPSES, floor(maxStorage / 64));
+		Q5.MAX_CHARS = min(Q5.MAX_CHARS, floor(maxStorage / 16));
+		Q5.MAX_TEXTS = min(Q5.MAX_TEXTS, floor(maxStorage / 32));
 
-	device.lost.then((e) => {
-		console.error('WebGPU crashed!');
-		console.error(e);
-	});
+		device.lost.then((e) => {
+			console.error('WebGPU crashed!');
+			console.error(e);
+		});
 
-	Q5.device = device;
+		Q5.device = device;
 
-	if (typeof window == 'object') {
-		window.addEventListener('pagehide', () => {
-			if (device) device.destroy();
-		});
-	}
+		if (typeof window == 'object') {
+			window.addEventListener('pagehide', () => {
+				if (device) device.destroy();
+			});
+		}
 
-	return true;
+		return true;
+	} catch (e) {
+		console.warn('q5 WebGPU could not start!', e);
+		return false;
+	}
 };
 
 Q5.WebGPU = async function (scope, parent) {

package/q5.pyi

@@ -4399,11 +4399,11 @@ Each function receives two input parameters:
 - the q5 instance
 - a proxy for editing the q5 instance and corresponding properties of the global scope"""
 
-	def draw(self) -> None:
+	def draw(self) -> None | object:
 		"""⚙ The q5 draw function is run 60 times per second by default."""
 		...
 
-	def postProcess(self) -> None:
+	def postProcess(self) -> None | object:
 		"""⚙ Runs after each draw function call and post-draw q5 addon processes, if any.
 
 Useful for adding post-processing effects when it's not possible