q5 4.7.2 → 4.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "4.7.2",
+	"version": "4.7.4",
 	"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

@@ -923,35 +923,37 @@ Q5.renderers.c2d.canvas = ($, q) => {
 	};
 
 	$.fill = function (c) {
-		$._doFill = $._fillSet = true;
+		$.__doFill = $._fillSet = true;
 		if (Q5.Color) {
 			if (!c._isColor && (typeof c != 'string' || $._namedColors[c])) {
 				c = $.color(...arguments);
 			}
-			if (c.a <= 0) return ($._doFill = false);
+			if (c.a <= 0) return ($.__doFill = false);
 		}
 		$.ctx.fillStyle = $._fill = c.toString();
 	};
 
 	$.stroke = function (c) {
-		$._doStroke = $._strokeSet = true;
+		$.__doStroke = $._strokeSet = true;
 		if (Q5.Color) {
 			if (!c._isColor && (typeof c != 'string' || $._namedColors[c])) {
 				c = $.color(...arguments);
 			}
-			if (c.a <= 0) return ($._doStroke = false);
+			if (c.a <= 0) return ($.__doStroke = false);
 		}
 		$.ctx.strokeStyle = $._stroke = c.toString();
 	};
 
 	$.strokeWeight = (n) => {
-		if (!n) $._doStroke = false;
-		else $._doStroke = true;
+		if (!n) $.__doStroke = false;
+		else $.__doStroke = true;
 		$.ctx.lineWidth = $._strokeWeight = n || 0.0001;
 	};
 
-	$.noFill = () => ($._doFill = false);
-	$.noStroke = () => ($._doStroke = false);
+	$.noFill = () => ($.__doFill = false);
+	$.noStroke = () => ($.__doStroke = false);
+	$._doFill = () => ($.__doFill = true);
+	$._doStroke = () => ($.__doStroke = true);
 	$.opacity = (a) => ($.ctx.globalAlpha = a);
 
 	$._doShadow = false;
@@ -1023,8 +1025,8 @@ Q5.renderers.c2d.canvas = ($, q) => {
 		'_fill',
 		'_stroke',
 		'_strokeWeight',
-		'_doFill',
-		'_doStroke',
+		'__doFill',
+		'__doStroke',
 		'_fillSet',
 		'_strokeSet',
 		'_shadow',
@@ -1082,8 +1084,8 @@ Q5.renderers.c2d.canvas = ($, q) => {
 	};
 };
 Q5.renderers.c2d.shapes = ($) => {
-	$._doStroke = true;
-	$._doFill = true;
+	$.__doStroke = true;
+	$.__doFill = true;
 	$._strokeSet = false;
 	$._fillSet = false;
 	$._ellipseMode = Q5.CENTER;
@@ -1093,8 +1095,8 @@ Q5.renderers.c2d.shapes = ($) => {
 	let curveBuff = [];
 
 	function ink() {
-		if ($._doFill) $.ctx.fill();
-		if ($._doStroke) $.ctx.stroke();
+		if ($.__doFill) $.ctx.fill();
+		if ($.__doStroke) $.ctx.stroke();
 	}
 
 	// DRAWING SETTINGS
@@ -1109,7 +1111,7 @@ Q5.renderers.c2d.shapes = ($) => {
 	// DRAWING
 
 	$.line = (x0, y0, x1, y1) => {
-		if ($._doStroke) {
+		if ($.__doStroke) {
 			$.ctx.beginPath();
 			$.ctx.moveTo(x0, y0);
 			$.ctx.lineTo(x1, y1);
@@ -1137,14 +1139,14 @@ Q5.renderers.c2d.shapes = ($) => {
 		w = Math.abs(w);
 		h = Math.abs(h);
 
-		if (!$._doFill && mode == $.PIE_OPEN) mode = $.CHORD_OPEN;
+		if (!$.__doFill && mode == $.PIE_OPEN) mode = $.CHORD_OPEN;
 
 		$.ctx.beginPath();
 		$.ctx.ellipse(x, y, w, h, 0, lo, hi);
 		if (mode == $.PIE || mode == $.PIE_OPEN) $.ctx.lineTo(x, y);
-		if ($._doFill) $.ctx.fill();
+		if ($.__doFill) $.ctx.fill();
 
-		if ($._doStroke) {
+		if ($.__doStroke) {
 			if (mode == $.PIE || mode == $.CHORD) $.ctx.closePath();
 			if (mode != $.PIE_OPEN) return $.ctx.stroke();
 
@@ -1198,7 +1200,7 @@ Q5.renderers.c2d.shapes = ($) => {
 	};
 
 	$.point = (x, y) => {
-		if ($._doStroke) {
+		if ($.__doStroke) {
 			if (x.x) {
 				y = x.y;
 				x = x.x;
@@ -2198,7 +2200,7 @@ Q5.renderers.c2d.text = ($, q) => {
 	let lines = [];
 
 	$.text = (str, x, y, w, h) => {
-		if (str === undefined || (!$._doFill && !$._doStroke)) return;
+		if (str === undefined || (!$.__doFill && !$.__doStroke)) return;
 		str = str.toString();
 		let ctx = $.ctx;
 		let img, colorStyle, styleCache, colorCache, recycling;
@@ -2305,8 +2307,8 @@ Q5.renderers.c2d.text = ($, q) => {
 			else tX = 0;
 
 			ctx.font = $.ctx.font;
-			if ($._doFill && $._fillSet) ctx.fillStyle = $._fill;
-			if ($._doStroke && $._strokeSet) ctx.strokeStyle = $._stroke;
+			if ($.__doFill && $._fillSet) ctx.fillStyle = $._fill;
+			if ($.__doStroke && $._strokeSet) ctx.strokeStyle = $._stroke;
 			ctx.lineWidth = $.ctx.lineWidth;
 		}
 
@@ -2318,8 +2320,8 @@ Q5.renderers.c2d.text = ($, q) => {
 
 		let lineAmount = 0;
 		for (let line of lines) {
-			if ($._doStroke && $._strokeSet) ctx.strokeText(line, tX, tY);
-			if ($._doFill) ctx.fillText(line, tX, tY);
+			if ($.__doStroke && $._strokeSet) ctx.strokeText(line, tX, tY);
+			if ($.__doFill) ctx.fillText(line, tX, tY);
 			tY += leading;
 			lineAmount++;
 			if (lineAmount >= h) break;
@@ -9012,61 +9014,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