q5play 4.2.2 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5play",
-	"version": "4.2.2",
+	"version": "4.3.0",
 	"author": "quinton-ashley",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"description": "A beginner friendly, web-based game engine that uses q5.js WebGPU for graphics and Box2D v3 WASM for physics.",

package/q5play.d.ts

@@ -60,6 +60,18 @@ declare global {
 		hasMouse: boolean;
 		standardizeKeyboard: boolean;
 
+		/**
+		 * Set to true to disable q5play's console logs, warnings, and error messages.
+		 * Severe errors will still be thrown.
+		 */
+		silent: boolean;
+
+		/**
+		 * Set to true to disable q5play's console logs.
+		 * Warnings and errors will still be shown, and severe errors will still be thrown.
+		 */
+		quiet: boolean;
+
 		/**
 		 * Displays the version of q5play being used,
 		 * the number of sprites being drawn

package/q5play.js

@@ -12,15 +12,15 @@
  *       |__/          |__/                     \______/
  *
  * @package q5play
- * @version 4.2
+ * @version 4.3
  * @author quinton-ashley
  * @website https://q5play.org
  */
 
-let q5play_version = '4.2';
+let q5play_version = '4.3';
 
 if (typeof globalThis.Q5 == 'undefined' && typeof globalThis.p5 == 'undefined') {
-	console.error('q5play requires q5.js to be loaded first. Visit https://q5js.org to learn more.');
+	throw new Error('q5play requires q5.js to be loaded first. Visit https://q5js.org to learn more.');
 }
 
 let box2dPromise,
@@ -28,8 +28,9 @@ let box2dPromise,
 
 // called when a new instance of Q5 is created
 async function q5playPreSetup(q) {
-	const $ = this,
-		log = console.log;
+	const $ = this;
+
+	using_p5 = !$._q5;
 
 	if (!box2dPromise) {
 		box2dPromise = (async () => {
@@ -246,6 +247,8 @@ async function q5playPreSetup(q) {
 			this.emojiScale = 1;
 			this.os = {};
 			this.context = 'web';
+			this.silent = false;
+			this.quiet = false;
 
 			this.update = () => q5playUpdate.call($, q);
 			this.draw = () => q5playPostDraw.call($, q);
@@ -365,23 +368,27 @@ async function q5playPreSetup(q) {
 	$.q5play = new $.Q5Play();
 	delete $.Q5Play;
 
-	using_p5 = !$._q5;
-	if (using_p5 && p5.VERSION[0] != 2) {
-		throw new Error(`q5play requires q5.js or p5.js v2. Detected version: ${p5.VERSION}. Please upgrade.`);
-	}
+	const log = (...args) => {
+		if (!$.q5play.quiet && !$.q5play.silent) console.log(...args);
+	};
+	const warn = (...args) => {
+		if (!$.q5play.silent) console.warn(...args);
+	};
+	const error = (...args) => {
+		if (!$.q5play.silent) console.error(...args);
+	};
 
 	const DEGREES = $.DEGREES,
 		DEGTORAD = Math.PI / 180,
 		RADTODEG = 180 / Math.PI;
 
-	// in q5play the default angle mode is degrees
+	// in q5play defaults
 	$.angleMode(DEGREES);
-
-	// in q5play the default color mode is float RGB
-	if (!using_p5) $.colorMode($.RGB, 1);
-
-	// in q5play the default image mode is center
-	if (!using_p5) $.imageMode($.CENTER);
+	if (!using_p5) {
+		// set later in p5 compatibility mode
+		$.colorMode($.RGB, 1);
+		$.imageMode($.CENTER);
+	}
 
 	const ZERO_VEC = new b2Vec2(0, 0),
 		ZERO_ROT = b2MakeRot(0),
@@ -702,6 +709,8 @@ async function q5playPreSetup(q) {
 			if (typeof val == 'string') {
 				if (!val.includes('.')) {
 					val = new $.EmojiImage(val, this.w);
+				} else if (using_p5) {
+					return this._setP5Img(val);
 				} else val = $.loadImage(val);
 			}
 			this._img = this._extendImage(val);
@@ -730,6 +739,13 @@ async function q5playPreSetup(q) {
 			return img;
 		}
 
+		async _setP5Img(val) {
+			// for p5 v2 compatibility
+			let img = await $.loadImage(val);
+			this._img = this._extendImage(img);
+			this._hasImagery = true;
+		}
+
 		addAni() {
 			let args = [...arguments];
 			let ani, name;
@@ -776,7 +792,7 @@ async function q5playPreSetup(q) {
 			}
 			if (args.length >= 2) {
 				if (typeof spriteSheet == 'string') {
-					spriteSheet = $.load(spriteSheet);
+					spriteSheet = $.loadImage(spriteSheet);
 				}
 				this.anis.spriteSheet = spriteSheet;
 			}
@@ -804,7 +820,7 @@ async function q5playPreSetup(q) {
 					ani = v._anis?.[name];
 				}
 				if (ani) ani = ani.clone();
-				else return console.error('Ani not found: ' + name);
+				else return error('Ani not found: ' + name);
 			}
 			// reset to frame 0 of that animation
 			if (this.resetAniOnChange) ani._frame = 0;
@@ -1337,7 +1353,7 @@ async function q5playPreSetup(q) {
 
 		addCollider(offsetX, offsetY, w, h) {
 			if (this._deleted) {
-				console.error("Can't add colliders to a sprite that was deleted.");
+				error("Can't add colliders to a sprite that was deleted.");
 				return;
 			}
 
@@ -1353,7 +1369,7 @@ async function q5playPreSetup(q) {
 
 		addSensor(offsetX, offsetY, w, h) {
 			if (this._deleted) {
-				console.error("Can't add sensors to a sprite that was deleted.");
+				error("Can't add sensors to a sprite that was deleted.");
 				return;
 			}
 
@@ -1376,7 +1392,7 @@ async function q5playPreSetup(q) {
 		_add(isSensor, a0, a1, a2, a3, a4) {
 			if (this._shapes.length >= $.Sprite.maxColliders) {
 				if (!this._warnedMaxColliders) {
-					console.warn(
+					warn(
 						`Sprite has ${this._shapes.length} colliders and sensors, which is greater than Sprite.maxColliders. Increasing the limit may cause performance issues.`
 					);
 					this._warnedMaxColliders = true;
@@ -2291,7 +2307,7 @@ async function q5playPreSetup(q) {
 		set surfaceSpeed(val) {
 			if (this.watch) this.mod[21] = true;
 			if (this._hasCapsuleChain) {
-				return console.error('Can not set surfaceSpeed of a capsule chain.');
+				return error('Can not set surfaceSpeed of a capsule chain.');
 			}
 			if (this._hasChain) this._chain.surfaceSpeed = val;
 			for (let collider of this.colliders) {
@@ -2918,7 +2934,7 @@ async function q5playPreSetup(q) {
 
 		attractTo(x, y, force) {
 			if (this._phys != 0) {
-				console.error('attractTo can only be used on sprites with dynamic physics bodies');
+				error('attractTo can only be used on sprites with dynamic physics bodies');
 				return;
 			}
 			if (typeof x != 'number') {
@@ -2942,7 +2958,7 @@ async function q5playPreSetup(q) {
 
 		repelFrom(x, y, force) {
 			if (this._phys != 0) {
-				console.error('repelFrom can only be used on sprites with dynamic colliders');
+				error('repelFrom can only be used on sprites with dynamic colliders');
 				return;
 			}
 			if (typeof x != 'number') {
@@ -3611,6 +3627,12 @@ async function q5playPreSetup(q) {
 
 			// image sequence format
 			if (args.length == 2 && typeof args[0] == 'string' && typeof args[1] == 'string' && !args[1].includes('.')) {
+				if (using_p5) {
+					throw new Error(
+						'p5.js v2 does not support preloading or lazy loading images. Convert the image sequence to a sprite sheet.'
+					);
+				}
+
 				let file = args[0],
 					extIndex = file.lastIndexOf('.'),
 					digits = 0;
@@ -3765,7 +3787,9 @@ async function q5playPreSetup(q) {
 					if (typeof sheet == 'string') {
 						sheet = $.loadImage(sheet);
 					}
-					sheet.promise.then(() => {
+					let promise = !using_p5 ? sheet.promise : sheet;
+					promise.then((img) => {
+						if (using_p5) this.spriteSheet = sheet = img;
 						if (!this.length) findFrames();
 
 						if (this._clones) {
@@ -3787,7 +3811,11 @@ async function q5playPreSetup(q) {
 			else {
 				for (let i = 0; i < args.length; i++) {
 					if (args[i] instanceof Q5.Image) this.push(args[i]);
-					else this.push($.loadImage(args[i]));
+					else if (using_p5) {
+						throw new Error(
+							'p5.js v2 does not support preloading or lazy loading images. You need to use `await loadImage(url)`.'
+						);
+					} else this.push($.loadImage(args[i]));
 				}
 			}
 
@@ -4156,6 +4184,8 @@ async function q5playPreSetup(q) {
 			if (typeof val == 'string') {
 				if (!val.includes('.')) {
 					val = new $.EmojiImage(val, this.w || this.width || this.d || this.diameter);
+				} else if (using_p5) {
+					return $.Visual.prototype._setP5Img(val);
 				} else val = $.loadImage(val);
 			}
 			this._img = $.Visual.prototype._extendImage(val);
@@ -4325,7 +4355,7 @@ async function q5playPreSetup(q) {
 					}
 				}
 				if (!this.idNum) {
-					console.warn('ERROR: Surpassed the limit of 999 groups in memory. Delete groups to recycle group ids.');
+					warn('ERROR: Surpassed the limit of 999 groups in memory. Delete groups to recycle group ids.');
 					// if there are no empty slots, try to prevent a crash by
 					// finding the first slot that has a group with no sprites in it
 					for (let i = 1; i < $.q5play.groups.length; i++) {
@@ -5111,7 +5141,7 @@ async function q5playPreSetup(q) {
 
 		splice(start, removalCount, ...sprites) {
 			if (this.deleted) {
-				console.warn(
+				warn(
 					'Edited group' +
 						this._uid +
 						" that was deleted. Use `group.deleteAll()` to remove all of a group's sprites without deleting the group itself. Restoring the group to q5play's memory."
@@ -5123,11 +5153,11 @@ async function q5playPreSetup(q) {
 			// filter out non-sprites and log a warning
 			sprites = sprites.filter((s) => {
 				if (!(s instanceof $.Sprite)) {
-					console.warn('Only sprites can be added to a group, skipping:', s);
+					warn('Only sprites can be added to a group, skipping:', s);
 					return false;
 				}
 				if (s.deleted) {
-					console.warn("Can't add a deleted sprite to a group, skipping:", s);
+					warn("Can't add a deleted sprite to a group, skipping:", s);
 					return false;
 				}
 				return true;
@@ -5582,7 +5612,7 @@ async function q5playPreSetup(q) {
 		}
 		set timeScale(val) {
 			if (val < 0 || val > 2) {
-				return console.error('world.timeScale must be between 0 and 2');
+				return error('world.timeScale must be between 0 and 2');
 			}
 			if (this._timeScale == val) return;
 			this._timeScale = val;
@@ -5982,7 +6012,7 @@ async function q5playPreSetup(q) {
 			}
 			speed ??= 1;
 			if (speed <= 0) {
-				console.warn('camera.moveTo: speed should be a positive number');
+				warn('camera.moveTo: speed should be a positive number');
 				return Promise.resolve(false);
 			}
 			let a = y - this.y;
@@ -6985,7 +7015,7 @@ async function q5playPreSetup(q) {
 
 		// same code as img.trim() in q5.js
 		let ctx = g.drawingContext;
-		let pd = g._pixelDensity || 1;
+		let pd = g._pixelDensity || g._renderer?._pixelDensity || 1;
 		let w = g.canvas.width;
 		let h = g.canvas.height;
 		let data = ctx.getImageData(0, 0, w, h).data;
@@ -7094,7 +7124,7 @@ async function q5playPreSetup(q) {
 				}
 			} else $.image(img, dx, dy, dw, dh);
 		} else {
-			console.warn(
+			warn(
 				'q5play: "' +
 					ani.name +
 					'"' +
@@ -7197,53 +7227,19 @@ async function q5playPreSetup(q) {
 		}
 	}
 
-	// let userDisabledP5Errors = p5.disableFriendlyErrors;
-	// p5.disableFriendlyErrors = true;
-
 	let didCreateCanvas = false;
 
-	const _createCanvas = $.createCanvas;
-
-	$.Canvas = $.createCanvas = function (w, h) {
-		let args = [...arguments];
-
-		if (using_p5 && !didCreateCanvas && w == 100 && h == 100) return _createCanvas.call($, ...args);
-
-		// prevent p5 v1 overriding the user's canvas with a new default canvas
-		if (didCreateCanvas && w == 100 && h == 100) return;
-
-		if (typeof args[0] == 'string') {
-			if (args[0].includes(':')) {
-				let ratio = args[0].split(':'),
-					rW = Number(ratio[0]),
-					rH = Number(ratio[1]),
-					w = window.innerWidth,
-					h = window.innerWidth * (rH / rW);
-				if (h > window.innerHeight) {
-					w = window.innerHeight * (rW / rH);
-					h = window.innerHeight;
-				}
-				args[0] = Math.round(w);
-				args.splice(1, 0, Math.round(h));
-			} else {
-				args = [0, 0, ...args];
-			}
-		}
-		if (!args[0]) {
-			args[0] = window.innerWidth;
-			args[1] = window.innerHeight;
-		}
-		args[1] ??= args[0];
-		args[0] = Math.floor(args[0] / 2) * 2;
-		args[1] = Math.floor(args[1] / 2) * 2;
-		let rend = _createCanvas.call($, ...args);
+	const q5playCanvas = (rend, args) => {
 		$.ctx = $.drawingContext;
 		let c = rend.canvas || rend;
-		if (using_p5) window.canvas = c;
-		if (rend.GL) {
-			c.renderer = 'webgl';
-			$._webgl = true;
-		} else if (!$._webgpu) $._c2d = true;
+
+		if (using_p5) {
+			if (rend.device) $._webgpu = true;
+			else if (rend.GL) $._webgl = true;
+			else if ($._specifiedRenderer) $._c2d = true;
+			else $._webgpu = $._webgpuFallback = true;
+		}
+
 		c.tabIndex = 0;
 		c.w = args[0];
 		c.h = args[1];
@@ -7293,7 +7289,6 @@ async function q5playPreSetup(q) {
 				rs.y = -c.hh + 20;
 			}
 		}
-		// p5.disableFriendlyErrors = userDisabledP5Errors;
 
 		let pointer = window.PointerEvent ? 'pointer' : 'mouse';
 		c.addEventListener(pointer + 'down', onpointerdown);
@@ -7303,9 +7298,57 @@ async function q5playPreSetup(q) {
 		}
 
 		didCreateCanvas = true;
+
+		if (using_p5) p5._q5playCompat($);
+
 		return rend;
 	};
 
+	const _createCanvas = $.createCanvas;
+
+	$.Canvas = $.createCanvas = function (w, h) {
+		let args = [...arguments];
+
+		if (using_p5 && !didCreateCanvas && w == 100 && h == 100) return _createCanvas.call($, ...args);
+
+		// prevent p5 v1 overriding the user's canvas with a new default canvas
+		if (didCreateCanvas && w == 100 && h == 100) return;
+
+		if (typeof args[0] == 'string') {
+			if (args[0].includes(':')) {
+				let ratio = args[0].split(':'),
+					rW = Number(ratio[0]),
+					rH = Number(ratio[1]),
+					w = window.innerWidth,
+					h = window.innerWidth * (rH / rW);
+				if (h > window.innerHeight) {
+					w = window.innerHeight * (rW / rH);
+					h = window.innerHeight;
+				}
+				args[0] = Math.round(w);
+				args.splice(1, 0, Math.round(h));
+			} else {
+				args = [0, 0, ...args];
+			}
+		}
+		if (!args[0]) {
+			args[0] = window.innerWidth;
+			args[1] = window.innerHeight;
+		}
+		args[1] ??= args[0];
+		args[0] = Math.floor(args[0] / 2) * 2;
+		args[1] = Math.floor(args[1] / 2) * 2;
+
+		let rend = _createCanvas.call($, ...args);
+
+		if (rend instanceof Promise) {
+			return rend.then((r) => {
+				return q5playCanvas(r, args);
+			});
+		}
+		return q5playCanvas(rend, args);
+	};
+
 	$.canvas = $.canvas; // for brython
 
 	const _resizeCanvas = $.resizeCanvas;
@@ -7392,6 +7435,8 @@ async function q5playPreSetup(q) {
 		constructor(func, errorNum, e) {
 			super();
 
+			if ($.q5play.silent) return;
+
 			if (typeof func != 'string') {
 				e = errorNum;
 				errorNum = func;
@@ -7566,15 +7611,14 @@ async function q5playPreSetup(q) {
 				mx = $.mouseX,
 				my = $.mouseY;
 
-			if (using_p5) {
-				if ($._webgpuFallback) {
-					mx -= $.halfWidth;
-					my -= $.halfHeight;
-				}
+			if (using_p5 && ($._webgpuFallback || $._webgl)) {
+				mx -= $.halfWidth;
+				my -= $.halfHeight;
 			}
 
-			m.x = mx / cam.zoom + cam.x;
-			m.y = my / cam.zoom + cam.y;
+			// divide by camera zoom and add camera translation
+			m.x = mx / cam.zoom + cam.__pos.x;
+			m.y = my / cam.zoom + cam.__pos.y;
 
 			if (m.scroll < 0) m.scroll = 0;
 			if (m.scrollDelta.x == 0 && m.scrollDelta.y == 0) {
@@ -8379,7 +8423,7 @@ async function q5playPreSetup(q) {
 		 */
 		_update() {
 			for (let c of this) {
-				if (c.connected) c._update();
+				if (c?.connected) c._update();
 			}
 		}
 	};
@@ -8497,29 +8541,19 @@ async function q5playPreSetup(q) {
 		shapeStack = [];
 
 	const colorMax = $._colorFormat,
-		debugGreen = $._q5 ? $.color(0, colorMax, 0, colorMax * 0.9) : 'lime',
-		debugGreenFill = $._q5 ? $.color(0, colorMax, 0, colorMax * 0.1) : 'lime',
-		debugYellow = $._q5 ? $.color(colorMax, colorMax, 0, colorMax * 0.9) : 'yellow',
-		debugYellowFill = $._q5 ? $.color(colorMax, colorMax, 0, colorMax * 0.1) : 'yellow';
-
-	if (using_p5) {
-		$._getFillIdx = () => $._renderer.states.fillColor;
-		$._setFillIdx = (v) => $.fill(v);
-		$._getStrokeIdx = () => $._renderer.states.strokeColor;
-		$._setStrokeIdx = (v) => {
-			if ($._renderer.states.strokeSet) $.stroke(v);
-		};
-		$._getStrokeWeight = () => [$._renderer.states.strokeWeight];
-		$._setStrokeWeight = (v) => $.strokeWeight(...v);
-		$._getImageMode = () => $._renderer.states.imageMode;
-	} else if ($.canvas.c2d) {
-		// polyfill for q5 WebGPU high efficiency functions
+		debugGreen = $._q5 ? $.color(0, colorMax, 0, colorMax * 0.9) : '#0f0e',
+		debugGreenFill = $._q5 ? $.color(0, colorMax, 0, colorMax * 0.1) : '#0f02',
+		debugYellow = $._q5 ? $.color(colorMax, colorMax, 0, colorMax * 0.9) : '#ff0e',
+		debugYellowFill = $._q5 ? $.color(colorMax, colorMax, 0, colorMax * 0.1) : '#ff02';
+
+	// polyfills for q5 WebGPU high efficiency style changing functions
+	if ($._c2d || $._webgpuFallback) {
 		$._getFillIdx = () => $._fill;
 		$._setFillIdx = (v) => ($._fill = v);
 		$._getStrokeIdx = () => $._stroke;
 		$._setStrokeIdx = (v) => ($._stroke = v);
 		$._getStrokeWeight = () => [$._strokeWeight];
-		$._setStrokeWeight = (v) => $.strokeWeight(...v);
+		$._setStrokeWeight = (v) => ($.ctx.lineWidth = $._strokeWeight = v[0]);
 	}
 
 	$._q5playDraw = () => {
@@ -8535,8 +8569,12 @@ async function q5playPreSetup(q) {
 
 		let swData = $._getStrokeWeight();
 		let ogSW = [...swData];
-		for (let i = 0; i < swData.length; i++) {
-			swData[i] /= meterSize;
+		// if using q5 or p5's P2D mode
+		// (in p5's WebGL and WebGPU modes, stroke weight doesn't scale)
+		if ($._q5 || $._c2d || $._webgpuFallback) {
+			for (let i = 0; i < swData.length; i++) {
+				swData[i] /= meterSize;
+			}
 		}
 		$._setStrokeWeight(swData);
 
@@ -8613,7 +8651,7 @@ async function q5playPreSetup(q) {
 					transformPoint(xf, v);
 					$.vertex(v.x, v.y);
 				}
-				$.endShape(true);
+				$.endShape($.CLOSE);
 				if (rr > 0) {
 					$._setStrokeWeight(swData);
 					$._setStrokeIdx(ogStroke);
@@ -8659,7 +8697,7 @@ async function q5playPreSetup(q) {
 							transformPoint(xf, v);
 							$.vertex(v.x, v.y);
 						}
-						$.endShape(true);
+						$.endShape($.CLOSE);
 					} else {
 						let x = (cmd.data[0] + cmd.data[2]) / 2,
 							y = (cmd.data[1] + cmd.data[3]) / 2;
@@ -8697,8 +8735,11 @@ async function q5playPreSetup(q) {
 		if (ta) $.textAlign(ta.horizontal, ta.vertical);
 	};
 
+	// p5 won't run the draw loop unless a draw function is defined
+	if (using_p5) window.draw ??= () => {};
+
 	// prettier-ignore
-	let q5playGlobals = ['q5play','Box2D','DYN','DYNAMIC','STA','STATIC','KIN','KINEMATIC','Sprite','Group','allSprites','Ani','Anis','Visual','Visuals','Joint','GlueJoint','DistanceJoint','WheelJoint','HingeJoint','SliderJoint','GrabberJoint','world','kb','keyboard','mouse','contro','contros','controllers','pointer','pointers','spriteArt','EmojiImage','getFPS','animation','parseTextureAtlas','delay'];
+	let q5playGlobals = ['q5play','Box2D','Canvas','createCanvas','DYN','DYNAMIC','STA','STATIC','KIN','KINEMATIC','Sprite','Group','allSprites','Ani','Anis','Visual','Visuals','Joint','GlueJoint','DistanceJoint','WheelJoint','HingeJoint','SliderJoint','GrabberJoint','world','camera','kb','keyboard','mouse','contro','contros','controllers','pointer','pointers','spriteArt','EmojiImage','getFPS','animation','parseTextureAtlas','delay'];
 
 	// manually propagate q5play stuff to the global window object
 	if ($._isGlobal) {
@@ -8721,31 +8762,6 @@ function q5playPostSetup() {
 
 	if ($._isGlobal && window.update) $.update = window.update;
 
-	if (using_p5) {
-		// p5 won't run the draw loop without a draw function defined
-		window.draw = () => {};
-
-		$.loge = $.log;
-		$.log = console.log;
-		$.camera = $._camera;
-
-		if ($._isGlobal) {
-			Object.defineProperty(window, 'log', {
-				value: console.log
-			});
-			Object.defineProperty(window, 'loge', {
-				value: $.loge
-			});
-			$.camera3D = window.camera;
-			Object.defineProperty(window, 'camera3D', {
-				value: $.camera3D
-			});
-			Object.defineProperty(window, 'camera', {
-				value: $.camera
-			});
-		}
-	}
-
 	$.update ??= $.clear;
 
 	$._setupDone = true;
@@ -8755,11 +8771,6 @@ function q5playPostSetup() {
 function q5playUpdate() {
 	const $ = this;
 
-	if (using_p5) {
-		$.q5play._preDrawFrameTime = performance.now();
-		$.resetMatrix();
-	}
-
 	$.q5play.spritesDrawn = 0;
 
 	$.contros._update();
@@ -8902,10 +8913,6 @@ function q5playPostDraw() {
 		else if ($.kb[k] > 0) $.kb[k]++;
 	}
 
-	if (using_p5) {
-		$.q5play._postDrawFrameTime = performance.now();
-		$.q5play._fps = Math.round(1000 / ($.q5play._postDrawFrameTime - $.q5play._preDrawFrameTime)) || 1;
-	}
 	$.q5play._inPostDraw = false;
 }
 
@@ -9111,58 +9118,16 @@ pressure -> es:presión
 };
 q5playClassLangs.Group += q5playClassLangs.Sprite;
 
-if (typeof globalThis.Q5 == 'undefined') {
-	console.warn('p5.js v2 is not fully compatible with q5play. Consider using q5 instead: https://q5js.org');
-
-	p5.addHook = (hook, fn) => {
-		p5.registerAddon((p5, proto, lifecycles) => {
-			lifecycles[hook] = fn;
-		});
-	};
-
-	// p5.js v2 compatibility layer
-	globalThis.Canvas = (...args) => {
-		return new Promise((resolve) => {
-			window.setup = async function () {
-				const $ = p5.instance;
-				$._webgpu = $._webgpuFallback = true;
-
-				$.Canvas(...args);
-
-				// q5play defaults
-				colorMode(RGB, 1);
-				imageMode(CENTER);
-
-				$.halfWidth = width / 2;
-				$.halfHeight = height / 2;
-
-				let _resetMatrix = $.resetMatrix;
-
-				$.resetMatrix = () => {
-					_resetMatrix.call($);
-					$.translate($.halfWidth, $.halfHeight);
-				};
-
-				Object.defineProperty(p5, 'update', {
-					set(fn) {
-						$.update = fn;
-					},
-					get() {
-						return $.update;
-					},
-					configurable: true
-				});
-
-				resolve();
-			};
-		});
-	};
-
-	globalThis.Q5 = globalThis.q5 = p5;
-}
+globalThis.Canvas ??= () => {
+	p5._friendlyError(`Visit https://github.com/q5play/p5-compat to learn how to use q5play with p5.js`);
+	throw new Error();
+};
 
-Q5.addHook('presetup', q5playPreSetup);
-Q5.addHook('postsetup', q5playPostSetup);
-Q5.addHook('predraw', q5playUpdate);
-Q5.addHook('postdraw', q5playPostDraw);
-Q5.addHook('remove', q5playRemove);
+(p5 || Q5).registerAddon((_, __, l) => {
+	// add lifecycle hooks for q5play
+	l.presetup = q5playPreSetup;
+	l.postsetup = q5playPostSetup;
+	l.predraw = q5playUpdate;
+	l.postdraw = q5playPostDraw;
+	l.remove = q5playRemove;
+});

package/q5play.pyi

@@ -60,6 +60,18 @@ class Q5Play:
 
     standardizeKeyboard: bool
 
+    silent: bool
+    """
+    Set to true to disable q5play's console logs, warnings, and error messages.
+    Severe errors will still be thrown.
+    """
+
+    quiet: bool
+    """
+    Set to true to disable q5play's console logs.
+    Warnings and errors will still be shown, and severe errors will still be thrown.
+    """
+
     renderStats: bool
     """
     Displays the version of q5play being used,