q5 1.9.4 → 1.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/package.json +1 -1
- package/q5.js +230 -234
- package/q5.min.js +1 -1
package/README.md
CHANGED
|
@@ -181,8 +181,9 @@ Thanks in large part to @LingDong-'s design, q5 is well organized, concise, and
|
|
|
181
181
|
|
|
182
182
|
Features added by @quinton-ashley:
|
|
183
183
|
|
|
184
|
-
- `
|
|
185
|
-
- `
|
|
184
|
+
- `opacity(globalAlpha)`: set the opacity multiplier for anything subsequently drawn to the canvas in a range between 0 (transparent) and 1 (opaque).
|
|
185
|
+
- `textCache(enabled)`: 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.
|
|
186
|
+
- `loadSound(file)`: Basic sound support in q5.js, returns a Web Audio object with `setVolume()` and `setLoop()` functions added. Not as powerful as p5.sound, but it's good enough in many cases.
|
|
186
187
|
- `ctx`: an alias for `drawingContext`
|
|
187
188
|
|
|
188
189
|
Features added by @LingDong-:
|
|
@@ -219,9 +220,9 @@ The following benchmarks are generated with Google Chrome 120, on a MacBook Air
|
|
|
219
220
|
|
|
220
221
|
Less time (milliseconds) is better.
|
|
221
222
|
|
|
222
|
-
| Task
|
|
223
|
-
|
|
|
224
|
-
| Generate
|
|
223
|
+
| Task | p5.js | q5.js |
|
|
224
|
+
| ------------------------------------------------- | ----- | ----- |
|
|
225
|
+
| Generate 10,000 random colors with `color(r,g,b)` | 33ms | 3ms |
|
|
225
226
|
|
|
226
227
|
## Older Benchmarks
|
|
227
228
|
|
package/package.json
CHANGED
package/q5.js
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
* @type {Q5}
|
|
10
10
|
*/
|
|
11
11
|
function Q5(scope, parent) {
|
|
12
|
+
let $ = this;
|
|
12
13
|
let preloadCnt = 0;
|
|
13
14
|
if (!scope) {
|
|
14
15
|
scope = 'global';
|
|
@@ -19,11 +20,10 @@ function Q5(scope, parent) {
|
|
|
19
20
|
if (!(window.setup || window.draw)) return;
|
|
20
21
|
else scope = 'global';
|
|
21
22
|
}
|
|
22
|
-
if (scope == 'global') Q5._hasGlobal = true;
|
|
23
|
+
if (scope == 'global') Q5._hasGlobal = $._isGlobal = true;
|
|
23
24
|
|
|
24
25
|
// CANVAS
|
|
25
26
|
|
|
26
|
-
let $ = this;
|
|
27
27
|
if (scope == 'image' || scope == 'graphics') {
|
|
28
28
|
$.canvas = new OffscreenCanvas(100, 100);
|
|
29
29
|
} else {
|
|
@@ -34,7 +34,6 @@ function Q5(scope, parent) {
|
|
|
34
34
|
|
|
35
35
|
$.canvas.width = $.width = 100;
|
|
36
36
|
$.canvas.height = $.height = 100;
|
|
37
|
-
$._windowResizedFn = () => {};
|
|
38
37
|
|
|
39
38
|
if (scope != 'graphics' && scope != 'image') {
|
|
40
39
|
$._setupDone = false;
|
|
@@ -84,6 +83,7 @@ function Q5(scope, parent) {
|
|
|
84
83
|
|
|
85
84
|
ctx = $.ctx = $.drawingContext = $.canvas.getContext('2d', opt);
|
|
86
85
|
Object.assign($.canvas, opt);
|
|
86
|
+
if ($._colorMode == 'rgb') $.colorMode('rgb');
|
|
87
87
|
defaultStyle();
|
|
88
88
|
ctx.save();
|
|
89
89
|
if (scope != 'image') {
|
|
@@ -105,163 +105,6 @@ function Q5(scope, parent) {
|
|
|
105
105
|
if (imgData != null) ctx.putImageData(imgData, 0, 0);
|
|
106
106
|
};
|
|
107
107
|
|
|
108
|
-
let filterImpl = [];
|
|
109
|
-
filterImpl[$.THRESHOLD] = (data, thresh) => {
|
|
110
|
-
if (thresh === undefined) thresh = 127.5;
|
|
111
|
-
else thresh *= 255;
|
|
112
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
113
|
-
const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
|
|
114
|
-
data[i] = data[i + 1] = data[i + 2] = gray >= thresh ? 255 : 0;
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
filterImpl[$.GRAY] = (data) => {
|
|
118
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
119
|
-
const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
|
|
120
|
-
data[i] = data[i + 1] = data[i + 2] = gray;
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
filterImpl[$.OPAQUE] = (data) => {
|
|
124
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
125
|
-
data[i + 3] = 255;
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
filterImpl[$.INVERT] = (data) => {
|
|
129
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
130
|
-
data[i] = 255 - data[i];
|
|
131
|
-
data[i + 1] = 255 - data[i + 1];
|
|
132
|
-
data[i + 2] = 255 - data[i + 2];
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
filterImpl[$.POSTERIZE] = (data, lvl) => {
|
|
136
|
-
let lvl1 = lvl - 1;
|
|
137
|
-
for (let i = 0; i < data.length; i += 4) {
|
|
138
|
-
data[i] = (((data[i] * lvl) >> 8) * 255) / lvl1;
|
|
139
|
-
data[i + 1] = (((data[i + 1] * lvl) >> 8) * 255) / lvl1;
|
|
140
|
-
data[i + 2] = (((data[i + 2] * lvl) >> 8) * 255) / lvl1;
|
|
141
|
-
}
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
filterImpl[$.DILATE] = (data) => {
|
|
145
|
-
makeTmpBuf();
|
|
146
|
-
tmpBuf.set(data);
|
|
147
|
-
let [w, h] = [$.canvas.width, $.canvas.height];
|
|
148
|
-
for (let i = 0; i < h; i++) {
|
|
149
|
-
for (let j = 0; j < w; j++) {
|
|
150
|
-
let l = 4 * Math.max(j - 1, 0);
|
|
151
|
-
let r = 4 * Math.min(j + 1, w - 1);
|
|
152
|
-
let t = 4 * Math.max(i - 1, 0) * w;
|
|
153
|
-
let b = 4 * Math.min(i + 1, h - 1) * w;
|
|
154
|
-
let oi = 4 * i * w;
|
|
155
|
-
let oj = 4 * j;
|
|
156
|
-
for (let k = 0; k < 4; k++) {
|
|
157
|
-
let kt = k + t;
|
|
158
|
-
let kb = k + b;
|
|
159
|
-
let ko = k + oi;
|
|
160
|
-
data[oi + oj + k] = Math.max(
|
|
161
|
-
/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
|
|
162
|
-
tmpBuf[ko + l],
|
|
163
|
-
tmpBuf[ko + oj],
|
|
164
|
-
tmpBuf[ko + r],
|
|
165
|
-
/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
|
|
166
|
-
);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
filterImpl[$.ERODE] = (data) => {
|
|
172
|
-
makeTmpBuf();
|
|
173
|
-
tmpBuf.set(data);
|
|
174
|
-
let [w, h] = [$.canvas.width, $.canvas.height];
|
|
175
|
-
for (let i = 0; i < h; i++) {
|
|
176
|
-
for (let j = 0; j < w; j++) {
|
|
177
|
-
let l = 4 * Math.max(j - 1, 0);
|
|
178
|
-
let r = 4 * Math.min(j + 1, w - 1);
|
|
179
|
-
let t = 4 * Math.max(i - 1, 0) * w;
|
|
180
|
-
let b = 4 * Math.min(i + 1, h - 1) * w;
|
|
181
|
-
let oi = 4 * i * w;
|
|
182
|
-
let oj = 4 * j;
|
|
183
|
-
for (let k = 0; k < 4; k++) {
|
|
184
|
-
let kt = k + t;
|
|
185
|
-
let kb = k + b;
|
|
186
|
-
let ko = k + oi;
|
|
187
|
-
data[oi + oj + k] = Math.min(
|
|
188
|
-
/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
|
|
189
|
-
tmpBuf[ko + l],
|
|
190
|
-
tmpBuf[ko + oj],
|
|
191
|
-
tmpBuf[ko + r],
|
|
192
|
-
/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
|
|
193
|
-
);
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
};
|
|
198
|
-
filterImpl[$.BLUR] = (data, rad) => {
|
|
199
|
-
rad = rad || 1;
|
|
200
|
-
rad = Math.floor(rad * $._pixelDensity);
|
|
201
|
-
makeTmpBuf();
|
|
202
|
-
tmpBuf.set(data);
|
|
203
|
-
|
|
204
|
-
let ksize = rad * 2 + 1;
|
|
205
|
-
|
|
206
|
-
function gauss1d(ksize) {
|
|
207
|
-
let im = new Float32Array(ksize);
|
|
208
|
-
let sigma = 0.3 * rad + 0.8;
|
|
209
|
-
let ss2 = sigma * sigma * 2;
|
|
210
|
-
for (let i = 0; i < ksize; i++) {
|
|
211
|
-
let x = i - ksize / 2;
|
|
212
|
-
let z = Math.exp(-(x * x) / ss2) / (2.5066282746 * sigma);
|
|
213
|
-
im[i] = z;
|
|
214
|
-
}
|
|
215
|
-
return im;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
let kern = gauss1d(ksize);
|
|
219
|
-
let [w, h] = [$.canvas.width, $.canvas.height];
|
|
220
|
-
for (let i = 0; i < h; i++) {
|
|
221
|
-
for (let j = 0; j < w; j++) {
|
|
222
|
-
let s0 = 0,
|
|
223
|
-
s1 = 0,
|
|
224
|
-
s2 = 0,
|
|
225
|
-
s3 = 0;
|
|
226
|
-
for (let k = 0; k < ksize; k++) {
|
|
227
|
-
let jk = Math.min(Math.max(j - rad + k, 0), w - 1);
|
|
228
|
-
let idx = 4 * (i * w + jk);
|
|
229
|
-
s0 += tmpBuf[idx] * kern[k];
|
|
230
|
-
s1 += tmpBuf[idx + 1] * kern[k];
|
|
231
|
-
s2 += tmpBuf[idx + 2] * kern[k];
|
|
232
|
-
s3 += tmpBuf[idx + 3] * kern[k];
|
|
233
|
-
}
|
|
234
|
-
let idx = 4 * (i * w + j);
|
|
235
|
-
data[idx] = s0;
|
|
236
|
-
data[idx + 1] = s1;
|
|
237
|
-
data[idx + 2] = s2;
|
|
238
|
-
data[idx + 3] = s3;
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
tmpBuf.set(data);
|
|
242
|
-
for (let i = 0; i < h; i++) {
|
|
243
|
-
for (let j = 0; j < w; j++) {
|
|
244
|
-
let s0 = 0,
|
|
245
|
-
s1 = 0,
|
|
246
|
-
s2 = 0,
|
|
247
|
-
s3 = 0;
|
|
248
|
-
for (let k = 0; k < ksize; k++) {
|
|
249
|
-
let ik = Math.min(Math.max(i - rad + k, 0), h - 1);
|
|
250
|
-
let idx = 4 * (ik * w + j);
|
|
251
|
-
s0 += tmpBuf[idx] * kern[k];
|
|
252
|
-
s1 += tmpBuf[idx + 1] * kern[k];
|
|
253
|
-
s2 += tmpBuf[idx + 2] * kern[k];
|
|
254
|
-
s3 += tmpBuf[idx + 3] * kern[k];
|
|
255
|
-
}
|
|
256
|
-
let idx = 4 * (i * w + j);
|
|
257
|
-
data[idx] = s0;
|
|
258
|
-
data[idx + 1] = s1;
|
|
259
|
-
data[idx + 2] = s2;
|
|
260
|
-
data[idx + 3] = s3;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
};
|
|
264
|
-
|
|
265
108
|
function makeTmpCtx(w, h) {
|
|
266
109
|
h ??= w || $.canvas.height;
|
|
267
110
|
w ??= $.canvas.width;
|
|
@@ -297,6 +140,172 @@ function Q5(scope, parent) {
|
|
|
297
140
|
}
|
|
298
141
|
}
|
|
299
142
|
|
|
143
|
+
function initSoftFilters() {
|
|
144
|
+
$._filters = [];
|
|
145
|
+
$._filters[$.THRESHOLD] = (data, thresh) => {
|
|
146
|
+
if (thresh === undefined) thresh = 127.5;
|
|
147
|
+
else thresh *= 255;
|
|
148
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
149
|
+
const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
|
|
150
|
+
data[i] = data[i + 1] = data[i + 2] = gray >= thresh ? 255 : 0;
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
$._filters[$.GRAY] = (data) => {
|
|
154
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
155
|
+
const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
|
|
156
|
+
data[i] = data[i + 1] = data[i + 2] = gray;
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
$._filters[$.OPAQUE] = (data) => {
|
|
160
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
161
|
+
data[i + 3] = 255;
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
$._filters[$.INVERT] = (data) => {
|
|
165
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
166
|
+
data[i] = 255 - data[i];
|
|
167
|
+
data[i + 1] = 255 - data[i + 1];
|
|
168
|
+
data[i + 2] = 255 - data[i + 2];
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
$._filters[$.POSTERIZE] = (data, lvl) => {
|
|
172
|
+
lvl ??= 4;
|
|
173
|
+
let lvl1 = lvl - 1;
|
|
174
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
175
|
+
data[i] = (((data[i] * lvl) >> 8) * 255) / lvl1;
|
|
176
|
+
data[i + 1] = (((data[i + 1] * lvl) >> 8) * 255) / lvl1;
|
|
177
|
+
data[i + 2] = (((data[i + 2] * lvl) >> 8) * 255) / lvl1;
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
$._filters[$.DILATE] = (data) => {
|
|
181
|
+
makeTmpBuf();
|
|
182
|
+
tmpBuf.set(data);
|
|
183
|
+
let [w, h] = [$.canvas.width, $.canvas.height];
|
|
184
|
+
for (let i = 0; i < h; i++) {
|
|
185
|
+
for (let j = 0; j < w; j++) {
|
|
186
|
+
let l = 4 * Math.max(j - 1, 0);
|
|
187
|
+
let r = 4 * Math.min(j + 1, w - 1);
|
|
188
|
+
let t = 4 * Math.max(i - 1, 0) * w;
|
|
189
|
+
let b = 4 * Math.min(i + 1, h - 1) * w;
|
|
190
|
+
let oi = 4 * i * w;
|
|
191
|
+
let oj = 4 * j;
|
|
192
|
+
for (let k = 0; k < 4; k++) {
|
|
193
|
+
let kt = k + t;
|
|
194
|
+
let kb = k + b;
|
|
195
|
+
let ko = k + oi;
|
|
196
|
+
data[oi + oj + k] = Math.max(
|
|
197
|
+
/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
|
|
198
|
+
tmpBuf[ko + l],
|
|
199
|
+
tmpBuf[ko + oj],
|
|
200
|
+
tmpBuf[ko + r],
|
|
201
|
+
/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
$._filters[$.ERODE] = (data) => {
|
|
208
|
+
makeTmpBuf();
|
|
209
|
+
tmpBuf.set(data);
|
|
210
|
+
let [w, h] = [$.canvas.width, $.canvas.height];
|
|
211
|
+
for (let i = 0; i < h; i++) {
|
|
212
|
+
for (let j = 0; j < w; j++) {
|
|
213
|
+
let l = 4 * Math.max(j - 1, 0);
|
|
214
|
+
let r = 4 * Math.min(j + 1, w - 1);
|
|
215
|
+
let t = 4 * Math.max(i - 1, 0) * w;
|
|
216
|
+
let b = 4 * Math.min(i + 1, h - 1) * w;
|
|
217
|
+
let oi = 4 * i * w;
|
|
218
|
+
let oj = 4 * j;
|
|
219
|
+
for (let k = 0; k < 4; k++) {
|
|
220
|
+
let kt = k + t;
|
|
221
|
+
let kb = k + b;
|
|
222
|
+
let ko = k + oi;
|
|
223
|
+
data[oi + oj + k] = Math.min(
|
|
224
|
+
/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
|
|
225
|
+
tmpBuf[ko + l],
|
|
226
|
+
tmpBuf[ko + oj],
|
|
227
|
+
tmpBuf[ko + r],
|
|
228
|
+
/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
$._filters[$.BLUR] = (data, rad) => {
|
|
235
|
+
rad = rad || 1;
|
|
236
|
+
rad = Math.floor(rad * $._pixelDensity);
|
|
237
|
+
makeTmpBuf();
|
|
238
|
+
tmpBuf.set(data);
|
|
239
|
+
|
|
240
|
+
let ksize = rad * 2 + 1;
|
|
241
|
+
|
|
242
|
+
function gauss1d(ksize) {
|
|
243
|
+
let im = new Float32Array(ksize);
|
|
244
|
+
let sigma = 0.3 * rad + 0.8;
|
|
245
|
+
let ss2 = sigma * sigma * 2;
|
|
246
|
+
for (let i = 0; i < ksize; i++) {
|
|
247
|
+
let x = i - ksize / 2;
|
|
248
|
+
let z = Math.exp(-(x * x) / ss2) / (2.5066282746 * sigma);
|
|
249
|
+
im[i] = z;
|
|
250
|
+
}
|
|
251
|
+
return im;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
let kern = gauss1d(ksize);
|
|
255
|
+
let [w, h] = [$.canvas.width, $.canvas.height];
|
|
256
|
+
for (let i = 0; i < h; i++) {
|
|
257
|
+
for (let j = 0; j < w; j++) {
|
|
258
|
+
let s0 = 0,
|
|
259
|
+
s1 = 0,
|
|
260
|
+
s2 = 0,
|
|
261
|
+
s3 = 0;
|
|
262
|
+
for (let k = 0; k < ksize; k++) {
|
|
263
|
+
let jk = Math.min(Math.max(j - rad + k, 0), w - 1);
|
|
264
|
+
let idx = 4 * (i * w + jk);
|
|
265
|
+
s0 += tmpBuf[idx] * kern[k];
|
|
266
|
+
s1 += tmpBuf[idx + 1] * kern[k];
|
|
267
|
+
s2 += tmpBuf[idx + 2] * kern[k];
|
|
268
|
+
s3 += tmpBuf[idx + 3] * kern[k];
|
|
269
|
+
}
|
|
270
|
+
let idx = 4 * (i * w + j);
|
|
271
|
+
data[idx] = s0;
|
|
272
|
+
data[idx + 1] = s1;
|
|
273
|
+
data[idx + 2] = s2;
|
|
274
|
+
data[idx + 3] = s3;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
tmpBuf.set(data);
|
|
278
|
+
for (let i = 0; i < h; i++) {
|
|
279
|
+
for (let j = 0; j < w; j++) {
|
|
280
|
+
let s0 = 0,
|
|
281
|
+
s1 = 0,
|
|
282
|
+
s2 = 0,
|
|
283
|
+
s3 = 0;
|
|
284
|
+
for (let k = 0; k < ksize; k++) {
|
|
285
|
+
let ik = Math.min(Math.max(i - rad + k, 0), h - 1);
|
|
286
|
+
let idx = 4 * (ik * w + j);
|
|
287
|
+
s0 += tmpBuf[idx] * kern[k];
|
|
288
|
+
s1 += tmpBuf[idx + 1] * kern[k];
|
|
289
|
+
s2 += tmpBuf[idx + 2] * kern[k];
|
|
290
|
+
s3 += tmpBuf[idx + 3] * kern[k];
|
|
291
|
+
}
|
|
292
|
+
let idx = 4 * (i * w + j);
|
|
293
|
+
data[idx] = s0;
|
|
294
|
+
data[idx + 1] = s1;
|
|
295
|
+
data[idx + 2] = s2;
|
|
296
|
+
data[idx + 3] = s3;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
};
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
function softFilter(typ, x) {
|
|
303
|
+
if (!$._filters) initSoftFilters();
|
|
304
|
+
let imgData = ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
|
|
305
|
+
$._filters[typ](imgData.data, x);
|
|
306
|
+
ctx.putImageData(imgData, 0, 0);
|
|
307
|
+
}
|
|
308
|
+
|
|
300
309
|
function nativeFilter(filtstr) {
|
|
301
310
|
tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
|
|
302
311
|
tmpCtx.filter = filtstr;
|
|
@@ -308,12 +317,6 @@ function Q5(scope, parent) {
|
|
|
308
317
|
ctx.restore();
|
|
309
318
|
}
|
|
310
319
|
|
|
311
|
-
function softFilter(typ, x) {
|
|
312
|
-
let imgData = ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
|
|
313
|
-
filterImpl[typ](imgData.data, x);
|
|
314
|
-
ctx.putImageData(imgData, 0, 0);
|
|
315
|
-
}
|
|
316
|
-
|
|
317
320
|
$.filter = (typ, x) => {
|
|
318
321
|
if (!ctx.filter) return softFilter(typ, x);
|
|
319
322
|
makeTmpCtx();
|
|
@@ -673,14 +676,23 @@ function Q5(scope, parent) {
|
|
|
673
676
|
return c;
|
|
674
677
|
}
|
|
675
678
|
|
|
676
|
-
|
|
679
|
+
function _resizeCanvas(w, h) {
|
|
677
680
|
$.width = w;
|
|
678
681
|
$.height = h;
|
|
679
682
|
let c = cloneCtx();
|
|
680
|
-
$.canvas.width = w * $._pixelDensity;
|
|
681
|
-
$.canvas.height = h * $._pixelDensity;
|
|
683
|
+
$.canvas.width = Math.ceil(w * $._pixelDensity);
|
|
684
|
+
$.canvas.height = Math.ceil(h * $._pixelDensity);
|
|
685
|
+
if (!$.canvas.fullscreen && $.canvas.style) {
|
|
686
|
+
$.canvas.style.width = w + 'px';
|
|
687
|
+
$.canvas.style.height = h + 'px';
|
|
688
|
+
}
|
|
682
689
|
for (let prop in c) $.ctx[prop] = c[prop];
|
|
683
|
-
|
|
690
|
+
ctx.scale($._pixelDensity, $._pixelDensity);
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
$.resizeCanvas = (w, h) => {
|
|
694
|
+
if (w == $.width && h == $.height) return;
|
|
695
|
+
_resizeCanvas(w, h);
|
|
684
696
|
};
|
|
685
697
|
|
|
686
698
|
$.createGraphics = function (w, h) {
|
|
@@ -693,19 +705,11 @@ function Q5(scope, parent) {
|
|
|
693
705
|
};
|
|
694
706
|
|
|
695
707
|
$.displayDensity = () => window.devicePixelRatio;
|
|
696
|
-
$.pixelDensity = (
|
|
697
|
-
if (
|
|
698
|
-
$._pixelDensity =
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
$.canvas.width = Math.ceil($.width * n);
|
|
702
|
-
$.canvas.height = Math.ceil($.height * n);
|
|
703
|
-
$.canvas.style.width = $.width + 'px';
|
|
704
|
-
$.canvas.style.height = $.height + 'px';
|
|
705
|
-
for (let prop in c) $.ctx[prop] = c[prop];
|
|
706
|
-
|
|
707
|
-
ctx.scale($._pixelDensity, $._pixelDensity);
|
|
708
|
-
return $._pixelDensity;
|
|
708
|
+
$.pixelDensity = (v) => {
|
|
709
|
+
if (!v || v == $._pixelDensity) return $._pixelDensity;
|
|
710
|
+
$._pixelDensity = v;
|
|
711
|
+
_resizeCanvas($.width, $.height);
|
|
712
|
+
return v;
|
|
709
713
|
};
|
|
710
714
|
|
|
711
715
|
// MATH
|
|
@@ -835,7 +839,8 @@ function Q5(scope, parent) {
|
|
|
835
839
|
|
|
836
840
|
// COLOR
|
|
837
841
|
|
|
838
|
-
$.Color = Q5.ColorRGBA_P3;
|
|
842
|
+
if (Q5.supportsHDR) $.Color = Q5.ColorRGBA_P3;
|
|
843
|
+
else $.Color = Q5.ColorRGBA;
|
|
839
844
|
|
|
840
845
|
$.colorMode = (mode) => {
|
|
841
846
|
$._colorMode = mode;
|
|
@@ -1938,14 +1943,14 @@ function Q5(scope, parent) {
|
|
|
1938
1943
|
$._frameRate = 1000 / $.deltaTime;
|
|
1939
1944
|
$.frameCount++;
|
|
1940
1945
|
if ($._shouldResize) {
|
|
1941
|
-
$.
|
|
1946
|
+
$.windowResized();
|
|
1942
1947
|
$._shouldResize = false;
|
|
1943
1948
|
}
|
|
1944
1949
|
for (let m of Q5.prototype._methods.pre) m.call($);
|
|
1945
1950
|
clearBuff();
|
|
1946
1951
|
firstVertex = true;
|
|
1947
1952
|
ctx.save();
|
|
1948
|
-
$.
|
|
1953
|
+
$.draw();
|
|
1949
1954
|
for (let m of Q5.prototype._methods.post) m.call($);
|
|
1950
1955
|
ctx.restore();
|
|
1951
1956
|
$.resetMatrix();
|
|
@@ -1994,22 +1999,22 @@ function Q5(scope, parent) {
|
|
|
1994
1999
|
$._updateMouse(e);
|
|
1995
2000
|
$.mouseIsPressed = true;
|
|
1996
2001
|
$.mouseButton = [$.LEFT, $.CENTER, $.RIGHT][e.button];
|
|
1997
|
-
$.
|
|
2002
|
+
$.mousePressed(e);
|
|
1998
2003
|
};
|
|
1999
2004
|
$._onmousemove = (e) => {
|
|
2000
2005
|
$._updateMouse(e);
|
|
2001
|
-
if ($.mouseIsPressed) $.
|
|
2002
|
-
else $.
|
|
2006
|
+
if ($.mouseIsPressed) $.mouseDragged(e);
|
|
2007
|
+
else $.mouseMoved(e);
|
|
2003
2008
|
};
|
|
2004
2009
|
$._onmouseup = (e) => {
|
|
2005
2010
|
$._updateMouse(e);
|
|
2006
2011
|
$.mouseIsPressed = false;
|
|
2007
|
-
$.
|
|
2012
|
+
$.mouseReleased(e);
|
|
2008
2013
|
};
|
|
2009
2014
|
$._onclick = (e) => {
|
|
2010
2015
|
$._updateMouse(e);
|
|
2011
2016
|
$.mouseIsPressed = true;
|
|
2012
|
-
$.
|
|
2017
|
+
$.mouseClicked(e);
|
|
2013
2018
|
$.mouseIsPressed = false;
|
|
2014
2019
|
};
|
|
2015
2020
|
$.cursor = (name, x, y) => {
|
|
@@ -2033,9 +2038,9 @@ function Q5(scope, parent) {
|
|
|
2033
2038
|
$.key = e.key;
|
|
2034
2039
|
$.keyCode = e.keyCode;
|
|
2035
2040
|
keysHeld[$.keyCode] = true;
|
|
2036
|
-
$.
|
|
2041
|
+
$.keyPressed(e);
|
|
2037
2042
|
if (e.key.length == 1) {
|
|
2038
|
-
$.
|
|
2043
|
+
$.keyTyped(e);
|
|
2039
2044
|
}
|
|
2040
2045
|
};
|
|
2041
2046
|
$._onkeyup = (e) => {
|
|
@@ -2043,7 +2048,7 @@ function Q5(scope, parent) {
|
|
|
2043
2048
|
$.key = e.key;
|
|
2044
2049
|
$.keyCode = e.keyCode;
|
|
2045
2050
|
keysHeld[$.keyCode] = false;
|
|
2046
|
-
$.
|
|
2051
|
+
$.keyReleased(e);
|
|
2047
2052
|
};
|
|
2048
2053
|
|
|
2049
2054
|
$.canvas.onmousedown = (e) => $._onmousedown(e);
|
|
@@ -2061,36 +2066,33 @@ function Q5(scope, parent) {
|
|
|
2061
2066
|
id: touch.identifier
|
|
2062
2067
|
};
|
|
2063
2068
|
}
|
|
2064
|
-
function isTouchUnaware() {
|
|
2065
|
-
return $._touchStartedFn.isPlaceHolder && $._touchMovedFn.isPlaceHolder && $._touchEndedFn.isPlaceHolder;
|
|
2066
|
-
}
|
|
2067
2069
|
$._ontouchstart = (e) => {
|
|
2068
2070
|
$.touches = [...e.touches].map(getTouchInfo);
|
|
2069
|
-
if (
|
|
2071
|
+
if (!$._isTouchAware) {
|
|
2070
2072
|
$.mouseX = $.touches[0].x;
|
|
2071
2073
|
$.mouseY = $.touches[0].y;
|
|
2072
2074
|
$.mouseIsPressed = true;
|
|
2073
2075
|
$.mouseButton = $.LEFT;
|
|
2074
|
-
if (!$.
|
|
2076
|
+
if (!$.mousePressed(e)) e.preventDefault();
|
|
2075
2077
|
}
|
|
2076
|
-
if (!$.
|
|
2078
|
+
if (!$.touchStarted(e)) e.preventDefault();
|
|
2077
2079
|
};
|
|
2078
2080
|
$._ontouchmove = (e) => {
|
|
2079
2081
|
$.touches = [...e.touches].map(getTouchInfo);
|
|
2080
|
-
if (
|
|
2082
|
+
if (!$._isTouchAware) {
|
|
2081
2083
|
$.mouseX = $.touches[0].x;
|
|
2082
2084
|
$.mouseY = $.touches[0].y;
|
|
2083
|
-
if (!$.
|
|
2085
|
+
if (!$.mouseDragged(e)) e.preventDefault();
|
|
2084
2086
|
}
|
|
2085
|
-
if (!$.
|
|
2087
|
+
if (!$.touchMoved(e)) e.preventDefault();
|
|
2086
2088
|
};
|
|
2087
2089
|
$._ontouchend = (e) => {
|
|
2088
2090
|
$.touches = [...e.touches].map(getTouchInfo);
|
|
2089
|
-
if (
|
|
2091
|
+
if (!$._isTouchAware && !$.touches.length) {
|
|
2090
2092
|
$.mouseIsPressed = false;
|
|
2091
|
-
if (!$.
|
|
2093
|
+
if (!$.mouseReleased(e)) e.preventDefault();
|
|
2092
2094
|
}
|
|
2093
|
-
if (!$.
|
|
2095
|
+
if (!$.touchEnded(e)) e.preventDefault();
|
|
2094
2096
|
};
|
|
2095
2097
|
$.canvas.ontouchstart = (e) => $._ontouchstart(e);
|
|
2096
2098
|
$.canvas.ontouchmove = (e) => $._ontouchmove(e);
|
|
@@ -2245,8 +2247,10 @@ function Q5(scope, parent) {
|
|
|
2245
2247
|
|
|
2246
2248
|
if (typeof scope == 'function') scope($);
|
|
2247
2249
|
|
|
2250
|
+
if (scope == 'graphics' || scope == 'image') return;
|
|
2251
|
+
|
|
2248
2252
|
function _init() {
|
|
2249
|
-
let
|
|
2253
|
+
let t = scope == 'global' ? window : $;
|
|
2250
2254
|
let eventNames = [
|
|
2251
2255
|
'setup',
|
|
2252
2256
|
'draw',
|
|
@@ -2265,38 +2269,30 @@ function Q5(scope, parent) {
|
|
|
2265
2269
|
'windowResized'
|
|
2266
2270
|
];
|
|
2267
2271
|
for (let k of eventNames) {
|
|
2268
|
-
|
|
2269
|
-
$[
|
|
2270
|
-
$[intern].isPlaceHolder = true;
|
|
2271
|
-
if (o[k]) {
|
|
2272
|
-
$[intern] = o[k];
|
|
2273
|
-
} else {
|
|
2274
|
-
Object.defineProperty($, k, {
|
|
2275
|
-
set: (fun) => {
|
|
2276
|
-
$[intern] = fun;
|
|
2277
|
-
}
|
|
2278
|
-
});
|
|
2279
|
-
}
|
|
2272
|
+
if (!t[k]) $[k] = () => {};
|
|
2273
|
+
else if ($._isGlobal) $[k] = t[k];
|
|
2280
2274
|
}
|
|
2281
2275
|
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
millisStart = performance.now();
|
|
2285
|
-
function _start() {
|
|
2286
|
-
if (preloadCnt > 0) return requestAnimationFrame(_start);
|
|
2287
|
-
$._setupFn();
|
|
2288
|
-
if (!ctx) $.createCanvas(100, 100);
|
|
2289
|
-
$._setupDone = true;
|
|
2290
|
-
ctx.restore();
|
|
2291
|
-
$.resetMatrix();
|
|
2292
|
-
requestAnimationFrame(_draw);
|
|
2293
|
-
}
|
|
2294
|
-
_start();
|
|
2295
|
-
}
|
|
2276
|
+
$._isTouchAware = $.touchStarted || $.touchMoved || $.mouseReleased;
|
|
2277
|
+
|
|
2296
2278
|
addEventListener('mousemove', (e) => $._onmousemove(e), false);
|
|
2297
2279
|
addEventListener('keydown', (e) => $._onkeydown(e), false);
|
|
2298
2280
|
addEventListener('keyup', (e) => $._onkeyup(e), false);
|
|
2281
|
+
|
|
2282
|
+
$.preload();
|
|
2283
|
+
millisStart = performance.now();
|
|
2284
|
+
function _start() {
|
|
2285
|
+
if (preloadCnt > 0) return requestAnimationFrame(_start);
|
|
2286
|
+
$.setup();
|
|
2287
|
+
if (!ctx) $.createCanvas(100, 100);
|
|
2288
|
+
$._setupDone = true;
|
|
2289
|
+
ctx.restore();
|
|
2290
|
+
$.resetMatrix();
|
|
2291
|
+
requestAnimationFrame(_draw);
|
|
2292
|
+
}
|
|
2293
|
+
_start();
|
|
2299
2294
|
}
|
|
2295
|
+
|
|
2300
2296
|
if (scope == 'global') _init();
|
|
2301
2297
|
else requestAnimationFrame(_init);
|
|
2302
2298
|
}
|
|
@@ -2622,8 +2618,8 @@ for (let k of ['fromAngle', 'fromAngles', 'random2D', 'random3D']) {
|
|
|
2622
2618
|
class _Q5Image extends Q5 {
|
|
2623
2619
|
constructor(w, h) {
|
|
2624
2620
|
super('image');
|
|
2625
|
-
this.createCanvas(w, h);
|
|
2626
2621
|
delete this.createCanvas;
|
|
2622
|
+
this._createCanvas(w, h);
|
|
2627
2623
|
this._loop = false;
|
|
2628
2624
|
}
|
|
2629
2625
|
get w() {
|
package/q5.min.js
CHANGED
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
* @author quinton-ashley and LingDong-
|
|
5
5
|
* @license AGPL-3.0
|
|
6
6
|
*/
|
|
7
|
-
function Q5(e,t){let a=0;if(e||(e="global",a++,setTimeout((()=>a--),32)),"auto"==e){if(!window.setup&&!window.draw)return;e="global"}"global"==e&&(Q5._hasGlobal=!0);let o=this;if("image"==e||"graphics"==e?o.canvas=new OffscreenCanvas(100,100):(o.canvas=document.createElement("canvas"),o.canvas.id="defaultCanvas"+Q5._instanceCount++,o.canvas.classList.add("p5Canvas","q5Canvas")),o.canvas.width=o.width=100,o.canvas.height=o.height=100,o._windowResizedFn=()=>{},"graphics"!=e&&"image"!=e){function n(){t??=document.getElementsByTagName("main")[0],t||(t=document.createElement("main"),document.body.append(t)),o.canvas.parent(t)}o._setupDone=!1,o._resize=()=>{o.frameCount>1&&(o._shouldResize=!0)},t&&"string"==typeof t&&(t=document.getElementById(t)),o.canvas.parent=e=>{"string"==typeof e&&(e=document.getElementById(e)),e.append(o.canvas),"undefined"!=typeof ResizeObserver?(o._ro&&o._ro.disconnect(),o._ro=new ResizeObserver(o._resize),o._ro.observe(t)):0==o.frameCount&&addEventListener("resize",o._resize)},document.body?n():document.addEventListener("DOMContentLoaded",n)}o._q5=!0,o.pixels=[];let i,r=null;o.ctx=o.drawingContext=null,o.createCanvas=function(t,a,n,r){if("webgl"==n)throw"webgl renderer is not supported in q5, use '2d'";o.width=o.canvas.width=t,o.height=o.canvas.height=a,o.canvas.renderer="2d";let s=Object.assign({},Q5.canvasOptions);if(r&&Object.assign(s,r),i=o.ctx=o.drawingContext=o.canvas.getContext("2d",s),Object.assign(o.canvas,s),i.fillStyle="white",i.strokeStyle="black",i.lineCap="round",i.lineJoin="miter",i.textAlign="left",i.save(),"image"!=e){let t=o.displayDensity();"graphics"==e&&(t=this._pixelDensity),o.pixelDensity(Math.ceil(t))}else this._pixelDensity=1;return o.canvas},o._createCanvas=o.createCanvas,o.loadPixels=()=>{r=i.getImageData(0,0,o.canvas.width,o.canvas.height),o.pixels=r.data},o.updatePixels=()=>{null!=r&&i.putImageData(r,0,0)};let s=[];function l(e,t){t??=e||o.canvas.height,e??=o.canvas.width,null==f&&(f=new OffscreenCanvas(e,t).getContext("2d",{colorSpace:o.canvas.colorSpace})),f.canvas.width==e&&f.canvas.height==t||(f.canvas.width=e,f.canvas.height=t)}function h(){let e=o.canvas.width*o.canvas.height*4;x&&e==x.length||(x=new Uint8ClampedArray(e))}function c(e){f.clearRect(0,0,f.canvas.width,f.canvas.height),f.filter=e,f.drawImage(o.canvas,0,0),i.save(),i.resetTransform(),i.clearRect(0,0,o.canvas.width,o.canvas.height),i.drawImage(f.canvas,0,0),i.restore()}function d(e,t){let a=i.getImageData(0,0,o.canvas.width,o.canvas.height);s[e](a.data,t),i.putImageData(a,0,0)}s[o.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}},s[o.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}},s[o.OPAQUE]=e=>{for(let t=0;t<e.length;t+=4)e[t+3]=255},s[o.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]},s[o.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},s[o.DILATE]=e=>{h(),x.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 i=4*Math.max(n-1,0),r=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(x[a+c],x[n+i],x[n+c],x[n+r],x[o+c])}}},s[o.ERODE]=e=>{h(),x.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 i=4*Math.max(n-1,0),r=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(x[a+c],x[n+i],x[n+c],x[n+r],x[o+c])}}},s[o.BLUR]=(e,t)=>{t=t||1,t=Math.floor(t*o._pixelDensity),h(),x.set(e);let a=2*t+1;let n=function(e){let a=new Float32Array(e),o=.3*t+.8,n=o*o*2;for(let t=0;t<e;t++){let i=t-e/2,r=Math.exp(-i*i/n)/(2.5066282746*o);a[t]=r}return a}(a),[i,r]=[o.canvas.width,o.canvas.height];for(let o=0;o<r;o++)for(let r=0;r<i;r++){let s=0,l=0,h=0,c=0;for(let e=0;e<a;e++){let a=4*(o*i+Math.min(Math.max(r-t+e,0),i-1));s+=x[a]*n[e],l+=x[a+1]*n[e],h+=x[a+2]*n[e],c+=x[a+3]*n[e]}let d=4*(o*i+r);e[d]=s,e[d+1]=l,e[d+2]=h,e[d+3]=c}x.set(e);for(let o=0;o<r;o++)for(let s=0;s<i;s++){let l=0,h=0,c=0,d=0;for(let e=0;e<a;e++){let a=4*(Math.min(Math.max(o-t+e,0),r-1)*i+s);l+=x[a]*n[e],h+=x[a+1]*n[e],c+=x[a+2]*n[e],d+=x[a+3]*n[e]}let u=4*(o*i+s);e[u]=l,e[u+1]=h,e[u+2]=c,e[u+3]=d}},o.filter=(e,t)=>{if(!i.filter)return d(e,t);if(l(),"string"==typeof e)c(e);else if(e==o.THRESHOLD){t??=.5,t=Math.max(t,1e-5),c(`saturate(0%) brightness(${Math.floor(.5/t*100)}%) contrast(1000000%)`)}else e==o.GRAY?c("saturate(0%)"):e==o.OPAQUE?(f.fillStyle="black",f.fillRect(0,0,f.canvas.width,f.canvas.height),f.drawImage(o.canvas,0,0),i.save(),i.resetTransform(),i.drawImage(f.canvas,0,0),i.restore()):e==o.INVERT?c("invert(100%)"):e==o.BLUR?c(`blur(${Math.ceil(t*o._pixelDensity/1)||1}px)`):d(e,t)},o.resize=(e,t)=>{l(),f.drawImage(o.canvas,0,0),o.width=e,o.height=t,o.canvas.width=e*o._pixelDensity,o.canvas.height=t*o._pixelDensity,i.save(),i.resetTransform(),i.clearRect(0,0,o.canvas.width,o.canvas.height),i.drawImage(f.canvas,0,0,o.canvas.width,o.canvas.height),i.restore()},o.get=(e,t,a,n)=>{let r=o._pixelDensity||1;if(void 0!==e&&void 0===a){let a=i.getImageData(e*r,t*r,1,1).data;return new o.Color(a[0],a[1],a[2],a[3]/255)}e=(e||0)*r,t=(t||0)*r;let s=a=a||o.width,l=n=n||o.height;a*=r,n*=r;let h=o.createImage(a,n),c=i.getImageData(e,t,a,n);return h.ctx.putImageData(c,0,0),h._pixelDensity=r,h.width=s,h.height=l,h},o.set=(e,t,a)=>{if(a._q5){let n=o._tint;return o._tint=null,o.image(a,e,t),void(o._tint=n)}o.pixels.length||o.loadPixels();let n=o._pixelDensity||1;for(let i=0;i<n;i++)for(let r=0;r<n;r++){let s=4*((t*n+i)*o.canvas.width+e*n+r);o.pixels[s]=a.r??a.l,o.pixels[s+1]=a.g??a.c,o.pixels[s+2]=a.b??a.h,o.pixels[s+3]=a.a}},o.tinted=function(e){let t=e.a;e.a=255,l(),f.clearRect(0,0,f.canvas.width,f.canvas.height),f.fillStyle=e,f.fillRect(0,0,f.canvas.width,f.canvas.height),f.globalCompositeOperation="multiply",f.drawImage(i.canvas,0,0),f.globalCompositeOperation="source-over",i.save(),i.resetTransform();let a=i.globalCompositeOperation;i.globalCompositeOperation="source-in",i.drawImage(f.canvas,0,0),i.globalCompositeOperation=a,i.restore(),f.globalAlpha=t/255,f.clearRect(0,0,f.canvas.width,f.canvas.height),f.drawImage(i.canvas,0,0),f.globalAlpha=1,i.save(),i.resetTransform(),i.clearRect(0,0,i.canvas.width,i.canvas.height),i.drawImage(f.canvas,0,0),i.restore()},o.tint=function(e){o._tint=e._q5Color?e:o.color(...arguments)},o.noTint=()=>o._tint=null,o.mask=e=>{i.save(),i.resetTransform();let t=i.globalCompositeOperation;i.globalCompositeOperation="destination-in",i.drawImage(e.canvas,0,0),i.globalCompositeOperation=t,i.restore()},o._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)},o.save=(e,t,a)=>{if((!e||"string"==typeof e&&(!t||!a&&t.length<5))&&(a=t,t=e,e=o.canvas),a)return o._save(e,t,a);t?(t=t.split("."),o._save(e,t[0],t.at(-1))):o._save(e)},o.canvas.save=o.save,o.saveCanvas=o.save;let u=null,_=!0,g=[],p={},m=0,f=null,v=null,x=null;if(o.THRESHOLD=1,o.GRAY=2,o.OPAQUE=3,o.INVERT=4,o.POSTERIZE=5,o.DILATE=6,o.ERODE=7,o.BLUR=8,"image"==e)return;function y(){let e={};for(let t in i)"function"!=typeof i[t]&&(e[t]=i[t]);return delete e.canvas,e}o.BLEND="source-over",o.REMOVE="destination-out",o.ADD="lighter",o.DARKEST="darken",o.LIGHTEST="lighten",o.DIFFERENCE="difference",o.SUBTRACT="subtract",o.EXCLUSION="exclusion",o.MULTIPLY="multiply",o.SCREEN="screen",o.REPLACE="copy",o.OVERLAY="overlay",o.HARD_LIGHT="hard-light",o.SOFT_LIGHT="soft-light",o.DODGE="color-dodge",o.BURN="color-burn",o.RGB="rgb",o.RGBA="rgb",o.HSB="hsb",o.CHORD=0,o.PIE=1,o.OPEN=2,o.RADIUS="radius",o.CORNER="corner",o.CORNERS="corners",o.ROUND="round",o.SQUARE="butt",o.PROJECT="square",o.MITER="miter",o.BEVEL="bevel",o.CLOSE=1,o.NORMAL="normal",o.ITALIC="italic",o.BOLD="bold",o.BOLDITALIC="italic bold",o.CENTER="center",o.LEFT="left",o.RIGHT="right",o.TOP="top",o.BOTTOM="bottom",o.BASELINE="alphabetic",o.LANDSCAPE="landscape",o.PORTRAIT="portrait",o.ALT=18,o.BACKSPACE=8,o.CONTROL=17,o.DELETE=46,o.DOWN_ARROW=40,o.ENTER=13,o.ESCAPE=27,o.LEFT_ARROW=37,o.OPTION=18,o.RETURN=13,o.RIGHT_ARROW=39,o.SHIFT=16,o.TAB=9,o.UP_ARROW=38,o.DEGREES="degrees",o.RADIANS="radians",o.HALF_PI=Math.PI/2,o.PI=Math.PI,o.QUARTER_PI=Math.PI/4,o.TAU=2*Math.PI,o.TWO_PI=2*Math.PI,o.ARROW="default",o.CROSS="crosshair",o.HAND="pointer",o.MOVE="move",o.TEXT="text",o.VIDEO={video:!0,audio:!1},o.AUDIO={video:!1,audio:!0},o.SHR3=1,o.LCG=2,o.hint=(e,t)=>{o[e]=t},o.frameCount=0,o.deltaTime=16,o.mouseX=0,o.mouseY=0,o.touches=[],o.mouseButton=null,o.keyIsPressed=!1,o.mouseIsPressed=!1,o.key=null,o.keyCode=null,o.accelerationX=0,o.accelerationY=0,o.accelerationZ=0,o.rotationX=0,o.rotationY=0,o.rotationZ=0,o.relRotationX=0,o.relRotationY=0,o.relRotationZ=0,o.pmouseX=0,o.pmouseY=0,o.pAccelerationX=0,o.pAccelerationY=0,o.pAccelerationZ=0,o.pRotationX=0,o.pRotationY=0,o.pRotationZ=0,o.pRelRotationX=0,o.pRelRotationY=0,o.pRelRotationZ=0,Object.defineProperty(o,"deviceOrientation",{get:()=>window.screen?.orientation?.type}),Object.defineProperty(o,"windowWidth",{get:()=>window.innerWidth}),Object.defineProperty(o,"windowHeight",{get:()=>window.innerHeight}),o._colorMode="rgb",o._doStroke=!0,o._doFill=!0,o._strokeSet=!1,o._fillSet=!1,o._tint=null,o._ellipseMode=o.CENTER,o._rectMode=o.CORNER,o._curveDetail=20,o._curveAlpha=0,o._loop=!0,o._textFont="sans-serif",o._textSize=12,o._textLeading=15,o._textLeadDiff=3,o._textStyle="normal",o._pixelDensity=1,o._lastFrameTime=0,o._targetFrameRate=null,o._frameRate=o._fps=60,o.resizeCanvas=(t,a)=>{o.width=t,o.height=a;let n=y();o.canvas.width=t*o._pixelDensity,o.canvas.height=a*o._pixelDensity;for(let e in n)o.ctx[e]=n[e];"image"!=e&&o.pixelDensity(o._pixelDensity)},o.createGraphics=function(e,t){let a=new Q5("graphics");return a._createCanvas.call(o,e,t),a},o.createImage=(e,t)=>new Q5.Image(e,t),o.displayDensity=()=>window.devicePixelRatio,o.pixelDensity=e=>{if(void 0===e)return o._pixelDensity;o._pixelDensity=e;let t=y();o.canvas.width=Math.ceil(o.width*e),o.canvas.height=Math.ceil(o.height*e),o.canvas.style.width=o.width+"px",o.canvas.style.height=o.height+"px";for(let e in t)o.ctx[e]=t[e];return i.scale(o._pixelDensity,o._pixelDensity),o._pixelDensity},o.map=(e,t,a,o,n,i)=>{let r=o+1*(e-t)/(a-t)*(n-o);return i?o<n?Math.min(Math.max(r,o),n):Math.min(Math.max(r,n),o):r},o.lerp=(e,t,a)=>e*(1-a)+t*a,o.constrain=(e,t,a)=>Math.min(Math.max(e,t),a),o.dist=function(){let e=arguments;return 4==e.length?Math.hypot(e[0]-e[2],e[1]-e[3]):Math.hypot(e[0]-e[3],e[1]-e[4],e[2]-e[5])},o.norm=(e,t,a)=>o.map(e,t,a,0,1),o.sq=e=>e*e,o.fract=e=>e-Math.floor(e),o.angleMode=e=>o._angleMode=e,o._DEGTORAD=Math.PI/180,o._RADTODEG=180/Math.PI,o.degrees=e=>e*o._RADTODEG,o.radians=e=>e*o._DEGTORAD,o.abs=Math.abs,o.ceil=Math.ceil,o.exp=Math.exp,o.floor=Math.floor,o.log=Math.log,o.mag=Math.hypot,o.max=Math.max,o.min=Math.min,o.round=Math.round,o.pow=Math.pow,o.sqrt=Math.sqrt,o.sin=e=>("degrees"==o._angleMode&&(e=o.radians(e)),Math.sin(e)),o.cos=e=>("degrees"==o._angleMode&&(e=o.radians(e)),Math.cos(e)),o.tan=e=>("degrees"==o._angleMode&&(e=o.radians(e)),Math.tan(e)),o.asin=e=>{let t=Math.asin(e);return"degrees"==o._angleMode&&(t=o.degrees(t)),t},o.acos=e=>{let t=Math.acos(e);return"degrees"==o._angleMode&&(t=o.degrees(t)),t},o.atan=e=>{let t=Math.atan(e);return"degrees"==o._angleMode&&(t=o.degrees(t)),t},o.atan2=(e,t)=>{let a=Math.atan2(e,t);return"degrees"==o._angleMode&&(a=o.degrees(a)),a},o.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},o.createVector=(e,t,a)=>new Q5.Vector(e,t,a,o),o.curvePoint=(e,t,a,o,n)=>{const i=n*n*n,r=n*n;return e*(-.5*i+r-.5*n)+t*(1.5*i-2.5*r+1)+a*(-1.5*i+2*r+.5*n)+o*(.5*i-.5*r)},o.bezierPoint=(e,t,a,o,n)=>{const i=1-n;return Math.pow(i,3)*e+3*Math.pow(i,2)*n*t+3*i*Math.pow(n,2)*a+Math.pow(n,3)*o},o.curveTangent=(e,t,a,o,n)=>{const i=n*n;return e*(-3*i/2+2*n-.5)+t*(9*i/2-5*n)+a*(-9*i/2+4*n+.5)+o*(3*i/2-n)},o.bezierTangent=(e,t,a,o,n)=>{const i=1-n;return 3*o*Math.pow(n,2)-3*a*Math.pow(n,2)+6*a*i*n-6*t*i*n+3*t*Math.pow(i,2)-3*e*Math.pow(i,2)},o.Color=Q5.ColorRGBA_P3,o.colorMode=e=>{o._colorMode=e,"oklch"==e?o.Color=Q5.ColorOKLCH:"rgb"==e?"srgb"==o.canvas.colorSpace?o.Color=Q5.ColorRGBA:o.Color=Q5.ColorRGBA_P3:"srgb"==e&&(o.Color=Q5.ColorRGBA,o._colorMode="rgb")};let w={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],grey:[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 M(e){let t=o._angleMode==o.DEGREES?180:Math.PI,a=2*t;if(0<=e&&e<=a)return e;for(;e<0;)e+=a;for(;e>=t;)e-=a;return e}function R(e,t,a,n,r,s,l,h){if(!o._doFill&&!o._doStroke)return;let c=M(r),d=M(s);if(c>d&&([c,d]=[d,c]),0==c){if(0==d)return;if(o._angleMode==o.DEGREES&&360==d||d==o.TAU)return o.ellipse(e,t,a,n)}i.beginPath();for(let r=0;r<h+1;r++){let s=r/h,l=o.lerp(c,d,s),u=o.cos(l)*a/2,_=o.sin(l)*n/2;i[r?"lineTo":"moveTo"](e+u,t+_)}l==o.CHORD?i.closePath():l==o.PIE&&(i.lineTo(e,t),i.closePath()),o._doFill&&i.fill(),o._doStroke&&i.stroke()}function S(e,t,a,n){(o._doFill||o._doStroke)&&(i.beginPath(),i.ellipse(e,t,a/2,n/2,0,0,o.TAU),o._doFill&&i.fill(),o._doStroke&&i.stroke())}function C(e,t,a,n,r,s,l,h){if(!o._doFill&&!o._doStroke)return;if(void 0===r)return function(e,t,a,n){o._doFill&&i.fillRect(e,t,a,n),o._doStroke&&i.strokeRect(e,t,a,n)}(e,t,a,n);if(void 0===s)return C(e,t,a,n,r,r,r,r);const c=Math.min(Math.abs(n),Math.abs(a))/2;r=Math.min(c,r),s=Math.min(c,s),h=Math.min(c,h),l=Math.min(c,l),i.beginPath(),i.moveTo(e+r,t),i.arcTo(e+a,t,e+a,t+n,s),i.arcTo(e+a,t+n,e,t+n,l),i.arcTo(e,t+n,e,t,h),i.arcTo(e,t,e+a,t,r),i.closePath(),o._doFill&&i.fill(),o._doStroke&&i.stroke()}function b(){g=[]}function E(e,t,a){return e.slice(0,200)+o._textStyle+o._textSize+o._textFont+(o._doFill?i.fillStyle:"")+"_"+(o._doStroke&&o._strokeSet?i.lineWidth+i.strokeStyle+"_":"")+(t||"")+(a?"x"+a:"")}o.color=function(e,t,a,n){let i=o.Color;if(e._q5Color)return new i(...e.levels);let r=arguments;if(1==r.length){if("string"==typeof e)return"#"==e[0]?new i(parseInt(e.slice(1,3),16),parseInt(e.slice(3,5),16),parseInt(e.slice(5,7),16),9!=e.length?null:parseInt(e.slice(7,9),16)):w[e]?new i(...w[e]):new i(0,0,0);if(Array.isArray(e))return new i(...e)}if("rgb"==o._colorMode){if(1==r.length)return new i(e,e,e);if(2==r.length)return new i(e,e,e,t);if(3==r.length)return new i(e,t,a);if(4==r.length)return new i(e,t,a,n)}},o.red=e=>e.r,o.green=e=>e.g,o.blue=e=>e.b,o.alpha=e=>e.a,o.lightness=e=>100*(.2126*e.r+.7152*e.g+.0722*e.b)/255,o.lerpColor=(e,t,a)=>{if("rgb"==o._colorMode)return new o.Color(o.constrain(o.lerp(e.r,t.r,a),0,255),o.constrain(o.lerp(e.g,t.g,a),0,255),o.constrain(o.lerp(e.b,t.b,a),0,255),o.constrain(o.lerp(e.a,t.a,a),0,255));{let n=t.h-e.h;n>180&&(n-=360),n<-180&&(n+=360);let i=e.h+a*n;return i<0&&(i+=360),i>360&&(i-=360),new o.Color(o.constrain(o.lerp(e.l,t.l,a),0,100),o.constrain(o.lerp(e.c,t.c,a),0,100),i,o.constrain(o.lerp(e.a,t.a,a),0,255))}},o.strokeWeight=e=>{e||(o._doStroke=!1),i.lineWidth=e||1e-4},o.stroke=function(e){if(o._doStroke=!0,o._strokeSet=!0,e._q5Color||(e=o.color(...arguments)),e.a<=0)return o._doStroke=!1;i.strokeStyle=e},o.noStroke=()=>o._doStroke=!1,o.fill=function(e){if(o._doFill=!0,o._fillSet=!0,e._q5Color||(e=o.color(...arguments)),e.a<=0)return o._doFill=!1;i.fillStyle=e},o.noFill=()=>o._doFill=!1,o.smooth=()=>o._smooth=!0,o.noSmooth=()=>o._smooth=!1,o.blendMode=e=>i.globalCompositeOperation=e,o.strokeCap=e=>i.lineCap=e,o.strokeJoin=e=>i.lineJoin=e,o.ellipseMode=e=>o._ellipseMode=e,o.rectMode=e=>o._rectMode=e,o.curveDetail=e=>o._curveDetail=e,o.curveAlpha=e=>o._curveAlpha=e,o.curveTightness=e=>o._curveAlpha=e,o.clear=()=>{i.clearRect(0,0,o.canvas.width,o.canvas.height)},o.background=function(e){if(e._q5)return o.image(e,0,0,o.width,o.height);i.save(),i.resetTransform(),e._q5color||(e=o.color(...arguments)),i.fillStyle=e,i.fillRect(0,0,o.canvas.width,o.canvas.height),i.restore()},o.line=(e,t,a,n)=>{o._doStroke&&(i.beginPath(),i.moveTo(e,t),i.lineTo(a,n),i.stroke())},o.arc=(e,t,a,n,i,r,s,l)=>{if(i==r)return o.ellipse(e,t,a,n);l??=25,s??=o.PIE,o._ellipseMode==o.CENTER?R(e,t,a,n,i,r,s,l):o._ellipseMode==o.RADIUS?R(e,t,2*a,2*n,i,r,s,l):o._ellipseMode==o.CORNER?R(e+a/2,t+n/2,a,n,i,r,s,l):o._ellipseMode==o.CORNERS&&R((e+a)/2,(t+n)/2,a-e,n-t,i,r,s,l)},o.ellipse=(e,t,a,n)=>{n??=a,o._ellipseMode==o.CENTER?S(e,t,a,n):o._ellipseMode==o.RADIUS?S(e,t,2*a,2*n):o._ellipseMode==o.CORNER?S(e+a/2,t+n/2,a,n):o._ellipseMode==o.CORNERS&&S((e+a)/2,(t+n)/2,a-e,n-t)},o.circle=(e,t,a)=>o.ellipse(e,t,a,a),o.point=(e,t)=>{e.x&&(t=e.y,e=e.x),i.beginPath(),i.ellipse(e,t,.4,.4,0,0,o.TAU),i.stroke()},o.rect=(e,t,a,n,i,r,s,l)=>{o._rectMode==o.CENTER?C(e-a/2,t-n/2,a,n,i,r,s,l):o._rectMode==o.RADIUS?C(e-a,t-n,2*a,2*n,i,r,s,l):o._rectMode==o.CORNER?C(e,t,a,n,i,r,s,l):o._rectMode==o.CORNERS&&C(e,t,a-e,n-t,i,r,s,l)},o.square=(e,t,a,n,i,r,s)=>o.rect(e,t,a,a,n,i,r,s),o.beginShape=()=>{b(),i.beginPath(),_=!0},o.beginContour=()=>{i.closePath(),b(),_=!0},o.endContour=()=>{b(),_=!0},o.vertex=(e,t)=>{b(),_?i.moveTo(e,t):i.lineTo(e,t),_=!1},o.bezierVertex=(e,t,a,o,n,r)=>{b(),i.bezierCurveTo(e,t,a,o,n,r)},o.quadraticVertex=(e,t,a,o)=>{b(),i.quadraticCurveTo(e,t,a,o)},o.bezier=(e,t,a,n,i,r,s,l)=>{o.beginShape(),o.vertex(e,t),o.bezierVertex(a,n,i,r,s,l),o.endShape()},o.triangle=(e,t,a,n,i,r)=>{o.beginShape(),o.vertex(e,t),o.vertex(a,n),o.vertex(i,r),o.endShape(o.CLOSE)},o.quad=(e,t,a,n,i,r,s,l)=>{o.beginShape(),o.vertex(e,t),o.vertex(a,n),o.vertex(i,r),o.vertex(s,l),o.endShape(o.CLOSE)},o.endShape=e=>{b(),e&&i.closePath(),o._doFill&&i.fill(),o._doStroke&&i.stroke(),o._doFill||o._doStroke||(i.save(),i.fillStyle="none",i.fill(),i.restore())},o.curveVertex=(e,t)=>{if(g.push([e,t]),g.length<4)return;let a=function(e,t,a,o,n,i,r,s,l,h){function c(e,t,a,o,n,i){let r=Math.pow(o-t,2)+Math.pow(n-a,2);return Math.pow(r,.5*i)+e}let d=[],u=c(0,e,t,a,o,h),_=c(u,a,o,n,i,h),g=c(_,n,i,r,s,h);for(let h=0;h<l;h++){let c=u+h/(l-1)*(_-u),p=[(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<p.length;e+=2)isNaN(p[e])&&(p[e]=1,p[e+1]=0),isFinite(p[e])||(p[e]>0?(p[e]=1,p[e+1]=0):(p[e]=0,p[e+1]=1));let m=e*p[0]+a*p[1],f=t*p[0]+o*p[1],v=a*p[2]+n*p[3],x=o*p[2]+i*p[3],y=n*p[4]+r*p[5],w=i*p[4]+s*p[5],M=m*p[6]+v*p[7],R=f*p[6]+x*p[7],S=v*p[8]+y*p[9],C=x*p[8]+w*p[9],b=M*p[2]+S*p[3],E=R*p[2]+C*p[3];d.push([b,E])}return d}(...g[g.length-4],...g[g.length-3],...g[g.length-2],...g[g.length-1],o._curveDetail,o._curveAlpha);for(let e=0;e<a.length;e++)_?i.moveTo(...a[e]):i.lineTo(...a[e]),_=!1},o.curve=(e,t,a,n,i,r,s,l)=>{o.beginShape(),o.curveVertex(e,t),o.curveVertex(a,n),o.curveVertex(i,r),o.curveVertex(s,l),o.endShape()},o.opacity=e=>i.globalAlpha=e,o.translate=(e,t)=>i.translate(e,t),o.rotate=e=>{"degrees"==o._angleMode&&(e=o.radians(e)),i.rotate(e)},o.scale=(e,t)=>{t??=e,i.scale(e,t)},o.applyMatrix=(e,t,a,o,n,r)=>i.transform(e,t,a,o,n,r),o.shearX=e=>i.transform(1,0,o.tan(e),1,0,0),o.shearY=e=>i.transform(1,o.tan(e),0,1,0,0),o.resetMatrix=()=>{i.resetTransform(),i.scale(o._pixelDensity,o._pixelDensity)},o._styleNames=["_doStroke","_doFill","_strokeSet","_fillSet","_tint","_imageMode","_rectMode","_ellipseMode","_textFont","_textLeading","_leadingSet","_textSize","_textAlign","_textBaseline","_textStyle","_textWrap"],o._styles=[],o.push=o.pushMatrix=()=>{i.save();let e={};for(let t of o._styleNames)e[t]=o[t];o._styles.push(e)},o.pop=o.popMatrix=()=>{i.restore();let e=o._styles.pop();for(let t of o._styleNames)o[t]=e[t]},o.imageMode=e=>o._imageMode=e,o.image=(e,t,a,n,r,s,l,h,c)=>{let d=e._q5?e.canvas:e;var u,_;e._q5&&null!=o._tint&&(u=e.canvas.width,_=e.canvas.height,_??=u||o.canvas.height,u??=o.canvas.width,null==v&&(v=new OffscreenCanvas(u,_).getContext("2d",{colorSpace:o.canvas.colorSpace})),v.canvas.width==u&&v.canvas.height==_||(v.canvas.width=u,v.canvas.height=_),v.drawImage(e.canvas,0,0),e.tinted(o._tint)),n||(e._q5||e.width?(n=e.width,r=e.height):(n=e.videoWidth,r=e.videoHeight)),"center"==o._imageMode&&(t-=.5*n,a-=.5*r);let g=e._pixelDensity;s??=0,l??=0,h?h*=g:h=d.width,c?c*=g:c=d.height,i.drawImage(d,s*g,l*g,h,c,t,a,n,r),function(){if(!e._q5||!o._tint)return;let t=e.ctx;t.save(),t.resetTransform(),t.clearRect(0,0,t.canvas.width,t.canvas.height),t.drawImage(v.canvas,0,0),t.restore()}()},o._incrementPreload=()=>a++,o._decrementPreload=()=>a--,o.loadImage=(e,t)=>{a++;let n=o.createImage(1,1),i=n.ctx,r=new window.Image;return r.src=e,r.crossOrigin="Anonymous",r._pixelDensity=1,r.onload=()=>{n.width=i.canvas.width=r.naturalWidth,n.height=i.canvas.height=r.naturalHeight,i.drawImage(r,0,0),a--,t&&t(n)},r.onerror=e=>{throw a--,e},n},o._clearTemporaryBuffers=()=>{f=null,v=null,x=null},o.loadFont=(e,t)=>{a++;let o=e.split("/"),n=o[o.length-1].split(".")[0].replace(" ",""),i=new FontFace(n,"url("+e+")");return document.fonts.add(i),i.load().then((()=>{a--,t&&t(n)})),n},o.textFont=e=>o._textFont=e,o.textSize=e=>{if(void 0===e)return o._textSize;o._textSize=e,o._leadingSet||(o._textLeading=1.25*e,o._textLeadDiff=o._textLeading-e)},o.textLeading=e=>{if(void 0===e)return o._textLeading;o._textLeading=e,o._textLeadDiff=e-o._textSize,o._leadingSet=!0},o.textStyle=e=>o._textStyle=e,o.textAlign=(e,t)=>{i.textAlign=e,t&&(i.textBaseline=t==o.CENTER?"middle":t)},o.textWidth=e=>(i.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`,i.measureText(e).width),o.textAscent=e=>(i.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`,i.measureText(e).actualBoundingBoxAscent),o.textDescent=e=>(i.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`,i.measureText(e).actualBoundingBoxDescent),o._textCache=!0,o._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[o,n]of this.entries())n.lastAccessed<t&&(t=n.lastAccessed,e=a),a++;a=e;for(const t of this.keys()){if(0==a){e=t;break}a--}this.delete(e)}},o._tic=new o._TimedCache,o.textCache=(e,t)=>(t&&(o._tic.maxSize=t),void 0!==e&&(o._textCache=e),o._textCache),o.createTextImage=(e,t,a)=>{let n=o._textCache;o._textCache=!0,o._useCache=!0,o.text(e,0,0,t,a),o._useCache=!1;let i=E(e,t,a);return o._textCache=n,o._tic.get(i)},o.text=(e,t,a,n,r)=>{if(void 0===e)return;if(e=e.toString(),!o._doFill&&!o._doStroke)return;let s,l,h,c,d,u,_,g,p=1,m=i.getTransform(),f=o._useCache||o._textCache&&(0!=m.b||0!=m.c);if(f){if(c=E(e,n,r),l=o._tic.get(c),l)return void o.textImage(l,t,a);h=o.createGraphics.call(o,1,1),s=h.ctx,p=o._pixelDensity}else s=i,d=t,u=a;s.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`;let v=e.split("\n");if(f){d=0,u=o._textLeading*v.length;let t=s.measureText(" ");_=t.fontBoundingBoxAscent,g=t.fontBoundingBoxDescent,r??=u+g,h.resizeCanvas(Math.ceil(s.measureText(e).width),Math.ceil(r)),s.fillStyle=i.fillStyle,s.strokeStyle=i.strokeStyle,s.lineWidth=i.lineWidth}let x=s.fillStyle;o._fillSet||(s.fillStyle="black");for(let e=0;e<v.length&&(o._doStroke&&o._strokeSet&&s.strokeText(v[e],d,u),o._doFill&&s.fillText(v[e],d,u),u+=o._textLeading,!(u>r));e++);o._fillSet||(s.fillStyle=x),f&&(l=h.get(),l._ascent=_,l._descent=g,o._tic.set(c,l),o.textImage(l,t,a))},o.textImage=(e,t,a)=>{let n=o._imageMode;o._imageMode="corner","center"==i.textAlign?t-=.5*e.width:"right"==i.textAlign&&(t-=e.width),"alphabetic"==i.textBaseline&&(a-=o._textLeading),"middle"==i.textBaseline?a-=e._descent+.5*e._ascent+o._textLeadDiff:"bottom"==i.textBaseline?a-=e._ascent+e._descent+o._textLeadDiff:"top"==i.textBaseline&&(a-=e._descent+o._textLeadDiff),o.image(e,t,a),o._imageMode=n};var D,I=4095,T=4,A=.5,O=e=>.5*(1-Math.cos(e*Math.PI));o.noise=(e,t,a)=>{if(t??=0,a??=0,null==D){D=new Array(4096);for(var o=0;o<4096;o++)D[o]=Math.random()}e<0&&(e=-e),t<0&&(t=-t),a<0&&(a=-a);for(var n,i,r,s,l,h=Math.floor(e),c=Math.floor(t),d=Math.floor(a),u=e-h,_=t-c,g=a-d,p=0,m=.5,f=0;f<T;f++){var v=h+(c<<4)+(d<<8);n=O(u),i=O(_),r=D[v&I],r+=n*(D[v+1&I]-r),s=D[v+16&I],r+=i*((s+=n*(D[v+16+1&I]-s))-r),s=D[(v+=256)&I],s+=n*(D[v+1&I]-s),l=D[v+16&I],s+=i*((l+=n*(D[v+16+1&I]-l))-s),p+=(r+=O(g)*(s-r))*m,m*=A,h<<=1,c<<=1,d<<=1,(u*=2)>=1&&(h++,u--),(_*=2)>=1&&(c++,_--),(g*=2)>=1&&(d++,g--)}return p},o.noiseDetail=(e,t)=>{e>0&&(T=e),t>0&&(A=t)};const P=()=>{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 k=P();k.setSeed(),o.noiseSeed=e=>{let t=void 0===e?4294967295*Math.random():e;D||(D=new Float32Array(4096));for(var a=0;a<4096;a++)t^=t<<17,t^=t>>13,t^=t<<5,D[a]=(t>>>0)/4294967295},o.randomSeed=e=>k.setSeed(e),o.random=(e,t)=>void 0===e?k.rand():"number"==typeof e?void 0!==t?k.rand()*(t-e)+e:k.rand()*e:e[Math.trunc(e.length*k.rand())],o.randomGenerator=e=>{e==o.LCG?k=(()=>{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==o.SHR3&&(k=P()),k.setSeed()};var z=new function(){var e,t,a,o=new Array(128),n=new Array(256),i=new Array(128),r=new Array(128),s=new Array(256),l=new Array(256),h=()=>4294967296*k.rand()-2147483648,c=()=>.5+2.328306e-10*(h()<<0),d=()=>{for(var t,n,s,l,d=3.44262;;){if(t=a*i[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(r[e]+c()*(r[e-1]-r[e])<Math.exp(-.5*t*t))return t;if(a=h(),e=127&a,Math.abs(a)<o[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())<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*i[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,g=_,p=.003949659822581572;for(e=u/Math.exp(-.5*c*c),o[0]=Math.floor(c/e*a),o[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))),o[t+1]=Math.floor(c/d*a),d=c,r[t]=Math.exp(-.5*c*c),i[t]=c/a;for(e=p/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(p/_+Math.exp(-_)),n[t+1]=Math.floor(_/g*h),g=_,l[t]=Math.exp(-_),s[t]=_/h}};function F(){let e=performance.now();if(o._loop)u=o._targetFrameRate?setTimeout(F,1e3/o._targetFrameRate):requestAnimationFrame(F);else if(o.frameCount>0)return;if(u&&0!=o.frameCount){if(e-o._lastFrameTime<1e3/(o._targetFrameRate||60)-5)return}o.deltaTime=e-o._lastFrameTime,o._frameRate=1e3/o.deltaTime,o.frameCount++,o._shouldResize&&(o._windowResizedFn(),o._shouldResize=!1);for(let e of Q5.prototype._methods.pre)e.call(o);b(),_=!0,i.save(),o._drawFn();for(let e of Q5.prototype._methods.post)e.call(o);i.restore(),o.resetMatrix();let t=performance.now();o._fps=Math.round(1e3/(t-e)),o._lastFrameTime=e,o.pmouseX=o.mouseX,o.pmouseY=o.mouseY}function L(e){const t=o.canvas.getBoundingClientRect(),a=o.canvas.scrollWidth/o.width||1,n=o.canvas.scrollHeight/o.height||1;return{x:(e.clientX-t.left)/a,y:(e.clientY-t.top)/n,id:e.identifier}}function Q(){return o._touchStartedFn.isPlaceHolder&&o._touchMovedFn.isPlaceHolder&&o._touchEndedFn.isPlaceHolder}z.hasInit=!1,o.randomGaussian=(e,t)=>(z.hasInit||(z.zigset(),z.hasInit=!0),z.RNOR()*t+e),o.randomExponential=()=>(z.hasInit||(z.zigset(),z.hasInit=!0),z.REXP()),o.Element=function(e){this.elt=e},o._elements=[],o.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},o.print=console.log,o.describe=()=>{},o.noLoop=()=>{o._loop=!1,u=null},o.loop=()=>{o._loop=!0,null==u&&F()},o.redraw=()=>F(),o.remove=()=>{o.noLoop(),o.canvas.remove()},o.frameRate=e=>(e&&(o._targetFrameRate=e),o._frameRate),o.getFrameRate=()=>o._frameRate,o.getFPS=()=>o._fps,o.storeItem=localStorage.setItem,o.getItem=localStorage.getItem,o.removeItem=localStorage.removeItem,o.clearStorage=localStorage.clear,o._updateMouse=e=>{let t=o.canvas.getBoundingClientRect(),a=o.canvas.scrollWidth/o.width||1,n=o.canvas.scrollHeight/o.height||1;o.mouseX=(e.clientX-t.left)/a,o.mouseY=(e.clientY-t.top)/n},o._onmousedown=e=>{o._updateMouse(e),o.mouseIsPressed=!0,o.mouseButton=[o.LEFT,o.CENTER,o.RIGHT][e.button],o._mousePressedFn(e)},o._onmousemove=e=>{o._updateMouse(e),o.mouseIsPressed?o._mouseDraggedFn(e):o._mouseMovedFn(e)},o._onmouseup=e=>{o._updateMouse(e),o.mouseIsPressed=!1,o._mouseReleasedFn(e)},o._onclick=e=>{o._updateMouse(e),o.mouseIsPressed=!0,o._mouseClickedFn(e),o.mouseIsPressed=!1},o.cursor=(e,t,a)=>{let n="";e.includes(".")&&(e=`url("${e}")`,n=", auto"),void 0!==t&&(e+=" "+t+" "+a),o.canvas.style.cursor=e+n},o.noCursor=()=>{o.canvas.style.cursor="none"},o._onkeydown=e=>{e.repeat||(o.keyIsPressed=!0,o.key=e.key,o.keyCode=e.keyCode,p[o.keyCode]=!0,o._keyPressedFn(e),1==e.key.length&&o._keyTypedFn(e))},o._onkeyup=e=>{o.keyIsPressed=!1,o.key=e.key,o.keyCode=e.keyCode,p[o.keyCode]=!1,o._keyReleasedFn(e)},o.canvas.onmousedown=e=>o._onmousedown(e),o.canvas.onmouseup=e=>o._onmouseup(e),o.canvas.onclick=e=>o._onclick(e),o.keyIsDown=e=>!!p[e],o._ontouchstart=e=>{o.touches=[...e.touches].map(L),Q()&&(o.mouseX=o.touches[0].x,o.mouseY=o.touches[0].y,o.mouseIsPressed=!0,o.mouseButton=o.LEFT,o._mousePressedFn(e)||e.preventDefault()),o._touchStartedFn(e)||e.preventDefault()},o._ontouchmove=e=>{o.touches=[...e.touches].map(L),Q()&&(o.mouseX=o.touches[0].x,o.mouseY=o.touches[0].y,o._mouseDraggedFn(e)||e.preventDefault()),o._touchMovedFn(e)||e.preventDefault()},o._ontouchend=e=>{o.touches=[...e.touches].map(L),Q()&&!o.touches.length&&(o.mouseIsPressed=!1,o._mouseReleasedFn(e)||e.preventDefault()),o._touchEndedFn(e)||e.preventDefault()},o.canvas.ontouchstart=e=>o._ontouchstart(e),o.canvas.ontouchmove=e=>o._ontouchmove(e),o.canvas.ontouchcancel=o.canvas.ontouchend=e=>o._ontouchend(e),o.hasSensorPermission=!window.DeviceOrientationEvent&&!window.DeviceMotionEvent||!(DeviceOrientationEvent.requestPermission||DeviceMotionEvent.requestPermission),o.requestSensorPermissions=()=>{DeviceOrientationEvent.requestPermission&&DeviceOrientationEvent.requestPermission().then((e=>{"granted"==e&&DeviceMotionEvent.requestPermission&&DeviceMotionEvent.requestPermission().then((e=>{"granted"==e&&(o.hasSensorPermission=!0)})).catch(alert)})).catch(alert)};window.ondeviceorientation=e=>{o.pRotationX=o.rotationX,o.pRotationY=o.rotationY,o.pRotationZ=o.rotationZ,o.pRelRotationX=o.relRotationX,o.pRelRotationY=o.relRotationY,o.pRelRotationZ=o.relRotationZ,o.rotationX=e.beta*(Math.PI/180),o.rotationY=e.gamma*(Math.PI/180),o.rotationZ=e.alpha*(Math.PI/180),o.relRotationX=[-o.rotationY,-o.rotationX,o.rotationY][Math.trunc(window.orientation/90)+1],o.relRotationY=[-o.rotationX,o.rotationY,o.rotationX][Math.trunc(window.orientation/90)+1],o.relRotationZ=o.rotationZ},window.ondevicemotion=e=>{if(o.pAccelerationX=o.accelerationX,o.pAccelerationY=o.accelerationY,o.pAccelerationZ=o.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])])((n=o.rotationY,t=[o.cos(n),0,o.sin(n),0,0,1,0,0,-o.sin(n),0,o.cos(n),0,0,0,0,1],a=(e=>[1,0,0,0,0,o.cos(e),-o.sin(e),0,0,o.sin(e),o.cos(e),0,0,0,0,1])(o.rotationX),[t[0]*a[0]+t[1]*a[4]+t[2]*a[8]+t[3]*a[12],t[0]*a[1]+t[1]*a[5]+t[2]*a[9]+t[3]*a[13],t[0]*a[2]+t[1]*a[6]+t[2]*a[10]+t[3]*a[14],t[0]*a[3]+t[1]*a[7]+t[2]*a[11]+t[3]*a[15],t[4]*a[0]+t[5]*a[4]+t[6]*a[8]+t[7]*a[12],t[4]*a[1]+t[5]*a[5]+t[6]*a[9]+t[7]*a[13],t[4]*a[2]+t[5]*a[6]+t[6]*a[10]+t[7]*a[14],t[4]*a[3]+t[5]*a[7]+t[6]*a[11]+t[7]*a[15],t[8]*a[0]+t[9]*a[4]+t[10]*a[8]+t[11]*a[12],t[8]*a[1]+t[9]*a[5]+t[10]*a[9]+t[11]*a[13],t[8]*a[2]+t[9]*a[6]+t[10]*a[10]+t[11]*a[14],t[8]*a[3]+t[9]*a[7]+t[10]*a[11]+t[11]*a[15],t[12]*a[0]+t[13]*a[4]+t[14]*a[8]+t[15]*a[12],t[12]*a[1]+t[13]*a[5]+t[14]*a[9]+t[15]*a[13],t[12]*a[2]+t[13]*a[6]+t[14]*a[10]+t[15]*a[14],t[12]*a[3]+t[13]*a[7]+t[14]*a[11]+t[15]*a[15]]),[0,0,-9.80665]);o.accelerationX=e.accelerationIncludingGravity.x+i[0],o.accelerationY=e.accelerationIncludingGravity.y+i[1],o.accelerationZ=e.accelerationIncludingGravity.z-i[2]}var t,a,n},o.year=()=>(new Date).getFullYear(),o.day=()=>(new Date).getDay(),o.hour=()=>(new Date).getHours(),o.minute=()=>(new Date).getMinutes(),o.second=()=>(new Date).getSeconds(),o.millis=()=>performance.now()-m,o._loadFile=(e,t,o)=>{a++;let n={};return fetch(e).then((e=>"json"==o?e.json():"text"==o?e.text():void 0)).then((e=>{a--,Object.assign(n,e),t&&t(e)})),n},o.loadStrings=(e,t)=>o._loadFile(e,t,"text"),o.loadJSON=(e,t)=>o._loadFile(e,t,"json"),o.loadSound=(e,t)=>{a++;let o=new Audio(e);return o.addEventListener("canplaythrough",(()=>{a--,t&&t(o)})),o.load(),o.setVolume=e=>o.volume=e,o.setLoop=e=>o.loop=e,o},"global"==e&&(Object.assign(Q5,o),delete Q5.Q5),Q5.Image??=_Q5Image;for(let N of Q5.prototype._methods.init)N.call(o);for(let[B,$]of Object.entries(Q5.prototype))"_"!=B[0]&&"function"==typeof o[B]&&(o[B]=$.bind(o));if("global"==e){let V=Object.getOwnPropertyNames(o);for(let G of V)"function"==typeof o[G]?window[G]=o[G]:Object.defineProperty(window,G,{get:()=>o[G],set:e=>o[G]=e})}function q(){let t="global"==e?window:o,n=["setup","draw","preload","mouseMoved","mousePressed","mouseReleased","mouseDragged","mouseClicked","keyPressed","keyReleased","keyTyped","touchStarted","touchMoved","touchEnded","windowResized"];for(let e of n){let a="_"+e+"Fn";o[a]=()=>{},o[a].isPlaceHolder=!0,t[e]?o[a]=t[e]:Object.defineProperty(o,e,{set:e=>{o[a]=e}})}if("graphics"!=e||"image"!=e){o._preloadFn(),m=performance.now(),function e(){if(a>0)return requestAnimationFrame(e);o._setupFn(),i||o.createCanvas(100,100),o._setupDone=!0,i.restore(),o.resetMatrix(),requestAnimationFrame(F)}()}addEventListener("mousemove",(e=>o._onmousemove(e)),!1),addEventListener("keydown",(e=>o._onkeydown(e)),!1),addEventListener("keyup",(e=>o._onkeyup(e)),!1)}"function"==typeof e&&e(o),"global"==e?q():requestAnimationFrame(q)}Q5.Color=class{constructor(){this._q5Color=!0}},Q5.ColorOKLCH=class extends Q5.Color{constructor(e,t,a,o){super(),this.l=e,this.c=t,this.h=a,this.a=o??1}toString(){return`color(oklch ${this.l} ${this.c} ${this.h} / ${this.a})`}},Q5.ColorRGBA=class extends Q5.Color{constructor(e,t,a,o){super(),this.r=e,this.g=t,this.b=a,this.a=o??255}setRed(e){this.r=e}setGreen(e){this.g=e}setBlue(e){this.b=e}setAlpha(e){this.a=e}get levels(){return[this.r,this.g,this.b,this.a]}toString(){return`rgb(${this.r} ${this.g} ${this.b} / ${this.a/255})`}},Q5.ColorRGBA_P3=class extends Q5.ColorRGBA{constructor(e,t,a,o){super(e,t,a,o),this._edited=!0}get r(){return this._r}set r(e){this._r=e,this._edited=!0}get g(){return this._g}set g(e){this._g=e,this._edited=!0}get b(){return this._b}set b(e){this._b=e,this._edited=!0}get a(){return this._a}set a(e){this._a=e,this._edited=!0}toString(){if(this._edited){let e=(this._r/255).toFixed(3),t=(this._g/255).toFixed(3),a=(this._b/255).toFixed(3),o=(this._a/255).toFixed(3);this._css=`color(display-p3 ${e} ${t} ${a} / ${o})`,this._edited=!1}return this._css}},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(){this._cnsq=this.x*this.x+this.y*this.y+this.z*this.z,this._cn=Math.sqrt(this._cnsq)}add(){let e=this._arg2v(...arguments);return this.x+=e.x,this.y+=e.y,this.z+=e.z,this}rem(){let e=this._arg2v(...arguments);return this.x%=e.x,this.y%=e.y,this.z%=e.z,this}sub(){let e=this._arg2v(...arguments);return this.x-=e.x,this.y-=e.y,this.z-=e.z,this}mult(){let e=this._arg2v(...arguments);return this.x*=e.x,this.y*=e.y,this.z*=e.z,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}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}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),t=Q5.Vector.cross(this,e);return this._$.atan2(t.mag(),this.dot(e))*Math.sign(t.z||1)}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}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),i=this._$.cos(e),r=this._$.sin(e);return this.x=a*r*n,this.y=-a*i,this.z=a*r*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=>this._$.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),delete this.createCanvas,this._loop=!1}get w(){return this.width}get h(){return this.height}}if("undefined"==typeof window)throw"q5 requires you to define a window object.";Q5.canvasOptions={alpha:!1,desynchronized:!0,colorSpace:"display-p3"},window.matchMedia&&matchMedia("(dynamic-range: high) and (color-gamut: p3)").matches?Q5.supportsHDR=!0:Q5.canvasOptions.colorSpace="srgb",window.OffscreenCanvas??=function(){return document.createElement("canvas")},Q5._instanceCount=0,Q5._friendlyError=(e,t)=>{throw t+": "+e},Q5._validateParameters=()=>!0,Q5.prototype._methods={init:[],pre:[],post:[],remove:[]},Q5.prototype.registerMethod=(e,t)=>Q5.prototype._methods[e].push(t),Q5.prototype.registerPreloadMethod=(e,t)=>Q5.prototype[e]=t[e],"undefined"!=typeof module?module.exports=Q5:window.p5??=Q5,document.addEventListener("DOMContentLoaded",(()=>{Q5._hasGlobal||new Q5("auto")}));
|
|
7
|
+
function Q5(e,t){let a=this,o=0;if(e||(e="global",o++,setTimeout((()=>o--),32)),"auto"==e){if(!window.setup&&!window.draw)return;e="global"}if("global"==e&&(Q5._hasGlobal=a._isGlobal=!0),"image"==e||"graphics"==e?a.canvas=new OffscreenCanvas(100,100):(a.canvas=document.createElement("canvas"),a.canvas.id="defaultCanvas"+Q5._instanceCount++,a.canvas.classList.add("p5Canvas","q5Canvas")),a.canvas.width=a.width=100,a.canvas.height=a.height=100,"graphics"!=e&&"image"!=e){function n(){t??=document.getElementsByTagName("main")[0],t||(t=document.createElement("main"),document.body.append(t)),a.canvas.parent(t)}a._setupDone=!1,a._resize=()=>{a.frameCount>1&&(a._shouldResize=!0)},t&&"string"==typeof t&&(t=document.getElementById(t)),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():document.addEventListener("DOMContentLoaded",n)}a._q5=!0,a.pixels=[];let i,r=null;function s(e,t){t??=e||a.canvas.height,e??=a.canvas.width,null==m&&(m=new OffscreenCanvas(e,t).getContext("2d",{colorSpace:a.canvas.colorSpace})),m.canvas.width==e&&m.canvas.height==t||(m.canvas.width=e,m.canvas.height=t)}function l(){let e=a.canvas.width*a.canvas.height*4;v&&e==v.length||(v=new Uint8ClampedArray(e))}function h(e,t){a._filters||(a._filters=[],a._filters[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}},a._filters[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}},a._filters[a.OPAQUE]=e=>{for(let t=0;t<e.length;t+=4)e[t+3]=255},a._filters[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]},a._filters[a.POSTERIZE]=(e,t)=>{t??=4;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},a._filters[a.DILATE]=e=>{l(),v.set(e);let[t,o]=[a.canvas.width,a.canvas.height];for(let a=0;a<o;a++)for(let n=0;n<t;n++){let i=4*Math.max(n-1,0),r=4*Math.min(n+1,t-1),s=4*Math.max(a-1,0)*t,l=4*Math.min(a+1,o-1)*t,h=4*a*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(v[a+c],v[n+i],v[n+c],v[n+r],v[o+c])}}},a._filters[a.ERODE]=e=>{l(),v.set(e);let[t,o]=[a.canvas.width,a.canvas.height];for(let a=0;a<o;a++)for(let n=0;n<t;n++){let i=4*Math.max(n-1,0),r=4*Math.min(n+1,t-1),s=4*Math.max(a-1,0)*t,l=4*Math.min(a+1,o-1)*t,h=4*a*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(v[a+c],v[n+i],v[n+c],v[n+r],v[o+c])}}},a._filters[a.BLUR]=(e,t)=>{t=t||1,t=Math.floor(t*a._pixelDensity),l(),v.set(e);let o=2*t+1,n=function(e){let a=new Float32Array(e),o=.3*t+.8,n=o*o*2;for(let t=0;t<e;t++){let i=t-e/2,r=Math.exp(-i*i/n)/(2.5066282746*o);a[t]=r}return a}(o),[i,r]=[a.canvas.width,a.canvas.height];for(let a=0;a<r;a++)for(let r=0;r<i;r++){let s=0,l=0,h=0,c=0;for(let e=0;e<o;e++){let o=4*(a*i+Math.min(Math.max(r-t+e,0),i-1));s+=v[o]*n[e],l+=v[o+1]*n[e],h+=v[o+2]*n[e],c+=v[o+3]*n[e]}let d=4*(a*i+r);e[d]=s,e[d+1]=l,e[d+2]=h,e[d+3]=c}v.set(e);for(let a=0;a<r;a++)for(let s=0;s<i;s++){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),r-1)*i+s);l+=v[o]*n[e],h+=v[o+1]*n[e],c+=v[o+2]*n[e],d+=v[o+3]*n[e]}let u=4*(a*i+s);e[u]=l,e[u+1]=h,e[u+2]=c,e[u+3]=d}});let o=i.getImageData(0,0,a.canvas.width,a.canvas.height);a._filters[e](o.data,t),i.putImageData(o,0,0)}function c(e){m.clearRect(0,0,m.canvas.width,m.canvas.height),m.filter=e,m.drawImage(a.canvas,0,0),i.save(),i.resetTransform(),i.clearRect(0,0,a.canvas.width,a.canvas.height),i.drawImage(m.canvas,0,0),i.restore()}a.ctx=a.drawingContext=null,a.createCanvas=function(t,o,n,r){if("webgl"==n)throw"webgl renderer is not supported in q5, use '2d'";a.width=a.canvas.width=t,a.height=a.canvas.height=o,a.canvas.renderer="2d";let s=Object.assign({},Q5.canvasOptions);if(r&&Object.assign(s,r),i=a.ctx=a.drawingContext=a.canvas.getContext("2d",s),Object.assign(a.canvas,s),"rgb"==a._colorMode&&a.colorMode("rgb"),i.fillStyle="white",i.strokeStyle="black",i.lineCap="round",i.lineJoin="miter",i.textAlign="left",i.save(),"image"!=e){let t=a.displayDensity();"graphics"==e&&(t=this._pixelDensity),a.pixelDensity(Math.ceil(t))}else this._pixelDensity=1;return a.canvas},a._createCanvas=a.createCanvas,a.loadPixels=()=>{r=i.getImageData(0,0,a.canvas.width,a.canvas.height),a.pixels=r.data},a.updatePixels=()=>{null!=r&&i.putImageData(r,0,0)},a.filter=(e,t)=>{if(!i.filter)return h(e,t);if(s(),"string"==typeof e)c(e);else if(e==a.THRESHOLD){t??=.5,t=Math.max(t,1e-5),c(`saturate(0%) brightness(${Math.floor(.5/t*100)}%) contrast(1000000%)`)}else e==a.GRAY?c("saturate(0%)"):e==a.OPAQUE?(m.fillStyle="black",m.fillRect(0,0,m.canvas.width,m.canvas.height),m.drawImage(a.canvas,0,0),i.save(),i.resetTransform(),i.drawImage(m.canvas,0,0),i.restore()):e==a.INVERT?c("invert(100%)"):e==a.BLUR?c(`blur(${Math.ceil(t*a._pixelDensity/1)||1}px)`):h(e,t)},a.resize=(e,t)=>{s(),m.drawImage(a.canvas,0,0),a.width=e,a.height=t,a.canvas.width=e*a._pixelDensity,a.canvas.height=t*a._pixelDensity,i.save(),i.resetTransform(),i.clearRect(0,0,a.canvas.width,a.canvas.height),i.drawImage(m.canvas,0,0,a.canvas.width,a.canvas.height),i.restore()},a.get=(e,t,o,n)=>{let r=a._pixelDensity||1;if(void 0!==e&&void 0===o){let o=i.getImageData(e*r,t*r,1,1).data;return new a.Color(o[0],o[1],o[2],o[3]/255)}e=(e||0)*r,t=(t||0)*r;let s=o=o||a.width,l=n=n||a.height;o*=r,n*=r;let h=a.createImage(o,n),c=i.getImageData(e,t,o,n);return h.ctx.putImageData(c,0,0),h._pixelDensity=r,h.width=s,h.height=l,h},a.set=(e,t,o)=>{if(o._q5){let n=a._tint;return a._tint=null,a.image(o,e,t),void(a._tint=n)}a.pixels.length||a.loadPixels();let n=a._pixelDensity||1;for(let i=0;i<n;i++)for(let r=0;r<n;r++){let s=4*((t*n+i)*a.canvas.width+e*n+r);a.pixels[s]=o.r??o.l,a.pixels[s+1]=o.g??o.c,a.pixels[s+2]=o.b??o.h,a.pixels[s+3]=o.a}},a.tinted=function(e){let t=e.a;e.a=255,s(),m.clearRect(0,0,m.canvas.width,m.canvas.height),m.fillStyle=e,m.fillRect(0,0,m.canvas.width,m.canvas.height),m.globalCompositeOperation="multiply",m.drawImage(i.canvas,0,0),m.globalCompositeOperation="source-over",i.save(),i.resetTransform();let a=i.globalCompositeOperation;i.globalCompositeOperation="source-in",i.drawImage(m.canvas,0,0),i.globalCompositeOperation=a,i.restore(),m.globalAlpha=t/255,m.clearRect(0,0,m.canvas.width,m.canvas.height),m.drawImage(i.canvas,0,0),m.globalAlpha=1,i.save(),i.resetTransform(),i.clearRect(0,0,i.canvas.width,i.canvas.height),i.drawImage(m.canvas,0,0),i.restore()},a.tint=function(e){a._tint=e._q5Color?e:a.color(...arguments)},a.noTint=()=>a._tint=null,a.mask=e=>{i.save(),i.resetTransform();let t=i.globalCompositeOperation;i.globalCompositeOperation="destination-in",i.drawImage(e.canvas,0,0),i.globalCompositeOperation=t,i.restore()},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,o)=>{if((!e||"string"==typeof e&&(!t||!o&&t.length<5))&&(o=t,t=e,e=a.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;let d=null,u=!0,g=[],_={},p=0,m=null,f=null,v=null;if(a.THRESHOLD=1,a.GRAY=2,a.OPAQUE=3,a.INVERT=4,a.POSTERIZE=5,a.DILATE=6,a.ERODE=7,a.BLUR=8,"image"==e)return;function x(e,t){a.width=e,a.height=t;let o=function(){let e={};for(let t in i)"function"!=typeof i[t]&&(e[t]=i[t]);return delete e.canvas,e}();a.canvas.width=Math.ceil(e*a._pixelDensity),a.canvas.height=Math.ceil(t*a._pixelDensity),!a.canvas.fullscreen&&a.canvas.style&&(a.canvas.style.width=e+"px",a.canvas.style.height=t+"px");for(let e in o)a.ctx[e]=o[e];i.scale(a._pixelDensity,a._pixelDensity)}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.RGB="rgb",a.RGBA="rgb",a.HSB="hsb",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.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.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.hint=(e,t)=>{a[e]=t},a.frameCount=0,a.deltaTime=16,a.mouseX=0,a.mouseY=0,a.touches=[],a.mouseButton=null,a.keyIsPressed=!1,a.mouseIsPressed=!1,a.key=null,a.keyCode=null,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,Object.defineProperty(a,"deviceOrientation",{get:()=>window.screen?.orientation?.type}),Object.defineProperty(a,"windowWidth",{get:()=>window.innerWidth}),Object.defineProperty(a,"windowHeight",{get:()=>window.innerHeight}),a._colorMode="rgb",a._doStroke=!0,a._doFill=!0,a._strokeSet=!1,a._fillSet=!1,a._tint=null,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=15,a._textLeadDiff=3,a._textStyle="normal",a._pixelDensity=1,a._lastFrameTime=0,a._targetFrameRate=null,a._frameRate=a._fps=60,a.resizeCanvas=(e,t)=>{e==a.width&&t==a.height||x(e,t)},a.createGraphics=function(e,t){let o=new Q5("graphics");return o._createCanvas.call(a,e,t),o},a.createImage=(e,t)=>new Q5.Image(e,t),a.displayDensity=()=>window.devicePixelRatio,a.pixelDensity=e=>e&&e!=a._pixelDensity?(a._pixelDensity=e,x(a.width,a.height),e):a._pixelDensity,a.map=(e,t,a,o,n,i)=>{let r=o+1*(e-t)/(a-t)*(n-o);return i?o<n?Math.min(Math.max(r,o),n):Math.min(Math.max(r,n),o):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(){let e=arguments;return 4==e.length?Math.hypot(e[0]-e[2],e[1]-e[3]):Math.hypot(e[0]-e[3],e[1]-e[4],e[2]-e[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 i=n*n*n,r=n*n;return e*(-.5*i+r-.5*n)+t*(1.5*i-2.5*r+1)+a*(-1.5*i+2*r+.5*n)+o*(.5*i-.5*r)},a.bezierPoint=(e,t,a,o,n)=>{const i=1-n;return Math.pow(i,3)*e+3*Math.pow(i,2)*n*t+3*i*Math.pow(n,2)*a+Math.pow(n,3)*o},a.curveTangent=(e,t,a,o,n)=>{const i=n*n;return e*(-3*i/2+2*n-.5)+t*(9*i/2-5*n)+a*(-9*i/2+4*n+.5)+o*(3*i/2-n)},a.bezierTangent=(e,t,a,o,n)=>{const i=1-n;return 3*o*Math.pow(n,2)-3*a*Math.pow(n,2)+6*a*i*n-6*t*i*n+3*t*Math.pow(i,2)-3*e*Math.pow(i,2)},Q5.supportsHDR?a.Color=Q5.ColorRGBA_P3:a.Color=Q5.ColorRGBA,a.colorMode=e=>{a._colorMode=e,"oklch"==e?a.Color=Q5.ColorOKLCH:"rgb"==e?"srgb"==a.canvas.colorSpace?a.Color=Q5.ColorRGBA:a.Color=Q5.ColorRGBA_P3:"srgb"==e&&(a.Color=Q5.ColorRGBA,a._colorMode="rgb")};let y={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],grey:[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 w(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 M(e,t,o,n,r,s,l,h){if(!a._doFill&&!a._doStroke)return;let c=w(r),d=w(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,n)}i.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,g=a.sin(l)*n/2;i[r?"lineTo":"moveTo"](e+u,t+g)}l==a.CHORD?i.closePath():l==a.PIE&&(i.lineTo(e,t),i.closePath()),a._doFill&&i.fill(),a._doStroke&&i.stroke()}function R(e,t,o,n){(a._doFill||a._doStroke)&&(i.beginPath(),i.ellipse(e,t,o/2,n/2,0,0,a.TAU),a._doFill&&i.fill(),a._doStroke&&i.stroke())}function S(e,t,o,n,r,s,l,h){if(!a._doFill&&!a._doStroke)return;if(void 0===r)return function(e,t,o,n){a._doFill&&i.fillRect(e,t,o,n),a._doStroke&&i.strokeRect(e,t,o,n)}(e,t,o,n);if(void 0===s)return S(e,t,o,n,r,r,r,r);const c=Math.min(Math.abs(n),Math.abs(o))/2;r=Math.min(c,r),s=Math.min(c,s),h=Math.min(c,h),l=Math.min(c,l),i.beginPath(),i.moveTo(e+r,t),i.arcTo(e+o,t,e+o,t+n,s),i.arcTo(e+o,t+n,e,t+n,l),i.arcTo(e,t+n,e,t,h),i.arcTo(e,t,e+o,t,r),i.closePath(),a._doFill&&i.fill(),a._doStroke&&i.stroke()}function C(){g=[]}function b(e,t,o){return e.slice(0,200)+a._textStyle+a._textSize+a._textFont+(a._doFill?i.fillStyle:"")+"_"+(a._doStroke&&a._strokeSet?i.lineWidth+i.strokeStyle+"_":"")+(t||"")+(o?"x"+o:"")}a.color=function(e,t,o,n){let i=a.Color;if(e._q5Color)return new i(...e.levels);let r=arguments;if(1==r.length){if("string"==typeof e)return"#"==e[0]?new i(parseInt(e.slice(1,3),16),parseInt(e.slice(3,5),16),parseInt(e.slice(5,7),16),9!=e.length?null:parseInt(e.slice(7,9),16)):y[e]?new i(...y[e]):new i(0,0,0);if(Array.isArray(e))return new i(...e)}if("rgb"==a._colorMode){if(1==r.length)return new i(e,e,e);if(2==r.length)return new i(e,e,e,t);if(3==r.length)return new i(e,t,o);if(4==r.length)return new i(e,t,o,n)}},a.red=e=>e.r,a.green=e=>e.g,a.blue=e=>e.b,a.alpha=e=>e.a,a.lightness=e=>100*(.2126*e.r+.7152*e.g+.0722*e.b)/255,a.lerpColor=(e,t,o)=>{if("rgb"==a._colorMode)return new a.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,255));{let n=t.h-e.h;n>180&&(n-=360),n<-180&&(n+=360);let i=e.h+o*n;return i<0&&(i+=360),i>360&&(i-=360),new a.Color(a.constrain(a.lerp(e.l,t.l,o),0,100),a.constrain(a.lerp(e.c,t.c,o),0,100),i,a.constrain(a.lerp(e.a,t.a,o),0,255))}},a.strokeWeight=e=>{e||(a._doStroke=!1),i.lineWidth=e||1e-4},a.stroke=function(e){if(a._doStroke=!0,a._strokeSet=!0,e._q5Color||(e=a.color(...arguments)),e.a<=0)return a._doStroke=!1;i.strokeStyle=e},a.noStroke=()=>a._doStroke=!1,a.fill=function(e){if(a._doFill=!0,a._fillSet=!0,e._q5Color||(e=a.color(...arguments)),e.a<=0)return a._doFill=!1;i.fillStyle=e},a.noFill=()=>a._doFill=!1,a.smooth=()=>a._smooth=!0,a.noSmooth=()=>a._smooth=!1,a.blendMode=e=>i.globalCompositeOperation=e,a.strokeCap=e=>i.lineCap=e,a.strokeJoin=e=>i.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=()=>{i.clearRect(0,0,a.canvas.width,a.canvas.height)},a.background=function(e){if(e._q5)return a.image(e,0,0,a.width,a.height);i.save(),i.resetTransform(),e._q5color||(e=a.color(...arguments)),i.fillStyle=e,i.fillRect(0,0,a.canvas.width,a.canvas.height),i.restore()},a.line=(e,t,o,n)=>{a._doStroke&&(i.beginPath(),i.moveTo(e,t),i.lineTo(o,n),i.stroke())},a.arc=(e,t,o,n,i,r,s,l)=>{if(i==r)return a.ellipse(e,t,o,n);l??=25,s??=a.PIE,a._ellipseMode==a.CENTER?M(e,t,o,n,i,r,s,l):a._ellipseMode==a.RADIUS?M(e,t,2*o,2*n,i,r,s,l):a._ellipseMode==a.CORNER?M(e+o/2,t+n/2,o,n,i,r,s,l):a._ellipseMode==a.CORNERS&&M((e+o)/2,(t+n)/2,o-e,n-t,i,r,s,l)},a.ellipse=(e,t,o,n)=>{n??=o,a._ellipseMode==a.CENTER?R(e,t,o,n):a._ellipseMode==a.RADIUS?R(e,t,2*o,2*n):a._ellipseMode==a.CORNER?R(e+o/2,t+n/2,o,n):a._ellipseMode==a.CORNERS&&R((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),i.beginPath(),i.ellipse(e,t,.4,.4,0,0,a.TAU),i.stroke()},a.rect=(e,t,o,n,i,r,s,l)=>{a._rectMode==a.CENTER?S(e-o/2,t-n/2,o,n,i,r,s,l):a._rectMode==a.RADIUS?S(e-o,t-n,2*o,2*n,i,r,s,l):a._rectMode==a.CORNER?S(e,t,o,n,i,r,s,l):a._rectMode==a.CORNERS&&S(e,t,o-e,n-t,i,r,s,l)},a.square=(e,t,o,n,i,r,s)=>a.rect(e,t,o,o,n,i,r,s),a.beginShape=()=>{C(),i.beginPath(),u=!0},a.beginContour=()=>{i.closePath(),C(),u=!0},a.endContour=()=>{C(),u=!0},a.vertex=(e,t)=>{C(),u?i.moveTo(e,t):i.lineTo(e,t),u=!1},a.bezierVertex=(e,t,a,o,n,r)=>{C(),i.bezierCurveTo(e,t,a,o,n,r)},a.quadraticVertex=(e,t,a,o)=>{C(),i.quadraticCurveTo(e,t,a,o)},a.bezier=(e,t,o,n,i,r,s,l)=>{a.beginShape(),a.vertex(e,t),a.bezierVertex(o,n,i,r,s,l),a.endShape()},a.triangle=(e,t,o,n,i,r)=>{a.beginShape(),a.vertex(e,t),a.vertex(o,n),a.vertex(i,r),a.endShape(a.CLOSE)},a.quad=(e,t,o,n,i,r,s,l)=>{a.beginShape(),a.vertex(e,t),a.vertex(o,n),a.vertex(i,r),a.vertex(s,l),a.endShape(a.CLOSE)},a.endShape=e=>{C(),e&&i.closePath(),a._doFill&&i.fill(),a._doStroke&&i.stroke(),a._doFill||a._doStroke||(i.save(),i.fillStyle="none",i.fill(),i.restore())},a.curveVertex=(e,t)=>{if(g.push([e,t]),g.length<4)return;let o=function(e,t,a,o,n,i,r,s,l,h){function c(e,t,a,o,n,i){let r=Math.pow(o-t,2)+Math.pow(n-a,2);return Math.pow(r,.5*i)+e}let d=[],u=c(0,e,t,a,o,h),g=c(u,a,o,n,i,h),_=c(g,n,i,r,s,h);for(let h=0;h<l;h++){let c=u+h/(l-1)*(g-u),p=[(u-c)/(u-0),(c-0)/(u-0),(g-c)/(g-u),(c-u)/(g-u),(_-c)/(_-g),(c-g)/(_-g),(g-c)/(g-0),(c-0)/(g-0),(_-c)/(_-u),(c-u)/(_-u)];for(let e=0;e<p.length;e+=2)isNaN(p[e])&&(p[e]=1,p[e+1]=0),isFinite(p[e])||(p[e]>0?(p[e]=1,p[e+1]=0):(p[e]=0,p[e+1]=1));let m=e*p[0]+a*p[1],f=t*p[0]+o*p[1],v=a*p[2]+n*p[3],x=o*p[2]+i*p[3],y=n*p[4]+r*p[5],w=i*p[4]+s*p[5],M=m*p[6]+v*p[7],R=f*p[6]+x*p[7],S=v*p[8]+y*p[9],C=x*p[8]+w*p[9],b=M*p[2]+S*p[3],E=R*p[2]+C*p[3];d.push([b,E])}return d}(...g[g.length-4],...g[g.length-3],...g[g.length-2],...g[g.length-1],a._curveDetail,a._curveAlpha);for(let e=0;e<o.length;e++)u?i.moveTo(...o[e]):i.lineTo(...o[e]),u=!1},a.curve=(e,t,o,n,i,r,s,l)=>{a.beginShape(),a.curveVertex(e,t),a.curveVertex(o,n),a.curveVertex(i,r),a.curveVertex(s,l),a.endShape()},a.opacity=e=>i.globalAlpha=e,a.translate=(e,t)=>i.translate(e,t),a.rotate=e=>{"degrees"==a._angleMode&&(e=a.radians(e)),i.rotate(e)},a.scale=(e,t)=>{t??=e,i.scale(e,t)},a.applyMatrix=(e,t,a,o,n,r)=>i.transform(e,t,a,o,n,r),a.shearX=e=>i.transform(1,0,a.tan(e),1,0,0),a.shearY=e=>i.transform(1,a.tan(e),0,1,0,0),a.resetMatrix=()=>{i.resetTransform(),i.scale(a._pixelDensity,a._pixelDensity)},a._styleNames=["_doStroke","_doFill","_strokeSet","_fillSet","_tint","_imageMode","_rectMode","_ellipseMode","_textFont","_textLeading","_leadingSet","_textSize","_textAlign","_textBaseline","_textStyle","_textWrap"],a._styles=[],a.push=a.pushMatrix=()=>{i.save();let e={};for(let t of a._styleNames)e[t]=a[t];a._styles.push(e)},a.pop=a.popMatrix=()=>{i.restore();let e=a._styles.pop();for(let t of a._styleNames)a[t]=e[t]},a.imageMode=e=>a._imageMode=e,a.image=(e,t,o,n,r,s,l,h,c)=>{let d=e._q5?e.canvas:e;var u,g;e._q5&&null!=a._tint&&(u=e.canvas.width,g=e.canvas.height,g??=u||a.canvas.height,u??=a.canvas.width,null==f&&(f=new OffscreenCanvas(u,g).getContext("2d",{colorSpace:a.canvas.colorSpace})),f.canvas.width==u&&f.canvas.height==g||(f.canvas.width=u,f.canvas.height=g),f.drawImage(e.canvas,0,0),e.tinted(a._tint)),n||(e._q5||e.width?(n=e.width,r=e.height):(n=e.videoWidth,r=e.videoHeight)),"center"==a._imageMode&&(t-=.5*n,o-=.5*r);let _=e._pixelDensity;s??=0,l??=0,h?h*=_:h=d.width,c?c*=_:c=d.height,i.drawImage(d,s*_,l*_,h,c,t,o,n,r),function(){if(!e._q5||!a._tint)return;let t=e.ctx;t.save(),t.resetTransform(),t.clearRect(0,0,t.canvas.width,t.canvas.height),t.drawImage(f.canvas,0,0),t.restore()}()},a._incrementPreload=()=>o++,a._decrementPreload=()=>o--,a.loadImage=(e,t)=>{o++;let n=a.createImage(1,1),i=n.ctx,r=new window.Image;return r.src=e,r.crossOrigin="Anonymous",r._pixelDensity=1,r.onload=()=>{n.width=i.canvas.width=r.naturalWidth,n.height=i.canvas.height=r.naturalHeight,i.drawImage(r,0,0),o--,t&&t(n)},r.onerror=e=>{throw o--,e},n},a._clearTemporaryBuffers=()=>{m=null,f=null,v=null},a.loadFont=(e,t)=>{o++;let a=e.split("/"),n=a[a.length-1].split(".")[0].replace(" ",""),i=new FontFace(n,"url("+e+")");return document.fonts.add(i),i.load().then((()=>{o--,t&&t(n)})),n},a.textFont=e=>a._textFont=e,a.textSize=e=>{if(void 0===e)return a._textSize;a._textSize=e,a._leadingSet||(a._textLeading=1.25*e,a._textLeadDiff=a._textLeading-e)},a.textLeading=e=>{if(void 0===e)return a._textLeading;a._textLeading=e,a._textLeadDiff=e-a._textSize,a._leadingSet=!0},a.textStyle=e=>a._textStyle=e,a.textAlign=(e,t)=>{i.textAlign=e,t&&(i.textBaseline=t==a.CENTER?"middle":t)},a.textWidth=e=>(i.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,i.measureText(e).width),a.textAscent=e=>(i.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,i.measureText(e).actualBoundingBoxAscent),a.textDescent=e=>(i.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`,i.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[o,n]of this.entries())n.lastAccessed<t&&(t=n.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,o)=>{let n=a._textCache;a._textCache=!0,a._useCache=!0,a.text(e,0,0,t,o),a._useCache=!1;let i=b(e,t,o);return a._textCache=n,a._tic.get(i)},a.text=(e,t,o,n,r)=>{if(void 0===e)return;if(e=e.toString(),!a._doFill&&!a._doStroke)return;let s,l,h,c,d,u,g,_,p=1,m=i.getTransform(),f=a._useCache||a._textCache&&(0!=m.b||0!=m.c);if(f){if(c=b(e,n,r),l=a._tic.get(c),l)return void a.textImage(l,t,o);h=a.createGraphics.call(a,1,1),s=h.ctx,p=a._pixelDensity}else s=i,d=t,u=o;s.font=`${a._textStyle} ${a._textSize}px ${a._textFont}`;let v=e.split("\n");if(f){d=0,u=a._textLeading*v.length;let t=s.measureText(" ");g=t.fontBoundingBoxAscent,_=t.fontBoundingBoxDescent,r??=u+_,h.resizeCanvas(Math.ceil(s.measureText(e).width),Math.ceil(r)),s.fillStyle=i.fillStyle,s.strokeStyle=i.strokeStyle,s.lineWidth=i.lineWidth}let x=s.fillStyle;a._fillSet||(s.fillStyle="black");for(let e=0;e<v.length&&(a._doStroke&&a._strokeSet&&s.strokeText(v[e],d,u),a._doFill&&s.fillText(v[e],d,u),u+=a._textLeading,!(u>r));e++);a._fillSet||(s.fillStyle=x),f&&(l=h.get(),l._ascent=g,l._descent=_,a._tic.set(c,l),a.textImage(l,t,o))},a.textImage=(e,t,o)=>{let n=a._imageMode;a._imageMode="corner","center"==i.textAlign?t-=.5*e.width:"right"==i.textAlign&&(t-=e.width),"alphabetic"==i.textBaseline&&(o-=a._textLeading),"middle"==i.textBaseline?o-=e._descent+.5*e._ascent+a._textLeadDiff:"bottom"==i.textBaseline?o-=e._ascent+e._descent+a._textLeadDiff:"top"==i.textBaseline&&(o-=e._descent+a._textLeadDiff),a.image(e,t,o),a._imageMode=n};var E,D=4095,I=4,T=.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,i,r,s,l,h=Math.floor(e),c=Math.floor(t),d=Math.floor(a),u=e-h,g=t-c,_=a-d,p=0,m=.5,f=0;f<I;f++){var v=h+(c<<4)+(d<<8);n=A(u),i=A(g),r=E[v&D],r+=n*(E[v+1&D]-r),s=E[v+16&D],r+=i*((s+=n*(E[v+16+1&D]-s))-r),s=E[(v+=256)&D],s+=n*(E[v+1&D]-s),l=E[v+16&D],s+=i*((l+=n*(E[v+16+1&D]-l))-s),p+=(r+=A(_)*(s-r))*m,m*=T,h<<=1,c<<=1,d<<=1,(u*=2)>=1&&(h++,u--),(g*=2)>=1&&(c++,g--),(_*=2)>=1&&(d++,_--)}return p},a.noiseDetail=(e,t)=>{e>0&&(I=e),t>0&&(T=t)};const O=()=>{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=O();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[Math.trunc(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=O()),P.setSeed()};var k=new function(){var e,t,a,o=new Array(128),n=new Array(256),i=new Array(128),r=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*i[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(r[e]+c()*(r[e-1]-r[e])<Math.exp(-.5*t*t))return t;if(a=h(),e=127&a,Math.abs(a)<o[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())<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*i[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,g=7.697117470131487,_=g,p=.003949659822581572;for(e=u/Math.exp(-.5*c*c),o[0]=Math.floor(c/e*a),o[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))),o[t+1]=Math.floor(c/d*a),d=c,r[t]=Math.exp(-.5*c*c),i[t]=c/a;for(e=p/Math.exp(-g),n[0]=Math.floor(g/e*h),n[1]=0,s[0]=e/h,s[255]=g/h,l[0]=1,l[255]=Math.exp(-g),t=254;t>=1;t--)g=-Math.log(p/g+Math.exp(-g)),n[t+1]=Math.floor(g/_*h),_=g,l[t]=Math.exp(-g),s[t]=g/h}};function z(){let e=performance.now();if(a._loop)d=a._targetFrameRate?setTimeout(z,1e3/a._targetFrameRate):requestAnimationFrame(z);else if(a.frameCount>0)return;if(d&&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.windowResized(),a._shouldResize=!1);for(let e of Q5.prototype._methods.pre)e.call(a);C(),u=!0,i.save(),a.draw();for(let e of Q5.prototype._methods.post)e.call(a);i.restore(),a.resetMatrix();let t=performance.now();a._fps=Math.round(1e3/(t-e)),a._lastFrameTime=e,a.pmouseX=a.mouseX,a.pmouseY=a.mouseY}function L(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}}k.hasInit=!1,a.randomGaussian=(e,t)=>(k.hasInit||(k.zigset(),k.hasInit=!0),k.RNOR()*t+e),a.randomExponential=()=>(k.hasInit||(k.zigset(),k.hasInit=!0),k.REXP()),a.Element=function(e){this.elt=e},a._elements=[],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.print=console.log,a.describe=()=>{},a.noLoop=()=>{a._loop=!1,d=null},a.loop=()=>{a._loop=!0,null==d&&z()},a.redraw=()=>z(),a.remove=()=>{a.noLoop(),a.canvas.remove()},a.frameRate=e=>(e&&(a._targetFrameRate=e),a._frameRate),a.getFrameRate=()=>a._frameRate,a.getFPS=()=>a._fps,a.storeItem=localStorage.setItem,a.getItem=localStorage.getItem,a.removeItem=localStorage.removeItem,a.clearStorage=localStorage.clear,a._updateMouse=e=>{let t=a.canvas.getBoundingClientRect(),o=a.canvas.scrollWidth/a.width||1,n=a.canvas.scrollHeight/a.height||1;a.mouseX=(e.clientX-t.left)/o,a.mouseY=(e.clientY-t.top)/n},a._onmousedown=e=>{a._updateMouse(e),a.mouseIsPressed=!0,a.mouseButton=[a.LEFT,a.CENTER,a.RIGHT][e.button],a.mousePressed(e)},a._onmousemove=e=>{a._updateMouse(e),a.mouseIsPressed?a.mouseDragged(e):a.mouseMoved(e)},a._onmouseup=e=>{a._updateMouse(e),a.mouseIsPressed=!1,a.mouseReleased(e)},a._onclick=e=>{a._updateMouse(e),a.mouseIsPressed=!0,a.mouseClicked(e),a.mouseIsPressed=!1},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._onkeydown=e=>{e.repeat||(a.keyIsPressed=!0,a.key=e.key,a.keyCode=e.keyCode,_[a.keyCode]=!0,a.keyPressed(e),1==e.key.length&&a.keyTyped(e))},a._onkeyup=e=>{a.keyIsPressed=!1,a.key=e.key,a.keyCode=e.keyCode,_[a.keyCode]=!1,a.keyReleased(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=>!!_[e],a._ontouchstart=e=>{a.touches=[...e.touches].map(L),a._isTouchAware||(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseIsPressed=!0,a.mouseButton=a.LEFT,a.mousePressed(e)||e.preventDefault()),a.touchStarted(e)||e.preventDefault()},a._ontouchmove=e=>{a.touches=[...e.touches].map(L),a._isTouchAware||(a.mouseX=a.touches[0].x,a.mouseY=a.touches[0].y,a.mouseDragged(e)||e.preventDefault()),a.touchMoved(e)||e.preventDefault()},a._ontouchend=e=>{a.touches=[...e.touches].map(L),a._isTouchAware||a.touches.length||(a.mouseIsPressed=!1,a.mouseReleased(e)||e.preventDefault()),a.touchEnded(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)};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][Math.trunc(window.orientation/90)+1],a.relRotationY=[-a.rotationX,a.rotationY,a.rotationX][Math.trunc(window.orientation/90)+1],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])])((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+i[0],a.accelerationY=e.accelerationIncludingGravity.y+i[1],a.accelerationZ=e.accelerationIncludingGravity.z-i[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()-p,a._loadFile=(e,t,a)=>{o++;let n={};return fetch(e).then((e=>"json"==a?e.json():"text"==a?e.text():void 0)).then((e=>{o--,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)=>{o++;let a=new Audio(e);return a.addEventListener("canplaythrough",(()=>{o--,t&&t(a)})),a.load(),a.setVolume=e=>a.volume=e,a.setLoop=e=>a.loop=e,a},"global"==e&&(Object.assign(Q5,a),delete Q5.Q5),Q5.Image??=_Q5Image;for(let F of Q5.prototype._methods.init)F.call(a);for(let[q,N]of Object.entries(Q5.prototype))"_"!=q[0]&&"function"==typeof a[q]&&(a[q]=N.bind(a));if("global"==e){let B=Object.getOwnPropertyNames(a);for(let $ of B)"function"==typeof a[$]?window[$]=a[$]:Object.defineProperty(window,$,{get:()=>a[$],set:e=>a[$]=e})}function Q(){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)t[e]?a._isGlobal&&(a[e]=t[e]):a[e]=()=>{};a._isTouchAware=a.touchStarted||a.touchMoved||a.mouseReleased,addEventListener("mousemove",(e=>a._onmousemove(e)),!1),addEventListener("keydown",(e=>a._onkeydown(e)),!1),addEventListener("keyup",(e=>a._onkeyup(e)),!1),a.preload(),p=performance.now(),function e(){if(o>0)return requestAnimationFrame(e);a.setup(),i||a.createCanvas(100,100),a._setupDone=!0,i.restore(),a.resetMatrix(),requestAnimationFrame(z)}()}"function"==typeof e&&e(a),"graphics"!=e&&"image"!=e&&("global"==e?Q():requestAnimationFrame(Q))}Q5.Color=class{constructor(){this._q5Color=!0}},Q5.ColorOKLCH=class extends Q5.Color{constructor(e,t,a,o){super(),this.l=e,this.c=t,this.h=a,this.a=o??1}toString(){return`color(oklch ${this.l} ${this.c} ${this.h} / ${this.a})`}},Q5.ColorRGBA=class extends Q5.Color{constructor(e,t,a,o){super(),this.r=e,this.g=t,this.b=a,this.a=o??255}setRed(e){this.r=e}setGreen(e){this.g=e}setBlue(e){this.b=e}setAlpha(e){this.a=e}get levels(){return[this.r,this.g,this.b,this.a]}toString(){return`rgb(${this.r} ${this.g} ${this.b} / ${this.a/255})`}},Q5.ColorRGBA_P3=class extends Q5.ColorRGBA{constructor(e,t,a,o){super(e,t,a,o),this._edited=!0}get r(){return this._r}set r(e){this._r=e,this._edited=!0}get g(){return this._g}set g(e){this._g=e,this._edited=!0}get b(){return this._b}set b(e){this._b=e,this._edited=!0}get a(){return this._a}set a(e){this._a=e,this._edited=!0}toString(){if(this._edited){let e=(this._r/255).toFixed(3),t=(this._g/255).toFixed(3),a=(this._b/255).toFixed(3),o=(this._a/255).toFixed(3);this._css=`color(display-p3 ${e} ${t} ${a} / ${o})`,this._edited=!1}return this._css}},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(){this._cnsq=this.x*this.x+this.y*this.y+this.z*this.z,this._cn=Math.sqrt(this._cnsq)}add(){let e=this._arg2v(...arguments);return this.x+=e.x,this.y+=e.y,this.z+=e.z,this}rem(){let e=this._arg2v(...arguments);return this.x%=e.x,this.y%=e.y,this.z%=e.z,this}sub(){let e=this._arg2v(...arguments);return this.x-=e.x,this.y-=e.y,this.z-=e.z,this}mult(){let e=this._arg2v(...arguments);return this.x*=e.x,this.y*=e.y,this.z*=e.z,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}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}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),t=Q5.Vector.cross(this,e);return this._$.atan2(t.mag(),this.dot(e))*Math.sign(t.z||1)}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}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),i=this._$.cos(e),r=this._$.sin(e);return this.x=a*r*n,this.y=-a*i,this.z=a*r*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=>this._$.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"),delete this.createCanvas,this._createCanvas(e,t),this._loop=!1}get w(){return this.width}get h(){return this.height}}if("undefined"==typeof window)throw"q5 requires you to define a window object.";Q5.canvasOptions={alpha:!1,desynchronized:!0,colorSpace:"display-p3"},window.matchMedia&&matchMedia("(dynamic-range: high) and (color-gamut: p3)").matches?Q5.supportsHDR=!0:Q5.canvasOptions.colorSpace="srgb",window.OffscreenCanvas??=function(){return document.createElement("canvas")},Q5._instanceCount=0,Q5._friendlyError=(e,t)=>{throw t+": "+e},Q5._validateParameters=()=>!0,Q5.prototype._methods={init:[],pre:[],post:[],remove:[]},Q5.prototype.registerMethod=(e,t)=>Q5.prototype._methods[e].push(t),Q5.prototype.registerPreloadMethod=(e,t)=>Q5.prototype[e]=t[e],"undefined"!=typeof module?module.exports=Q5:window.p5??=Q5,document.addEventListener("DOMContentLoaded",(()=>{Q5._hasGlobal||new Q5("auto")}));
|