q5 4.6.6 → 4.7.1

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "4.6.6",
+	"version": "4.7.0",
 	"license": "LGPL-3.0-only",
 	"description": "Beginner friendly graphics powered by WebGPU, optimized for interactive art!",
 	"author": "quinton-ashley",
@@ -32,7 +32,9 @@
 			"CODE_OF_CONDUCT.md",
 			"deno.lock",
 			"Icon?",
-			"package.json"
+			"package.json",
+			"q5.min.js",
+			"q5.min.js.map"
 		]
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "4.6.6",
+	"version": "4.7.1",
 	"description": "Beginner friendly graphics powered by WebGPU, optimized for interactive art!",
 	"author": "quinton-ashley",
 	"license": "LGPL-3.0-only",
@@ -18,7 +18,6 @@
 			"node": "./q5-server.js",
 			"default": "./q5.js"
 		},
-		"./q5.min.js": "./q5.min.js",
 		"./q5.js": "./q5.js",
 		"./q5-server.js": {
 			"browser": null,
@@ -43,7 +42,7 @@
 	"scripts": {
 		"bundle": "cat src/q5-core.js src/q5-canvas.js src/q5-c2d-canvas.js src/q5-c2d-shapes.js src/q5-c2d-image.js src/q5-c2d-soft-filters.js src/q5-c2d-text.js src/q5-color.js src/q5-display.js src/q5-dom.js src/q5-fes.js src/q5-input.js src/q5-math.js src/q5-record.js src/q5-sound.js src/q5-util.js src/q5-vector.js src/q5-webgpu.js src/q5-lang.js src/q5-python.js > q5.js",
 		"min": "terser q5.js --compress ecma=2026 --mangle --output q5.min.js --source-map url=q5.min.js.map",
-		"dist": "bun bundle && bun min",
+		"dist": "bun bundle",
 		"tests": "jest test",
 		"bld": "node lang/build.js",
 		"types": "node lang/types.js",

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 4.6
+ * @version 4.7
  * @author quinton-ashley
  * @contributors evanalulu, Tezumie, keturn, ormaq, bertubi, RedWilly, Dukemz, LingDong-
  * @license LGPL-3.0
@@ -226,8 +226,6 @@ function Q5(scope, parent, renderer) {
 		r[m]($, q);
 	}
 
-	// INIT
-
 	for (let k in Q5) {
 		if (k[1] != '_' && k[1] == k[1].toUpperCase()) {
 			$[k] = Q5[k];
@@ -496,18 +494,19 @@ if (typeof window == 'object') {
 	window.addEventListener('pagehide', cleanup);
 } else global.window = 0;
 
-Q5.version = Q5.VERSION = '4.6';
+Q5.version = Q5.VERSION = '4.7';
 
 if (typeof document == 'object') {
-	document.addEventListener('DOMContentLoaded', () => {
-		if (!Q5._hasGlobal) {
-			if (Q5.update || Q5.draw) {
-				Q5.WebGPU();
-			} else {
-				new Q5('auto');
-			}
+	function init() {
+		if (Q5._hasGlobal) return;
+		if (Q5.update || Q5.draw) {
+			Q5.WebGPU();
+		} else {
+			new Q5('auto');
 		}
-	});
+	}
+	if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+	else setTimeout(init, 0); // defer until the rest of q5.js is run
 }
 Q5.modules.canvas = ($, q) => {
 	$._Canvas =
@@ -6660,7 +6659,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 		if (shapeVertCount === 0) throw new Error('Shape needs a vertex()');
 
 		// Get the last vertex as the starting point (P₀)
-		let prevIndex = (shapeVertCount - 1) * 4;
+		let prevIndex = (shapeVertCount - 1) * 3;
 		let startX = sv[prevIndex];
 		let startY = sv[prevIndex + 1];
 
@@ -6673,7 +6672,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 			y = cy2;
 		}
 
-		let end = 1 + step;
+		let end = 1 + step * 0.5;
 		for (let t = step; t <= end; t += step) {
 			// Start from 0.1 to avoid duplicating the start point
 			let t2 = t * t;
@@ -6802,15 +6801,6 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 					}
 				}
 			} else {
-				let cx = 0,
-					cy = 0;
-				for (let i = 0; i < shapeVertCount - 1; i++) {
-					cx += sv[i * 3];
-					cy += sv[i * 3 + 1];
-				}
-				cx /= Math.max(1, shapeVertCount - 1);
-				cy /= Math.max(1, shapeVertCount - 1);
-
 				let signedArea = 0,
 					sign = 1;
 				for (let i = 0; i < shapeVertCount - 1; i++) {
@@ -9621,42 +9611,60 @@ Q5.addHook('predraw', (q) => {
 	}
 });
 const runPython = async function () {
-	let scripts = [...document.getElementsByTagName('script')];
-	scripts = scripts.filter((s) => s.type == 'q5-python' || s.type == 'text/q5-python');
+	let scripts = [...document.getElementsByTagName('script')].filter(
+		(s) => s.type == 'q5-python' || s.type == 'text/q5-python'
+	);
 	if (!scripts.length) return;
 
 	if (!window.brython) {
-		const loadScript = (src) =>
-			new Promise((resolve, reject) => {
-				const script = document.createElement('script');
-				script.src = src;
-				script.onload = resolve;
-				script.onerror = reject;
-				document.head.appendChild(script);
+		const load = (src) =>
+			new Promise((res, rej) => {
+				const s = document.createElement('script');
+				s.src = src;
+				s.onload = res;
+				s.onerror = rej;
+				document.head.appendChild(s);
 			});
 
-		await loadScript('https://cdn.jsdelivr.net/npm/brython@3.14.0/brython.min.js');
-		await loadScript('https://cdn.jsdelivr.net/npm/brython@3.14.0/brython_stdlib.min.js');
+		await load('https://cdn.jsdelivr.net/npm/brython@3.14.0/brython.min.js');
+		await load('https://cdn.jsdelivr.net/npm/brython@3.14.0/brython_stdlib.min.js');
 	}
 
 	let code = '';
 	for (const script of scripts) {
-		code += script.src ? await (await fetch(script.src)).text() : script.innerText;
+		if (script.src?.endsWith?.('.ipynb')) {
+			const nb = await (await fetch(script.src)).json();
+			for (const cell of nb.cells) {
+				if (cell.cell_type !== 'code') continue;
+				const m = cell.metadata,
+					cellLang = m?.language_info?.name ?? m?.kernelspec?.language ?? m?.kernelspec?.name ?? m?.language;
+				if (cellLang && !String(cellLang).toLowerCase().includes('python')) continue;
+				const src = Array.isArray(cell.source)
+					? cell.source.join('')
+					: typeof cell.source === 'string'
+						? cell.source
+						: '';
+				code += src + '\n';
+			}
+		} else {
+			code += script.src ? await (await fetch(script.src)).text() : script.innerText;
+		}
 	}
 
+	// strip `from q5 import *` — it's only used for type hints (q5.pyi)
+	code = code.startsWith('from q5') ? code.slice(code.indexOf('\n') + 1) : code;
+
 	const useWebGPU = !code.slice(0, code.indexOf('\n')).includes('C2D'),
 		q = useWebGPU ? await Q5.WebGPU() : new Q5();
+	await q.ready;
 
-	// `window.Canvas` returns a promise that resolves when Q5 is ready
-	// but `q5py.Canvas` returns the renderer synchronously
-	// so to make Brython happy with `await Canvas()` we need to make it async
-	const Canvas = q.Canvas;
-	q.Canvas = async (...a) => Canvas(...a);
+	let pyReady;
+	q._loaders.push(new Promise((res) => (pyReady = res)));
 
 	// add a tab before each line of code to nest it inside the __run function
 	// but not within triple-quoted strings
 	code = code
-		.split(/(\"\"\"[\s\S]*?\"\"\"|\'\'\'[\s\S]*?\'\'\')/g)
+		.split(/("""[\s\S]*?"""|\'\'\'[\s\S]*?\'\'\')/g)
 		.map((part, i) => (i % 2 === 0 ? part.replaceAll('\n', '\n\t') : part))
 		.join('');
 
@@ -9753,8 +9761,8 @@ async def _run_py(q, code):
 				pass
 
 	_orig_Canvas = ns['Canvas']
-	async def _canvas_wrapper(*args):
-		result = await _orig_Canvas(*args)
+	def _canvas_wrapper(*args):
+		result = _orig_Canvas(*args)
 		_sync_state(q, ns)
 		return result
 	ns['Canvas'] = ns['createCanvas'] = _canvas_wrapper
@@ -9776,6 +9784,8 @@ window._runPy = _run_py
 
 	console.log = log;
 
+	pyReady();
+
 	await window._runPy(q, code);
 };