q5 1.0.28 → 1.1.2
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 +13 -10
- package/package.json +2 -1
- package/q5.js +4 -2
- package/q5.min.js +7 -0
- package/q5js_brand.png +0 -0
- package/q5js_logo.png +0 -0
package/README.md
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
# <img src="q5js_logo.png"
|
|
1
|
+
# <img src="q5js_logo.png" height="64"> <img src="q5js_brand.png" height="64">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
q5.js is a drop-in replacement for [p5.js][]. It supports almost all of p5.js's 2D drawing API's, math functionality, and some other utilities.
|
|
4
4
|
|
|
5
|
-
q5.js is
|
|
6
|
-
|
|
7
|
-
q5.min.js (35kb) is 25x smaller than p5.min.js (898kb), which makes using [q5 better for the environment!][] q5 will also load and run faster, which is especially important on mobile devices.
|
|
5
|
+
q5.min.js (38kb) is 24x smaller than p5.min.js (914kb), which makes using [q5 better for the environment!][] q5 will also load and run faster, which is especially important on mobile devices.
|
|
8
6
|
|
|
9
7
|
q5 doesn't include any friendly error messages to help you code though. Its mainly for people who are already familiar with p5.js or JS programming in general. If you're a beginner, stick with p5 while developing a sketch, then use q5 to share your work.
|
|
10
8
|
|
|
@@ -26,16 +24,17 @@ q5 is also available on [npm](https://www.npmjs.com/package/q5)!
|
|
|
26
24
|
npm install q5
|
|
27
25
|
```
|
|
28
26
|
|
|
29
|
-
## Using p5
|
|
27
|
+
## Using p5 Addon Libraries
|
|
30
28
|
|
|
31
|
-
q5.js is compatible with popular p5 addons
|
|
29
|
+
q5.js is compatible with popular p5 addons and projects that use p5, such as p5play, because it aliases `Q5` to `p5`.
|
|
32
30
|
|
|
33
31
|
To use addons, simply load them after q5.js:
|
|
34
32
|
|
|
35
33
|
```html
|
|
36
34
|
<script src="q5.js"></script>
|
|
37
35
|
<!-- load p5 addons after q5 -->
|
|
38
|
-
<script src="
|
|
36
|
+
<script src="https://p5play.org/v3/planck.min.js"></script>
|
|
37
|
+
<script src="https://p5play.org/v3/p5play.js"></script>
|
|
39
38
|
```
|
|
40
39
|
|
|
41
40
|
## What's new in Version 1.0?
|
|
@@ -85,9 +84,13 @@ I thought @LingDong-'s work on q5 and the idea itself had great potential. So I
|
|
|
85
84
|
|
|
86
85
|
An increase in performance of even a few frames per second can make a significant difference in the user experience of a work of interactive art or a game, especially on mobile devices.
|
|
87
86
|
|
|
88
|
-
As a Computer Science teacher at Crimson Education, I teach students from all over the world. I also live in Colombia, where there are many people who don't have access to a PC, as in no desktop or laptop. There are businesses here that charge for time based access to 10 year old desktop PCs. But
|
|
87
|
+
As a Computer Science teacher at Crimson Education, I teach students from all over the world. I also live in Colombia, where there are many people who don't have access to a PC, as in no desktop or laptop. There are businesses here that charge for time based access to 10 year old desktop PCs. But 6.3 billion people in the world own a smartphone. Improving the UX of p5.js on mobile devices is therefore a major priority for me. q5 is a step in that direction.
|
|
88
|
+
|
|
89
|
+
I was also interested in working on q5 because for a lot of p5.js users, the library itself is a black box. Even as an expert JS programmer and someone who teaches CS for a living, I still find myself scratching my head when I look at the p5.js source code. p5 was initially released 10 years ago and I think some bad design choices were made due to JS limitations at the time. Its also an absolutely massive library, with literally over 100,000 lines of code and documentation! p5.js is 4 MB unminified compared to q5.js which is 65kb.
|
|
90
|
+
|
|
91
|
+
I'm not saying all this as a slight against the authors of p5 but it does make the source code very difficult to read. I think it'd be better if the canvas mode, webgl mode, Friendly Error System, and accessibility features of p5 were each offered in separate files. Yet, the powers that be at the Processing Foundation have made it clear that they don't want to do that. Instead they insist on adding more accessibility features to the base library, which the majority of people just don't need. So q5 is a good alternative.
|
|
89
92
|
|
|
90
|
-
|
|
93
|
+
Thanks in large part to @LingDong-'s design, q5 is well organized, concise, and utilizes many modern JS features! I think even without documentation, the source code is much easier for experienced JS programmers to comprehend.
|
|
91
94
|
|
|
92
95
|
## New Features: Top-Level Global Mode
|
|
93
96
|
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"author": "quinton-ashley",
|
|
3
3
|
"name": "q5",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.1.2",
|
|
5
5
|
"description": "An implementation of the p5.js 2D API that's smaller and faster",
|
|
6
6
|
"main": "q5.js",
|
|
7
7
|
"scripts": {
|
|
8
|
+
"min": "minify q5.js > q5.min.js && cp q5.min.js ../../web/p5play-web/v3/q5.min.js",
|
|
8
9
|
"v": "npm version patch --force",
|
|
9
10
|
"V": "npm version minor --force",
|
|
10
11
|
"version": "git add -A",
|
package/q5.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* q5.js
|
|
3
|
-
* @version 1.
|
|
4
|
-
* @author
|
|
3
|
+
* @version 1.1
|
|
4
|
+
* @author quinton-ashley and LingDong-
|
|
5
|
+
* @license GPL-3.0-only
|
|
5
6
|
*/
|
|
6
7
|
function Q5(scope, parent) {
|
|
7
8
|
if (scope == 'auto') {
|
|
@@ -684,6 +685,7 @@ function Q5(scope, parent) {
|
|
|
684
685
|
pink: [255, 192, 203],
|
|
685
686
|
purple: [128, 0, 128],
|
|
686
687
|
red: [255, 0, 0],
|
|
688
|
+
skyblue: [135, 206, 235],
|
|
687
689
|
white: [255, 255, 255],
|
|
688
690
|
yellow: [255, 255, 0]
|
|
689
691
|
};
|
package/q5.min.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* q5.js
|
|
3
|
+
* @version 1.1
|
|
4
|
+
* @author quinton-ashley and LingDong-
|
|
5
|
+
* @license GPL-3.0-only
|
|
6
|
+
*/
|
|
7
|
+
function Q5(e,t){if("auto"==e){if(void 0===window.setup)return;e="global"}1==arguments.length&&"string"!=typeof e&&(t=arguments[0],e=null),"global"==e&&(Q5._hasGlobal=!0);let o=this;o.canvas=document.createElement("canvas");let a=o.canvas.getContext("2d");o.width=100,o.height=100,o.canvas.width=o.width,o.canvas.height=o.height,"graphics"!=e&&"image"!=e&&(document.body?t?t.append(o.canvas):document.body.appendChild(o.canvas):window.addEventListener("load",(()=>{document.body.appendChild(o.canvas)}))),p(),o.MAGIC=161533525,o.RGB=0,o.HSV=1,o.HSB=1,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.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.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.THRESHOLD=1,o.GRAY=2,o.OPAQUE=3,o.INVERT=4,o.POSTERIZE=5,o.DILATE=6,o.ERODE=7,o.BLUR=8,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.HARDWARE_FILTERS=!0,o.hint=(e,t)=>{o[e]=t},o.frameCount=0,o.mouseX=0,o.mouseY=0,o.pmouseX=0,o.pmouseY=0,o.mouseButton=null,o.keyIsPressed=!1,o.mouseIsPressed=!1,o.key=null,o.keyCode=null,o.pixels=[],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.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,o.touches=[],o._colorMode=o.RGB,o._doStroke=!0,o._doFill=!0,o._strokeSet=!1,o._fillSet=!1,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=12,o._textStyle="normal",o._pixelDensity=1,o._lastFrameTime=0,o._targetFrameRate=null,o._frameRate=o._fps=60,o._tint=null;let n=null,r=!0,i=[],s=null,l=0,h={},c=0,d=null,u=null,_=null;Object.defineProperty(o,"deviceOrientation",{get:()=>90==Math.abs(window.orientation)?o.LANDSCAPE:o.PORTRAIT}),Object.defineProperty(o,"windowWidth",{get:()=>window.innerWidth}),Object.defineProperty(o,"windowHeight",{get:()=>window.innerHeight}),Object.defineProperty(o,"drawingContext",{get:()=>a}),o.createCanvas=(t,a)=>{o.width=t,o.height=a,o.canvas.width=t*o._pixelDensity,o.canvas.height=a*o._pixelDensity,p(),"graphics"!=e&&"image"!=e&&o.pixelDensity(2)},o.resizeCanvas=(e,t)=>{o.width=e,o.height=t,o.canvas.width=e*o._pixelDensity,o.canvas.height=t*o._pixelDensity},o.createGraphics=(e,t)=>{let o=new Q5("graphics");return o.createCanvas(e,t),o},o.createImage=(e,t)=>new Q5.Image(e,t),o.pixelDensity=e=>(void 0===e||(o._pixelDensity=e,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",a.scale(o._pixelDensity,o._pixelDensity),p()),o._pixelDensity),o.map=(e,t,o,a,n,r)=>{let i=a+1*(e-t)/(o-t)*(n-a);return r?a<n?Math.min(Math.max(i,a),n):Math.min(Math.max(i,n),a):i},o.lerp=(e,t,o)=>e*(1-o)+t*o,o.constrain=(e,t,o)=>Math.min(Math.max(e,t),o),o.dist=function(){return 4==arguments.length?Math.hypot(arguments[0]-arguments[2],arguments[1]-arguments[3]):Math.hypot(arguments[0]-arguments[3],arguments[1]-arguments[4],arguments[2]-arguments[5])},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,o)=>{let a=e<0,n=e.toString();return a&&(n=n.slice(1)),n=n.padStart(t,"0"),o>0&&(-1==n.indexOf(".")&&(n+="."),n=n.padEnd(t+1+o,"0")),a&&(n="-"+n),n},o.Vector=class{constructor(e,t,o){this.x=e||0,this.y=t||0,this.z=o||0,this._cn=null,this._cnsq=null}set(e,t,o){this.x=e||0,this.y=t||0,this.z=o||0}copy(){return new o.Vector(this.x,this.y,this.z)}_arg2v(e,t,o){return void 0!==e.x?e:void 0!==t?{x:e,y:t,z:o||0}:{x:e,y:e,z:e}}_calcNorm(){null==this._cnsq&&(this._cnsq=this.x*this.x+this.y*this.y+this.z*this.z,this._cn=Math.sqrt(this._cnsq))}_deprecNorm(){this._cnsq=null,this._cn=null}add(){let e=this._arg2v(...arguments);return this.x+=e.x,this.y+=e.y,this.z+=e.z,this._deprecNorm(),this}rem(){let e=this._arg2v(...arguments);return this.x%=e.x,this.y%=e.y,this.z%=e.z,this._deprecNorm(),this}sub(){let e=this._arg2v(...arguments);return this.x-=e.x,this.y-=e.y,this.z-=e.z,this._deprecNorm(),this}mult(){let e=this._arg2v(...arguments);return this.x*=e.x,this.y*=e.y,this.z*=e.z,this._deprecNorm(),this}div(){let e=this._arg2v(...arguments);return this.x/=e.x,this.y/=e.y,this.z/=e.z,this._deprecNorm(),this}mag(){return this._calcNorm(),this._cn}magSq(){return this._calcNorm(),this._cnsq}dot(){let e=this._arg2v(...arguments);return this.x*e.x+this.y*e.y+this.z*e.z}dist(){let e=this._arg2v(...arguments),t=this.x-e.x,o=this.y-e.y,a=this.z-e.z;return Math.sqrt(t*t+o*o+a*a)}cross(){let e=this._arg2v(...arguments),t=this.y*e.z-this.z*e.y,o=this.z*e.x-this.x*e.z,a=this.x*e.y-this.y*e.x;return this.x=t,this.y=o,this.z=a,this._deprecNorm(),this}normalize(){this._calcNorm();let e=this._cn;return 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 o=e/t;this.x*=o,this.y*=o,this.z*=o,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 o.atan2(this.y,this.x)}rotate(e){let t=o.cos(e),a=o.sin(e),n=this.x*t-this.y*a,r=this.x*a+this.y*t;return this.x=n,this.y=r,this}angleBetween(){let e=this._arg2v(...arguments);const t=this.dot(e)/(this.mag()*e.mag());let a;return a=o.tan(Math.min(1,Math.max(-1,t))),a*=Math.sign(this.cross(e).z||1),a}lerp(){let e=[...arguments],t=this._arg2v(...e.slice(0,-1)),o=e[e.length-1];return this.x+=(t.x-this.x)*o,this.y+=(t.y-this.y)*o,this.z+=(t.z-this.z)*o,this._deprecNorm(),this}reflect(e){return e.normalize(),this.sub(e.mult(2*this.dot(e)))}array(){return[this.x,this.y,this.z]}equals(e,t){return t??=Number.EPSILON||0,Math.abs(e.x-this.x)<t&&Math.abs(e.y-this.y)<t&&Math.abs(e.z-this.z)<t}fromAngle(e,t){return void 0===t&&(t=1),this._cn=t,this._cnsq=t*t,this.x=t*o.cos(e),this.y=t*o.sin(e),this.z=0,this}fromAngles(e,t,a){void 0===a&&(a=1),this._cn=a,this._cnsq=a*a;const n=o.cos(t),r=o.sin(t),i=o.cos(e),s=o.sin(e);return this.x=a*s*r,this.y=-a*i,this.z=a*s*n,this}random2D(){return this._cn=this._cnsq=1,this.fromAngle(Math.random()*Math.PI*2)}random3D(){return this._cn=this._cnsq=1,this.fromAngles(Math.random()*Math.PI*2,Math.random()*Math.PI*2)}toString(){return`[${this.x}, ${this.y}, ${this.z}]`}},o.Vector.add=(e,t)=>new o.Vector(e.x+t.x,e.y+t.y,e.z+t.z),o.Vector.rem=(e,t)=>new o.Vector(e.x%t.x,e.y%t.y,e.z%t.z),o.Vector.sub=(e,t)=>new o.Vector(e.x-t.x,e.y-t.y,e.z-t.z),o.Vector.mult=(e,t)=>void 0===t.x?new o.Vector(e.x*t,e.y*t,e.z*t):new o.Vector(e.x*t.x,e.y*t.y,e.z*t.z),o.Vector.div=(e,t)=>void 0===t.x?new o.Vector(e.x/t,e.y/t,e.z/t):new o.Vector(e.x/t.x,e.y/t.y,e.z/t.z),o.Vector.dist=(e,t)=>Math.hypot(e.x-t.x,e.y-t.y,e.z-t.z),o.Vector.cross=(e,t)=>new o.Vector(e.y*t.z-e.z*t.y,e.z*t.x-e.x*t.z,e.x*t.y-e.y*t.x),o.Vector.lerp=(e,t,a)=>new o.Vector(e.x+(t.x-e.x)*a,e.y+(t.y-e.y)*a,e.z+(t.z-e.z)*a),o.Vector.equals=(e,t,o)=>e.equals(t,o);for(let e of["fromAngle","fromAngles","random2D","random3D"])o.Vector[e]=(t,a,n)=>(new o.Vector)[e](t,a,n);o.createVector=(e,t,a)=>new o.Vector(e,t,a),o.curvePoint=(e,t,o,a,n)=>{const r=n*n*n,i=n*n;return e*(-.5*r+i-.5*n)+t*(1.5*r-2.5*i+1)+o*(-1.5*r+2*i+.5*n)+a*(.5*r-.5*i)},o.bezierPoint=(e,t,o,a,n)=>{const r=1-n;return Math.pow(r,3)*e+3*Math.pow(r,2)*n*t+3*r*Math.pow(n,2)*o+Math.pow(n,3)*a},o.curveTangent=(e,t,o,a,n)=>{const r=n*n;return e*(-3*r/2+2*n-.5)+t*(9*r/2-5*n)+o*(-9*r/2+4*n+.5)+a*(3*r/2-n)},o.bezierTangent=(e,t,o,a,n)=>{const r=1-n;return 3*a*Math.pow(n,2)-3*o*Math.pow(n,2)+6*o*r*n-6*t*r*n+3*t*Math.pow(r,2)-3*e*Math.pow(r,2)},o.Color=Q5.Color,o.colorMode=e=>{o._colorMode=e};let m={black:[0,0,0],blue:[0,0,255],brown:[165,42,42],crimson:[220,20,60],gold:[255,215,0],green:[0,128,0],grey:[128,128,128],magenta:[255,0,255],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],red:[255,0,0],skyblue:[135,206,235],white:[255,255,255],yellow:[255,255,0]};function p(){a.fillStyle="white",a.strokeStyle="black",a.lineCap="round",a.lineJoin="miter"}function g(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 v(e,t,n,r,i,s,l,h){if(!o._doFill&&!o._doStroke)return;let c=g(i),d=g(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,n,r)}a.beginPath();for(let i=0;i<h+1;i++){let s=i/h,l=o.lerp(c,d,s),u=o.cos(l)*n/2,_=o.sin(l)*r/2;a[i?"lineTo":"moveTo"](e+u,t+_)}l==o.CHORD?a.closePath():l==o.PIE&&(a.lineTo(e,t),a.closePath()),o._doFill&&a.fill(),o._doStroke&&a.stroke()}function f(e,t,n,r){(o._doFill||o._doStroke)&&(a.beginPath(),a.ellipse(e,t,n/2,r/2,0,0,o.TAU),o._doFill&&a.fill(),o._doStroke&&a.stroke())}function y(e,t,n,r,i,s,l,h){if(!o._doFill&&!o._doStroke)return;if(void 0===i)return function(e,t,n,r){o._doFill&&a.fillRect(e,t,n,r),o._doStroke&&a.strokeRect(e,t,n,r)}(e,t,n,r);if(void 0===s)return y(e,t,n,r,i,i,i,i);const c=Math.min(Math.abs(r),Math.abs(n))/2;i=Math.min(c,i),s=Math.min(c,s),h=Math.min(c,h),l=Math.min(c,l),a.beginPath(),a.moveTo(e+i,t),a.arcTo(e+n,t,e+n,t+r,s),a.arcTo(e+n,t+r,e,t+r,l),a.arcTo(e,t+r,e,t,h),a.arcTo(e,t,e+n,t,i),a.closePath(),o._doFill&&a.fill(),o._doStroke&&a.stroke()}function x(){i=[]}o.color=function(){let e=arguments;if(1==e.length){if(786698==e[0].MAGIC)return e[0];if("string"==typeof e[0])return"#"==e[0][0]?new Q5.Color(parseInt(e[0].slice(1,3),16),parseInt(e[0].slice(3,5),16),parseInt(e[0].slice(5,7),16),1):m[e[0]]?new Q5.Color(...m[e[0]],1):new Q5.Color(0,0,0,1)}if(o._colorMode==o.RGB){if(1==e.length)return new Q5.Color(e[0],e[0],e[0],1);if(2==e.length)return new Q5.Color(e[0],e[0],e[0],e[1]/255);if(3==e.length)return new Q5.Color(e[0],e[1],e[2],1);if(4==e.length)return new Q5.Color(e[0],e[1],e[2],e[3]/255)}else{if(1==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(0,0,e[0]/100),1);if(2==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(0,0,e[0]/100),e[1]/255);if(3==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(e[0],e[1]/100,e[2]/100),1);if(4==e.length)return new Q5.Color(...Q5.Color._hsv2rgb(e[0],e[1]/100,e[2]/100),e[3])}return null},o.red=e=>e._r,o.green=e=>e._g,o.blue=e=>e._b,o.alpha=e=>255*e._a,o.hue=e=>(e._inferHSV(),e._h),o.saturation=e=>(e._inferHSV(),e._s),o.brightness=e=>(e._inferHSV(),e._v),o.lightness=e=>100*(.2126*e._r+.7152*e._g+.0722*e._b)/255,o.lerpColor=(e,t,a)=>o._colorMode==o.RGB?new Q5.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,1)):(e._inferHSV(),t._inferHSV(),new Q5.Color(o.constrain(function(e,t,a){var n=[[Math.abs(t-e),o.map(a,0,1,e,t)],[Math.abs(t+360-e),o.map(a,0,1,e,t+360)],[Math.abs(t-360-e),o.map(a,0,1,e,t-360)]];return n.sort(((e,t)=>e[0]-t[0])),(n[0][1]+720)%360}(e._h,t._h,a),0,360),o.constrain(o.lerp(e._s,t._s,a),0,100),o.constrain(o.lerp(e._v,t._v,a),0,100),o.constrain(o.lerp(e._a,t._a,a),0,1))),o.strokeWeight=e=>{o._doStroke=e>0,a.lineWidth=e},o.stroke=function(){if(o._doStroke=!0,o._strokeSet=!0,"string"==typeof arguments[0])return void(a.strokeStyle=arguments[0]);let e=o.color(...arguments);e._a<=0?o._doStroke=!1:a.strokeStyle=e},o.noStroke=()=>o._doStroke=!1,o.fill=function(){if(o._doFill=!0,o._fillSet=!0,"string"==typeof arguments[0])return void(a.fillStyle=arguments[0]);let e=o.color(...arguments);e._a<=0?o._doFill=!1:a.fillStyle=e},o.noFill=()=>o._doFill=!1,o.smooth=()=>o._smooth=!0,o.noSmooth=()=>o._smooth=!1,o.blendMode=e=>a.globalCompositeOperation=e,o.strokeCap=e=>a.lineCap=e,o.strokeJoin=e=>a.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=>{console.warn("curveTightness() sets the 'alpha' parameter of Catmull-Rom curve, and is NOT identical to p5.js counterpart. As this might change in the future, please call curveAlpha() directly."),o._curveAlpha=e},o.clear=()=>{a.clearRect(0,0,o.canvas.width,o.canvas.height)},o.background=function(){if(arguments[0]&&arguments[0].MAGIC==o.MAGIC)return o.image(arguments[0],0,0,o.width,o.height);a.save(),a.resetTransform(),a.fillStyle="string"==typeof arguments[0]?arguments[0]:o.color(...Array.from(arguments)),a.fillRect(0,0,o.canvas.width,o.canvas.height),a.restore()},o.line=(e,t,n,r)=>{o._doStroke&&(a.beginPath(),a.moveTo(e,t),a.lineTo(n,r),a.stroke())},o.arc=(e,t,a,n,r,i,s,l)=>{if(r==i)return o.ellipse(e,t,a,n);l??=25,s??=o.PIE,o._ellipseMode==o.CENTER?v(e,t,a,n,r,i,s,l):o._ellipseMode==o.RADIUS?v(e,t,2*a,2*n,r,i,s,l):o._ellipseMode==o.CORNER?v(e+a/2,t+n/2,a,n,r,i,s,l):o._ellipseMode==o.CORNERS&&v((e+a)/2,(t+n)/2,a-e,n-t,r,i,s,l)},o.ellipse=(e,t,a,n)=>{n??=a,o._ellipseMode==o.CENTER?f(e,t,a,n):o._ellipseMode==o.RADIUS?f(e,t,2*a,2*n):o._ellipseMode==o.CORNER?f(e+a/2,t+n/2,a,n):o._ellipseMode==o.CORNERS&&f((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),a.beginPath(),a.ellipse(e,t,.4,.4,0,0,o.TAU),a.stroke()},o.rect=(e,t,a,n,r,i,s,l)=>{o._rectMode==o.CENTER?y(e-a/2,t-n/2,a,n,r,i,s,l):o._rectMode==o.RADIUS?y(e-a,t-n,2*a,2*n,r,i,s,l):o._rectMode==o.CORNER?y(e,t,a,n,r,i,s,l):o._rectMode==o.CORNERS&&y(e,t,a-e,n-t,r,i,s,l)},o.square=(e,t,a,n,r,i,s)=>o.rect(e,t,a,a,n,r,i,s),o.beginShape=()=>{x(),a.beginPath(),r=!0},o.beginContour=()=>{a.closePath(),x(),r=!0},o.endContour=()=>{x(),r=!0},o.vertex=(e,t)=>{x(),r?a.moveTo(e,t):a.lineTo(e,t),r=!1},o.bezierVertex=(e,t,o,n,r,i)=>{x(),a.bezierCurveTo(e,t,o,n,r,i)},o.quadraticVertex=(e,t,o,n)=>{x(),a.quadraticCurveTo(e,t,o,n)},o.bezier=(e,t,a,n,r,i,s,l)=>{o.beginShape(),o.vertex(e,t),o.bezierVertex(a,n,r,i,s,l),o.endShape()},o.triangle=(e,t,a,n,r,i)=>{o.beginShape(),o.vertex(e,t),o.vertex(a,n),o.vertex(r,i),o.endShape(o.CLOSE)},o.quad=(e,t,a,n,r,i,s,l)=>{o.beginShape(),o.vertex(e,t),o.vertex(a,n),o.vertex(r,i),o.vertex(s,l),o.endShape(o.CLOSE)},o.endShape=e=>{x(),e&&a.closePath(),o._doFill&&a.fill(),o._doStroke&&a.stroke(),o._doFill||o._doStroke||(a.save(),a.fillStyle="none",a.fill(),a.restore())},o.curveVertex=(e,t)=>{if(i.push([e,t]),i.length<4)return;let n=function(e,t,o,a,n,r,i,s,l,h){function c(e,t,o,a,n,r){let i=Math.pow(a-t,2)+Math.pow(n-o,2);return Math.pow(i,.5*r)+e}let d=[],u=c(0,e,t,o,a,h),_=c(u,o,a,n,r,h),m=c(_,n,r,i,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),(m-c)/(m-_),(c-_)/(m-_),(_-c)/(_-0),(c-0)/(_-0),(m-c)/(m-u),(c-u)/(m-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 g=e*p[0]+o*p[1],v=t*p[0]+a*p[1],f=o*p[2]+n*p[3],y=a*p[2]+r*p[3],x=n*p[4]+i*p[5],M=r*p[4]+s*p[5],w=g*p[6]+f*p[7],R=v*p[6]+y*p[7],S=f*p[8]+x*p[9],I=y*p[8]+M*p[9],E=w*p[2]+S*p[3],C=R*p[2]+I*p[3];d.push([E,C])}return d}(...i[i.length-4],...i[i.length-3],...i[i.length-2],...i[i.length-1],o._curveDetail,o._curveAlpha);for(let e=0;e<n.length;e++)r?a.moveTo(...n[e]):a.lineTo(...n[e]),r=!1},o.curve=(e,t,a,n,r,i,s,l)=>{o.beginShape(),o.curveVertex(e,t),o.curveVertex(a,n),o.curveVertex(r,i),o.curveVertex(s,l),o.endShape()},o.translate=(e,t)=>a.translate(e,t),o.rotate=e=>{"degrees"==o._angleMode&&(e=o.radians(e)),a.rotate(e)},o.scale=(e,t)=>{t??=e,a.scale(e,t)},o.applyMatrix=(e,t,o,n,r,i)=>{a.transform(e,t,o,n,r,i)},o.shearX=e=>{a.transform(1,0,o.tan(e),1,0,0)},o.shearY=e=>{a.transform(1,o.tan(e),0,1,0,0)},o.resetMatrix=()=>{a.resetTransform(),a.scale(o._pixelDensity,o._pixelDensity)},o._styleNames=["_doStroke","_doFill","_strokeSet","_fillSet","_tint","_imageMode","_rectMode","_ellipseMode","_textFont","_textLeading","_leadingSet","_textSize","_textAlign","_textBaseline","_textStyle","_textWrap"],o._ctxStyleNames=["strokeStyle","fillStyle","lineWidth","lineCap","lineJoin"],o._styles=[],o._ctxStyles=[],o.pushMatrix=o.push=()=>{a.save();let e={};for(let t of o._styleNames)e[t]=o[t];o._styles.push(e);let t={};for(let e of o._ctxStyleNames)t[e]=a[e];o._ctxStyles.push(t)},o.popMatrix=o.pop=()=>{a.restore();let e=o._styles.pop();for(let t of o._styleNames)o[t]=e[t];let t=o._ctxStyles.pop();for(let e of o._ctxStyleNames)a[e]=t[e]},o.imageMode=e=>o._imageMode=e,o.image=(e,t,n,r,i,s,l,h,c)=>{let d=e.MAGIC==o.MAGIC?e.canvas:e;function _(){if(e.MAGIC!=o.MAGIC||!o._tint)return;let t=e.canvas.getContext("2d");t.save(),t.resetTransform(),t.clearRect(0,0,t.canvas.width,t.canvas.height),t.drawImage(u.canvas,0,0),t.restore()}if(e.MAGIC==o.MAGIC&&null!=o._tint&&(!function(e,t){null==u&&(u=document.createElement("canvas").getContext("2d"));t??=e||a.canvas.height,e??=a.canvas.width,(u.canvas.width!=e||u.canvas.height!=t)&&(u.canvas.width=e,u.canvas.height=t)}(e.canvas.width,e.canvas.height),u.drawImage(e.canvas,0,0),e.tinted(o._tint)),r||(e.MAGIC==o.MAGIC||e.width?(r=e.width,i=e.height):(r=e.videoWidth,i=e.videoHeight)),"center"==o._imageMode&&(t-=.5*r,n-=.5*i),void 0===s)return a.drawImage(d,t,n,r,i),void _();h??=d.width,c??=d.height,a.drawImage(d,s,l,h,c,t,n,r,i),_()},o.loadPixels=()=>{s=a.getImageData(0,0,o.canvas.width,o.canvas.height),o.pixels=s.data},o.updatePixels=()=>{null!=s&&a.putImageData(s,0,0)},o._incrementPreload=()=>l++,o._decrementPreload=()=>l--,o.loadImage=(e,t)=>{l++;let a=o.createImage(100,100),n=a.canvas.getContext("2d"),r=new Image;return r.src=e,r.crossOrigin="Anonymous",r.onload=()=>{a.width=n.canvas.width=r.naturalWidth,a.height=n.canvas.height=r.naturalHeight,n.drawImage(r,0,0),l--,t&&t(a)},a};let M={};function w(e,t){null==d&&(d=document.createElement("canvas").getContext("2d")),t??=e||a.canvas.height,e??=a.canvas.width,d.canvas.width==e&&d.canvas.height==t||(d.canvas.width=e,d.canvas.height=t)}function R(){let e=a.canvas.width*a.canvas.height*4;_&&e==_.length||(_=new Uint8ClampedArray(e))}function S(e){d.clearRect(0,0,d.canvas.width,d.canvas.height),d.filter=e,d.drawImage(a.canvas,0,0),a.save(),a.resetTransform(),a.clearRect(0,0,a.canvas.width,a.canvas.height),a.drawImage(d.canvas,0,0),a.restore()}if(M[o.THRESHOLD]=(e,t)=>{void 0===t?t=127.5:t*=255;for(let o=0;o<e.length;o+=4){const a=.2126*e[o]+.7152*e[o+1]+.0722*e[o+2];e[o]=e[o+1]=e[o+2]=a>=t?255:0}},M[o.GRAY]=e=>{for(let t=0;t<e.length;t+=4){const o=.2126*e[t]+.7152*e[t+1]+.0722*e[t+2];e[t]=e[t+1]=e[t+2]=o}},M[o.OPAQUE]=e=>{for(let t=0;t<e.length;t+=4)e[t+3]=255},M[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]},M[o.POSTERIZE]=(e,t)=>{let o=t-1;for(let a=0;a<e.length;a+=4)e[a]=255*(e[a]*t>>8)/o,e[a+1]=255*(e[a+1]*t>>8)/o,e[a+2]=255*(e[a+2]*t>>8)/o},M[o.DILATE]=e=>{R(),_.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 r=4*Math.max(n-1,0),i=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 o=t+s,a=t+l,n=t+h;e[h+c+t]=Math.max(_[o+c],_[n+r],_[n+c],_[n+i],_[a+c])}}},M[o.ERODE]=e=>{R(),_.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 r=4*Math.max(n-1,0),i=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 o=t+s,a=t+l,n=t+h;e[h+c+t]=Math.min(_[o+c],_[n+r],_[n+c],_[n+i],_[a+c])}}},M[o.BLUR]=(e,t)=>{t=t||1,t=Math.floor(t*o._pixelDensity),R(),_.set(e);let n=2*t+1;let r=function(e){let o=new Float32Array(e),a=.3*t+.8,n=a*a*2;for(let t=0;t<e;t++){let r=t-e/2,i=Math.exp(-r*r/n)/(2.5066282746*a);o[t]=i}return o}(n),[i,s]=[a.canvas.width,a.canvas.height];for(let o=0;o<s;o++)for(let a=0;a<i;a++){let s=0,l=0,h=0,c=0;for(let e=0;e<n;e++){let n=4*(o*i+Math.min(Math.max(a-t+e,0),i-1));s+=_[n]*r[e],l+=_[n+1]*r[e],h+=_[n+2]*r[e],c+=_[n+3]*r[e]}let d=4*(o*i+a);e[d]=s,e[d+1]=l,e[d+2]=h,e[d+3]=c}_.set(e);for(let o=0;o<s;o++)for(let a=0;a<i;a++){let l=0,h=0,c=0,d=0;for(let e=0;e<n;e++){let n=4*(Math.min(Math.max(o-t+e,0),s-1)*i+a);l+=_[n]*r[e],h+=_[n+1]*r[e],c+=_[n+2]*r[e],d+=_[n+3]*r[e]}let u=4*(o*i+a);e[u]=l,e[u+1]=h,e[u+2]=c,e[u+3]=d}},o.filter=(e,t)=>{if(o.HARDWARE_FILTERS&&null!=a.filter)if(w(),e==o.THRESHOLD){t??=.5,t=Math.max(t,1e-5),S(`saturate(0%) brightness(${Math.floor(.5/t*100)}%) contrast(1000000%)`)}else if(e==o.GRAY)S("saturate(0%)");else if(e==o.OPAQUE)d.fillStyle="black",d.fillRect(0,0,d.canvas.width,d.canvas.height),d.drawImage(a.canvas,0,0),a.save(),a.resetTransform(),a.drawImage(d.canvas,0,0),a.restore();else if(e==o.INVERT)S("invert(100%)");else if(e==o.BLUR)S(`blur(${Math.ceil(t*o._pixelDensity/1)||1}px)`);else{let o=a.getImageData(0,0,a.canvas.width,a.canvas.height);M[e](o.data,t),a.putImageData(o,0,0)}else{let o=a.getImageData(0,0,a.canvas.width,a.canvas.height);M[e](o.data,t),a.putImageData(o,0,0)}},o.resize=(e,t)=>{w(),d.drawImage(a.canvas,0,0),o.width=e,o.height=t,a.canvas.width=e*o._pixelDensity,a.canvas.height=t*o._pixelDensity,a.save(),a.resetTransform(),a.clearRect(0,0,a.canvas.width,a.canvas.height),a.drawImage(d.canvas,0,0,a.canvas.width,a.canvas.height),a.restore()},o.get=(e,t,n,r)=>{if(void 0!==e&&void 0===n){let o=a.getImageData(e,t,1,1).data;return new Q5.Color(o[0],o[1],o[2],o[3]/255)}e=e||0,t=t||0,n=n||o.width,r=r||o.height;let i=o.createGraphics(n,r);i.pixelDensity(o._pixelDensity);let s=a.getImageData(e*o._pixelDensity,t*o._pixelDensity,n*o._pixelDensity,r*o._pixelDensity);return i.canvas.getContext("2d").putImageData(s,0,0),i},o.set=(e,t,n)=>{if(n.MAGIC==o.MAGIC){let a=o._tint;return o._tint=null,o.image(n,e,t),void(o._tint=a)}for(let r=0;r<o._pixelDensity;r++)for(let i=0;i<o._pixelDensity;i++){let s=4*((t*o._pixelDensity+r)*a.canvas.width+e*o._pixelDensity+i);o.pixels[s]=n._r,o.pixels[s+1]=n._g,o.pixels[s+2]=n._b,o.pixels[s+3]=255*n._a}},o.tinted=function(){let e=o.color(...Array.from(arguments)),t=e._a;e._a=1,w(),d.clearRect(0,0,d.canvas.width,d.canvas.height),d.fillStyle=e,d.fillRect(0,0,d.canvas.width,d.canvas.height),d.globalCompositeOperation="multiply",d.drawImage(a.canvas,0,0),d.globalCompositeOperation="source-over",a.save(),a.resetTransform();let n=a.globalCompositeOperation;a.globalCompositeOperation="source-in",a.drawImage(d.canvas,0,0),a.globalCompositeOperation=n,a.restore(),d.globalAlpha=t,d.clearRect(0,0,d.canvas.width,d.canvas.height),d.drawImage(a.canvas,0,0),d.globalAlpha=1,a.save(),a.resetTransform(),a.clearRect(0,0,a.canvas.width,a.canvas.height),a.drawImage(d.canvas,0,0),a.restore()},o.tint=function(){o._tint=o.color(...Array.from(arguments))},o.noTint=()=>o._tint=null,o.mask=e=>{a.save(),a.resetTransform();let t=a.globalCompositeOperation;a.globalCompositeOperation="destination-in",a.drawImage(e.canvas,0,0),a.globalCompositeOperation=t,a.restore()},o.clearTemporaryBuffers=()=>{d=null,u=null,_=null},o.save=(e,t)=>{e=e||"untitled",t=t||"png";var o=document.createElement("a");o.innerHTML="[Download]",o.addEventListener("click",(function(){this.href=a.canvas.toDataURL(),this.download=e+"."+t}),!1),document.body.appendChild(o),o.click(),document.body.removeChild(o)},o.saveCanvas=(e,t,a)=>{if(e.MAGIC==o.MAGIC){a&&e.save(t,a);let o=t.split(".");return e.save(o.slice(0,-1).join("."),o[o.length-1])}if(t)return o.save(e,t);let n=e.split(".");return o.save(n.slice(0,-1).join("."),n[n.length-1])},o.remove=()=>{o.noLoop(),o.canvas.remove()},"image"==e)return;o.loadFont=(e,t)=>{let o=e.split("/"),a=o[o.length-1].split(".")[0].replace(" ",""),n=`@font-face {\n font-family: '${a}';\n src: url('${e}');\n }`;const r=document.createElement("style");return r.textContent=n,document.head.append(r),a},o.textFont=e=>{o._textFont=e},o.textSize=e=>{if(void 0===e)return o._textSize;o._textLeading=e,o._textSize=e},o.textLeading=e=>{o._textLeading=e},o.textStyle=e=>{o._textStyle=e},o.textAlign=(e,t)=>{a.textAlign=e,t&&(a.textBaseline=t==o.CENTER?"middle":t)},o.text=(e,t,n,r)=>{if(void 0===e)return;if(e=e.toString(),!o._doFill&&!o._doStroke)return;a.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`;let i=e.split("\n");for(let e=0;e<i.length;e++){let s=a.fillStyle;o._fillSet||(a.fillStyle="black"),o._doFill&&a.fillText(i[e],t,n,r),o._doStroke&&o._strokeSet&&a.strokeText(i[e],t,n,r),o._fillSet||(a.fillStyle=s),n+=o._textLeading}},o.textWidth=e=>(a.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`,a.measureText(e).width),o.textAscent=e=>(a.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`,a.measureText(e).actualBoundingBoxAscent),o.textDescent=e=>(a.font=`${o._textStyle} ${o._textSize}px ${o._textFont}`,a.measureText(e).actualBoundingBoxDescent);var I,E=4095,C=4,D=.5,A=e=>.5*(1-o.cos(e*Math.PI));o.noise=(e,t,o)=>{if(t??=0,o??=0,null==I){I=new Array(4096);for(var a=0;a<4096;a++)I[a]=Math.random()}e<0&&(e=-e),t<0&&(t=-t),o<0&&(o=-o);for(var n,r,i,s,l,h=Math.floor(e),c=Math.floor(t),d=Math.floor(o),u=e-h,_=t-c,m=o-d,p=0,g=.5,v=0;v<C;v++){var f=h+(c<<4)+(d<<8);n=A(u),r=A(_),i=I[f&E],i+=n*(I[f+1&E]-i),s=I[f+16&E],i+=r*((s+=n*(I[f+16+1&E]-s))-i),s=I[(f+=256)&E],s+=n*(I[f+1&E]-s),l=I[f+16&E],s+=r*((l+=n*(I[f+16+1&E]-l))-s),p+=(i+=A(m)*(s-i))*g,g*=D,h<<=1,c<<=1,d<<=1,(u*=2)>=1&&(h++,u--),(_*=2)>=1&&(c++,_--),(m*=2)>=1&&(d++,m--)}return p},o.noiseDetail=(e,t)=>{e>0&&(C=e),t>0&&(D=t)};const b=()=>{let e,t,o=4294967295;return{setSeed(a){e=t=(null==a?Math.random()*o:a)>>>0},getSeed:()=>t,rand:()=>(e^=e<<17,e^=e>>13,e^=e<<5,(e>>>0)/o)}};let T=b();T.setSeed(),o.noiseSeed=e=>{let t=void 0===e?4294967295*Math.random():e;I||(I=new Float32Array(4096));for(var o=0;o<4096;o++)t^=t<<17,t^=t>>13,t^=t<<5,I[o]=(t>>>0)/4294967295},o.randomSeed=e=>T.setSeed(e),o.random=(e,t)=>void 0===e?T.rand():"number"==typeof e?void 0!==t?T.rand()*(t-e)+e:T.rand()*e:e[~~(e.length*T.rand())],o.randomGenerator=e=>{e==o.LCG?T=(()=>{const e=4294967296;let t,o;return{setSeed(a){o=t=(null==a?Math.random()*e:a)>>>0},getSeed:()=>t,rand:()=>(o=(1664525*o+1013904223)%e,o/e)}})():e==o.SHR3&&(T=b()),T.setSeed()};var P=new function(){var e,t,o,a=new Array(128),n=new Array(256),r=new Array(128),i=new Array(128),s=new Array(256),l=new Array(256),h=()=>4294967296*T.rand()-2147483648,c=()=>.5+2.328306e-10*(h()<<0),d=()=>{for(var t,n,s,l,d=3.44262;;){if(t=o*r[e],0==e){do{s=c(),l=c(),t=.2904764*-Math.log(s),n=-Math.log(l)}while(n+n<t*t);return o>0?d+t:-d-t}if(i[e]+c()*(i[e-1]-i[e])<Math.exp(-.5*t*t))return t;if(o=h(),e=127&o,Math.abs(o)<a[e])return o*r[e]}},u=()=>{for(var o;;){if(0==e)return 7.69711-Math.log(c());if(o=t*s[e],l[e]+c()*(l[e-1]-l[e])<Math.exp(-o))return o;if((t=h())<n[e=255&t])return t*s[e]}};this.SHR3=h,this.UNI=c,this.RNOR=()=>(o=h(),e=127&o,Math.abs(o)<a[e]?o*r[e]:d()),this.REXP=()=>(t=h()>>>0)<a[e=255&t]?t*s[e]:u(),this.zigset=()=>{var e,t,o=2147483648,h=4294967296,c=3.442619855899,d=c,u=.00991256303526217,_=7.697117470131487,m=_,p=.003949659822581572;for(e=u/Math.exp(-.5*c*c),a[0]=Math.floor(c/e*o),a[1]=0,r[0]=e/o,r[127]=c/o,i[0]=1,i[127]=Math.exp(-.5*c*c),t=126;t>=1;t--)c=Math.sqrt(-2*Math.log(u/c+Math.exp(-.5*c*c))),a[t+1]=Math.floor(c/d*o),d=c,i[t]=Math.exp(-.5*c*c),r[t]=c/o;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(_/m*h),m=_,l[t]=Math.exp(-_),s[t]=_/h}};function O(){let e=performance.now();if(o._loop&&(n=o._targetFrameRate?setTimeout(O,1e3/o._targetFrameRate):requestAnimationFrame(O)),n&&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++;for(let e of Q5.prototype._methods.pre)e.call(o);x(),r=!0,a.save(),o._drawFn();for(let e of Q5.prototype._methods.post)e.call(o);a.restore();let t=performance.now();o._fps=Math.round(1e3/(t-e)),o._lastFrameTime=e}function k(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 z(){return o._touchStartedFn.isPlaceHolder&&o._touchMovedFn.isPlaceHolder&&o._touchEndedFn.isPlaceHolder}P.hasInit=!1,o.randomGaussian=(e,t)=>(P.hasInit||(P.zigset(),P.hasInit=!0),P.RNOR()*t+e),o.randomExponential=()=>(P.hasInit||(P.zigset(),P.hasInit=!0),P.REXP()),o.print=console.log,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.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.appendChild(t),t},o.noLoop=()=>{o._loop=!1,n=null},o.loop=()=>{o._loop=!0,null==n&&O()},o.redraw=()=>O(),o.frameRate=e=>(e&&(o._targetFrameRate=e),o._frameRate),o.getFrameRate=()=>o._frameRate,o.getFPS=()=>o._fps,"graphics"==e&&"image"==e||requestAnimationFrame((()=>{o._preloadFn(),c=performance.now(),function e(){if(l>0)return requestAnimationFrame(e);o._setupFn(),O()}()})),o._updateMouse=function(e){let t=this;t.pmouseX=t.mouseX,t.pmouseY=t.mouseY;let o=t.canvas.getBoundingClientRect(),a=t.canvas.scrollWidth/t.width||1,n=t.canvas.scrollHeight/t.height||1;t.mouseX=(e.clientX-o.left)/a,t.mouseY=(e.clientY-o.top)/n}.bind(o),o._onmousemove=function(e){o._updateMouse(e),this.mouseIsPressed?this._mouseDraggedFn(e):this._mouseMovedFn(e)}.bind(o),o._onmousedown=e=>{o._updateMouse(e),o.mouseIsPressed=!0,o.mouseButton=[o.LEFT,o.CENTER,o.RIGHT][e.button],o._mousePressedFn(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._onkeydown=e=>{e.repeat||(o.keyIsPressed=!0,o.key=e.key,o.keyCode=e.keyCode,h[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,h[o.keyCode]=!1,o._keyReleasedFn(e)},addEventListener("mousemove",o._onmousemove,!1),o.canvas.onmousedown=e=>o._onmousedown(e),o.canvas.onmouseup=e=>o._onmouseup(e),o.canvas.onclick=e=>o._onclick(e),addEventListener("keydown",(e=>o._onkeydown(e)),!1),addEventListener("keyup",(e=>o._onkeyup(e)),!1),o.keyIsDown=e=>!!h[e],o._ontouchstart=e=>{o.touches=[...e.touches].map(k),z()&&(o.pmouseX=o.mouseX,o.pmouseY=o.mouseY,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(k),z()&&(o.pmouseX=o.mouseX,o.pmouseY=o.mouseY,o.mouseX=o.touches[0].x,o.mouseY=o.touches[0].y,o.mouseIsPressed=!0,o.mouseButton=o.LEFT,o._mouseDraggedFn(e)||e.preventDefault()),o._touchMovedFn(e)||e.preventDefault()},o._ontouchend=e=>{o.touches=[...e.touches].map(k),z()&&(o.pmouseX=o.mouseX,o.pmouseY=o.mouseY,o.mouseX=o.touches[0].x,o.mouseY=o.touches[0].y,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][1+~~(window.orientation/90)],o.relRotationY=[-o.rotationX,o.rotationY,o.rotationX][1+~~(window.orientation/90)],o.relRotationZ=o.rotationZ},window.ondevicemotion=e=>{if(o.pAccelerationX=o.accelerationX,o.pAccelerationY=o.accelerationY,o.pAccelerationZ=o.accelerationZ,!e.acceleration){let r=((e,t)=>[(e[0]*t[0]+e[1]*t[1]+e[2]*t[2]+e[3])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15]),(e[4]*t[0]+e[5]*t[1]+e[6]*t[2]+e[7])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15]),(e[8]*t[0]+e[9]*t[1]+e[10]*t[2]+e[11])/(e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15])])((n=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+r[0],o.accelerationY=e.accelerationIncludingGravity.y+r[1],o.accelerationZ=e.accelerationIncludingGravity.z-r[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()-c,o._loadFile=(e,t,o)=>{l++;let a={};return fetch(e).then((e=>"json"==o?e.json():"text"==o?e.text():void 0)).then((e=>{l--,Object.assign(a,e),t&&t(e)})),a},o.loadStrings=(e,t)=>o._loadFile(e,t,"text"),o.loadJSON=(e,t)=>o._loadFile(e,t,"json"),o.loadSound=(e,t)=>{l++;let o=new Audio(e);return o.addEventListener("canplaythrough",(()=>{l--,t&&t(o)})),o.load(),o.setVolume=e=>o.volume=e,o},o.Element=function(e){this.elt=e},o._elements=[],"global"==e&&(Object.assign(Q5,o),delete Q5.Q5),Q5.Image??=_Q5Image;for(let e of Q5.prototype._methods.init)e.call(o);if("global"==e)for(let e in o)"function"==typeof o[e]?window[e]=o[e]:Object.defineProperty(window,e,{get:()=>o[e],set:t=>o[e]=t});let F="global"==e?window:o,N=["setup","draw","preload","mouseMoved","mousePressed","mouseReleased","mouseDragged","mouseClicked","keyPressed","keyReleased","keyTyped","touchStarted","touchMoved","touchEnded"];for(let e of N){let t="_"+e+"Fn";o[t]=()=>{},o[t].isPlaceHolder=!0,F[e]?o[t]=F[e]:Object.defineProperty(o,e,{set:e=>{o[t]=e}})}"function"==typeof e&&e(o)}Q5.Color=class{constructor(e,t,o,a){this.MAGIC=786698,this._r=e,this._g=t,this._b=o,this._a=a,this._h=0,this._s=0,this._v=0,this._hsvInferred=!1}setRed(e){this._r=e,this._hsvInferred=!1}setGreen(e){this._g=e,this._hsvInferred=!1}setBlue(e){this._b=e,this._hsvInferred=!1}setAlpha(e){this._a=e/255,this._hsvInferred=!1}_inferHSV(){this._hsvInferred||([this._h,this._s,this._v]=Q5.Color._rgb2hsv(this._r,this._g,this._b),this._hsvInferred=!0)}toString(){return`rgba(${Math.round(this._r)},${Math.round(this._g)},${Math.round(this._b)},${~~(1e3*this._a)/1e3})`}},Q5.Color._rgb2hsv=(e,t,o)=>{let a,n,r,i,s;return a=e<t?e<o?e:o:t<o?t:o,n=e>t?e>o?e:o:t>o?t:o,s=100*n/255,0==s?(r=0,i=0,[r,i,s]):(i=100*(n-a)/n,0==i?(r=0,[r,i,s]):(r=n==e?0+60*(t-o)/(n-a):n==t?120+60*(o-e)/(n-a):240+60*(e-t)/(n-a),[r,i,s]))},Q5.Color._hsv2rgb=(e,t,o)=>{let a,n,r,i,s,l,h,c,d;if(0==t)return a=o,n=o,r=o,[255*a,255*n,255*r];switch(i=e,i>360&&(i=0),i/=60,s=~~i,l=i-s,h=o*(1-t),c=o*(1-t*l),d=o*(1-t*(1-l)),s){case 0:a=o,n=d,r=h;break;case 1:a=c,n=o,r=h;break;case 2:a=h,n=o,r=d;break;case 3:a=h,n=c,r=o;break;case 4:a=d,n=h,r=o;break;default:a=o,n=h,r=c}return[255*a,255*n,255*r]};class _Q5Image extends Q5{constructor(e,t){super("image"),this.createCanvas(e,t),this._loop=!1}}Q5._friendlyError=(e,t)=>console.error(t+": "+e),Q5.prototype._methods={init:[],pre:[],post:[],remove:[]},Q5.prototype.registerMethod=function(){Q5.prototype._methods[arguments[0]].push(arguments[1])},Q5.prototype.registerPreloadMethod=()=>{},Q5._validateParameters=()=>!0,window.p5??=Q5,document.addEventListener("DOMContentLoaded",(()=>{Q5._hasGlobal||new Q5("auto")}));
|
package/q5js_brand.png
ADDED
|
Binary file
|
package/q5js_logo.png
CHANGED
|
Binary file
|