q5 1.2.6 → 1.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 q5.js is a drop-in replacement for [p5.js][]. It supports all of p5's 2D drawing APIs, math functionality, and some other utilities.
 
-q5.min.js (39kb) is 24x smaller than p5.min.js (914kb)! It also has better performance, which is especially important on mobile devices.
+q5.min.js (42kb) is 23x smaller than p5.min.js (977kb)! It also has better performance, which is especially important on mobile devices.
 
 q5 doesn't include any friendly error messages to help you code though. Its mainly for people who are already familiar with p5.js or JS programming in general. If you're a beginner, stick with p5 while developing a sketch, then use q5 to share your work.
 
@@ -37,69 +37,16 @@ To use addons, simply load them after q5.js:
 <script src="https://p5play.org/v3/p5play.js"></script>
 ```
 
-## What's new in Version 1.1?
-
-Co-creator of q5, @quinton-ashley, added a ton of features:
-
-- `registerMethod` functionality for supporting p5.js addons such as [p5play](https://p5play.org)!
-- automatic global instance creation, can also be user instantiated as well with `new Q5('global')` like with the previous version of q5xjs
-- p5 instance mode support
-- add q5 canvas to a container element with `new Q5('global', parentElem)` or `new Q5(parentElem)`
-- `angleMode` functionality
-- `loadSound` function that returns a barebones sound object with `play`, `pause`, and `setVolume` methods
-- fixed `pixelDensity` bugs
-- fixed `text` function bug not displaying "0" (falsey value in JS)
-- fixed `keyPressed` repeating key presses
-- made `instanceof` checks work for q5.js objects of the `Color`, `Vector`, and `Image` classes
-- the `push` and `pop` functions now save and restore style properties like `rectMode` and `strokeWeight`
-- `nf` (number format) function, which is used in p5play
-- `pow` function alias to `Math.pow`
-- prevented text stroke from being drawn if the user did not specify a stroke (p5.js behavior)
-- fixed `Vector.lerp` implementation
-- fixed `mouseX` and `mouseY` not updating when the mouse is outside the canvas
-
-## Motivation: Part 1
-
-_This section was written by @LingDong-, co-creator of q5_
-
-After having used many graphics libraries across many different languages, I have found that the Processing/p5.js/Openframeworks system has one huge advantage over others:
-
-It gets stuff drawn onto the screen quick and easy!
-
-This might sound silly, but it actually means a lot for people concerned with creative expression. The easier it is to try things out, before one's time and patience is up, the greater chance that you'll get something nice in the end. Therefore, although you can theoretically achieve the exact same result in any decent graphics system, the tool does matter in practice. Artists want more time to spend actually working on how their piece looks, instead of wondering why the computer doesn't work as intended.
-
-At [Carnegie Mellon University](https://www.cmu.edu/cfa/studio/index.html), where I studied computational art, p5.js is taught as _the_ framework for the web, and its been a great introduction. However, due to some of the ways in which p5.js is implemented, I found myself using it less and less as I made more and more projects. Lately, I've found that I'll reach directly for the standard JavaScript/Web APIs instead of p5.js. I sometimes think of this as shedding the training wheels on one's bicycle. But I missed the artist-centered logic of the p5 interface! I started thinking, "Is there a better way?"
-
-Just to clarify, I think the official p5.js implementation is perfectly justified for its philosophy and suitability for its intended purpose, but my own needs are different enough that I think they justify another implementation instead of pull requests to the official one.
-
-In fact, its not uncommon for successful software systems to have multiple implementations of the same spec (think: compilers of C, implementations of SQL, and engines of JavaScript). This allows the user to choose a backend that best suits their goals or needs. When one is using p5.js (or Processing or OpenFrameworks), what one is really using is the same set of commands, the intuitive way of describing drawings, that empowers creative expression. The actual way these commands are implemented internally is incidental; it should be possible to swap internal implementations as necessary.
-
-## Motivation: Part 2
-
-_This section was written by @quinton-ashley, co-creator of q5_
-
-I thought @LingDong-'s work on q5 and the idea itself had great potential. So I decided to upgrade its compatibility with p5.js. My main goal was to make it work with [p5play](https://p5play.org)!
-
-An increase in performance of even a few frames per second can make a significant difference in the user experience of a work of interactive art or a game, especially on mobile devices.
-
-I was also interested in working on q5 because for a lot of p5.js users, the library itself is a black box. Even as an expert JS programmer and someone who teaches CS for a living, I still find myself scratching my head when I look at the p5.js source code. p5 was initially released 10 years ago and I think some bad design choices were made due to JS limitations at the time. It's also become an absolutely massive library, with literally over 100,000 lines of code and documentation! p5.js is 4 MB un-minified, q5.js is just 66kb.
-
-I think it'd be better if the canvas mode, webgl mode, Friendly Error System, and accessibility features of p5 were offered in separate files. Yet, the powers that be at the Processing Foundation have made it clear that they don't want to do that. Instead they insist on adding more accessibility features to the base library, which the majority of people just don't need. So q5 is a good alternative that trims out the fat.
-
-Thanks in large part to @LingDong-'s design, q5 is well organized, concise, and utilizes many modern JS features! I think even without documentation, the source code is easier for experienced JS programmers to comprehend.
-
 ## New Features: Top-Level Global Mode
 
 There are some extra features in q5 that aren't in p5, but using them is totally optional.
 
 **q5.js** has an automatic global mode, which is enabled by default. This means existing p5.js sketches can be run without any modification.
 
-But with q5, you could do away with the setup function all together. Just write the initialization routine `new Q5('global')` at the top of your sketch.
-
-For example, you can now directly run examples from [p5js.org/reference](https://p5js.org/reference) without wrapping them in a setup function:
+But with q5, you could do away with the setup function all together. Just write the initialization routine `new Q5()` or `new Q5('global')` at the top of your sketch.
 
 ```js
-new Q5('global');
+new Q5();
 
 noStroke();
 let c = color(0, 126, 255, 102);
@@ -110,7 +57,7 @@ rect(15, 15, 35, 70);
 You could even use your own animation loop in place of `draw()`. But this would cause problems with addons that rely on `draw()`, such as p5play.
 
 ```js
-new Q5('global');
+new Q5();
 
 fill(255, 0, 0);
 
@@ -146,7 +93,7 @@ This does solve the problem of global namespace pollution, but there're still so
 **q5** introduces "namespace" mode, in addition to global/instance modes:
 
 ```js
-let q5 = new Q5();
+let q5 = new Q5('namespace');
 
 q5.setup = function () {
 	q5.createCanvas(100, 100);
@@ -160,8 +107,8 @@ q5.draw = function () {
 You can call the namespace whatever you like. You can even get multiple instances of q5 running on the same page easily.
 
 ```js
-let q5 = new Q5();
-let q6 = new Q5();
+let q5 = new Q5('namespace');
+let q6 = new Q5('namespace');
 
 q5.setup = function () {
 	q5.createCanvas(400, 400);
@@ -180,10 +127,42 @@ q6.draw = function () {
 };
 ```
 
+## Motivation: Part 1
+
+_This section was written by @LingDong-, co-creator of q5_
+
+After having used many graphics libraries across many different languages, I have found that the Processing/p5.js/Openframeworks system has one huge advantage over others:
+
+It gets stuff drawn onto the screen quick and easy!
+
+This might sound silly, but it actually means a lot for people concerned with creative expression. The easier it is to try things out, before one's time and patience is up, the greater chance that you'll get something nice in the end. Therefore, although you can theoretically achieve the exact same result in any decent graphics system, the tool does matter in practice. Artists want more time to spend actually working on how their piece looks, instead of wondering why the computer doesn't work as intended.
+
+At [Carnegie Mellon University](https://www.cmu.edu/cfa/studio/index.html), where I studied computational art, p5.js is taught as _the_ framework for the web, and its been a great introduction. However, due to some of the ways in which p5.js is implemented, I found myself using it less and less as I made more and more projects. Lately, I've found that I'll reach directly for the standard JavaScript/Web APIs instead of p5.js. I sometimes think of this as shedding the training wheels on one's bicycle. But I missed the artist-centered logic of the p5 interface! I started thinking, "Is there a better way?"
+
+Just to clarify, I think the official p5.js implementation is perfectly justified for its philosophy and suitability for its intended purpose, but my own needs are different enough that I think they justify another implementation instead of pull requests to the official one.
+
+In fact, its not uncommon for successful software systems to have multiple implementations of the same spec (think: compilers of C, implementations of SQL, and engines of JavaScript). This allows the user to choose a backend that best suits their goals or needs. When one is using p5.js (or Processing or OpenFrameworks), what one is really using is the same set of commands, the intuitive way of describing drawings, that empowers creative expression. The actual way these commands are implemented internally is incidental; it should be possible to swap internal implementations as necessary.
+
+## Motivation: Part 2
+
+_This section was written by @quinton-ashley, co-creator of q5_
+
+I thought @LingDong-'s work on q5 and the idea itself had great potential. So I decided to upgrade its compatibility with p5.js. My main goal was to make it work with [p5play](https://p5play.org)!
+
+An increase in performance of even a few frames per second can make a significant difference in the user experience of a work of interactive art or a game, especially on mobile devices.
+
+I was also interested in working on q5 because for a lot of p5.js users, the library itself is a black box. Even as an expert JS programmer and someone who teaches CS for a living, I still find myself scratching my head when I look at the p5.js source code. p5 was initially released 10 years ago and I think some bad design choices were made due to JS limitations at the time. It's also become an absolutely massive library, with literally over 100,000 lines of code and documentation! p5.js is 4.3 MB un-minified, q5.js is just 70kb.
+
+I think it'd be better if the canvas mode, webgl mode, Friendly Error System, and accessibility features of p5 were offered in separate files. Yet, the powers that be at the Processing Foundation have made it clear that they don't want to do that. Instead they insist on adding more accessibility features to the base library, which the majority of people just don't need. So q5 is a good alternative that trims out the fat.
+
+Thanks in large part to @LingDong-'s design, q5 is well organized, concise, and utilizes many modern JS features! I think even without documentation, the source code is easier for experienced JS programmers to comprehend.
+
 ## More extra features
 
 q5.js provides some other features that are not in p5.js:
 
+- `textCache(true)`: Text image caching is enabled by default. Rotated text is only rendered once, and then cached as an image. This can result in ridiculously high 90x performance boosts for text-heavy sketches. Users don't need to change their code, the `text` function can be used as normal, q5 takes care of everything behind the scenes.
+- `loadSound()`: Basic sound support in q5.js, returns a Web Audio object. Not as powerful as p5.sound, but it's good enough for simple sketches. Includes `sound.setVolume()`.
 - `randomExponential()` in addition to `randomGaussian()`: a random distribution that resembles exponential decay.
 - `curveAlpha()`: manipulate the `α` parameter of Catmull-Rom curves.
 - `relRotationX`, `relRotationY` and `relRotationZ`: Similar to `rotationX/Y/Z`, but are relative to the orientation of the mobile device.
@@ -200,13 +179,13 @@ q5.js provides some other features that are not in p5.js:
 
 ## Size Comparison
 
-- p5.min.js 898kb
+- p5.min.js 977kb
 - p5.sound.min.js 200kb
 
-- q5.min.js 39kb
+- q5.min.js 42kb
 
-- planck.min.js 193kb
-- p5play.min.js 90kb
+- planck.min.js 209kb
+- p5play.min.js 93kb
 
 ## Benchmarks
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"author": "quinton-ashley",
 	"name": "q5",
-	"version": "1.2.6",
+	"version": "1.4.0",
 	"description": "An implementation of the p5.js 2D API that's smaller and faster",
 	"main": "q5.js",
 	"scripts": {

package/q5.js

@@ -1,10 +1,15 @@
 /**
  * q5.js
- * @version 1.2
+ * @version 1.4
  * @author quinton-ashley and LingDong-
  * @license GPL-3.0-only
  */
+
+/**
+ * @type {Q5}
+ */
 function Q5(scope, parent) {
+	if (typeof scope == 'undefined') scope = 'global';
 	if (scope == 'auto') {
 		if (typeof window.setup == 'undefined') return;
 		else scope = 'global';
@@ -17,7 +22,7 @@ function Q5(scope, parent) {
 
 	let $ = this;
 	$.canvas = document.createElement('canvas');
-	let ctx = $.canvas.getContext('2d');
+	let ctx = ($._ctx = $.canvas.getContext('2d'));
 	$.canvas.classList.add('p5Canvas', 'q5Canvas');
 	$.canvas.id = 'defaultCanvas' + Q5._instanceCount++;
 
@@ -265,16 +270,30 @@ function Q5(scope, parent) {
 		$.canvas.width = width * $._pixelDensity;
 		$.canvas.height = height * $._pixelDensity;
 		defaultStyle();
-		if (scope != 'graphics' && scope != 'image') $.pixelDensity(2);
+		if (scope != 'graphics' && scope != 'image') {
+			$.pixelDensity(Math.ceil($.displayDensity()));
+		}
 		return $.canvas;
 	};
 
+	function cloneCtx() {
+		let c = {};
+		for (let prop in ctx) {
+			if (typeof ctx[prop] != 'function') c[prop] = ctx[prop];
+		}
+		delete c.canvas;
+		return c;
+	}
+
 	$.resizeCanvas = (width, height) => {
 		$.width = width;
 		$.height = height;
+		let c = cloneCtx();
 		$.canvas.width = width * $._pixelDensity;
 		$.canvas.height = height * $._pixelDensity;
-		if (scope != 'graphics' && scope != 'image') $.pixelDensity(2);
+		ctx = $._ctx = $.canvas.getContext('2d');
+		for (let prop in c) $._ctx[prop] = c[prop];
+		if (scope != 'graphics' && scope != 'image') $.pixelDensity($._pixelDensity);
 	};
 
 	$.createGraphics = (width, height) => {
@@ -285,18 +304,20 @@ function Q5(scope, parent) {
 	$.createImage = (width, height) => {
 		return new Q5.Image(width, height);
 	};
-
+	$.displayDensity = () => window.devicePixelRatio;
 	$.pixelDensity = (n) => {
 		if (n === undefined) return $._pixelDensity;
 		$._pixelDensity = n;
 
+		let c = cloneCtx();
 		$.canvas.width = Math.ceil($.width * n);
 		$.canvas.height = Math.ceil($.height * n);
 		$.canvas.style.width = $.width + 'px';
 		$.canvas.style.height = $.height + 'px';
+		ctx = $._ctx = $.canvas.getContext('2d');
+		for (let prop in c) $._ctx[prop] = c[prop];
 
 		ctx.scale($._pixelDensity, $._pixelDensity);
-		defaultStyle();
 		return $._pixelDensity;
 	};
 
@@ -586,6 +607,7 @@ function Q5(scope, parent) {
 		ctx.strokeStyle = 'black';
 		ctx.lineCap = 'round';
 		ctx.lineJoin = 'miter';
+		ctx.textAlign = 'left';
 	}
 
 	$.strokeWeight = (n) => {
@@ -868,7 +890,7 @@ function Q5(scope, parent) {
 		}
 	};
 	function catmullRomSpline(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y, numPts, alpha) {
-		//https://en.wikipedia.org/wiki/Centripetal_Catmull–Rom_spline
+		//https://en.wikipedia.org/wiki/Centripetal_Catmull–Rom_spline
 		function catmullromSplineGetT(t, p0x, p0y, p1x, p1y, alpha) {
 			let a = Math.pow(p1x - p0x, 2.0) + Math.pow(p1y - p0y, 2.0);
 			let b = Math.pow(a, alpha * 0.5);
@@ -1495,45 +1517,20 @@ function Q5(scope, parent) {
 		document.head.append(style);
 		return name;
 	};
-	$.textFont = (x) => {
-		$._textFont = x;
-	};
+	$.textFont = (x) => ($._textFont = x);
 	$.textSize = (x) => {
 		if (x === undefined) return $._textSize;
 		$._textLeading = x;
 		$._textSize = x;
 	};
-	$.textLeading = (x) => {
-		$._textLeading = x;
-	};
-	$.textStyle = (x) => {
-		$._textStyle = x;
-	};
+	$.textLeading = (x) => ($._textLeading = x);
+	$.textStyle = (x) => ($._textStyle = x);
 	$.textAlign = (horiz, vert) => {
 		ctx.textAlign = horiz;
 		if (vert) {
 			ctx.textBaseline = vert == $.CENTER ? 'middle' : vert;
 		}
 	};
-	$.text = (str, x, y, w) => {
-		if (str === undefined) return;
-		str = str.toString();
-		if (!$._doFill && !$._doStroke) return;
-		ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
-		let lines = str.split('\n');
-		for (let i = 0; i < lines.length; i++) {
-			let f = ctx.fillStyle;
-			if (!$._fillSet) ctx.fillStyle = 'black';
-			if ($._doFill) {
-				ctx.fillText(lines[i], x, y, w);
-			}
-			if ($._doStroke && $._strokeSet) {
-				ctx.strokeText(lines[i], x, y, w);
-			}
-			if (!$._fillSet) ctx.fillStyle = f;
-			y += $._textLeading;
-		}
-	};
 	$.textWidth = (str) => {
 		ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
 		return ctx.measureText(str).width;
@@ -1546,6 +1543,135 @@ function Q5(scope, parent) {
 		ctx.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
 		return ctx.measureText(str).actualBoundingBoxDescent;
 	};
+	$._textCache = true;
+	$._TimedCache = class extends Map {
+		constructor() {
+			super();
+			this.maxSize = 500;
+		}
+		set(k, v) {
+			v.lastAccessed = Date.now();
+			super.set(k, v);
+			if (this.size > this.maxSize) this.gc();
+		}
+		get(k) {
+			const v = super.get(k);
+			if (v) v.lastAccessed = Date.now();
+			return v;
+		}
+		gc() {
+			let t = Infinity;
+			let oldest;
+			let i = 0;
+			for (const [k, v] of this.entries()) {
+				if (v.lastAccessed < t) {
+					t = v.lastAccessed;
+					oldest = i;
+				}
+				i++;
+			}
+			i = oldest;
+			for (const k of this.keys()) {
+				if (i == 0) {
+					oldest = k;
+					break;
+				}
+				i--;
+			}
+			this.delete(oldest);
+		}
+	};
+	$._tic = new $._TimedCache();
+	$.textCache = (b, maxSize) => {
+		if (maxSize) $._tic.maxSize = maxSize;
+		if (b !== undefined) $._textCache = b;
+		return $._textCache;
+	};
+	function _genTextImageKey(str, w, h) {
+		return (
+			str.slice(0, 200) +
+			$._textStyle +
+			$._textSize +
+			$._textFont +
+			($._doFill ? ctx.fillStyle : '') +
+			'_' +
+			($._doStroke && $._strokeSet ? ctx.lineWidth + ctx.strokeStyle + '_' : '') +
+			(w || '') +
+			(h ? 'x' + h : '')
+		);
+	}
+	$.createTextImage = (str, w, h) => {
+		let og = $._textCache;
+		$._textCache = true;
+		$._useCache = true;
+		$.text(str, 0, 0, w, h);
+		$._useCache = false;
+		let k = _genTextImageKey(str, w, h);
+		$._textCache = og;
+		return $._tic.get(k);
+	};
+	$.text = (str, x, y, w, h) => {
+		if (str === undefined) return;
+		str = str.toString();
+		if (!$._doFill && !$._doStroke) return;
+		let c, ti, k, cX, cY;
+		let t = ctx.getTransform();
+		let useCache = $._useCache || ($._textCache && (t.b != 0 || t.c != 0));
+		if (!useCache) {
+			c = ctx;
+			cX = x;
+			cY = y;
+		} else {
+			k = _genTextImageKey(str, w, h);
+			ti = $._tic.get(k);
+			if (ti) {
+				$.textImage(ti, x, y);
+				return;
+			}
+			ti = $.createGraphics(1, 1);
+			c = ti._ctx;
+		}
+		c.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
+		let lines = str.split('\n');
+		if (useCache) {
+			cX = 0;
+			cY = $._textLeading * lines.length;
+			let m = c.measureText(' ');
+			ti._ascent = m.fontBoundingBoxAscent;
+			ti._descent = m.fontBoundingBoxDescent;
+			h ??= cY + ti._descent;
+			ti.resizeCanvas(Math.ceil($.textWidth(str)), Math.ceil(h));
+			ti.pixelDensity($._pixelDensity);
+
+			c.fillStyle = ctx.fillStyle;
+			c.strokeStyle = ctx.strokeStyle;
+		}
+		for (let i = 0; i < lines.length; i++) {
+			if ($._doStroke && $._strokeSet) c.strokeText(lines[i], cX, cY);
+			let f = c.fillStyle;
+			if (!$._fillSet) c.fillStyle = 'black';
+			if ($._doFill) c.fillText(lines[i], cX, cY);
+			if (!$._fillSet) c.fillStyle = f;
+			cY += $._textLeading;
+			if (cY > h) break;
+		}
+		if (useCache) {
+			$._tic.set(k, ti);
+			$.textImage(ti, x, y);
+		}
+	};
+	$.textImage = (img, x, y) => {
+		let og = $._imageMode;
+		$._imageMode = 'corner';
+		if (ctx.textAlign == 'center') x -= img.width * 0.5;
+		else if (ctx.textAlign == 'right') x -= img.width;
+		if (ctx.textBaseline == 'alphabetic') y -= $._textLeading;
+		if (ctx.textBaseline == 'middle') y -= img._ascent * 0.5 + img._descent;
+		else if (ctx.textBaseline == 'bottom') y -= img._ascent + img._descent;
+		else if (ctx.textBaseline == 'top') y -= img._descent;
+		$.image(img, x, y);
+		$._imageMode = og;
+	};
 
 	//================================================================
 	// RANDOM

package/q5.min.js

@@ -1,7 +1,7 @@
 /**
  * q5.js
- * @version 1.2
+ * @version 1.4
  * @author quinton-ashley and LingDong-
  * @license GPL-3.0-only
  */
-function Q5(e,t){if("auto"==e){if(void 0===window.setup)return;e="global"}1==arguments.length&&"string"!=typeof e&&"function"!=typeof e&&(t=arguments[0],e=null),"global"==e&&(Q5._hasGlobal=!0);let a=this;a.canvas=document.createElement("canvas");let o=a.canvas.getContext("2d");if(a.canvas.classList.add("p5Canvas","q5Canvas"),a.canvas.id="defaultCanvas"+Q5._instanceCount++,a.width=100,a.height=100,a.canvas.width=a.width,a.canvas.height=a.height,a._windowResizedFn=()=>{},"graphics"!=e&&"image"!=e){function n(){t??=document.getElementsByTagName("main")[0],t??=document.body,a.canvas.parent(t)}a._resize=()=>{a.frameCount>1&&(a._shouldResize=!0)},a.canvas.parent=e=>{"string"==typeof e&&(e=document.getElementById(e)),e.append(a.canvas),"undefined"!=typeof ResizeObserver?(a._ro&&a._ro.disconnect(),a._ro=new ResizeObserver(a._resize),a._ro.observe(t)):0==a.frameCount&&addEventListener("resize",a._resize)},document.body?n():window.addEventListener("load",n)}p(),a.MAGIC=161533525,a.RGB=0,a.HSV=1,a.HSB=1,a.CHORD=0,a.PIE=1,a.OPEN=2,a.RADIUS="radius",a.CORNER="corner",a.CORNERS="corners",a.ROUND="round",a.SQUARE="butt",a.PROJECT="square",a.MITER="miter",a.BEVEL="bevel",a.CLOSE=1,a.BLEND="source-over",a.REMOVE="destination-out",a.ADD="lighter",a.DARKEST="darken",a.LIGHTEST="lighten",a.DIFFERENCE="difference",a.SUBTRACT="subtract",a.EXCLUSION="exclusion",a.MULTIPLY="multiply",a.SCREEN="screen",a.REPLACE="copy",a.OVERLAY="overlay",a.HARD_LIGHT="hard-light",a.SOFT_LIGHT="soft-light",a.DODGE="color-dodge",a.BURN="color-burn",a.NORMAL="normal",a.ITALIC="italic",a.BOLD="bold",a.BOLDITALIC="italic bold",a.CENTER="center",a.LEFT="left",a.RIGHT="right",a.TOP="top",a.BOTTOM="bottom",a.BASELINE="alphabetic",a.LANDSCAPE="landscape",a.PORTRAIT="portrait",a.ALT=18,a.BACKSPACE=8,a.CONTROL=17,a.DELETE=46,a.DOWN_ARROW=40,a.ENTER=13,a.ESCAPE=27,a.LEFT_ARROW=37,a.OPTION=18,a.RETURN=13,a.RIGHT_ARROW=39,a.SHIFT=16,a.TAB=9,a.UP_ARROW=38,a.DEGREES="degrees",a.RADIANS="radians",a.HALF_PI=Math.PI/2,a.PI=Math.PI,a.QUARTER_PI=Math.PI/4,a.TAU=2*Math.PI,a.TWO_PI=2*Math.PI,a.THRESHOLD=1,a.GRAY=2,a.OPAQUE=3,a.INVERT=4,a.POSTERIZE=5,a.DILATE=6,a.ERODE=7,a.BLUR=8,a.ARROW="default",a.CROSS="crosshair",a.HAND="pointer",a.MOVE="move",a.TEXT="text",a.VIDEO={video:!0,audio:!1},a.AUDIO={video:!1,audio:!0},a.SHR3=1,a.LCG=2,a.HARDWARE_FILTERS=!0,a.hint=(e,t)=>{a[e]=t},a.frameCount=0,a.deltaTime=16,a.mouseX=0,a.mouseY=0,a.mouseButton=null,a.keyIsPressed=!1,a.mouseIsPressed=!1,a.key=null,a.keyCode=null,a.pixels=[],a.accelerationX=0,a.accelerationY=0,a.accelerationZ=0,a.rotationX=0,a.rotationY=0,a.rotationZ=0,a.relRotationX=0,a.relRotationY=0,a.relRotationZ=0,a.pmouseX=0,a.pmouseY=0,a.pAccelerationX=0,a.pAccelerationY=0,a.pAccelerationZ=0,a.pRotationX=0,a.pRotationY=0,a.pRotationZ=0,a.pRelRotationX=0,a.pRelRotationY=0,a.pRelRotationZ=0,a.touches=[],a._colorMode=a.RGB,a._doStroke=!0,a._doFill=!0,a._strokeSet=!1,a._fillSet=!1,a._ellipseMode=a.CENTER,a._rectMode=a.CORNER,a._curveDetail=20,a._curveAlpha=0,a._loop=!0,a._textFont="sans-serif",a._textSize=12,a._textLeading=12,a._textStyle="normal",a._pixelDensity=1,a._lastFrameTime=0,a._targetFrameRate=null,a._frameRate=a._fps=60,a._tint=null;let r=null,i=!0,s=[],l=null,h=0,c={},d=0,u=null,_=null,m=null;Object.defineProperty(a,"deviceOrientation",{get:()=>window.screen?.orientation?.type}),Object.defineProperty(a,"windowWidth",{get:()=>window.innerWidth}),Object.defineProperty(a,"windowHeight",{get:()=>window.innerHeight}),Object.defineProperty(a,"drawingContext",{get:()=>o}),a.createCanvas=(t,o)=>(a.width=t,a.height=o,a.canvas.width=t*a._pixelDensity,a.canvas.height=o*a._pixelDensity,p(),"graphics"!=e&&"image"!=e&&a.pixelDensity(2),a.canvas),a.resizeCanvas=(t,o)=>{a.width=t,a.height=o,a.canvas.width=t*a._pixelDensity,a.canvas.height=o*a._pixelDensity,"graphics"!=e&&"image"!=e&&a.pixelDensity(2)},a.createGraphics=(e,t)=>{let a=new Q5("graphics");return a.createCanvas(e,t),a},a.createImage=(e,t)=>new Q5.Image(e,t),a.pixelDensity=e=>(void 0===e||(a._pixelDensity=e,a.canvas.width=Math.ceil(a.width*e),a.canvas.height=Math.ceil(a.height*e),a.canvas.style.width=a.width+"px",a.canvas.style.height=a.height+"px",o.scale(a._pixelDensity,a._pixelDensity),p()),a._pixelDensity),a.map=(e,t,a,o,n,r)=>{let i=o+1*(e-t)/(a-t)*(n-o);return r?o<n?Math.min(Math.max(i,o),n):Math.min(Math.max(i,n),o):i},a.lerp=(e,t,a)=>e*(1-a)+t*a,a.constrain=(e,t,a)=>Math.min(Math.max(e,t),a),a.dist=function(){return 4==arguments.length?Math.hypot(arguments[0]-arguments[2],arguments[1]-arguments[3]):Math.hypot(arguments[0]-arguments[3],arguments[1]-arguments[4],arguments[2]-arguments[5])},a.norm=(e,t,o)=>a.map(e,t,o,0,1),a.sq=e=>e*e,a.fract=e=>e-Math.floor(e),a.angleMode=e=>a._angleMode=e,a._DEGTORAD=Math.PI/180,a._RADTODEG=180/Math.PI,a.degrees=e=>e*a._RADTODEG,a.radians=e=>e*a._DEGTORAD,a.abs=Math.abs,a.ceil=Math.ceil,a.exp=Math.exp,a.floor=Math.floor,a.log=Math.log,a.mag=Math.hypot,a.max=Math.max,a.min=Math.min,a.round=Math.round,a.pow=Math.pow,a.sqrt=Math.sqrt,a.sin=e=>("degrees"==a._angleMode&&(e=a.radians(e)),Math.sin(e)),a.cos=e=>("degrees"==a._angleMode&&(e=a.radians(e)),Math.cos(e)),a.tan=e=>("degrees"==a._angleMode&&(e=a.radians(e)),Math.tan(e)),a.asin=e=>{let t=Math.asin(e);return"degrees"==a._angleMode&&(t=a.degrees(t)),t},a.acos=e=>{let t=Math.acos(e);return"degrees"==a._angleMode&&(t=a.degrees(t)),t},a.atan=e=>{let t=Math.atan(e);return"degrees"==a._angleMode&&(t=a.degrees(t)),t},a.atan2=(e,t)=>{let o=Math.atan2(e,t);return"degrees"==a._angleMode&&(o=a.degrees(o)),o},a.nf=(e,t,a)=>{let o=e<0,n=e.toString();return o&&(n=n.slice(1)),n=n.padStart(t,"0"),a>0&&(-1==n.indexOf(".")&&(n+="."),n=n.padEnd(t+1+a,"0")),o&&(n="-"+n),n},a.createVector=(e,t,o)=>new Q5.Vector(e,t,o,a),a.curvePoint=(e,t,a,o,n)=>{const r=n*n*n,i=n*n;return e*(-.5*r+i-.5*n)+t*(1.5*r-2.5*i+1)+a*(-1.5*r+2*i+.5*n)+o*(.5*r-.5*i)},a.bezierPoint=(e,t,a,o,n)=>{const r=1-n;return Math.pow(r,3)*e+3*Math.pow(r,2)*n*t+3*r*Math.pow(n,2)*a+Math.pow(n,3)*o},a.curveTangent=(e,t,a,o,n)=>{const r=n*n;return e*(-3*r/2+2*n-.5)+t*(9*r/2-5*n)+a*(-9*r/2+4*n+.5)+o*(3*r/2-n)},a.bezierTangent=(e,t,a,o,n)=>{const r=1-n;return 3*o*Math.pow(n,2)-3*a*Math.pow(n,2)+6*a*r*n-6*t*r*n+3*t*Math.pow(r,2)-3*e*Math.pow(r,2)},a.Color=Q5.Color,a.colorMode=e=>{a._colorMode=e};let g={aqua:[0,255,255],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],crimson:[220,20,60],darkviolet:[148,0,211],gold:[255,215,0],green:[0,128,0],gray:[128,128,128],hotpink:[255,105,180],indigo:[75,0,130],khaki:[240,230,140],lightgreen:[144,238,144],lime:[0,255,0],magenta:[255,0,255],navy:[0,0,128],orange:[255,165,0],olive:[128,128,0],peachpuff:[255,218,185],pink:[255,192,203],purple:[128,0,128],red:[255,0,0],skyblue:[135,206,235],tan:[210,180,140],turquoise:[64,224,208],transparent:[0,0,0,0],white:[255,255,255],violet:[238,130,238],yellow:[255,255,0]};function p(){o.fillStyle="white",o.strokeStyle="black",o.lineCap="round",o.lineJoin="miter"}function v(e){let t=a._angleMode==a.DEGREES?180:Math.PI,o=2*t;if(0<=e&&e<=o)return e;for(;e<0;)e+=o;for(;e>=t;)e-=o;return e}function f(e,t,n,r,i,s,l,h){if(!a._doFill&&!a._doStroke)return;let c=v(i),d=v(s);if(c>d&&([c,d]=[d,c]),0==c){if(0==d)return;if(a._angleMode==a.DEGREES&&360==d||d==a.TAU)return a.ellipse(e,t,n,r)}o.beginPath();for(let i=0;i<h+1;i++){let s=i/h,l=a.lerp(c,d,s),u=a.cos(l)*n/2,_=a.sin(l)*r/2;o[i?"lineTo":"moveTo"](e+u,t+_)}l==a.CHORD?o.closePath():l==a.PIE&&(o.lineTo(e,t),o.closePath()),a._doFill&&o.fill(),a._doStroke&&o.stroke()}function y(e,t,n,r){(a._doFill||a._doStroke)&&(o.beginPath(),o.ellipse(e,t,n/2,r/2,0,0,a.TAU),a._doFill&&o.fill(),a._doStroke&&o.stroke())}function x(e,t,n,r,i,s,l,h){if(!a._doFill&&!a._doStroke)return;if(void 0===i)return function(e,t,n,r){a._doFill&&o.fillRect(e,t,n,r),a._doStroke&&o.strokeRect(e,t,n,r)}(e,t,n,r);if(void 0===s)return x(e,t,n,r,i,i,i,i);const c=Math.min(Math.abs(r),Math.abs(n))/2;i=Math.min(c,i),s=Math.min(c,s),h=Math.min(c,h),l=Math.min(c,l),o.beginPath(),o.moveTo(e+i,t),o.arcTo(e+n,t,e+n,t+r,s),o.arcTo(e+n,t+r,e,t+r,l),o.arcTo(e,t+r,e,t,h),o.arcTo(e,t,e+n,t,i),o.closePath(),a._doFill&&o.fill(),a._doStroke&&o.stroke()}function M(){s=[]}a.color=function(){let e=arguments;if(1==e.length){if("string"==typeof e[0])return"#"==e[0][0]?new Q5.Color(parseInt(e[0].slice(1,3),16),parseInt(e[0].slice(3,5),16),parseInt(e[0].slice(5,7),16),1):g[e[0]]?new Q5.Color(...g[e[0]],1):new Q5.Color(0,0,0,1);if("number"!=typeof e[0]&&786698==e[0].MAGIC)return e[0]}if(a._colorMode==a.RGB){if(1==e.length)return new Q5.Color(e[0],e[0],e[0],1);if(2==e.length)return new Q5.Color(e[0],e[0],e[0],e[1]/255);if(3==e.length)return new Q5.Color(e[0],e[1],e[2],1);if(4==e.length)return new Q5.Color(e[0],e[1],e[2],e[3]/255)}else{if(1==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(0,0,e[0]/100),1);if(2==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(0,0,e[0]/100),e[1]/255);if(3==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(e[0],e[1]/100,e[2]/100),1);if(4==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(e[0],e[1]/100,e[2]/100),e[3])}return null},a.red=e=>e._r,a.green=e=>e._g,a.blue=e=>e._b,a.alpha=e=>255*e._a,a.hue=e=>(e._inferHSV(),e._h),a.saturation=e=>(e._inferHSV(),e._s),a.brightness=e=>(e._inferHSV(),e._v),a.lightness=e=>100*(.2126*e._r+.7152*e._g+.0722*e._b)/255,a.lerpColor=(e,t,o)=>a._colorMode==a.RGB?new Q5.Color(a.constrain(a.lerp(e._r,t._r,o),0,255),a.constrain(a.lerp(e._g,t._g,o),0,255),a.constrain(a.lerp(e._b,t._b,o),0,255),a.constrain(a.lerp(e._a,t._a,o),0,1)):(e._inferHSV(),t._inferHSV(),new Q5.Color(a.constrain(function(e,t,o){var n=[[Math.abs(t-e),a.map(o,0,1,e,t)],[Math.abs(t+360-e),a.map(o,0,1,e,t+360)],[Math.abs(t-360-e),a.map(o,0,1,e,t-360)]];return n.sort(((e,t)=>e[0]-t[0])),(n[0][1]+720)%360}(e._h,t._h,o),0,360),a.constrain(a.lerp(e._s,t._s,o),0,100),a.constrain(a.lerp(e._v,t._v,o),0,100),a.constrain(a.lerp(e._a,t._a,o),0,1))),a.strokeWeight=e=>{a._doStroke=e>0,o.lineWidth=e},a.stroke=function(){if(a._doStroke=!0,a._strokeSet=!0,"string"==typeof arguments[0])return void(o.strokeStyle=arguments[0]);let e=a.color(...arguments);e._a<=0?a._doStroke=!1:o.strokeStyle=e},a.noStroke=()=>a._doStroke=!1,a.fill=function(){if(a._doFill=!0,a._fillSet=!0,"string"==typeof arguments[0])return void(o.fillStyle=arguments[0]);let e=a.color(...arguments);e._a<=0?a._doFill=!1:o.fillStyle=e},a.noFill=()=>a._doFill=!1,a.smooth=()=>a._smooth=!0,a.noSmooth=()=>a._smooth=!1,a.blendMode=e=>o.globalCompositeOperation=e,a.strokeCap=e=>o.lineCap=e,a.strokeJoin=e=>o.lineJoin=e,a.ellipseMode=e=>a._ellipseMode=e,a.rectMode=e=>a._rectMode=e,a.curveDetail=e=>a._curveDetail=e,a.curveAlpha=e=>a._curveAlpha=e,a.curveTightness=e=>a._curveAlpha=e,a.clear=()=>{o.clearRect(0,0,a.canvas.width,a.canvas.height)},a.background=function(){if(arguments[0]&&arguments[0].MAGIC==a.MAGIC)return a.image(arguments[0],0,0,a.width,a.height);o.save(),o.resetTransform(),o.fillStyle="string"==typeof arguments[0]?arguments[0]:a.color(...Array.from(arguments)),o.fillRect(0,0,a.canvas.width,a.canvas.height),o.restore()},a.line=(e,t,n,r)=>{a._doStroke&&(o.beginPath(),o.moveTo(e,t),o.lineTo(n,r),o.stroke())},a.arc=(e,t,o,n,r,i,s,l)=>{if(r==i)return a.ellipse(e,t,o,n);l??=25,s??=a.PIE,a._ellipseMode==a.CENTER?f(e,t,o,n,r,i,s,l):a._ellipseMode==a.RADIUS?f(e,t,2*o,2*n,r,i,s,l):a._ellipseMode==a.CORNER?f(e+o/2,t+n/2,o,n,r,i,s,l):a._ellipseMode==a.CORNERS&&f((e+o)/2,(t+n)/2,o-e,n-t,r,i,s,l)},a.ellipse=(e,t,o,n)=>{n??=o,a._ellipseMode==a.CENTER?y(e,t,o,n):a._ellipseMode==a.RADIUS?y(e,t,2*o,2*n):a._ellipseMode==a.CORNER?y(e+o/2,t+n/2,o,n):a._ellipseMode==a.CORNERS&&y((e+o)/2,(t+n)/2,o-e,n-t)},a.circle=(e,t,o)=>a.ellipse(e,t,o,o),a.point=(e,t)=>{e.x&&(t=e.y,e=e.x),o.beginPath(),o.ellipse(e,t,.4,.4,0,0,a.TAU),o.stroke()},a.rect=(e,t,o,n,r,i,s,l)=>{a._rectMode==a.CENTER?x(e-o/2,t-n/2,o,n,r,i,s,l):a._rectMode==a.RADIUS?x(e-o,t-n,2*o,2*n,r,i,s,l):a._rectMode==a.CORNER?x(e,t,o,n,r,i,s,l):a._rectMode==a.CORNERS&&x(e,t,o-e,n-t,r,i,s,l)},a.square=(e,t,o,n,r,i,s)=>a.rect(e,t,o,o,n,r,i,s),a.beginShape=()=>{M(),o.beginPath(),i=!0},a.beginContour=()=>{o.closePath(),M(),i=!0},a.endContour=()=>{M(),i=!0},a.vertex=(e,t)=>{M(),i?o.moveTo(e,t):o.lineTo(e,t),i=!1},a.bezierVertex=(e,t,a,n,r,i)=>{M(),o.bezierCurveTo(e,t,a,n,r,i)},a.quadraticVertex=(e,t,a,n)=>{M(),o.quadraticCurveTo(e,t,a,n)},a.bezier=(e,t,o,n,r,i,s,l)=>{a.beginShape(),a.vertex(e,t),a.bezierVertex(o,n,r,i,s,l),a.endShape()},a.triangle=(e,t,o,n,r,i)=>{a.beginShape(),a.vertex(e,t),a.vertex(o,n),a.vertex(r,i),a.endShape(a.CLOSE)},a.quad=(e,t,o,n,r,i,s,l)=>{a.beginShape(),a.vertex(e,t),a.vertex(o,n),a.vertex(r,i),a.vertex(s,l),a.endShape(a.CLOSE)},a.endShape=e=>{M(),e&&o.closePath(),a._doFill&&o.fill(),a._doStroke&&o.stroke(),a._doFill||a._doStroke||(o.save(),o.fillStyle="none",o.fill(),o.restore())},a.curveVertex=(e,t)=>{if(s.push([e,t]),s.length<4)return;let n=function(e,t,a,o,n,r,i,s,l,h){function c(e,t,a,o,n,r){let i=Math.pow(o-t,2)+Math.pow(n-a,2);return Math.pow(i,.5*r)+e}let d=[],u=c(0,e,t,a,o,h),_=c(u,a,o,n,r,h),m=c(_,n,r,i,s,h);for(let h=0;h<l;h++){let c=u+h/(l-1)*(_-u),g=[(u-c)/(u-0),(c-0)/(u-0),(_-c)/(_-u),(c-u)/(_-u),(m-c)/(m-_),(c-_)/(m-_),(_-c)/(_-0),(c-0)/(_-0),(m-c)/(m-u),(c-u)/(m-u)];for(let e=0;e<g.length;e+=2)isNaN(g[e])&&(g[e]=1,g[e+1]=0),isFinite(g[e])||(g[e]>0?(g[e]=1,g[e+1]=0):(g[e]=0,g[e+1]=1));let p=e*g[0]+a*g[1],v=t*g[0]+o*g[1],f=a*g[2]+n*g[3],y=o*g[2]+r*g[3],x=n*g[4]+i*g[5],M=r*g[4]+s*g[5],w=p*g[6]+f*g[7],R=v*g[6]+y*g[7],S=f*g[8]+x*g[9],I=y*g[8]+M*g[9],E=w*g[2]+S*g[3],C=R*g[2]+I*g[3];d.push([E,C])}return d}(...s[s.length-4],...s[s.length-3],...s[s.length-2],...s[s.length-1],a._curveDetail,a._curveAlpha);for(let e=0;e<n.length;e++)i?o.moveTo(...n[e]):o.lineTo(...n[e]),i=!1},a.curve=(e,t,o,n,r,i,s,l)=>{a.beginShape(),a.curveVertex(e,t),a.curveVertex(o,n),a.curveVertex(r,i),a.curveVertex(s,l),a.endShape()},a.translate=(e,t)=>o.translate(e,t),a.rotate=e=>{"degrees"==a._angleMode&&(e=a.radians(e)),o.rotate(e)},a.scale=(e,t)=>{t??=e,o.scale(e,t)},a.applyMatrix=(e,t,a,n,r,i)=>{o.transform(e,t,a,n,r,i)},a.shearX=e=>{o.transform(1,0,a.tan(e),1,0,0)},a.shearY=e=>{o.transform(1,a.tan(e),0,1,0,0)},a.resetMatrix=()=>{o.resetTransform(),o.scale(a._pixelDensity,a._pixelDensity)},a._styleNames=["_doStroke","_doFill","_strokeSet","_fillSet","_tint","_imageMode","_rectMode","_ellipseMode","_textFont","_textLeading","_leadingSet","_textSize","_textAlign","_textBaseline","_textStyle","_textWrap"],a._ctxStyleNames=["strokeStyle","fillStyle","lineWidth","lineCap","lineJoin"],a._styles=[],a._ctxStyles=[],a.pushMatrix=a.push=()=>{o.save();let e={};for(let t of a._styleNames)e[t]=a[t];a._styles.push(e);let t={};for(let e of a._ctxStyleNames)t[e]=o[e];a._ctxStyles.push(t)},a.popMatrix=a.pop=()=>{o.restore();let e=a._styles.pop();for(let t of a._styleNames)a[t]=e[t];let t=a._ctxStyles.pop();for(let e of a._ctxStyleNames)o[e]=t[e]},a.imageMode=e=>a._imageMode=e,a.image=(e,t,n,r,i,s,l,h,c)=>{let d=e.MAGIC==a.MAGIC?e.canvas:e;function u(){if(e.MAGIC!=a.MAGIC||!a._tint)return;let t=e.canvas.getContext("2d");t.save(),t.resetTransform(),t.clearRect(0,0,t.canvas.width,t.canvas.height),t.drawImage(_.canvas,0,0),t.restore()}if(e.MAGIC==a.MAGIC&&null!=a._tint&&(!function(e,t){null==_&&(_=document.createElement("canvas").getContext("2d"));t??=e||o.canvas.height,e??=o.canvas.width,(_.canvas.width!=e||_.canvas.height!=t)&&(_.canvas.width=e,_.canvas.height=t)}(e.canvas.width,e.canvas.height),_.drawImage(e.canvas,0,0),e.tinted(a._tint)),r||(e.MAGIC==a.MAGIC||e.width?(r=e.width,i=e.height):(r=e.videoWidth,i=e.videoHeight)),"center"==a._imageMode&&(t-=.5*r,n-=.5*i),void 0===s)return o.drawImage(d,t,n,r,i),void u();h??=d.width,c??=d.height,o.drawImage(d,s,l,h,c,t,n,r,i),u()},a.loadPixels=()=>{l=o.getImageData(0,0,a.canvas.width,a.canvas.height),a.pixels=l.data},a.updatePixels=()=>{null!=l&&o.putImageData(l,0,0)},a._incrementPreload=()=>h++,a._decrementPreload=()=>h--,a.loadImage=(e,t)=>{h++;let o=a.createImage(100,100),n=o.canvas.getContext("2d"),r=new window.Image;return r.src=e,r.crossOrigin="Anonymous",r.onload=()=>{o.width=n.canvas.width=r.naturalWidth,o.height=n.canvas.height=r.naturalHeight,n.drawImage(r,0,0),h--,t&&t(o)},r.onerror=e=>{throw h--,e},o};let w={};function R(e,t){null==u&&(u=document.createElement("canvas").getContext("2d")),t??=e||o.canvas.height,e??=o.canvas.width,u.canvas.width==e&&u.canvas.height==t||(u.canvas.width=e,u.canvas.height=t)}function S(){let e=o.canvas.width*o.canvas.height*4;m&&e==m.length||(m=new Uint8ClampedArray(e))}function I(e){u.clearRect(0,0,u.canvas.width,u.canvas.height),u.filter=e,u.drawImage(o.canvas,0,0),o.save(),o.resetTransform(),o.clearRect(0,0,o.canvas.width,o.canvas.height),o.drawImage(u.canvas,0,0),o.restore()}if(w[a.THRESHOLD]=(e,t)=>{void 0===t?t=127.5:t*=255;for(let a=0;a<e.length;a+=4){const o=.2126*e[a]+.7152*e[a+1]+.0722*e[a+2];e[a]=e[a+1]=e[a+2]=o>=t?255:0}},w[a.GRAY]=e=>{for(let t=0;t<e.length;t+=4){const a=.2126*e[t]+.7152*e[t+1]+.0722*e[t+2];e[t]=e[t+1]=e[t+2]=a}},w[a.OPAQUE]=e=>{for(let t=0;t<e.length;t+=4)e[t+3]=255},w[a.INVERT]=e=>{for(let t=0;t<e.length;t+=4)e[t]=255-e[t],e[t+1]=255-e[t+1],e[t+2]=255-e[t+2]},w[a.POSTERIZE]=(e,t)=>{let a=t-1;for(let o=0;o<e.length;o+=4)e[o]=255*(e[o]*t>>8)/a,e[o+1]=255*(e[o+1]*t>>8)/a,e[o+2]=255*(e[o+2]*t>>8)/a},w[a.DILATE]=e=>{S(),m.set(e);let[t,a]=[o.canvas.width,o.canvas.height];for(let o=0;o<a;o++)for(let n=0;n<t;n++){let r=4*Math.max(n-1,0),i=4*Math.min(n+1,t-1),s=4*Math.max(o-1,0)*t,l=4*Math.min(o+1,a-1)*t,h=4*o*t,c=4*n;for(let t=0;t<4;t++){let a=t+s,o=t+l,n=t+h;e[h+c+t]=Math.max(m[a+c],m[n+r],m[n+c],m[n+i],m[o+c])}}},w[a.ERODE]=e=>{S(),m.set(e);let[t,a]=[o.canvas.width,o.canvas.height];for(let o=0;o<a;o++)for(let n=0;n<t;n++){let r=4*Math.max(n-1,0),i=4*Math.min(n+1,t-1),s=4*Math.max(o-1,0)*t,l=4*Math.min(o+1,a-1)*t,h=4*o*t,c=4*n;for(let t=0;t<4;t++){let a=t+s,o=t+l,n=t+h;e[h+c+t]=Math.min(m[a+c],m[n+r],m[n+c],m[n+i],m[o+c])}}},w[a.BLUR]=(e,t)=>{t=t||1,t=Math.floor(t*a._pixelDensity),S(),m.set(e);let n=2*t+1;let r=function(e){let a=new Float32Array(e),o=.3*t+.8,n=o*o*2;for(let t=0;t<e;t++){let r=t-e/2,i=Math.exp(-r*r/n)/(2.5066282746*o);a[t]=i}return a}(n),[i,s]=[o.canvas.width,o.canvas.height];for(let a=0;a<s;a++)for(let o=0;o<i;o++){let s=0,l=0,h=0,c=0;for(let e=0;e<n;e++){let n=4*(a*i+Math.min(Math.max(o-t+e,0),i-1));s+=m[n]*r[e],l+=m[n+1]*r[e],h+=m[n+2]*r[e],c+=m[n+3]*r[e]}let d=4*(a*i+o);e[d]=s,e[d+1]=l,e[d+2]=h,e[d+3]=c}m.set(e);for(let a=0;a<s;a++)for(let o=0;o<i;o++){let l=0,h=0,c=0,d=0;for(let e=0;e<n;e++){let n=4*(Math.min(Math.max(a-t+e,0),s-1)*i+o);l+=m[n]*r[e],h+=m[n+1]*r[e],c+=m[n+2]*r[e],d+=m[n+3]*r[e]}let u=4*(a*i+o);e[u]=l,e[u+1]=h,e[u+2]=c,e[u+3]=d}},a.filter=(e,t)=>{if(a.HARDWARE_FILTERS&&null!=o.filter)if(R(),e==a.THRESHOLD){t??=.5,t=Math.max(t,1e-5),I(`saturate(0%) brightness(${Math.floor(.5/t*100)}%) contrast(1000000%)`)}else if(e==a.GRAY)I("saturate(0%)");else if(e==a.OPAQUE)u.fillStyle="black",u.fillRect(0,0,u.canvas.width,u.canvas.height),u.drawImage(o.canvas,0,0),o.save(),o.resetTransform(),o.drawImage(u.canvas,0,0),o.restore();else if(e==a.INVERT)I("invert(100%)");else if(e==a.BLUR)I(`blur(${Math.ceil(t*a._pixelDensity/1)||1}px)`);else{let a=o.getImageData(0,0,o.canvas.width,o.canvas.height);w[e](a.data,t),o.putImageData(a,0,0)}else{let a=o.getImageData(0,0,o.canvas.width,o.canvas.height);w[e](a.data,t),o.putImageData(a,0,0)}},a.resize=(e,t)=>{R(),u.drawImage(o.canvas,0,0),a.width=e,a.height=t,o.canvas.width=e*a._pixelDensity,o.canvas.height=t*a._pixelDensity,o.save(),o.resetTransform(),o.clearRect(0,0,o.canvas.width,o.canvas.height),o.drawImage(u.canvas,0,0,o.canvas.width,o.canvas.height),o.restore()},a.get=(e,t,n,r)=>{if(void 0!==e&&void 0===n){let a=o.getImageData(e,t,1,1).data;return new Q5.Color(a[0],a[1],a[2],a[3]/255)}e=e||0,t=t||0,n=n||a.width,r=r||a.height;let i=a.createGraphics(n,r);i.pixelDensity(a._pixelDensity);let s=o.getImageData(e*a._pixelDensity,t*a._pixelDensity,n*a._pixelDensity,r*a._pixelDensity);return i.canvas.getContext("2d").putImageData(s,0,0),i},a.set=(e,t,n)=>{if(n.MAGIC==a.MAGIC){let o=a._tint;return a._tint=null,a.image(n,e,t),void(a._tint=o)}for(let r=0;r<a._pixelDensity;r++)for(let i=0;i<a._pixelDensity;i++){let s=4*((t*a._pixelDensity+r)*o.canvas.width+e*a._pixelDensity+i);a.pixels[s]=n._r,a.pixels[s+1]=n._g,a.pixels[s+2]=n._b,a.pixels[s+3]=255*n._a}},a.tinted=function(){let e=a.color(...Array.from(arguments)),t=e._a;e._a=1,R(),u.clearRect(0,0,u.canvas.width,u.canvas.height),u.fillStyle=e,u.fillRect(0,0,u.canvas.width,u.canvas.height),u.globalCompositeOperation="multiply",u.drawImage(o.canvas,0,0),u.globalCompositeOperation="source-over",o.save(),o.resetTransform();let n=o.globalCompositeOperation;o.globalCompositeOperation="source-in",o.drawImage(u.canvas,0,0),o.globalCompositeOperation=n,o.restore(),u.globalAlpha=t,u.clearRect(0,0,u.canvas.width,u.canvas.height),u.drawImage(o.canvas,0,0),u.globalAlpha=1,o.save(),o.resetTransform(),o.clearRect(0,0,o.canvas.width,o.canvas.height),o.drawImage(u.canvas,0,0),o.restore()},a.tint=function(){a._tint=a.color(...Array.from(arguments))},a.noTint=()=>a._tint=null,a.mask=e=>{o.save(),o.resetTransform();let t=o.globalCompositeOperation;o.globalCompositeOperation="destination-in",o.drawImage(e.canvas,0,0),o.globalCompositeOperation=t,o.restore()},a.clearTemporaryBuffers=()=>{u=null,_=null,m=null},a._save=(e,t,a)=>{if(t=t||"untitled","jpg"==(a=a||"png")||"png"==a)e=e.toDataURL();else{let t="text/plain";"json"==a&&("string"!=typeof e&&(e=JSON.stringify(e)),t="text/json"),e=new Blob([e],{type:t}),e=URL.createObjectURL(e)}let o=document.createElement("a");o.href=e,o.download=t+"."+a,document.body.append(o),o.click(),document.body.removeChild(o),URL.revokeObjectURL(o.href)},a.save=(e,t,n)=>{if((!e||"string"==typeof e&&(!t||!n&&t.length<5))&&(n=t,t=e,e=o.canvas),n)return a._save(e,t,n);t?(t=t.split("."),a._save(e,t[0],t.at(-1))):a._save(e)},a.canvas.save=a.save,a.saveCanvas=a.save,a.remove=()=>{a.noLoop(),a.canvas.remove()},"image"==e)return;a.loadFont=(e,t)=>{let a=e.split("/"),o=a[a.length-1].split(".")[0].replace(" ",""),n=`@font-face {\n        font-family: '${o}';\n        src: url('${e}');\n      }`;const r=document.createElement("style");return r.textContent=n,document.head.append(r),o},a.textFont=e=>{a._textFont=e},a.textSize=e=>{if(void 0===e)return a._textSize;a._textLeading=e,a._textSize=e},a.textLeading=e=>{a._textLeading=e},a.textStyle=e=>{a._textStyle=e},a.textAlign=(e,t)=>{o.textAlign=e,t&&(o.textBaseline=t==a.CENTER?"middle":t)},a.text=(e,t,n,r)=>{if(void 0===e)return;if(e=e.toString(),!a._doFill&&!a._doStroke)return;o.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`;let i=e.split("\n");for(let e=0;e<i.length;e++){let s=o.fillStyle;a._fillSet||(o.fillStyle="black"),a._doFill&&o.fillText(i[e],t,n,r),a._doStroke&&a._strokeSet&&o.strokeText(i[e],t,n,r),a._fillSet||(o.fillStyle=s),n+=a._textLeading}},a.textWidth=e=>(o.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,o.measureText(e).width),a.textAscent=e=>(o.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,o.measureText(e).actualBoundingBoxAscent),a.textDescent=e=>(o.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,o.measureText(e).actualBoundingBoxDescent);var E,C=4095,b=4,D=.5,A=e=>.5*(1-Math.cos(e*Math.PI));a.noise=(e,t,a)=>{if(t??=0,a??=0,null==E){E=new Array(4096);for(var o=0;o<4096;o++)E[o]=Math.random()}e<0&&(e=-e),t<0&&(t=-t),a<0&&(a=-a);for(var n,r,i,s,l,h=Math.floor(e),c=Math.floor(t),d=Math.floor(a),u=e-h,_=t-c,m=a-d,g=0,p=.5,v=0;v<b;v++){var f=h+(c<<4)+(d<<8);n=A(u),r=A(_),i=E[f&C],i+=n*(E[f+1&C]-i),s=E[f+16&C],i+=r*((s+=n*(E[f+16+1&C]-s))-i),s=E[(f+=256)&C],s+=n*(E[f+1&C]-s),l=E[f+16&C],s+=r*((l+=n*(E[f+16+1&C]-l))-s),g+=(i+=A(m)*(s-i))*p,p*=D,h<<=1,c<<=1,d<<=1,(u*=2)>=1&&(h++,u--),(_*=2)>=1&&(c++,_--),(m*=2)>=1&&(d++,m--)}return g},a.noiseDetail=(e,t)=>{e>0&&(b=e),t>0&&(D=t)};const T=()=>{let e,t,a=4294967295;return{setSeed(o){e=t=(null==o?Math.random()*a:o)>>>0},getSeed:()=>t,rand:()=>(e^=e<<17,e^=e>>13,e^=e<<5,(e>>>0)/a)}};let P=T();P.setSeed(),a.noiseSeed=e=>{let t=void 0===e?4294967295*Math.random():e;E||(E=new Float32Array(4096));for(var a=0;a<4096;a++)t^=t<<17,t^=t>>13,t^=t<<5,E[a]=(t>>>0)/4294967295},a.randomSeed=e=>P.setSeed(e),a.random=(e,t)=>void 0===e?P.rand():"number"==typeof e?void 0!==t?P.rand()*(t-e)+e:P.rand()*e:e[~~(e.length*P.rand())],a.randomGenerator=e=>{e==a.LCG?P=(()=>{const e=4294967296;let t,a;return{setSeed(o){a=t=(null==o?Math.random()*e:o)>>>0},getSeed:()=>t,rand:()=>(a=(1664525*a+1013904223)%e,a/e)}})():e==a.SHR3&&(P=T()),P.setSeed()};var O=new function(){var e,t,a,o=new Array(128),n=new Array(256),r=new Array(128),i=new Array(128),s=new Array(256),l=new Array(256),h=()=>4294967296*P.rand()-2147483648,c=()=>.5+2.328306e-10*(h()<<0),d=()=>{for(var t,n,s,l,d=3.44262;;){if(t=a*r[e],0==e){do{s=c(),l=c(),t=.2904764*-Math.log(s),n=-Math.log(l)}while(n+n<t*t);return a>0?d+t:-d-t}if(i[e]+c()*(i[e-1]-i[e])<Math.exp(-.5*t*t))return t;if(a=h(),e=127&a,Math.abs(a)<o[e])return a*r[e]}},u=()=>{for(var a;;){if(0==e)return 7.69711-Math.log(c());if(a=t*s[e],l[e]+c()*(l[e-1]-l[e])<Math.exp(-a))return a;if((t=h())<n[e=255&t])return t*s[e]}};this.SHR3=h,this.UNI=c,this.RNOR=()=>(a=h(),e=127&a,Math.abs(a)<o[e]?a*r[e]:d()),this.REXP=()=>(t=h()>>>0)<o[e=255&t]?t*s[e]:u(),this.zigset=()=>{var e,t,a=2147483648,h=4294967296,c=3.442619855899,d=c,u=.00991256303526217,_=7.697117470131487,m=_,g=.003949659822581572;for(e=u/Math.exp(-.5*c*c),o[0]=Math.floor(c/e*a),o[1]=0,r[0]=e/a,r[127]=c/a,i[0]=1,i[127]=Math.exp(-.5*c*c),t=126;t>=1;t--)c=Math.sqrt(-2*Math.log(u/c+Math.exp(-.5*c*c))),o[t+1]=Math.floor(c/d*a),d=c,i[t]=Math.exp(-.5*c*c),r[t]=c/a;for(e=g/Math.exp(-_),n[0]=Math.floor(_/e*h),n[1]=0,s[0]=e/h,s[255]=_/h,l[0]=1,l[255]=Math.exp(-_),t=254;t>=1;t--)_=-Math.log(g/_+Math.exp(-_)),n[t+1]=Math.floor(_/m*h),m=_,l[t]=Math.exp(-_),s[t]=_/h}};function k(){let e=performance.now();if(a._loop)r=a._targetFrameRate?setTimeout(k,1e3/a._targetFrameRate):requestAnimationFrame(k);else if(a.frameCount>0)return;if(r&&0!=a.frameCount){if(e-a._lastFrameTime<1e3/(a._targetFrameRate||60)-5)return}a.deltaTime=e-a._lastFrameTime,a._frameRate=1e3/a.deltaTime,a.frameCount++,a._shouldResize&&(a._windowResizedFn(),a._shouldResize=!1);for(let e of Q5.prototype._methods.pre)e.call(a);M(),i=!0,o.save(),a._drawFn();for(let e of Q5.prototype._methods.post)e.call(a);o.restore();let t=performance.now();a._fps=Math.round(1e3/(t-e)),a._lastFrameTime=e,a.pmouseX=a.mouseX,a.pmouseY=a.mouseY}function z(e){const t=a.canvas.getBoundingClientRect(),o=a.canvas.scrollWidth/a.width||1,n=a.canvas.scrollHeight/a.height||1;return{x:(e.clientX-t.left)/o,y:(e.clientY-t.top)/n,id:e.identifier}}function F(){return a._touchStartedFn.isPlaceHolder&&a._touchMovedFn.isPlaceHolder&&a._touchEndedFn.isPlaceHolder}O.hasInit=!1,a.randomGaussian=(e,t)=>(O.hasInit||(O.zigset(),O.hasInit=!0),O.RNOR()*t+e),a.randomExponential=()=>(O.hasInit||(O.zigset(),O.hasInit=!0),O.REXP()),a.print=console.log,a.cursor=(e,t,o)=>{let n="";e.includes(".")&&(e=`url("${e}")`,n=", auto"),void 0!==t&&(e+=" "+t+" "+o),a.canvas.style.cursor=e+n},a.noCursor=()=>{a.canvas.style.cursor="none"},a.createCapture=e=>{var t=document.createElement("video");return t.playsinline="playsinline",t.autoplay="autoplay",navigator.mediaDevices.getUserMedia(e).then((e=>{t.srcObject=e})),t.style.position="absolute",t.style.opacity=1e-5,t.style.zIndex=-1e3,document.body.append(t),t},a.noLoop=()=>{a._loop=!1,r=null},a.loop=()=>{a._loop=!0,null==r&&k()},a.redraw=()=>k(),a.frameRate=e=>(e&&(a._targetFrameRate=e),a._frameRate),a.getFrameRate=()=>a._frameRate,a.getFPS=()=>a._fps,a._updateMouse=function(e){let t=this,a=t.canvas.getBoundingClientRect(),o=t.canvas.scrollWidth/t.width||1,n=t.canvas.scrollHeight/t.height||1;t.mouseX=(e.clientX-a.left)/o,t.mouseY=(e.clientY-a.top)/n}.bind(a),a._onmousemove=function(e){a._updateMouse(e),this.mouseIsPressed?this._mouseDraggedFn(e):this._mouseMovedFn(e)}.bind(a),a._onmousedown=e=>{a._updateMouse(e),a.mouseIsPressed=!0,a.mouseButton=[a.LEFT,a.CENTER,a.RIGHT][e.button],a._mousePressedFn(e)},a._onmouseup=e=>{a._updateMouse(e),a.mouseIsPressed=!1,a._mouseReleasedFn(e)},a._onclick=e=>{a._updateMouse(e),a.mouseIsPressed=!0,a._mouseClickedFn(e),a.mouseIsPressed=!1},a._onkeydown=e=>{e.repeat||(a.keyIsPressed=!0,a.key=e.key,a.keyCode=e.keyCode,c[a.keyCode]=!0,a._keyPressedFn(e),1==e.key.length&&a._keyTypedFn(e))},a._onkeyup=e=>{a.keyIsPressed=!1,a.key=e.key,a.keyCode=e.keyCode,c[a.keyCode]=!1,a._keyReleasedFn(e)},a.canvas.onmousedown=e=>a._onmousedown(e),a.canvas.onmouseup=e=>a._onmouseup(e),a.canvas.onclick=e=>a._onclick(e),a.keyIsDown=e=>!!c[e],a._ontouchstart=e=>{a.touches=[...e.touches].map(z),F()&&(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseIsPressed=!0,a.mouseButton=a.LEFT,a._mousePressedFn(e)||e.preventDefault()),a._touchStartedFn(e)||e.preventDefault()},a._ontouchmove=e=>{a.touches=[...e.touches].map(z),F()&&(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseIsPressed=!0,a.mouseButton=a.LEFT,a._mouseDraggedFn(e)||e.preventDefault()),a._touchMovedFn(e)||e.preventDefault()},a._ontouchend=e=>{a.touches=[...e.touches].map(z),F()&&(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseIsPressed=!1,a._mouseReleasedFn(e)||e.preventDefault()),a._touchEndedFn(e)||e.preventDefault()},a.canvas.ontouchstart=e=>a._ontouchstart(e),a.canvas.ontouchmove=e=>a._ontouchmove(e),a.canvas.ontouchcancel=a.canvas.ontouchend=e=>a._ontouchend(e),a.hasSensorPermission=!window.DeviceOrientationEvent&&!window.DeviceMotionEvent||!(DeviceOrientationEvent.requestPermission||DeviceMotionEvent.requestPermission),a.requestSensorPermissions=()=>{DeviceOrientationEvent.requestPermission&&DeviceOrientationEvent.requestPermission().then((e=>{"granted"==e&&DeviceMotionEvent.requestPermission&&DeviceMotionEvent.requestPermission().then((e=>{"granted"==e&&(a.hasSensorPermission=!0)})).catch(alert)})).catch(alert)};"undefined"!=typeof window&&(window.ondeviceorientation=e=>{a.pRotationX=a.rotationX,a.pRotationY=a.rotationY,a.pRotationZ=a.rotationZ,a.pRelRotationX=a.relRotationX,a.pRelRotationY=a.relRotationY,a.pRelRotationZ=a.relRotationZ,a.rotationX=e.beta*(Math.PI/180),a.rotationY=e.gamma*(Math.PI/180),a.rotationZ=e.alpha*(Math.PI/180),a.relRotationX=[-a.rotationY,-a.rotationX,a.rotationY][1+~~(window.orientation/90)],a.relRotationY=[-a.rotationX,a.rotationY,a.rotationX][1+~~(window.orientation/90)],a.relRotationZ=a.rotationZ},window.ondevicemotion=e=>{if(a.pAccelerationX=a.accelerationX,a.pAccelerationY=a.accelerationY,a.pAccelerationZ=a.accelerationZ,!e.acceleration){let r=((e,t)=>[(e[0]*t[0]+e[1]*t[1]+e[2]*t[2]+e[3])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15]),(e[4]*t[0]+e[5]*t[1]+e[6]*t[2]+e[7])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15]),(e[8]*t[0]+e[9]*t[1]+e[10]*t[2]+e[11])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15])])((n=a.rotationY,t=[a.cos(n),0,a.sin(n),0,0,1,0,0,-a.sin(n),0,a.cos(n),0,0,0,0,1],o=(e=>[1,0,0,0,0,a.cos(e),-a.sin(e),0,0,a.sin(e),a.cos(e),0,0,0,0,1])(a.rotationX),[t[0]*o[0]+t[1]*o[4]+t[2]*o[8]+t[3]*o[12],t[0]*o[1]+t[1]*o[5]+t[2]*o[9]+t[3]*o[13],t[0]*o[2]+t[1]*o[6]+t[2]*o[10]+t[3]*o[14],t[0]*o[3]+t[1]*o[7]+t[2]*o[11]+t[3]*o[15],t[4]*o[0]+t[5]*o[4]+t[6]*o[8]+t[7]*o[12],t[4]*o[1]+t[5]*o[5]+t[6]*o[9]+t[7]*o[13],t[4]*o[2]+t[5]*o[6]+t[6]*o[10]+t[7]*o[14],t[4]*o[3]+t[5]*o[7]+t[6]*o[11]+t[7]*o[15],t[8]*o[0]+t[9]*o[4]+t[10]*o[8]+t[11]*o[12],t[8]*o[1]+t[9]*o[5]+t[10]*o[9]+t[11]*o[13],t[8]*o[2]+t[9]*o[6]+t[10]*o[10]+t[11]*o[14],t[8]*o[3]+t[9]*o[7]+t[10]*o[11]+t[11]*o[15],t[12]*o[0]+t[13]*o[4]+t[14]*o[8]+t[15]*o[12],t[12]*o[1]+t[13]*o[5]+t[14]*o[9]+t[15]*o[13],t[12]*o[2]+t[13]*o[6]+t[14]*o[10]+t[15]*o[14],t[12]*o[3]+t[13]*o[7]+t[14]*o[11]+t[15]*o[15]]),[0,0,-9.80665]);a.accelerationX=e.accelerationIncludingGravity.x+r[0],a.accelerationY=e.accelerationIncludingGravity.y+r[1],a.accelerationZ=e.accelerationIncludingGravity.z-r[2]}var t,o,n}),a.year=()=>(new Date).getFullYear(),a.day=()=>(new Date).getDay(),a.hour=()=>(new Date).getHours(),a.minute=()=>(new Date).getMinutes(),a.second=()=>(new Date).getSeconds(),a.millis=()=>performance.now()-d,a.storeItem=localStorage.setItem,a.getItem=localStorage.getItem,a.removeItem=localStorage.removeItem,a.clearStorage=localStorage.clear,a._loadFile=(e,t,a)=>{h++;let o={};return fetch(e).then((e=>"json"==a?e.json():"text"==a?e.text():void 0)).then((e=>{h--,Object.assign(o,e),t&&t(e)})),o},a.loadStrings=(e,t)=>a._loadFile(e,t,"text"),a.loadJSON=(e,t)=>a._loadFile(e,t,"json"),a.loadSound=(e,t)=>{h++;let a=new Audio(e);return a.addEventListener("canplaythrough",(()=>{h--,t&&t(a)})),a.load(),a.setVolume=e=>a.volume=e,a},a.Element=function(e){this.elt=e},a._elements=[],"global"==e&&(Object.assign(Q5,a),delete Q5.Q5),Q5.Image??=_Q5Image;for(let N of Q5.prototype._methods.init)N.call(a);if("global"==e){let L=Object.getOwnPropertyNames(a);for(let G of L)"function"==typeof a[G]?window[G]=a[G]:Object.defineProperty(window,G,{get:()=>a[G],set:e=>a[G]=e})}function Q(){let t="global"==e?window:a,o=["setup","draw","preload","mouseMoved","mousePressed","mouseReleased","mouseDragged","mouseClicked","keyPressed","keyReleased","keyTyped","touchStarted","touchMoved","touchEnded","windowResized"];for(let e of o){let o="_"+e+"Fn";a[o]=()=>{},a[o].isPlaceHolder=!0,t[e]?a[o]=t[e]:Object.defineProperty(a,e,{set:e=>{a[o]=e}})}if("graphics"!=e||"image"!=e){a._preloadFn(),d=performance.now(),function e(){if(h>0)return requestAnimationFrame(e);a._setupFn(),requestAnimationFrame(k)}()}addEventListener("mousemove",(e=>a._onmousemove(e)),!1),addEventListener("keydown",(e=>a._onkeydown(e)),!1),addEventListener("keyup",(e=>a._onkeyup(e)),!1)}"function"==typeof e&&e(a),"global"==e?Q():requestAnimationFrame(Q)}Q5.Color=class{constructor(e,t,a,o){this.MAGIC=786698,this._r=e,this._g=t,this._b=a,this._a=o,this._h=0,this._s=0,this._v=0,this._hsvInferred=!1}setRed(e){this._r=e,this._hsvInferred=!1}setGreen(e){this._g=e,this._hsvInferred=!1}setBlue(e){this._b=e,this._hsvInferred=!1}setAlpha(e){this._a=e/255,this._hsvInferred=!1}get levels(){return[this._r,this._g,this._b,255*this._a]}_inferHSV(){this._hsvInferred||([this._h,this._s,this._v]=Q5.Color._rgb2hsv(this._r,this._g,this._b),this._hsvInferred=!0)}toString(){return`rgba(${Math.round(this._r)},${Math.round(this._g)},${Math.round(this._b)},${~~(1e3*this._a)/1e3})`}},Q5._instanceCount=0,Q5.Color._rgb2hsv=(e,t,a)=>{let o,n,r,i,s;return o=e<t?e<a?e:a:t<a?t:a,n=e>t?e>a?e:a:t>a?t:a,s=100*n/255,0==s?(r=0,i=0,[r,i,s]):(i=100*(n-o)/n,0==i?(r=0,[r,i,s]):(r=n==e?0+60*(t-a)/(n-o):n==t?120+60*(a-e)/(n-o):240+60*(e-t)/(n-o),[r,i,s]))},Q5.Color._hsv2rgb=(e,t,a)=>{let o,n,r,i,s,l,h,c,d;if(0==t)return o=a,n=a,r=a,[255*o,255*n,255*r];switch(i=e,i>360&&(i=0),i/=60,s=~~i,l=i-s,h=a*(1-t),c=a*(1-t*l),d=a*(1-t*(1-l)),s){case 0:o=a,n=d,r=h;break;case 1:o=c,n=a,r=h;break;case 2:o=h,n=a,r=d;break;case 3:o=h,n=c,r=a;break;case 4:o=d,n=h,r=a;break;default:o=a,n=h,r=c}return[255*o,255*n,255*r]},Q5.Vector=class{constructor(e,t,a,o){this.x=e||0,this.y=t||0,this.z=a||0,this._$=o||window,this._cn=null,this._cnsq=null}set(e,t,a){this.x=e||0,this.y=t||0,this.z=a||0}copy(){return new Q5.Vector(this.x,this.y,this.z)}_arg2v(e,t,a){return void 0!==e.x?e:void 0!==t?{x:e,y:t,z:a||0}:{x:e,y:e,z:e}}_calcNorm(){null==this._cnsq&&(this._cnsq=this.x*this.x+this.y*this.y+this.z*this.z,this._cn=Math.sqrt(this._cnsq))}_deprecNorm(){this._cnsq=null,this._cn=null}add(){let e=this._arg2v(...arguments);return this.x+=e.x,this.y+=e.y,this.z+=e.z,this._deprecNorm(),this}rem(){let e=this._arg2v(...arguments);return this.x%=e.x,this.y%=e.y,this.z%=e.z,this._deprecNorm(),this}sub(){let e=this._arg2v(...arguments);return this.x-=e.x,this.y-=e.y,this.z-=e.z,this._deprecNorm(),this}mult(){let e=this._arg2v(...arguments);return this.x*=e.x,this.y*=e.y,this.z*=e.z,this._deprecNorm(),this}div(){let e=this._arg2v(...arguments);return e.x?this.x/=e.x:this.x=0,e.y?this.y/=e.y:this.y=0,e.z?this.z/=e.z:this.z=0,this._deprecNorm(),this}mag(){return this._calcNorm(),this._cn}magSq(){return this._calcNorm(),this._cnsq}dot(){let e=this._arg2v(...arguments);return this.x*e.x+this.y*e.y+this.z*e.z}dist(){let e=this._arg2v(...arguments),t=this.x-e.x,a=this.y-e.y,o=this.z-e.z;return Math.sqrt(t*t+a*a+o*o)}cross(){let e=this._arg2v(...arguments),t=this.y*e.z-this.z*e.y,a=this.z*e.x-this.x*e.z,o=this.x*e.y-this.y*e.x;return this.x=t,this.y=a,this.z=o,this._deprecNorm(),this}normalize(){this._calcNorm();let e=this._cn;return 0!=e&&(this.x/=e,this.y/=e,this.z/=e),this._cn=1,this._cnsq=1,this}limit(e){this._calcNorm();let t=this._cn;if(t>e){let a=e/t;this.x*=a,this.y*=a,this.z*=a,this._cn=e,this._cnsq=e*e}return this}setMag(e){this._calcNorm();let t=e/this._cn;return this.x*=t,this.y*=t,this.z*=t,this._cn=e,this._cnsq=e*e,this}heading(){return this._$.atan2(this.y,this.x)}rotate(e){let t=this._$.cos(e),a=this._$.sin(e),o=this.x*t-this.y*a,n=this.x*a+this.y*t;return this.x=o,this.y=n,this}angleBetween(){let e=this._arg2v(...arguments);const t=this.dot(e)/(this.mag()*e.mag());let a;return a=this._$.tan(Math.min(1,Math.max(-1,t))),a*=Math.sign(this.cross(e).z||1),a}lerp(){let e=[...arguments],t=this._arg2v(...e.slice(0,-1)),a=e[e.length-1];return this.x+=(t.x-this.x)*a,this.y+=(t.y-this.y)*a,this.z+=(t.z-this.z)*a,this._deprecNorm(),this}reflect(e){return e.normalize(),this.sub(e.mult(2*this.dot(e)))}array(){return[this.x,this.y,this.z]}equals(e,t){return t??=Number.EPSILON||0,Math.abs(e.x-this.x)<t&&Math.abs(e.y-this.y)<t&&Math.abs(e.z-this.z)<t}fromAngle(e,t){return void 0===t&&(t=1),this._cn=t,this._cnsq=t*t,this.x=t*this._$.cos(e),this.y=t*this._$.sin(e),this.z=0,this}fromAngles(e,t,a){void 0===a&&(a=1),this._cn=a,this._cnsq=a*a;const o=this._$.cos(t),n=this._$.sin(t),r=this._$.cos(e),i=this._$.sin(e);return this.x=a*i*n,this.y=-a*r,this.z=a*i*o,this}random2D(){return this._cn=this._cnsq=1,this.fromAngle(Math.random()*Math.PI*2)}random3D(){return this._cn=this._cnsq=1,this.fromAngles(Math.random()*Math.PI*2,Math.random()*Math.PI*2)}toString(){return`[${this.x}, ${this.y}, ${this.z}]`}},Q5.Vector.add=(e,t)=>e.copy().add(t),Q5.Vector.cross=(e,t)=>e.copy().cross(t),Q5.Vector.dist=(e,t)=>Math.hypot(e.x-t.x,e.y-t.y,e.z-t.z),Q5.Vector.div=(e,t)=>e.copy().div(t),Q5.Vector.dot=(e,t)=>e.copy().dot(t),Q5.Vector.equals=(e,t,a)=>e.equals(t,a),Q5.Vector.lerp=(e,t,a)=>e.copy().lerp(t,a),Q5.Vector.limit=(e,t)=>e.copy().limit(t),Q5.Vector.heading=e=>Math.atan2(e.y,e.x),Q5.Vector.magSq=e=>e.x*e.x+e.y*e.y+e.z*e.z,Q5.Vector.mag=e=>Math.sqrt(Q5.Vector.magSq(e)),Q5.Vector.mult=(e,t)=>e.copy().mult(t),Q5.Vector.normalize=e=>e.copy().normalize(),Q5.Vector.rem=(e,t)=>e.copy().rem(t),Q5.Vector.sub=(e,t)=>e.copy().sub(t);for(let e of["fromAngle","fromAngles","random2D","random3D"])Q5.Vector[e]=(t,a,o)=>(new Q5.Vector)[e](t,a,o);class _Q5Image extends Q5{constructor(e,t){super("image"),this.createCanvas(e,t),this._loop=!1}}Q5._friendlyError=(e,t)=>{throw t+": "+e},Q5.prototype._methods={init:[],pre:[],post:[],remove:[]},Q5.prototype.registerMethod=function(){Q5.prototype._methods[arguments[0]].push(arguments[1])},Q5.prototype.registerPreloadMethod=()=>{},Q5._validateParameters=()=>!0,"undefined"!=typeof module?module.exports=Q5:window.p5??=Q5,document.addEventListener("DOMContentLoaded",(()=>{Q5._hasGlobal||new Q5("auto")}));
+function Q5(e,t){if(void 0===e&&(e="global"),"auto"==e){if(void 0===window.setup)return;e="global"}1==arguments.length&&"string"!=typeof e&&"function"!=typeof e&&(t=arguments[0],e=null),"global"==e&&(Q5._hasGlobal=!0);let a=this;a.canvas=document.createElement("canvas");let n=a._ctx=a.canvas.getContext("2d");if(a.canvas.classList.add("p5Canvas","q5Canvas"),a.canvas.id="defaultCanvas"+Q5._instanceCount++,a.width=100,a.height=100,a.canvas.width=a.width,a.canvas.height=a.height,a._windowResizedFn=()=>{},"graphics"!=e&&"image"!=e){function o(){t??=document.getElementsByTagName("main")[0],t??=document.body,a.canvas.parent(t)}a._resize=()=>{a.frameCount>1&&(a._shouldResize=!0)},a.canvas.parent=e=>{"string"==typeof e&&(e=document.getElementById(e)),e.append(a.canvas),"undefined"!=typeof ResizeObserver?(a._ro&&a._ro.disconnect(),a._ro=new ResizeObserver(a._resize),a._ro.observe(t)):0==a.frameCount&&addEventListener("resize",a._resize)},document.body?o():window.addEventListener("load",o)}f(),a.MAGIC=161533525,a.RGB=0,a.HSV=1,a.HSB=1,a.CHORD=0,a.PIE=1,a.OPEN=2,a.RADIUS="radius",a.CORNER="corner",a.CORNERS="corners",a.ROUND="round",a.SQUARE="butt",a.PROJECT="square",a.MITER="miter",a.BEVEL="bevel",a.CLOSE=1,a.BLEND="source-over",a.REMOVE="destination-out",a.ADD="lighter",a.DARKEST="darken",a.LIGHTEST="lighten",a.DIFFERENCE="difference",a.SUBTRACT="subtract",a.EXCLUSION="exclusion",a.MULTIPLY="multiply",a.SCREEN="screen",a.REPLACE="copy",a.OVERLAY="overlay",a.HARD_LIGHT="hard-light",a.SOFT_LIGHT="soft-light",a.DODGE="color-dodge",a.BURN="color-burn",a.NORMAL="normal",a.ITALIC="italic",a.BOLD="bold",a.BOLDITALIC="italic bold",a.CENTER="center",a.LEFT="left",a.RIGHT="right",a.TOP="top",a.BOTTOM="bottom",a.BASELINE="alphabetic",a.LANDSCAPE="landscape",a.PORTRAIT="portrait",a.ALT=18,a.BACKSPACE=8,a.CONTROL=17,a.DELETE=46,a.DOWN_ARROW=40,a.ENTER=13,a.ESCAPE=27,a.LEFT_ARROW=37,a.OPTION=18,a.RETURN=13,a.RIGHT_ARROW=39,a.SHIFT=16,a.TAB=9,a.UP_ARROW=38,a.DEGREES="degrees",a.RADIANS="radians",a.HALF_PI=Math.PI/2,a.PI=Math.PI,a.QUARTER_PI=Math.PI/4,a.TAU=2*Math.PI,a.TWO_PI=2*Math.PI,a.THRESHOLD=1,a.GRAY=2,a.OPAQUE=3,a.INVERT=4,a.POSTERIZE=5,a.DILATE=6,a.ERODE=7,a.BLUR=8,a.ARROW="default",a.CROSS="crosshair",a.HAND="pointer",a.MOVE="move",a.TEXT="text",a.VIDEO={video:!0,audio:!1},a.AUDIO={video:!1,audio:!0},a.SHR3=1,a.LCG=2,a.HARDWARE_FILTERS=!0,a.hint=(e,t)=>{a[e]=t},a.frameCount=0,a.deltaTime=16,a.mouseX=0,a.mouseY=0,a.mouseButton=null,a.keyIsPressed=!1,a.mouseIsPressed=!1,a.key=null,a.keyCode=null,a.pixels=[],a.accelerationX=0,a.accelerationY=0,a.accelerationZ=0,a.rotationX=0,a.rotationY=0,a.rotationZ=0,a.relRotationX=0,a.relRotationY=0,a.relRotationZ=0,a.pmouseX=0,a.pmouseY=0,a.pAccelerationX=0,a.pAccelerationY=0,a.pAccelerationZ=0,a.pRotationX=0,a.pRotationY=0,a.pRotationZ=0,a.pRelRotationX=0,a.pRelRotationY=0,a.pRelRotationZ=0,a.touches=[],a._colorMode=a.RGB,a._doStroke=!0,a._doFill=!0,a._strokeSet=!1,a._fillSet=!1,a._ellipseMode=a.CENTER,a._rectMode=a.CORNER,a._curveDetail=20,a._curveAlpha=0,a._loop=!0,a._textFont="sans-serif",a._textSize=12,a._textLeading=12,a._textStyle="normal",a._pixelDensity=1,a._lastFrameTime=0,a._targetFrameRate=null,a._frameRate=a._fps=60,a._tint=null;let i=null,r=!0,s=[],l=null,h=0,c={},d=0,u=null,_=null,g=null;function m(){let e={};for(let t in n)"function"!=typeof n[t]&&(e[t]=n[t]);return delete e.canvas,e}Object.defineProperty(a,"deviceOrientation",{get:()=>window.screen?.orientation?.type}),Object.defineProperty(a,"windowWidth",{get:()=>window.innerWidth}),Object.defineProperty(a,"windowHeight",{get:()=>window.innerHeight}),Object.defineProperty(a,"drawingContext",{get:()=>n}),a.createCanvas=(t,n)=>(a.width=t,a.height=n,a.canvas.width=t*a._pixelDensity,a.canvas.height=n*a._pixelDensity,f(),"graphics"!=e&&"image"!=e&&a.pixelDensity(Math.ceil(a.displayDensity())),a.canvas),a.resizeCanvas=(t,o)=>{a.width=t,a.height=o;let i=m();a.canvas.width=t*a._pixelDensity,a.canvas.height=o*a._pixelDensity,n=a._ctx=a.canvas.getContext("2d");for(let e in i)a._ctx[e]=i[e];"graphics"!=e&&"image"!=e&&a.pixelDensity(a._pixelDensity)},a.createGraphics=(e,t)=>{let a=new Q5("graphics");return a.createCanvas(e,t),a},a.createImage=(e,t)=>new Q5.Image(e,t),a.displayDensity=()=>window.devicePixelRatio,a.pixelDensity=e=>{if(void 0===e)return a._pixelDensity;a._pixelDensity=e;let t=m();a.canvas.width=Math.ceil(a.width*e),a.canvas.height=Math.ceil(a.height*e),a.canvas.style.width=a.width+"px",a.canvas.style.height=a.height+"px",n=a._ctx=a.canvas.getContext("2d");for(let e in t)a._ctx[e]=t[e];return n.scale(a._pixelDensity,a._pixelDensity),a._pixelDensity},a.map=(e,t,a,n,o,i)=>{let r=n+1*(e-t)/(a-t)*(o-n);return i?n<o?Math.min(Math.max(r,n),o):Math.min(Math.max(r,o),n):r},a.lerp=(e,t,a)=>e*(1-a)+t*a,a.constrain=(e,t,a)=>Math.min(Math.max(e,t),a),a.dist=function(){return 4==arguments.length?Math.hypot(arguments[0]-arguments[2],arguments[1]-arguments[3]):Math.hypot(arguments[0]-arguments[3],arguments[1]-arguments[4],arguments[2]-arguments[5])},a.norm=(e,t,n)=>a.map(e,t,n,0,1),a.sq=e=>e*e,a.fract=e=>e-Math.floor(e),a.angleMode=e=>a._angleMode=e,a._DEGTORAD=Math.PI/180,a._RADTODEG=180/Math.PI,a.degrees=e=>e*a._RADTODEG,a.radians=e=>e*a._DEGTORAD,a.abs=Math.abs,a.ceil=Math.ceil,a.exp=Math.exp,a.floor=Math.floor,a.log=Math.log,a.mag=Math.hypot,a.max=Math.max,a.min=Math.min,a.round=Math.round,a.pow=Math.pow,a.sqrt=Math.sqrt,a.sin=e=>("degrees"==a._angleMode&&(e=a.radians(e)),Math.sin(e)),a.cos=e=>("degrees"==a._angleMode&&(e=a.radians(e)),Math.cos(e)),a.tan=e=>("degrees"==a._angleMode&&(e=a.radians(e)),Math.tan(e)),a.asin=e=>{let t=Math.asin(e);return"degrees"==a._angleMode&&(t=a.degrees(t)),t},a.acos=e=>{let t=Math.acos(e);return"degrees"==a._angleMode&&(t=a.degrees(t)),t},a.atan=e=>{let t=Math.atan(e);return"degrees"==a._angleMode&&(t=a.degrees(t)),t},a.atan2=(e,t)=>{let n=Math.atan2(e,t);return"degrees"==a._angleMode&&(n=a.degrees(n)),n},a.nf=(e,t,a)=>{let n=e<0,o=e.toString();return n&&(o=o.slice(1)),o=o.padStart(t,"0"),a>0&&(-1==o.indexOf(".")&&(o+="."),o=o.padEnd(t+1+a,"0")),n&&(o="-"+o),o},a.createVector=(e,t,n)=>new Q5.Vector(e,t,n,a),a.curvePoint=(e,t,a,n,o)=>{const i=o*o*o,r=o*o;return e*(-.5*i+r-.5*o)+t*(1.5*i-2.5*r+1)+a*(-1.5*i+2*r+.5*o)+n*(.5*i-.5*r)},a.bezierPoint=(e,t,a,n,o)=>{const i=1-o;return Math.pow(i,3)*e+3*Math.pow(i,2)*o*t+3*i*Math.pow(o,2)*a+Math.pow(o,3)*n},a.curveTangent=(e,t,a,n,o)=>{const i=o*o;return e*(-3*i/2+2*o-.5)+t*(9*i/2-5*o)+a*(-9*i/2+4*o+.5)+n*(3*i/2-o)},a.bezierTangent=(e,t,a,n,o)=>{const i=1-o;return 3*n*Math.pow(o,2)-3*a*Math.pow(o,2)+6*a*i*o-6*t*i*o+3*t*Math.pow(i,2)-3*e*Math.pow(i,2)},a.Color=Q5.Color,a.colorMode=e=>{a._colorMode=e};let p={aqua:[0,255,255],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],crimson:[220,20,60],darkviolet:[148,0,211],gold:[255,215,0],green:[0,128,0],gray:[128,128,128],hotpink:[255,105,180],indigo:[75,0,130],khaki:[240,230,140],lightgreen:[144,238,144],lime:[0,255,0],magenta:[255,0,255],navy:[0,0,128],orange:[255,165,0],olive:[128,128,0],peachpuff:[255,218,185],pink:[255,192,203],purple:[128,0,128],red:[255,0,0],skyblue:[135,206,235],tan:[210,180,140],turquoise:[64,224,208],transparent:[0,0,0,0],white:[255,255,255],violet:[238,130,238],yellow:[255,255,0]};function f(){n.fillStyle="white",n.strokeStyle="black",n.lineCap="round",n.lineJoin="miter",n.textAlign="left"}function v(e){let t=a._angleMode==a.DEGREES?180:Math.PI,n=2*t;if(0<=e&&e<=n)return e;for(;e<0;)e+=n;for(;e>=t;)e-=n;return e}function x(e,t,o,i,r,s,l,h){if(!a._doFill&&!a._doStroke)return;let c=v(r),d=v(s);if(c>d&&([c,d]=[d,c]),0==c){if(0==d)return;if(a._angleMode==a.DEGREES&&360==d||d==a.TAU)return a.ellipse(e,t,o,i)}n.beginPath();for(let r=0;r<h+1;r++){let s=r/h,l=a.lerp(c,d,s),u=a.cos(l)*o/2,_=a.sin(l)*i/2;n[r?"lineTo":"moveTo"](e+u,t+_)}l==a.CHORD?n.closePath():l==a.PIE&&(n.lineTo(e,t),n.closePath()),a._doFill&&n.fill(),a._doStroke&&n.stroke()}function y(e,t,o,i){(a._doFill||a._doStroke)&&(n.beginPath(),n.ellipse(e,t,o/2,i/2,0,0,a.TAU),a._doFill&&n.fill(),a._doStroke&&n.stroke())}function M(e,t,o,i,r,s,l,h){if(!a._doFill&&!a._doStroke)return;if(void 0===r)return function(e,t,o,i){a._doFill&&n.fillRect(e,t,o,i),a._doStroke&&n.strokeRect(e,t,o,i)}(e,t,o,i);if(void 0===s)return M(e,t,o,i,r,r,r,r);const c=Math.min(Math.abs(i),Math.abs(o))/2;r=Math.min(c,r),s=Math.min(c,s),h=Math.min(c,h),l=Math.min(c,l),n.beginPath(),n.moveTo(e+r,t),n.arcTo(e+o,t,e+o,t+i,s),n.arcTo(e+o,t+i,e,t+i,l),n.arcTo(e,t+i,e,t,h),n.arcTo(e,t,e+o,t,r),n.closePath(),a._doFill&&n.fill(),a._doStroke&&n.stroke()}function w(){s=[]}a.color=function(){let e=arguments;if(1==e.length){if("string"==typeof e[0])return"#"==e[0][0]?new Q5.Color(parseInt(e[0].slice(1,3),16),parseInt(e[0].slice(3,5),16),parseInt(e[0].slice(5,7),16),1):p[e[0]]?new Q5.Color(...p[e[0]],1):new Q5.Color(0,0,0,1);if("number"!=typeof e[0]&&786698==e[0].MAGIC)return e[0]}if(a._colorMode==a.RGB){if(1==e.length)return new Q5.Color(e[0],e[0],e[0],1);if(2==e.length)return new Q5.Color(e[0],e[0],e[0],e[1]/255);if(3==e.length)return new Q5.Color(e[0],e[1],e[2],1);if(4==e.length)return new Q5.Color(e[0],e[1],e[2],e[3]/255)}else{if(1==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(0,0,e[0]/100),1);if(2==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(0,0,e[0]/100),e[1]/255);if(3==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(e[0],e[1]/100,e[2]/100),1);if(4==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(e[0],e[1]/100,e[2]/100),e[3])}return null},a.red=e=>e._r,a.green=e=>e._g,a.blue=e=>e._b,a.alpha=e=>255*e._a,a.hue=e=>(e._inferHSV(),e._h),a.saturation=e=>(e._inferHSV(),e._s),a.brightness=e=>(e._inferHSV(),e._v),a.lightness=e=>100*(.2126*e._r+.7152*e._g+.0722*e._b)/255,a.lerpColor=(e,t,n)=>a._colorMode==a.RGB?new Q5.Color(a.constrain(a.lerp(e._r,t._r,n),0,255),a.constrain(a.lerp(e._g,t._g,n),0,255),a.constrain(a.lerp(e._b,t._b,n),0,255),a.constrain(a.lerp(e._a,t._a,n),0,1)):(e._inferHSV(),t._inferHSV(),new Q5.Color(a.constrain(function(e,t,n){var o=[[Math.abs(t-e),a.map(n,0,1,e,t)],[Math.abs(t+360-e),a.map(n,0,1,e,t+360)],[Math.abs(t-360-e),a.map(n,0,1,e,t-360)]];return o.sort(((e,t)=>e[0]-t[0])),(o[0][1]+720)%360}(e._h,t._h,n),0,360),a.constrain(a.lerp(e._s,t._s,n),0,100),a.constrain(a.lerp(e._v,t._v,n),0,100),a.constrain(a.lerp(e._a,t._a,n),0,1))),a.strokeWeight=e=>{a._doStroke=e>0,n.lineWidth=e},a.stroke=function(){if(a._doStroke=!0,a._strokeSet=!0,"string"==typeof arguments[0])return void(n.strokeStyle=arguments[0]);let e=a.color(...arguments);e._a<=0?a._doStroke=!1:n.strokeStyle=e},a.noStroke=()=>a._doStroke=!1,a.fill=function(){if(a._doFill=!0,a._fillSet=!0,"string"==typeof arguments[0])return void(n.fillStyle=arguments[0]);let e=a.color(...arguments);e._a<=0?a._doFill=!1:n.fillStyle=e},a.noFill=()=>a._doFill=!1,a.smooth=()=>a._smooth=!0,a.noSmooth=()=>a._smooth=!1,a.blendMode=e=>n.globalCompositeOperation=e,a.strokeCap=e=>n.lineCap=e,a.strokeJoin=e=>n.lineJoin=e,a.ellipseMode=e=>a._ellipseMode=e,a.rectMode=e=>a._rectMode=e,a.curveDetail=e=>a._curveDetail=e,a.curveAlpha=e=>a._curveAlpha=e,a.curveTightness=e=>a._curveAlpha=e,a.clear=()=>{n.clearRect(0,0,a.canvas.width,a.canvas.height)},a.background=function(){if(arguments[0]&&arguments[0].MAGIC==a.MAGIC)return a.image(arguments[0],0,0,a.width,a.height);n.save(),n.resetTransform(),n.fillStyle="string"==typeof arguments[0]?arguments[0]:a.color(...Array.from(arguments)),n.fillRect(0,0,a.canvas.width,a.canvas.height),n.restore()},a.line=(e,t,o,i)=>{a._doStroke&&(n.beginPath(),n.moveTo(e,t),n.lineTo(o,i),n.stroke())},a.arc=(e,t,n,o,i,r,s,l)=>{if(i==r)return a.ellipse(e,t,n,o);l??=25,s??=a.PIE,a._ellipseMode==a.CENTER?x(e,t,n,o,i,r,s,l):a._ellipseMode==a.RADIUS?x(e,t,2*n,2*o,i,r,s,l):a._ellipseMode==a.CORNER?x(e+n/2,t+o/2,n,o,i,r,s,l):a._ellipseMode==a.CORNERS&&x((e+n)/2,(t+o)/2,n-e,o-t,i,r,s,l)},a.ellipse=(e,t,n,o)=>{o??=n,a._ellipseMode==a.CENTER?y(e,t,n,o):a._ellipseMode==a.RADIUS?y(e,t,2*n,2*o):a._ellipseMode==a.CORNER?y(e+n/2,t+o/2,n,o):a._ellipseMode==a.CORNERS&&y((e+n)/2,(t+o)/2,n-e,o-t)},a.circle=(e,t,n)=>a.ellipse(e,t,n,n),a.point=(e,t)=>{e.x&&(t=e.y,e=e.x),n.beginPath(),n.ellipse(e,t,.4,.4,0,0,a.TAU),n.stroke()},a.rect=(e,t,n,o,i,r,s,l)=>{a._rectMode==a.CENTER?M(e-n/2,t-o/2,n,o,i,r,s,l):a._rectMode==a.RADIUS?M(e-n,t-o,2*n,2*o,i,r,s,l):a._rectMode==a.CORNER?M(e,t,n,o,i,r,s,l):a._rectMode==a.CORNERS&&M(e,t,n-e,o-t,i,r,s,l)},a.square=(e,t,n,o,i,r,s)=>a.rect(e,t,n,n,o,i,r,s),a.beginShape=()=>{w(),n.beginPath(),r=!0},a.beginContour=()=>{n.closePath(),w(),r=!0},a.endContour=()=>{w(),r=!0},a.vertex=(e,t)=>{w(),r?n.moveTo(e,t):n.lineTo(e,t),r=!1},a.bezierVertex=(e,t,a,o,i,r)=>{w(),n.bezierCurveTo(e,t,a,o,i,r)},a.quadraticVertex=(e,t,a,o)=>{w(),n.quadraticCurveTo(e,t,a,o)},a.bezier=(e,t,n,o,i,r,s,l)=>{a.beginShape(),a.vertex(e,t),a.bezierVertex(n,o,i,r,s,l),a.endShape()},a.triangle=(e,t,n,o,i,r)=>{a.beginShape(),a.vertex(e,t),a.vertex(n,o),a.vertex(i,r),a.endShape(a.CLOSE)},a.quad=(e,t,n,o,i,r,s,l)=>{a.beginShape(),a.vertex(e,t),a.vertex(n,o),a.vertex(i,r),a.vertex(s,l),a.endShape(a.CLOSE)},a.endShape=e=>{w(),e&&n.closePath(),a._doFill&&n.fill(),a._doStroke&&n.stroke(),a._doFill||a._doStroke||(n.save(),n.fillStyle="none",n.fill(),n.restore())},a.curveVertex=(e,t)=>{if(s.push([e,t]),s.length<4)return;let o=function(e,t,a,n,o,i,r,s,l,h){function c(e,t,a,n,o,i){let r=Math.pow(n-t,2)+Math.pow(o-a,2);return Math.pow(r,.5*i)+e}let d=[],u=c(0,e,t,a,n,h),_=c(u,a,n,o,i,h),g=c(_,o,i,r,s,h);for(let h=0;h<l;h++){let c=u+h/(l-1)*(_-u),m=[(u-c)/(u-0),(c-0)/(u-0),(_-c)/(_-u),(c-u)/(_-u),(g-c)/(g-_),(c-_)/(g-_),(_-c)/(_-0),(c-0)/(_-0),(g-c)/(g-u),(c-u)/(g-u)];for(let e=0;e<m.length;e+=2)isNaN(m[e])&&(m[e]=1,m[e+1]=0),isFinite(m[e])||(m[e]>0?(m[e]=1,m[e+1]=0):(m[e]=0,m[e+1]=1));let p=e*m[0]+a*m[1],f=t*m[0]+n*m[1],v=a*m[2]+o*m[3],x=n*m[2]+i*m[3],y=o*m[4]+r*m[5],M=i*m[4]+s*m[5],w=p*m[6]+v*m[7],R=f*m[6]+x*m[7],S=v*m[8]+y*m[9],C=x*m[8]+M*m[9],I=w*m[2]+S*m[3],E=R*m[2]+C*m[3];d.push([I,E])}return d}(...s[s.length-4],...s[s.length-3],...s[s.length-2],...s[s.length-1],a._curveDetail,a._curveAlpha);for(let e=0;e<o.length;e++)r?n.moveTo(...o[e]):n.lineTo(...o[e]),r=!1},a.curve=(e,t,n,o,i,r,s,l)=>{a.beginShape(),a.curveVertex(e,t),a.curveVertex(n,o),a.curveVertex(i,r),a.curveVertex(s,l),a.endShape()},a.translate=(e,t)=>n.translate(e,t),a.rotate=e=>{"degrees"==a._angleMode&&(e=a.radians(e)),n.rotate(e)},a.scale=(e,t)=>{t??=e,n.scale(e,t)},a.applyMatrix=(e,t,a,o,i,r)=>{n.transform(e,t,a,o,i,r)},a.shearX=e=>{n.transform(1,0,a.tan(e),1,0,0)},a.shearY=e=>{n.transform(1,a.tan(e),0,1,0,0)},a.resetMatrix=()=>{n.resetTransform(),n.scale(a._pixelDensity,a._pixelDensity)},a._styleNames=["_doStroke","_doFill","_strokeSet","_fillSet","_tint","_imageMode","_rectMode","_ellipseMode","_textFont","_textLeading","_leadingSet","_textSize","_textAlign","_textBaseline","_textStyle","_textWrap"],a._ctxStyleNames=["strokeStyle","fillStyle","lineWidth","lineCap","lineJoin"],a._styles=[],a._ctxStyles=[],a.pushMatrix=a.push=()=>{n.save();let e={};for(let t of a._styleNames)e[t]=a[t];a._styles.push(e);let t={};for(let e of a._ctxStyleNames)t[e]=n[e];a._ctxStyles.push(t)},a.popMatrix=a.pop=()=>{n.restore();let e=a._styles.pop();for(let t of a._styleNames)a[t]=e[t];let t=a._ctxStyles.pop();for(let e of a._ctxStyleNames)n[e]=t[e]},a.imageMode=e=>a._imageMode=e,a.image=(e,t,o,i,r,s,l,h,c)=>{let d=e.MAGIC==a.MAGIC?e.canvas:e;function u(){if(e.MAGIC!=a.MAGIC||!a._tint)return;let t=e.canvas.getContext("2d");t.save(),t.resetTransform(),t.clearRect(0,0,t.canvas.width,t.canvas.height),t.drawImage(_.canvas,0,0),t.restore()}if(e.MAGIC==a.MAGIC&&null!=a._tint&&(!function(e,t){null==_&&(_=document.createElement("canvas").getContext("2d"));t??=e||n.canvas.height,e??=n.canvas.width,(_.canvas.width!=e||_.canvas.height!=t)&&(_.canvas.width=e,_.canvas.height=t)}(e.canvas.width,e.canvas.height),_.drawImage(e.canvas,0,0),e.tinted(a._tint)),i||(e.MAGIC==a.MAGIC||e.width?(i=e.width,r=e.height):(i=e.videoWidth,r=e.videoHeight)),"center"==a._imageMode&&(t-=.5*i,o-=.5*r),void 0===s)return n.drawImage(d,t,o,i,r),void u();h??=d.width,c??=d.height,n.drawImage(d,s,l,h,c,t,o,i,r),u()},a.loadPixels=()=>{l=n.getImageData(0,0,a.canvas.width,a.canvas.height),a.pixels=l.data},a.updatePixels=()=>{null!=l&&n.putImageData(l,0,0)},a._incrementPreload=()=>h++,a._decrementPreload=()=>h--,a.loadImage=(e,t)=>{h++;let n=a.createImage(100,100),o=n.canvas.getContext("2d"),i=new window.Image;return i.src=e,i.crossOrigin="Anonymous",i.onload=()=>{n.width=o.canvas.width=i.naturalWidth,n.height=o.canvas.height=i.naturalHeight,o.drawImage(i,0,0),h--,t&&t(n)},i.onerror=e=>{throw h--,e},n};let R={};function S(e,t){null==u&&(u=document.createElement("canvas").getContext("2d")),t??=e||n.canvas.height,e??=n.canvas.width,u.canvas.width==e&&u.canvas.height==t||(u.canvas.width=e,u.canvas.height=t)}function C(){let e=n.canvas.width*n.canvas.height*4;g&&e==g.length||(g=new Uint8ClampedArray(e))}function I(e){u.clearRect(0,0,u.canvas.width,u.canvas.height),u.filter=e,u.drawImage(n.canvas,0,0),n.save(),n.resetTransform(),n.clearRect(0,0,n.canvas.width,n.canvas.height),n.drawImage(u.canvas,0,0),n.restore()}if(R[a.THRESHOLD]=(e,t)=>{void 0===t?t=127.5:t*=255;for(let a=0;a<e.length;a+=4){const n=.2126*e[a]+.7152*e[a+1]+.0722*e[a+2];e[a]=e[a+1]=e[a+2]=n>=t?255:0}},R[a.GRAY]=e=>{for(let t=0;t<e.length;t+=4){const a=.2126*e[t]+.7152*e[t+1]+.0722*e[t+2];e[t]=e[t+1]=e[t+2]=a}},R[a.OPAQUE]=e=>{for(let t=0;t<e.length;t+=4)e[t+3]=255},R[a.INVERT]=e=>{for(let t=0;t<e.length;t+=4)e[t]=255-e[t],e[t+1]=255-e[t+1],e[t+2]=255-e[t+2]},R[a.POSTERIZE]=(e,t)=>{let a=t-1;for(let n=0;n<e.length;n+=4)e[n]=255*(e[n]*t>>8)/a,e[n+1]=255*(e[n+1]*t>>8)/a,e[n+2]=255*(e[n+2]*t>>8)/a},R[a.DILATE]=e=>{C(),g.set(e);let[t,a]=[n.canvas.width,n.canvas.height];for(let n=0;n<a;n++)for(let o=0;o<t;o++){let i=4*Math.max(o-1,0),r=4*Math.min(o+1,t-1),s=4*Math.max(n-1,0)*t,l=4*Math.min(n+1,a-1)*t,h=4*n*t,c=4*o;for(let t=0;t<4;t++){let a=t+s,n=t+l,o=t+h;e[h+c+t]=Math.max(g[a+c],g[o+i],g[o+c],g[o+r],g[n+c])}}},R[a.ERODE]=e=>{C(),g.set(e);let[t,a]=[n.canvas.width,n.canvas.height];for(let n=0;n<a;n++)for(let o=0;o<t;o++){let i=4*Math.max(o-1,0),r=4*Math.min(o+1,t-1),s=4*Math.max(n-1,0)*t,l=4*Math.min(n+1,a-1)*t,h=4*n*t,c=4*o;for(let t=0;t<4;t++){let a=t+s,n=t+l,o=t+h;e[h+c+t]=Math.min(g[a+c],g[o+i],g[o+c],g[o+r],g[n+c])}}},R[a.BLUR]=(e,t)=>{t=t||1,t=Math.floor(t*a._pixelDensity),C(),g.set(e);let o=2*t+1;let i=function(e){let a=new Float32Array(e),n=.3*t+.8,o=n*n*2;for(let t=0;t<e;t++){let i=t-e/2,r=Math.exp(-i*i/o)/(2.5066282746*n);a[t]=r}return a}(o),[r,s]=[n.canvas.width,n.canvas.height];for(let a=0;a<s;a++)for(let n=0;n<r;n++){let s=0,l=0,h=0,c=0;for(let e=0;e<o;e++){let o=4*(a*r+Math.min(Math.max(n-t+e,0),r-1));s+=g[o]*i[e],l+=g[o+1]*i[e],h+=g[o+2]*i[e],c+=g[o+3]*i[e]}let d=4*(a*r+n);e[d]=s,e[d+1]=l,e[d+2]=h,e[d+3]=c}g.set(e);for(let a=0;a<s;a++)for(let n=0;n<r;n++){let l=0,h=0,c=0,d=0;for(let e=0;e<o;e++){let o=4*(Math.min(Math.max(a-t+e,0),s-1)*r+n);l+=g[o]*i[e],h+=g[o+1]*i[e],c+=g[o+2]*i[e],d+=g[o+3]*i[e]}let u=4*(a*r+n);e[u]=l,e[u+1]=h,e[u+2]=c,e[u+3]=d}},a.filter=(e,t)=>{if(a.HARDWARE_FILTERS&&null!=n.filter)if(S(),e==a.THRESHOLD){t??=.5,t=Math.max(t,1e-5),I(`saturate(0%) brightness(${Math.floor(.5/t*100)}%) contrast(1000000%)`)}else if(e==a.GRAY)I("saturate(0%)");else if(e==a.OPAQUE)u.fillStyle="black",u.fillRect(0,0,u.canvas.width,u.canvas.height),u.drawImage(n.canvas,0,0),n.save(),n.resetTransform(),n.drawImage(u.canvas,0,0),n.restore();else if(e==a.INVERT)I("invert(100%)");else if(e==a.BLUR)I(`blur(${Math.ceil(t*a._pixelDensity/1)||1}px)`);else{let a=n.getImageData(0,0,n.canvas.width,n.canvas.height);R[e](a.data,t),n.putImageData(a,0,0)}else{let a=n.getImageData(0,0,n.canvas.width,n.canvas.height);R[e](a.data,t),n.putImageData(a,0,0)}},a.resize=(e,t)=>{S(),u.drawImage(n.canvas,0,0),a.width=e,a.height=t,n.canvas.width=e*a._pixelDensity,n.canvas.height=t*a._pixelDensity,n.save(),n.resetTransform(),n.clearRect(0,0,n.canvas.width,n.canvas.height),n.drawImage(u.canvas,0,0,n.canvas.width,n.canvas.height),n.restore()},a.get=(e,t,o,i)=>{if(void 0!==e&&void 0===o){let a=n.getImageData(e,t,1,1).data;return new Q5.Color(a[0],a[1],a[2],a[3]/255)}e=e||0,t=t||0,o=o||a.width,i=i||a.height;let r=a.createGraphics(o,i);r.pixelDensity(a._pixelDensity);let s=n.getImageData(e*a._pixelDensity,t*a._pixelDensity,o*a._pixelDensity,i*a._pixelDensity);return r.canvas.getContext("2d").putImageData(s,0,0),r},a.set=(e,t,o)=>{if(o.MAGIC==a.MAGIC){let n=a._tint;return a._tint=null,a.image(o,e,t),void(a._tint=n)}for(let i=0;i<a._pixelDensity;i++)for(let r=0;r<a._pixelDensity;r++){let s=4*((t*a._pixelDensity+i)*n.canvas.width+e*a._pixelDensity+r);a.pixels[s]=o._r,a.pixels[s+1]=o._g,a.pixels[s+2]=o._b,a.pixels[s+3]=255*o._a}},a.tinted=function(){let e=a.color(...Array.from(arguments)),t=e._a;e._a=1,S(),u.clearRect(0,0,u.canvas.width,u.canvas.height),u.fillStyle=e,u.fillRect(0,0,u.canvas.width,u.canvas.height),u.globalCompositeOperation="multiply",u.drawImage(n.canvas,0,0),u.globalCompositeOperation="source-over",n.save(),n.resetTransform();let o=n.globalCompositeOperation;n.globalCompositeOperation="source-in",n.drawImage(u.canvas,0,0),n.globalCompositeOperation=o,n.restore(),u.globalAlpha=t,u.clearRect(0,0,u.canvas.width,u.canvas.height),u.drawImage(n.canvas,0,0),u.globalAlpha=1,n.save(),n.resetTransform(),n.clearRect(0,0,n.canvas.width,n.canvas.height),n.drawImage(u.canvas,0,0),n.restore()},a.tint=function(){a._tint=a.color(...Array.from(arguments))},a.noTint=()=>a._tint=null,a.mask=e=>{n.save(),n.resetTransform();let t=n.globalCompositeOperation;n.globalCompositeOperation="destination-in",n.drawImage(e.canvas,0,0),n.globalCompositeOperation=t,n.restore()},a.clearTemporaryBuffers=()=>{u=null,_=null,g=null},a._save=(e,t,a)=>{if(t=t||"untitled","jpg"==(a=a||"png")||"png"==a)e=e.toDataURL();else{let t="text/plain";"json"==a&&("string"!=typeof e&&(e=JSON.stringify(e)),t="text/json"),e=new Blob([e],{type:t}),e=URL.createObjectURL(e)}let n=document.createElement("a");n.href=e,n.download=t+"."+a,document.body.append(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(n.href)},a.save=(e,t,o)=>{if((!e||"string"==typeof e&&(!t||!o&&t.length<5))&&(o=t,t=e,e=n.canvas),o)return a._save(e,t,o);t?(t=t.split("."),a._save(e,t[0],t.at(-1))):a._save(e)},a.canvas.save=a.save,a.saveCanvas=a.save,a.remove=()=>{a.noLoop(),a.canvas.remove()},"image"==e)return;function E(e,t,o){return e.slice(0,200)+a._textStyle+a._textSize+a._textFont+(a._doFill?n.fillStyle:"")+"_"+(a._doStroke&&a._strokeSet?n.lineWidth+n.strokeStyle+"_":"")+(t||"")+(o?"x"+o:"")}a.loadFont=(e,t)=>{let a=e.split("/"),n=a[a.length-1].split(".")[0].replace(" ",""),o=`@font-face {\n        font-family: '${n}';\n        src: url('${e}');\n      }`;const i=document.createElement("style");return i.textContent=o,document.head.append(i),n},a.textFont=e=>a._textFont=e,a.textSize=e=>{if(void 0===e)return a._textSize;a._textLeading=e,a._textSize=e},a.textLeading=e=>a._textLeading=e,a.textStyle=e=>a._textStyle=e,a.textAlign=(e,t)=>{n.textAlign=e,t&&(n.textBaseline=t==a.CENTER?"middle":t)},a.textWidth=e=>(n.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,n.measureText(e).width),a.textAscent=e=>(n.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,n.measureText(e).actualBoundingBoxAscent),a.textDescent=e=>(n.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,n.measureText(e).actualBoundingBoxDescent),a._textCache=!0,a._TimedCache=class extends Map{constructor(){super(),this.maxSize=500}set(e,t){t.lastAccessed=Date.now(),super.set(e,t),this.size>this.maxSize&&this.gc()}get(e){const t=super.get(e);return t&&(t.lastAccessed=Date.now()),t}gc(){let e,t=1/0,a=0;for(const[n,o]of this.entries())o.lastAccessed<t&&(t=o.lastAccessed,e=a),a++;a=e;for(const t of this.keys()){if(0==a){e=t;break}a--}this.delete(e)}},a._tic=new a._TimedCache,a.textCache=(e,t)=>(t&&(a._tic.maxSize=t),void 0!==e&&(a._textCache=e),a._textCache),a.createTextImage=(e,t,n)=>{let o=a._textCache;a._textCache=!0,a._useCache=!0,a.text(e,0,0,t,n),a._useCache=!1;let i=E(e,t,n);return a._textCache=o,a._tic.get(i)},a.text=(e,t,o,i,r)=>{if(void 0===e)return;if(e=e.toString(),!a._doFill&&!a._doStroke)return;let s,l,h,c,d,u=n.getTransform(),_=a._useCache||a._textCache&&(0!=u.b||0!=u.c);if(_){if(h=E(e,i,r),l=a._tic.get(h),l)return void a.textImage(l,t,o);l=a.createGraphics(1,1),s=l._ctx}else s=n,c=t,d=o;s.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`;let g=e.split("\n");if(_){c=0,d=a._textLeading*g.length;let t=s.measureText(" ");l._ascent=t.fontBoundingBoxAscent,l._descent=t.fontBoundingBoxDescent,r??=d+l._descent,l.resizeCanvas(Math.ceil(a.textWidth(e)),Math.ceil(r)),l.pixelDensity(a._pixelDensity),s.fillStyle=n.fillStyle,s.strokeStyle=n.strokeStyle}for(let e=0;e<g.length;e++){a._doStroke&&a._strokeSet&&s.strokeText(g[e],c,d);let t=s.fillStyle;if(a._fillSet||(s.fillStyle="black"),a._doFill&&s.fillText(g[e],c,d),a._fillSet||(s.fillStyle=t),d+=a._textLeading,d>r)break}_&&(a._tic.set(h,l),a.textImage(l,t,o))},a.textImage=(e,t,o)=>{let i=a._imageMode;a._imageMode="corner","center"==n.textAlign?t-=.5*e.width:"right"==n.textAlign&&(t-=e.width),"alphabetic"==n.textBaseline&&(o-=a._textLeading),"middle"==n.textBaseline?o-=.5*e._ascent+e._descent:"bottom"==n.textBaseline?o-=e._ascent+e._descent:"top"==n.textBaseline&&(o-=e._descent),a.image(e,t,o),a._imageMode=i};var b,D=4095,A=4,T=.5,k=e=>.5*(1-Math.cos(e*Math.PI));a.noise=(e,t,a)=>{if(t??=0,a??=0,null==b){b=new Array(4096);for(var n=0;n<4096;n++)b[n]=Math.random()}e<0&&(e=-e),t<0&&(t=-t),a<0&&(a=-a);for(var o,i,r,s,l,h=Math.floor(e),c=Math.floor(t),d=Math.floor(a),u=e-h,_=t-c,g=a-d,m=0,p=.5,f=0;f<A;f++){var v=h+(c<<4)+(d<<8);o=k(u),i=k(_),r=b[v&D],r+=o*(b[v+1&D]-r),s=b[v+16&D],r+=i*((s+=o*(b[v+16+1&D]-s))-r),s=b[(v+=256)&D],s+=o*(b[v+1&D]-s),l=b[v+16&D],s+=i*((l+=o*(b[v+16+1&D]-l))-s),m+=(r+=k(g)*(s-r))*p,p*=T,h<<=1,c<<=1,d<<=1,(u*=2)>=1&&(h++,u--),(_*=2)>=1&&(c++,_--),(g*=2)>=1&&(d++,g--)}return m},a.noiseDetail=(e,t)=>{e>0&&(A=e),t>0&&(T=t)};const P=()=>{let e,t,a=4294967295;return{setSeed(n){e=t=(null==n?Math.random()*a:n)>>>0},getSeed:()=>t,rand:()=>(e^=e<<17,e^=e>>13,e^=e<<5,(e>>>0)/a)}};let O=P();O.setSeed(),a.noiseSeed=e=>{let t=void 0===e?4294967295*Math.random():e;b||(b=new Float32Array(4096));for(var a=0;a<4096;a++)t^=t<<17,t^=t>>13,t^=t<<5,b[a]=(t>>>0)/4294967295},a.randomSeed=e=>O.setSeed(e),a.random=(e,t)=>void 0===e?O.rand():"number"==typeof e?void 0!==t?O.rand()*(t-e)+e:O.rand()*e:e[~~(e.length*O.rand())],a.randomGenerator=e=>{e==a.LCG?O=(()=>{const e=4294967296;let t,a;return{setSeed(n){a=t=(null==n?Math.random()*e:n)>>>0},getSeed:()=>t,rand:()=>(a=(1664525*a+1013904223)%e,a/e)}})():e==a.SHR3&&(O=P()),O.setSeed()};var z=new function(){var e,t,a,n=new Array(128),o=new Array(256),i=new Array(128),r=new Array(128),s=new Array(256),l=new Array(256),h=()=>4294967296*O.rand()-2147483648,c=()=>.5+2.328306e-10*(h()<<0),d=()=>{for(var t,o,s,l,d=3.44262;;){if(t=a*i[e],0==e){do{s=c(),l=c(),t=.2904764*-Math.log(s),o=-Math.log(l)}while(o+o<t*t);return a>0?d+t:-d-t}if(r[e]+c()*(r[e-1]-r[e])<Math.exp(-.5*t*t))return t;if(a=h(),e=127&a,Math.abs(a)<n[e])return a*i[e]}},u=()=>{for(var a;;){if(0==e)return 7.69711-Math.log(c());if(a=t*s[e],l[e]+c()*(l[e-1]-l[e])<Math.exp(-a))return a;if((t=h())<o[e=255&t])return t*s[e]}};this.SHR3=h,this.UNI=c,this.RNOR=()=>(a=h(),e=127&a,Math.abs(a)<n[e]?a*i[e]:d()),this.REXP=()=>(t=h()>>>0)<n[e=255&t]?t*s[e]:u(),this.zigset=()=>{var e,t,a=2147483648,h=4294967296,c=3.442619855899,d=c,u=.00991256303526217,_=7.697117470131487,g=_,m=.003949659822581572;for(e=u/Math.exp(-.5*c*c),n[0]=Math.floor(c/e*a),n[1]=0,i[0]=e/a,i[127]=c/a,r[0]=1,r[127]=Math.exp(-.5*c*c),t=126;t>=1;t--)c=Math.sqrt(-2*Math.log(u/c+Math.exp(-.5*c*c))),n[t+1]=Math.floor(c/d*a),d=c,r[t]=Math.exp(-.5*c*c),i[t]=c/a;for(e=m/Math.exp(-_),o[0]=Math.floor(_/e*h),o[1]=0,s[0]=e/h,s[255]=_/h,l[0]=1,l[255]=Math.exp(-_),t=254;t>=1;t--)_=-Math.log(m/_+Math.exp(-_)),o[t+1]=Math.floor(_/g*h),g=_,l[t]=Math.exp(-_),s[t]=_/h}};function F(){let e=performance.now();if(a._loop)i=a._targetFrameRate?setTimeout(F,1e3/a._targetFrameRate):requestAnimationFrame(F);else if(a.frameCount>0)return;if(i&&0!=a.frameCount){if(e-a._lastFrameTime<1e3/(a._targetFrameRate||60)-5)return}a.deltaTime=e-a._lastFrameTime,a._frameRate=1e3/a.deltaTime,a.frameCount++,a._shouldResize&&(a._windowResizedFn(),a._shouldResize=!1);for(let e of Q5.prototype._methods.pre)e.call(a);w(),r=!0,n.save(),a._drawFn();for(let e of Q5.prototype._methods.post)e.call(a);n.restore();let t=performance.now();a._fps=Math.round(1e3/(t-e)),a._lastFrameTime=e,a.pmouseX=a.mouseX,a.pmouseY=a.mouseY}function Q(e){const t=a.canvas.getBoundingClientRect(),n=a.canvas.scrollWidth/a.width||1,o=a.canvas.scrollHeight/a.height||1;return{x:(e.clientX-t.left)/n,y:(e.clientY-t.top)/o,id:e.identifier}}function N(){return a._touchStartedFn.isPlaceHolder&&a._touchMovedFn.isPlaceHolder&&a._touchEndedFn.isPlaceHolder}z.hasInit=!1,a.randomGaussian=(e,t)=>(z.hasInit||(z.zigset(),z.hasInit=!0),z.RNOR()*t+e),a.randomExponential=()=>(z.hasInit||(z.zigset(),z.hasInit=!0),z.REXP()),a.print=console.log,a.cursor=(e,t,n)=>{let o="";e.includes(".")&&(e=`url("${e}")`,o=", auto"),void 0!==t&&(e+=" "+t+" "+n),a.canvas.style.cursor=e+o},a.noCursor=()=>{a.canvas.style.cursor="none"},a.createCapture=e=>{var t=document.createElement("video");return t.playsinline="playsinline",t.autoplay="autoplay",navigator.mediaDevices.getUserMedia(e).then((e=>{t.srcObject=e})),t.style.position="absolute",t.style.opacity=1e-5,t.style.zIndex=-1e3,document.body.append(t),t},a.noLoop=()=>{a._loop=!1,i=null},a.loop=()=>{a._loop=!0,null==i&&F()},a.redraw=()=>F(),a.frameRate=e=>(e&&(a._targetFrameRate=e),a._frameRate),a.getFrameRate=()=>a._frameRate,a.getFPS=()=>a._fps,a._updateMouse=function(e){let t=this,a=t.canvas.getBoundingClientRect(),n=t.canvas.scrollWidth/t.width||1,o=t.canvas.scrollHeight/t.height||1;t.mouseX=(e.clientX-a.left)/n,t.mouseY=(e.clientY-a.top)/o}.bind(a),a._onmousemove=function(e){a._updateMouse(e),this.mouseIsPressed?this._mouseDraggedFn(e):this._mouseMovedFn(e)}.bind(a),a._onmousedown=e=>{a._updateMouse(e),a.mouseIsPressed=!0,a.mouseButton=[a.LEFT,a.CENTER,a.RIGHT][e.button],a._mousePressedFn(e)},a._onmouseup=e=>{a._updateMouse(e),a.mouseIsPressed=!1,a._mouseReleasedFn(e)},a._onclick=e=>{a._updateMouse(e),a.mouseIsPressed=!0,a._mouseClickedFn(e),a.mouseIsPressed=!1},a._onkeydown=e=>{e.repeat||(a.keyIsPressed=!0,a.key=e.key,a.keyCode=e.keyCode,c[a.keyCode]=!0,a._keyPressedFn(e),1==e.key.length&&a._keyTypedFn(e))},a._onkeyup=e=>{a.keyIsPressed=!1,a.key=e.key,a.keyCode=e.keyCode,c[a.keyCode]=!1,a._keyReleasedFn(e)},a.canvas.onmousedown=e=>a._onmousedown(e),a.canvas.onmouseup=e=>a._onmouseup(e),a.canvas.onclick=e=>a._onclick(e),a.keyIsDown=e=>!!c[e],a._ontouchstart=e=>{a.touches=[...e.touches].map(Q),N()&&(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseIsPressed=!0,a.mouseButton=a.LEFT,a._mousePressedFn(e)||e.preventDefault()),a._touchStartedFn(e)||e.preventDefault()},a._ontouchmove=e=>{a.touches=[...e.touches].map(Q),N()&&(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseIsPressed=!0,a.mouseButton=a.LEFT,a._mouseDraggedFn(e)||e.preventDefault()),a._touchMovedFn(e)||e.preventDefault()},a._ontouchend=e=>{a.touches=[...e.touches].map(Q),N()&&(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseIsPressed=!1,a._mouseReleasedFn(e)||e.preventDefault()),a._touchEndedFn(e)||e.preventDefault()},a.canvas.ontouchstart=e=>a._ontouchstart(e),a.canvas.ontouchmove=e=>a._ontouchmove(e),a.canvas.ontouchcancel=a.canvas.ontouchend=e=>a._ontouchend(e),a.hasSensorPermission=!window.DeviceOrientationEvent&&!window.DeviceMotionEvent||!(DeviceOrientationEvent.requestPermission||DeviceMotionEvent.requestPermission),a.requestSensorPermissions=()=>{DeviceOrientationEvent.requestPermission&&DeviceOrientationEvent.requestPermission().then((e=>{"granted"==e&&DeviceMotionEvent.requestPermission&&DeviceMotionEvent.requestPermission().then((e=>{"granted"==e&&(a.hasSensorPermission=!0)})).catch(alert)})).catch(alert)};"undefined"!=typeof window&&(window.ondeviceorientation=e=>{a.pRotationX=a.rotationX,a.pRotationY=a.rotationY,a.pRotationZ=a.rotationZ,a.pRelRotationX=a.relRotationX,a.pRelRotationY=a.relRotationY,a.pRelRotationZ=a.relRotationZ,a.rotationX=e.beta*(Math.PI/180),a.rotationY=e.gamma*(Math.PI/180),a.rotationZ=e.alpha*(Math.PI/180),a.relRotationX=[-a.rotationY,-a.rotationX,a.rotationY][1+~~(window.orientation/90)],a.relRotationY=[-a.rotationX,a.rotationY,a.rotationX][1+~~(window.orientation/90)],a.relRotationZ=a.rotationZ},window.ondevicemotion=e=>{if(a.pAccelerationX=a.accelerationX,a.pAccelerationY=a.accelerationY,a.pAccelerationZ=a.accelerationZ,!e.acceleration){let i=((e,t)=>[(e[0]*t[0]+e[1]*t[1]+e[2]*t[2]+e[3])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15]),(e[4]*t[0]+e[5]*t[1]+e[6]*t[2]+e[7])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15]),(e[8]*t[0]+e[9]*t[1]+e[10]*t[2]+e[11])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15])])((o=a.rotationY,t=[a.cos(o),0,a.sin(o),0,0,1,0,0,-a.sin(o),0,a.cos(o),0,0,0,0,1],n=(e=>[1,0,0,0,0,a.cos(e),-a.sin(e),0,0,a.sin(e),a.cos(e),0,0,0,0,1])(a.rotationX),[t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15]]),[0,0,-9.80665]);a.accelerationX=e.accelerationIncludingGravity.x+i[0],a.accelerationY=e.accelerationIncludingGravity.y+i[1],a.accelerationZ=e.accelerationIncludingGravity.z-i[2]}var t,n,o}),a.year=()=>(new Date).getFullYear(),a.day=()=>(new Date).getDay(),a.hour=()=>(new Date).getHours(),a.minute=()=>(new Date).getMinutes(),a.second=()=>(new Date).getSeconds(),a.millis=()=>performance.now()-d,a.storeItem=localStorage.setItem,a.getItem=localStorage.getItem,a.removeItem=localStorage.removeItem,a.clearStorage=localStorage.clear,a._loadFile=(e,t,a)=>{h++;let n={};return fetch(e).then((e=>"json"==a?e.json():"text"==a?e.text():void 0)).then((e=>{h--,Object.assign(n,e),t&&t(e)})),n},a.loadStrings=(e,t)=>a._loadFile(e,t,"text"),a.loadJSON=(e,t)=>a._loadFile(e,t,"json"),a.loadSound=(e,t)=>{h++;let a=new Audio(e);return a.addEventListener("canplaythrough",(()=>{h--,t&&t(a)})),a.load(),a.setVolume=e=>a.volume=e,a},a.Element=function(e){this.elt=e},a._elements=[],"global"==e&&(Object.assign(Q5,a),delete Q5.Q5),Q5.Image??=_Q5Image;for(let G of Q5.prototype._methods.init)G.call(a);if("global"==e){let V=Object.getOwnPropertyNames(a);for(let q of V)"function"==typeof a[q]?window[q]=a[q]:Object.defineProperty(window,q,{get:()=>a[q],set:e=>a[q]=e})}function L(){let t="global"==e?window:a,n=["setup","draw","preload","mouseMoved","mousePressed","mouseReleased","mouseDragged","mouseClicked","keyPressed","keyReleased","keyTyped","touchStarted","touchMoved","touchEnded","windowResized"];for(let e of n){let n="_"+e+"Fn";a[n]=()=>{},a[n].isPlaceHolder=!0,t[e]?a[n]=t[e]:Object.defineProperty(a,e,{set:e=>{a[n]=e}})}if("graphics"!=e||"image"!=e){a._preloadFn(),d=performance.now(),function e(){if(h>0)return requestAnimationFrame(e);a._setupFn(),requestAnimationFrame(F)}()}addEventListener("mousemove",(e=>a._onmousemove(e)),!1),addEventListener("keydown",(e=>a._onkeydown(e)),!1),addEventListener("keyup",(e=>a._onkeyup(e)),!1)}"function"==typeof e&&e(a),"global"==e?L():requestAnimationFrame(L)}Q5.Color=class{constructor(e,t,a,n){this.MAGIC=786698,this._r=e,this._g=t,this._b=a,this._a=n,this._h=0,this._s=0,this._v=0,this._hsvInferred=!1}setRed(e){this._r=e,this._hsvInferred=!1}setGreen(e){this._g=e,this._hsvInferred=!1}setBlue(e){this._b=e,this._hsvInferred=!1}setAlpha(e){this._a=e/255,this._hsvInferred=!1}get levels(){return[this._r,this._g,this._b,255*this._a]}_inferHSV(){this._hsvInferred||([this._h,this._s,this._v]=Q5.Color._rgb2hsv(this._r,this._g,this._b),this._hsvInferred=!0)}toString(){return`rgba(${Math.round(this._r)},${Math.round(this._g)},${Math.round(this._b)},${~~(1e3*this._a)/1e3})`}},Q5._instanceCount=0,Q5.Color._rgb2hsv=(e,t,a)=>{let n,o,i,r,s;return n=e<t?e<a?e:a:t<a?t:a,o=e>t?e>a?e:a:t>a?t:a,s=100*o/255,0==s?(i=0,r=0,[i,r,s]):(r=100*(o-n)/o,0==r?(i=0,[i,r,s]):(i=o==e?0+60*(t-a)/(o-n):o==t?120+60*(a-e)/(o-n):240+60*(e-t)/(o-n),[i,r,s]))},Q5.Color._hsv2rgb=(e,t,a)=>{let n,o,i,r,s,l,h,c,d;if(0==t)return n=a,o=a,i=a,[255*n,255*o,255*i];switch(r=e,r>360&&(r=0),r/=60,s=~~r,l=r-s,h=a*(1-t),c=a*(1-t*l),d=a*(1-t*(1-l)),s){case 0:n=a,o=d,i=h;break;case 1:n=c,o=a,i=h;break;case 2:n=h,o=a,i=d;break;case 3:n=h,o=c,i=a;break;case 4:n=d,o=h,i=a;break;default:n=a,o=h,i=c}return[255*n,255*o,255*i]},Q5.Vector=class{constructor(e,t,a,n){this.x=e||0,this.y=t||0,this.z=a||0,this._$=n||window,this._cn=null,this._cnsq=null}set(e,t,a){this.x=e||0,this.y=t||0,this.z=a||0}copy(){return new Q5.Vector(this.x,this.y,this.z)}_arg2v(e,t,a){return void 0!==e.x?e:void 0!==t?{x:e,y:t,z:a||0}:{x:e,y:e,z:e}}_calcNorm(){null==this._cnsq&&(this._cnsq=this.x*this.x+this.y*this.y+this.z*this.z,this._cn=Math.sqrt(this._cnsq))}_deprecNorm(){this._cnsq=null,this._cn=null}add(){let e=this._arg2v(...arguments);return this.x+=e.x,this.y+=e.y,this.z+=e.z,this._deprecNorm(),this}rem(){let e=this._arg2v(...arguments);return this.x%=e.x,this.y%=e.y,this.z%=e.z,this._deprecNorm(),this}sub(){let e=this._arg2v(...arguments);return this.x-=e.x,this.y-=e.y,this.z-=e.z,this._deprecNorm(),this}mult(){let e=this._arg2v(...arguments);return this.x*=e.x,this.y*=e.y,this.z*=e.z,this._deprecNorm(),this}div(){let e=this._arg2v(...arguments);return e.x?this.x/=e.x:this.x=0,e.y?this.y/=e.y:this.y=0,e.z?this.z/=e.z:this.z=0,this._deprecNorm(),this}mag(){return this._calcNorm(),this._cn}magSq(){return this._calcNorm(),this._cnsq}dot(){let e=this._arg2v(...arguments);return this.x*e.x+this.y*e.y+this.z*e.z}dist(){let e=this._arg2v(...arguments),t=this.x-e.x,a=this.y-e.y,n=this.z-e.z;return Math.sqrt(t*t+a*a+n*n)}cross(){let e=this._arg2v(...arguments),t=this.y*e.z-this.z*e.y,a=this.z*e.x-this.x*e.z,n=this.x*e.y-this.y*e.x;return this.x=t,this.y=a,this.z=n,this._deprecNorm(),this}normalize(){this._calcNorm();let e=this._cn;return 0!=e&&(this.x/=e,this.y/=e,this.z/=e),this._cn=1,this._cnsq=1,this}limit(e){this._calcNorm();let t=this._cn;if(t>e){let a=e/t;this.x*=a,this.y*=a,this.z*=a,this._cn=e,this._cnsq=e*e}return this}setMag(e){this._calcNorm();let t=e/this._cn;return this.x*=t,this.y*=t,this.z*=t,this._cn=e,this._cnsq=e*e,this}heading(){return this._$.atan2(this.y,this.x)}rotate(e){let t=this._$.cos(e),a=this._$.sin(e),n=this.x*t-this.y*a,o=this.x*a+this.y*t;return this.x=n,this.y=o,this}angleBetween(){let e=this._arg2v(...arguments);const t=this.dot(e)/(this.mag()*e.mag());let a;return a=this._$.tan(Math.min(1,Math.max(-1,t))),a*=Math.sign(this.cross(e).z||1),a}lerp(){let e=[...arguments],t=this._arg2v(...e.slice(0,-1)),a=e[e.length-1];return this.x+=(t.x-this.x)*a,this.y+=(t.y-this.y)*a,this.z+=(t.z-this.z)*a,this._deprecNorm(),this}reflect(e){return e.normalize(),this.sub(e.mult(2*this.dot(e)))}array(){return[this.x,this.y,this.z]}equals(e,t){return t??=Number.EPSILON||0,Math.abs(e.x-this.x)<t&&Math.abs(e.y-this.y)<t&&Math.abs(e.z-this.z)<t}fromAngle(e,t){return void 0===t&&(t=1),this._cn=t,this._cnsq=t*t,this.x=t*this._$.cos(e),this.y=t*this._$.sin(e),this.z=0,this}fromAngles(e,t,a){void 0===a&&(a=1),this._cn=a,this._cnsq=a*a;const n=this._$.cos(t),o=this._$.sin(t),i=this._$.cos(e),r=this._$.sin(e);return this.x=a*r*o,this.y=-a*i,this.z=a*r*n,this}random2D(){return this._cn=this._cnsq=1,this.fromAngle(Math.random()*Math.PI*2)}random3D(){return this._cn=this._cnsq=1,this.fromAngles(Math.random()*Math.PI*2,Math.random()*Math.PI*2)}toString(){return`[${this.x}, ${this.y}, ${this.z}]`}},Q5.Vector.add=(e,t)=>e.copy().add(t),Q5.Vector.cross=(e,t)=>e.copy().cross(t),Q5.Vector.dist=(e,t)=>Math.hypot(e.x-t.x,e.y-t.y,e.z-t.z),Q5.Vector.div=(e,t)=>e.copy().div(t),Q5.Vector.dot=(e,t)=>e.copy().dot(t),Q5.Vector.equals=(e,t,a)=>e.equals(t,a),Q5.Vector.lerp=(e,t,a)=>e.copy().lerp(t,a),Q5.Vector.limit=(e,t)=>e.copy().limit(t),Q5.Vector.heading=e=>Math.atan2(e.y,e.x),Q5.Vector.magSq=e=>e.x*e.x+e.y*e.y+e.z*e.z,Q5.Vector.mag=e=>Math.sqrt(Q5.Vector.magSq(e)),Q5.Vector.mult=(e,t)=>e.copy().mult(t),Q5.Vector.normalize=e=>e.copy().normalize(),Q5.Vector.rem=(e,t)=>e.copy().rem(t),Q5.Vector.sub=(e,t)=>e.copy().sub(t);for(let e of["fromAngle","fromAngles","random2D","random3D"])Q5.Vector[e]=(t,a,n)=>(new Q5.Vector)[e](t,a,n);class _Q5Image extends Q5{constructor(e,t){super("image"),this.createCanvas(e,t),this._loop=!1}}Q5._friendlyError=(e,t)=>{throw t+": "+e},Q5.prototype._methods={init:[],pre:[],post:[],remove:[]},Q5.prototype.registerMethod=function(){Q5.prototype._methods[arguments[0]].push(arguments[1])},Q5.prototype.registerPreloadMethod=()=>{},Q5._validateParameters=()=>!0,"undefined"!=typeof module?module.exports=Q5:window.p5??=Q5,document.addEventListener("DOMContentLoaded",(()=>{Q5._hasGlobal||new Q5("auto")}));