litecanvas 0.206.1 → 0.207.0

package/dist/dist.dev.js

@@ -1,6 +1,6 @@
 (() => {
   var setupZzFX = (global) => {
-    const zzfxX = new AudioContext();
+    global.zzfxX = new AudioContext();
     global.zzfxV = 1;
     return (
       i = 1,
@@ -63,7 +63,7 @@
           V *= t / a,
           J *= a,
           h = (a * h) | 0,
-          i *= 0.3 * global.zzfxV,
+          i *= 0.3 * zzfxV,
           s = (e + X + P + S + r) | 0;
         f < s;
         d[f++] = o * i
@@ -115,7 +115,7 @@
   var assert = (condition, message = "Assertion failed") => {
     if (!condition) throw new Error("[litecanvas] " + message);
   };
-  var version = "0.206.1";
+  var version = "0.207.0";
   function litecanvas(settings = {}) {
     const root = window,
       math = Math,
@@ -123,6 +123,7 @@
       TWO_PI = math.PI * 2,
       loggerPrefix = "[Litecanvas] ",
       raf = requestAnimationFrame,
+      isNumber = Number.isFinite,
       _browserEventListeners = [],
       on = (elem, evt, callback) => {
         elem.addEventListener(evt, callback, false);
@@ -133,7 +134,6 @@
       lowerCase = (str) => str.toLowerCase(),
       preventDefault = (ev) => ev.preventDefault(),
       beginPath = (c) => c.beginPath(),
-      isNumber = Number.isFinite,
       zzfx = setupZzFX(root),
       defaults = {
         width: null,
@@ -450,102 +450,98 @@
         _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, ~~width, ~~height, radii);
         instance.fill(color);
       },
-      circ(x, y, radius, color) {
+      oval(x, y, radiusX, radiusY, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "circ() 1st param must be a number",
+          loggerPrefix + "oval() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "circ() 2nd param must be a number",
+          loggerPrefix + "oval() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radius) && radius >= 0,
-          loggerPrefix + "circ() 3rd param must be a positive number or zero",
+          isNumber(radiusX) && radiusX >= 0,
+          loggerPrefix + "oval() 3rd param must be a positive number or zero",
+        );
+        DEV: assert(
+          isNumber(radiusY) && radiusY >= 0,
+          loggerPrefix + "oval() 4th param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          loggerPrefix + "circ() 4th param must be a positive number or zero",
+          loggerPrefix + "oval() 5th param must be a positive number or zero",
         );
         beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
+        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.stroke(color);
       },
-      circfill(x, y, radius, color) {
+      ovalfill(x, y, radiusX, radiusY, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "circfill() 1st param must be a number",
+          loggerPrefix + "ovalfill() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "circfill() 2nd param must be a number",
+          loggerPrefix + "ovalfill() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radius) && radius >= 0,
+          isNumber(radiusX) && radiusX >= 0,
           loggerPrefix +
-            "circfill() 3rd param must be a positive number or zero",
+            "ovalfill() 3rd param must be a positive number or zero",
+        );
+        DEV: assert(
+          isNumber(radiusY) && radiusY >= 0,
+          loggerPrefix +
+            "ovalfill() 4th param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
           loggerPrefix +
-            "circfill() 4th param must be a positive number or zero",
+            "ovalfill() 5th param must be a positive number or zero",
         );
         beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
+        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.fill(color);
       },
-      oval(x, y, radiusX, radiusY, color) {
+      circ(x, y, radius, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "oval() 1st param must be a number",
+          loggerPrefix + "circ() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "oval() 2nd param must be a number",
-        );
-        DEV: assert(
-          isNumber(radiusX) && radiusX >= 0,
-          loggerPrefix + "oval() 3rd param must be a positive number or zero",
+          loggerPrefix + "circ() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radiusY) && radiusY >= 0,
-          loggerPrefix + "oval() 4th param must be a positive number or zero",
+          isNumber(radius) && radius >= 0,
+          loggerPrefix + "circ() 3rd param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
-          loggerPrefix + "oval() 5th param must be a positive number or zero",
+          loggerPrefix + "circ() 4th param must be a positive number or zero",
         );
-        beginPath(_ctx);
-        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
-        instance.stroke(color);
+        instance.oval(x, y, radius, radius, color);
       },
-      ovalfill(x, y, radiusX, radiusY, color) {
+      circfill(x, y, radius, color) {
         DEV: assert(
           isNumber(x),
-          loggerPrefix + "ovalfill() 1st param must be a number",
+          loggerPrefix + "circfill() 1st param must be a number",
         );
         DEV: assert(
           isNumber(y),
-          loggerPrefix + "ovalfill() 2nd param must be a number",
-        );
-        DEV: assert(
-          isNumber(radiusX) && radiusX >= 0,
-          loggerPrefix +
-            "ovalfill() 3rd param must be a positive number or zero",
+          loggerPrefix + "circfill() 2nd param must be a number",
         );
         DEV: assert(
-          isNumber(radiusY) && radiusY >= 0,
+          isNumber(radius) && radius >= 0,
           loggerPrefix +
-            "ovalfill() 4th param must be a positive number or zero",
+            "circfill() 3rd param must be a positive number or zero",
         );
         DEV: assert(
           null == color || (isNumber(color) && color >= 0),
           loggerPrefix +
-            "ovalfill() 5th param must be a positive number or zero",
+            "circfill() 4th param must be a positive number or zero",
         );
-        beginPath(_ctx);
-        _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
-        instance.fill(color);
+        instance.ovalfill(x, y, radius, radius, color);
       },
       shape(points) {
         DEV: assert(

package/dist/dist.js

@@ -1,6 +1,6 @@
 (() => {
   var setupZzFX = (global) => {
-    const zzfxX = new AudioContext();
+    global.zzfxX = new AudioContext();
     global.zzfxV = 1;
     return (
       i = 1,
@@ -63,7 +63,7 @@
           V *= t / a,
           J *= a,
           h = (a * h) | 0,
-          i *= 0.3 * global.zzfxV,
+          i *= 0.3 * zzfxV,
           s = (e + X + P + S + r) | 0;
         f < s;
         d[f++] = o * i
@@ -119,6 +119,7 @@
       TWO_PI = math.PI * 2,
       loggerPrefix = "[Litecanvas] ",
       raf = requestAnimationFrame,
+      isNumber = Number.isFinite,
       _browserEventListeners = [],
       on = (elem, evt, callback) => {
         elem.addEventListener(evt, callback, false);
@@ -129,7 +130,6 @@
       lowerCase = (str) => str.toLowerCase(),
       preventDefault = (ev) => ev.preventDefault(),
       beginPath = (c) => c.beginPath(),
-      isNumber = Number.isFinite,
       zzfx = setupZzFX(root),
       defaults = {
         width: null,
@@ -242,16 +242,6 @@
         _ctx[radii ? "roundRect" : "rect"](~~x, ~~y, ~~width, ~~height, radii);
         instance.fill(color);
       },
-      circ(x, y, radius, color) {
-        beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
-        instance.stroke(color);
-      },
-      circfill(x, y, radius, color) {
-        beginPath(_ctx);
-        _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI);
-        instance.fill(color);
-      },
       oval(x, y, radiusX, radiusY, color) {
         beginPath(_ctx);
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
@@ -262,6 +252,12 @@
         _ctx.ellipse(~~x, ~~y, ~~radiusX, ~~radiusY, 0, 0, TWO_PI);
         instance.fill(color);
       },
+      circ(x, y, radius, color) {
+        instance.oval(x, y, radius, radius, color);
+      },
+      circfill(x, y, radius, color) {
+        instance.ovalfill(x, y, radius, radius, color);
+      },
       shape(points) {
         beginPath(_ctx);
         for (let i = 0; i < points.length; i += 2) {

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let a,l,n=window,i=Math,o=performance,r=2*i.PI,s=requestAnimationFrame,f=[],c=(e,t,a)=>{e.addEventListener(t,a,!1),f.push(()=>e.removeEventListener(t,a,!1))},d=(a=new AudioContext,n.zzfxV=1,(e=1,t=.05,l=220,i=0,o=0,r=.1,s=0,f=1,c=0,d=0,u=0,p=0,h=0,m=0,g=0,w=0,v=0,x=1,y=0,b=0,k=0)=>{let E=Math,P=2*E.PI,T=c*=500*P/44100/44100,z=l*=(1-t+2*t*E.random(t=[]))*P/44100,C=0,I=0,L=0,D=1,A=0,S=0,H=0,M=k<0?-1:1,N=P*M*k*2/44100,W=E.cos(N),q=E.sin,B=q(N)/4,V=1+B,O=-2*W/V,R=(1-B)/V,F=(1+M*W)/2/V,G=-(M+W)/V,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,v*=44100,d*=500*P/85766121e6,g*=P/44100,u*=P/44100,p*=44100,h=44100*h|0,e*=.3*n.zzfxV,M=i+y+o+r+v|0;L<M;t[L++]=H*e)++S%(100*w|0)||(H=s?1<s?2<s?3<s?q(C*C):E.max(E.min(E.tan(C),1),-1):1-(2*C/P%2+2)%2:1-4*E.abs(E.round(C/P)-C/P):q(C),H=(h?1-b+b*q(P*L/h):1)*(H<0?-1:1)*E.abs(H)**f*(L<i?L/i:L<i+y?1-(L-i)/y*(1-x):L<i+y+o?x:L<M-v?(M-L-v)/r*x:0),H=v?H/2+(v>L?0:(L<M-v?1:(M-L)/v)*t[L-v|0]/2/e):H,k&&(H=j=F*X+G*(X=Y)+F*(Y=H)-R*$-O*($=j))),C+=(N=(l+=c+=d)*E.cos(g*I++))+N*m*q(L**5),D&&++D>p&&(l+=u,z+=u,D=0),!h||++A%h||(l=z,c=T,D=D||1);(e=a.createBuffer(1,M,44100)).getChannelData(0).set(t),(l=a.createBufferSource()).buffer=e,l.connect(a.destination),l.start()}),u=(t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t)).loop,p=!1,h,m,g=1,w,v=.5,x=1,y,b=1e3/60,k,E=0,P=3,T="sans-serif",z=20,C=1.2,I=Date.now(),L=e,D=[],A=[.5,0,1750,,,.3,1,,,,600,.1],S={},H={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:r,HALF_PI:r/4,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>i.PI/180*e,rad2deg:e=>180/i.PI*e,round:(e,t=0)=>{if(!t)return i.round(e);let a=10**t;return i.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,dist:(e,t,a,l)=>i.hypot(a-e,l-t),wrap:(e,t,a)=>e-(a-t)*i.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?H.clamp(o,l,n):o},norm:(e,t,a)=>H.map(e,t,a,0,1),rand:(e=0,t=1)=>(I=(1664525*I+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~H.rand(e,t+1),rseed(e){I=~~e},cls(e){null==e?w.clearRect(0,0,H.W,H.H):H.rectfill(0,0,H.W,H.H,e)},rect(e,t,a,l,n,i){w.beginPath(),w[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),H.stroke(n)},rectfill(e,t,a,l,n,i){w.beginPath(),w[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),H.fill(n)},circ(e,t,a,l){w.beginPath(),w.arc(~~e,~~t,~~a,0,r),H.stroke(l)},circfill(e,t,a,l){w.beginPath(),w.arc(~~e,~~t,~~a,0,r),H.fill(l)},oval(e,t,a,l,n){w.beginPath(),w.ellipse(~~e,~~t,~~a,~~l,0,0,r),H.stroke(n)},ovalfill(e,t,a,l,n){w.beginPath(),w.ellipse(~~e,~~t,~~a,~~l,0,0,r),H.fill(n)},shape(e){w.beginPath();for(let t=0;t<e.length;t+=2)0===t?w.moveTo(~~e[t],~~e[t+1]):w.lineTo(~~e[t],~~e[t+1]);w.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){w.beginPath();let i=.5*(0!==v&&~~e==~~a),o=.5*(0!==v&&~~t==~~l);w.moveTo(~~e+i,~~t+o),w.lineTo(~~a+i,~~l+o),H.stroke(n)},linewidth(e){w.lineWidth=~~e,v=.5*(0!=~~e%2)},linedash(e,t=0){w.setLineDash(e),w.lineDashOffset=t},text(e,t,a,l=P,n="normal"){w.font=`${n} ${z}px ${T}`,w.fillStyle=B(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)w.fillText(i[a],~~e,~~t+z*C*a)},textgap(e){C=e},textfont(e){T=e},textsize(e){z=e},textalign(e,t){e&&(w.textAlign=e),t&&(w.textBaseline=t)},image(e,t,a){w.drawImage(a,~~e,~~t)},spr(e,t,a){let l=a.trim().split("\n");for(let a=0;a<l.length;a++){let n=l[a].trim();for(let l=0;l<n.length;l++){let i=n[l];"."!==i&&" "!==i&&H.rectfill(e+l,t+a,1,1,parseInt(i,36)||0)}}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=w;return n.width=e*i,n.height=t*i,(w=n.getContext("2d")).scale(i,i),a(w),w=o,n.transferToImageBitmap()},ctx:e=>(e&&(w=e),w),push(){w.save()},pop(){w.restore()},translate(e,t){w.translate(~~e,~~t)},scale(e,t=e){w.scale(e,t)},rotate(e){w.rotate(e)},alpha(e){w.globalAlpha=H.clamp(e,0,1)},fill(e){w.fillStyle=B(e),w.fill()},stroke(e){w.strokeStyle=B(e),w.stroke()},clip(e){w.beginPath(),e(w),w.clip()},sfx:(e,t,a)=>!!n.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e||=A,(t||a)&&((e=e.slice())[0]=(a||1)*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){n.zzfxV=e},canvas:()=>m,use(e,t={}){var a=e,l=t;let n=a(H,l);for(let e in n)H.def(e,n[e])},listen:(e,t)=>{S[e=e.toLowerCase()]=S[e]||new Set,S[e].add(t)},unlisten:(e,t)=>{S[e=e.toLowerCase()]&&S[e].delete(t)},emit:(e,t,a,l,i)=>(p&&(q("before:"+(e=e.toLowerCase()),t,a,l,i),u||n[e]===H[e]||"function"!=typeof n[e]||n[e](t,a,l,i),q(e,t,a,l,i),q("after:"+e,t,a,l,i)),t),pal(t,a=3){L=t||e,D=[],P=a,H.emit("pal",L,P)},palc(e,t){null==e?D=[]:D[e]=t},def(e,a){H[e]=a,t.global&&(n[e]=a)},timescale(e){x=e},framerate(e){b=1e3/~~e},stat:e=>[t,p,b/1e3,g,S,L,A,x,n.zzfxV,I,z,T,D,C][e],pause(){h||(h=!0,E=~~cancelAnimationFrame(E),H.emit("paused"))},resume(){p&&h&&(M(),h=!1,H.emit("resumed"))},ispaused:()=>h,quit(){for(let e of(H.emit("quit"),H.pause(),p=!1,S={},f))e();if(t.global){for(let e in H)delete n[e];delete n.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))H[e]=i[e];function M(){E||(k=0,y=o.now(),E=s(N))}function N(){E=s(N);let e=o.now(),t=0,a=e-y;for(y=e,k+=a<100?a:b;k>=b;){t++,k-=b;let e=b/1e3*x;H.emit("update",e,t),H.def("T",H.T+e)}t&&(H.emit("draw",w),t>1&&(k=0))}function W(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(H.def("W",e),H.def("H",a),m.width=e,m.height=a,t.autoscale){let l=+t.autoscale;m.style.display||(m.style.display="block",m.style.margin="auto"),g=i.min(innerWidth/e,innerHeight/a),g=l>1&&g>l?l:g,m.style.width=e*g+"px",m.style.height=a*g+"px"}w.imageSmoothingEnabled=!1,H.textalign("start","top"),H.emit("resized",g)}function q(e,t,a,l,n){if(S[e])for(let i of S[e])i(t,a,l,n)}function B(e){return L[~~(D[e]??e)%L.length]}if(t.global){if(n.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(n,H),n.ENGINE=H}if(l=document,w=(m=(m="string"==typeof t.canvas?l.querySelector(t.canvas):t.canvas)||l.createElement("canvas")).getContext("2d"),c(m,"click",()=>focus()),W(),m.parentNode||l.body.appendChild(m),m.style.imageRendering="pixelated",m.oncontextmenu=()=>!1,u)for(let e in u)u[e]&&H.listen(e,u[e]);return s(function(){if(t.autoscale&&c(n,"resize",W),t.tapEvents){let e=e=>[(e.pageX-m.offsetLeft)/g,(e.pageY-m.offsetTop)/g],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:o.now()};return t.set(e,n),n},l=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},i=e=>e&&o.now()-e.t<=300,r=!1;c(m,"mousedown",t=>{if(0===t.button){t.preventDefault();let[l,n]=e(t);H.emit("tap",l,n,0),a(0,l,n),r=!0}}),c(m,"mouseup",a=>{if(0===a.button){a.preventDefault();let l=t.get(0),[n,o]=e(a);i(l)&&H.emit("tapped",l.xi,l.yi,0),H.emit("untap",n,o,0),t.delete(0),r=!1}}),c(n,"mousemove",t=>{t.preventDefault();let[a,n]=e(t);H.def("MX",a),H.def("MY",n),r&&(H.emit("tapping",a,n,0),l(0,a,n))}),c(m,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);H.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),c(m,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,n]=e(a);H.emit("tapping",t,n,a.identifier+1),l(a.identifier+1,t,n)}});let s=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(i(l)&&H.emit("tapped",l.xi,l.yi,e),H.emit("untap",l.x,l.y,e),t.delete(e))};c(m,"touchend",s),c(m,"touchcancel",s),c(n,"blur",()=>{for(let[e,a]of(r=!1,t))H.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,a=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,l="";c(n,"keydown",a=>{let n=a.key.toLowerCase();e.has(n)||(e.add(n),t.add(n),l=" "===n?"space":n)}),c(n,"keyup",t=>{e.delete(t.key.toLowerCase())}),c(n,"blur",()=>e.clear()),H.listen("after:update",()=>t.clear()),H.def("iskeydown",t=>a(e,t)),H.def("iskeypressed",e=>a(t,e)),H.def("lastkey",()=>l)}p=!0,H.emit("init",H),h||M()}),H}})();
+(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let a,l=window,n=Math,i=performance,o=2*n.PI,r=requestAnimationFrame,s=[],f=(e,t,a)=>{e.addEventListener(t,a,!1),s.push(()=>e.removeEventListener(t,a,!1))},d=(l.zzfxX=new AudioContext,l.zzfxV=1,(e=1,t=.05,a=220,l=0,n=0,i=.1,o=0,r=1,s=0,f=0,d=0,c=0,u=0,p=0,h=0,m=0,g=0,v=1,x=0,w=0,y=0)=>{let b=Math,z=2*b.PI,k=s*=500*z/44100/44100,E=a*=(1-t+2*t*b.random(t=[]))*z/44100,T=0,P=0,C=0,I=1,L=0,D=0,A=0,S=y<0?-1:1,H=z*S*y*2/44100,M=b.cos(H),N=b.sin,W=N(H)/4,X=1+W,q=-2*M/X,B=(1-W)/X,V=(1+S*M)/2/X,O=-(S+M)/X,R=0,F=0,G=0,Y=0;for(l=44100*l+9,x*=44100,n*=44100,i*=44100,g*=44100,f*=500*z/85766121e6,h*=z/44100,d*=z/44100,c*=44100,u=44100*u|0,e*=.3*zzfxV,S=l+x+n+i+g|0;C<S;t[C++]=A*e)++D%(100*m|0)||(A=o?1<o?2<o?3<o?N(T*T):b.max(b.min(b.tan(T),1),-1):1-(2*T/z%2+2)%2:1-4*b.abs(b.round(T/z)-T/z):N(T),A=(u?1-w+w*N(z*C/u):1)*(A<0?-1:1)*b.abs(A)**r*(C<l?C/l:C<l+x?1-(C-l)/x*(1-v):C<l+x+n?v:C<S-g?(S-C-g)/i*v:0),A=g?A/2+(g>C?0:(C<S-g?1:(S-C)/g)*t[C-g|0]/2/e):A,y&&(A=Y=V*R+O*(R=F)+V*(F=A)-B*G-q*(G=Y))),T+=(H=(a+=s+=f)*b.cos(h*P++))+H*p*N(C**5),I&&++I>c&&(a+=d,E+=d,I=0),!u||++L%u||(a=E,s=k,I=I||1);(e=zzfxX.createBuffer(1,S,44100)).getChannelData(0).set(t),(a=zzfxX.createBufferSource()).buffer=e,a.connect(zzfxX.destination),a.start()}),c=(t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t)).loop,u=!1,p,h,m=1,g,v=.5,x=1,w,y=1e3/60,b,z=0,k=3,E="sans-serif",T=20,P=1.2,C=Date.now(),I=e,L=[],D=[.5,0,1750,,,.3,1,,,,600,.1],A={},S={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:o,HALF_PI:o/4,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,round:(e,t=0)=>{if(!t)return n.round(e);let a=10**t;return n.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,dist:(e,t,a,l)=>n.hypot(a-e,l-t),wrap:(e,t,a)=>e-(a-t)*n.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?S.clamp(o,l,n):o},norm:(e,t,a)=>S.map(e,t,a,0,1),rand:(e=0,t=1)=>(C=(1664525*C+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~S.rand(e,t+1),rseed(e){C=~~e},cls(e){null==e?g.clearRect(0,0,S.W,S.H):S.rectfill(0,0,S.W,S.H,e)},rect(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),S.stroke(n)},rectfill(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),S.fill(n)},oval(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.stroke(n)},ovalfill(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.fill(n)},circ(e,t,a,l){S.oval(e,t,a,a,l)},circfill(e,t,a,l){S.ovalfill(e,t,a,a,l)},shape(e){g.beginPath();for(let t=0;t<e.length;t+=2)0===t?g.moveTo(~~e[t],~~e[t+1]):g.lineTo(~~e[t],~~e[t+1]);g.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){g.beginPath();let i=.5*(0!==v&&~~e==~~a),o=.5*(0!==v&&~~t==~~l);g.moveTo(~~e+i,~~t+o),g.lineTo(~~a+i,~~l+o),S.stroke(n)},linewidth(e){g.lineWidth=~~e,v=.5*(0!=~~e%2)},linedash(e,t=0){g.setLineDash(e),g.lineDashOffset=t},text(e,t,a,l=k,n="normal"){g.font=`${n} ${T}px ${E}`,g.fillStyle=X(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)g.fillText(i[a],~~e,~~t+T*P*a)},textgap(e){P=e},textfont(e){E=e},textsize(e){T=e},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},image(e,t,a){g.drawImage(a,~~e,~~t)},spr(e,t,a){let l=a.trim().split("\n");for(let a=0;a<l.length;a++){let n=l[a].trim();for(let l=0;l<n.length;l++){let i=n[l];"."!==i&&" "!==i&&S.rectfill(e+l,t+a,1,1,parseInt(i,36)||0)}}},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=g;return n.width=e*i,n.height=t*i,(g=n.getContext("2d")).scale(i,i),a(g),g=o,n.transferToImageBitmap()},ctx:e=>(e&&(g=e),g),push(){g.save()},pop(){g.restore()},translate(e,t){g.translate(~~e,~~t)},scale(e,t=e){g.scale(e,t)},rotate(e){g.rotate(e)},alpha(e){g.globalAlpha=S.clamp(e,0,1)},fill(e){g.fillStyle=X(e),g.fill()},stroke(e){g.strokeStyle=X(e),g.stroke()},clip(e){g.beginPath(),e(g),g.clip()},sfx:(e,t,a)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e||=D,(t||a)&&((e=e.slice())[0]=(a||1)*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){l.zzfxV=e},canvas:()=>h,use(e,t={}){var a=e,l=t;let n=a(S,l);for(let e in n)S.def(e,n[e])},listen:(e,t)=>{A[e=e.toLowerCase()]=A[e]||new Set,A[e].add(t)},unlisten:(e,t)=>{A[e=e.toLowerCase()]&&A[e].delete(t)},emit:(e,t,a,n,i)=>(u&&(W("before:"+(e=e.toLowerCase()),t,a,n,i),c||l[e]===S[e]||"function"!=typeof l[e]||l[e](t,a,n,i),W(e,t,a,n,i),W("after:"+e,t,a,n,i)),t),pal(t,a=3){I=t||e,L=[],k=a,S.emit("pal",I,k)},palc(e,t){null==e?L=[]:L[e]=t},def(e,a){S[e]=a,t.global&&(l[e]=a)},timescale(e){x=e},framerate(e){y=1e3/~~e},stat:e=>[t,u,y/1e3,m,A,I,D,x,l.zzfxV,C,T,E,L,P][e],pause(){p||(p=!0,z=~~cancelAnimationFrame(z),S.emit("paused"))},resume(){u&&p&&(H(),p=!1,S.emit("resumed"))},ispaused:()=>p,quit(){for(let e of(S.emit("quit"),S.pause(),u=!1,A={},s))e();if(t.global){for(let e in S)delete l[e];delete l.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))S[e]=n[e];function H(){z||(b=0,w=i.now(),z=r(M))}function M(){z=r(M);let e=i.now(),t=0,a=e-w;for(w=e,b+=a<100?a:y;b>=y;){t++,b-=y;let e=y/1e3*x;S.emit("update",e,t),S.def("T",S.T+e)}t&&(S.emit("draw",g),t>1&&(b=0))}function N(){let e=t.width>0?t.width:innerWidth,a=t.width>0?t.height||t.width:innerHeight;if(S.def("W",e),S.def("H",a),h.width=e,h.height=a,t.autoscale){let l=+t.autoscale;h.style.display||(h.style.display="block",h.style.margin="auto"),m=n.min(innerWidth/e,innerHeight/a),m=l>1&&m>l?l:m,h.style.width=e*m+"px",h.style.height=a*m+"px"}g.imageSmoothingEnabled=!1,S.textalign("start","top"),S.emit("resized",m)}function W(e,t,a,l,n){if(A[e])for(let i of A[e])i(t,a,l,n)}function X(e){return I[~~(L[e]??e)%I.length]}if(t.global){if(l.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(l,S),l.ENGINE=S}if(a=document,g=(h=(h="string"==typeof t.canvas?a.querySelector(t.canvas):t.canvas)||a.createElement("canvas")).getContext("2d"),f(h,"click",()=>focus()),N(),h.parentNode||a.body.appendChild(h),h.style.imageRendering="pixelated",h.oncontextmenu=()=>!1,c)for(let e in c)c[e]&&S.listen(e,c[e]);return r(function(){if(t.autoscale&&f(l,"resize",N),t.tapEvents){let e=e=>[(e.pageX-h.offsetLeft)/m,(e.pageY-h.offsetTop)/m],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:i.now()};return t.set(e,n),n},n=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},o=e=>e&&i.now()-e.t<=300,r=!1;f(h,"mousedown",t=>{if(0===t.button){t.preventDefault();let[l,n]=e(t);S.emit("tap",l,n,0),a(0,l,n),r=!0}}),f(h,"mouseup",a=>{if(0===a.button){a.preventDefault();let l=t.get(0),[n,i]=e(a);o(l)&&S.emit("tapped",l.xi,l.yi,0),S.emit("untap",n,i,0),t.delete(0),r=!1}}),f(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);S.def("MX",a),S.def("MY",l),r&&(S.emit("tapping",a,l,0),n(0,a,l))}),f(h,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);S.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),f(h,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a);S.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(o(l)&&S.emit("tapped",l.xi,l.yi,e),S.emit("untap",l.x,l.y,e),t.delete(e))};f(h,"touchend",s),f(h,"touchcancel",s),f(l,"blur",()=>{for(let[e,a]of(r=!1,t))S.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,a=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,n="";f(l,"keydown",a=>{let l=a.key.toLowerCase();e.has(l)||(e.add(l),t.add(l),n=" "===l?"space":l)}),f(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),f(l,"blur",()=>e.clear()),S.listen("after:update",()=>t.clear()),S.def("iskeydown",t=>a(e,t)),S.def("iskeypressed",e=>a(t,e)),S.def("lastkey",()=>n)}u=!0,S.emit("init",S),p||H()}),S}})();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.206.1",
+    "version": "0.207.0",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",

package/src/index.js

@@ -17,6 +17,7 @@ export default function litecanvas(settings = {}) {
         TWO_PI = math.PI * 2,
         loggerPrefix = '[Litecanvas] ',
         raf = requestAnimationFrame,
+        isNumber = Number.isFinite,
         /** @type {Function[]} */
         _browserEventListeners = [],
         /** @type {(elem: EventTarget, evt: string, callback: (event: Event) => void) => void} */
@@ -30,7 +31,6 @@ export default function litecanvas(settings = {}) {
         preventDefault = (ev) => ev.preventDefault(),
         /** @type {(c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => void} */
         beginPath = (c) => c.beginPath(),
-        isNumber = Number.isFinite,
         zzfx = setupZzFX(root),
         /** @type {LitecanvasOptions} */
         defaults = {
@@ -52,7 +52,7 @@ export default function litecanvas(settings = {}) {
         _initialized = false,
         /** @type {boolean} */
         _paused,
-        /** @type {HTMLCanvasElement} _canvas */
+        /** @type {HTMLCanvasElement} */
         _canvas,
         /** @type {number} */
         _canvasScale = 1,
@@ -459,56 +459,6 @@ export default function litecanvas(settings = {}) {
             instance.fill(color)
         },
 
-        /**
-         * Draw a circle outline
-         *
-         * @param {number} x
-         * @param {number} y
-         * @param {number} radius
-         * @param {number} [color=0] the color index
-         */
-        circ(x, y, radius, color) {
-            DEV: assert(isNumber(x), loggerPrefix + 'circ() 1st param must be a number')
-            DEV: assert(isNumber(y), loggerPrefix + 'circ() 2nd param must be a number')
-            DEV: assert(
-                isNumber(radius) && radius >= 0,
-                loggerPrefix + 'circ() 3rd param must be a positive number or zero'
-            )
-            DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                loggerPrefix + 'circ() 4th param must be a positive number or zero'
-            )
-
-            beginPath(_ctx)
-            _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
-            instance.stroke(color)
-        },
-
-        /**
-         * Draw a color-filled circle
-         *
-         * @param {number} x
-         * @param {number} y
-         * @param {number} radius
-         * @param {number} [color=0] the color index
-         */
-        circfill(x, y, radius, color) {
-            DEV: assert(isNumber(x), loggerPrefix + 'circfill() 1st param must be a number')
-            DEV: assert(isNumber(y), loggerPrefix + 'circfill() 2nd param must be a number')
-            DEV: assert(
-                isNumber(radius) && radius >= 0,
-                loggerPrefix + 'circfill() 3rd param must be a positive number or zero'
-            )
-            DEV: assert(
-                null == color || (isNumber(color) && color >= 0),
-                loggerPrefix + 'circfill() 4th param must be a positive number or zero'
-            )
-
-            beginPath(_ctx)
-            _ctx.arc(~~x, ~~y, ~~radius, 0, TWO_PI)
-            instance.fill(color)
-        },
-
         /**
          * Draw a ellipse outline
          *
@@ -569,6 +519,52 @@ export default function litecanvas(settings = {}) {
             instance.fill(color)
         },
 
+        /**
+         * Draw a circle outline
+         *
+         * @param {number} x
+         * @param {number} y
+         * @param {number} radius
+         * @param {number} [color=0] the color index
+         */
+        circ(x, y, radius, color) {
+            DEV: assert(isNumber(x), loggerPrefix + 'circ() 1st param must be a number')
+            DEV: assert(isNumber(y), loggerPrefix + 'circ() 2nd param must be a number')
+            DEV: assert(
+                isNumber(radius) && radius >= 0,
+                loggerPrefix + 'circ() 3rd param must be a positive number or zero'
+            )
+            DEV: assert(
+                null == color || (isNumber(color) && color >= 0),
+                loggerPrefix + 'circ() 4th param must be a positive number or zero'
+            )
+
+            instance.oval(x, y, radius, radius, color)
+        },
+
+        /**
+         * Draw a color-filled circle
+         *
+         * @param {number} x
+         * @param {number} y
+         * @param {number} radius
+         * @param {number} [color=0] the color index
+         */
+        circfill(x, y, radius, color) {
+            DEV: assert(isNumber(x), loggerPrefix + 'circfill() 1st param must be a number')
+            DEV: assert(isNumber(y), loggerPrefix + 'circfill() 2nd param must be a number')
+            DEV: assert(
+                isNumber(radius) && radius >= 0,
+                loggerPrefix + 'circfill() 3rd param must be a positive number or zero'
+            )
+            DEV: assert(
+                null == color || (isNumber(color) && color >= 0),
+                loggerPrefix + 'circfill() 4th param must be a positive number or zero'
+            )
+
+            instance.ovalfill(x, y, radius, radius, color)
+        },
+
         /**
          * Make a custom shape in the canvas context.
          * Then, just use `fill` or `stroke` to draw the shape.
@@ -707,6 +703,7 @@ export default function litecanvas(settings = {}) {
          */
         textgap(value) {
             DEV: assert(isNumber(value), loggerPrefix + 'textgap() 1st param must be a number')
+
             _fontLineHeight = value
         },
 

package/src/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.206.1'
+export const version = '0.207.0'

package/src/zzfx.js

@@ -1,13 +1,114 @@
 // ZzFXMicro - Zuper Zmall Zound Zynth - v1.3.0 by Frank Force | https://github.com/KilledByAPixel/ZzFX
-// prettier-ignore
 /**
  * @param {Window} global
  * @returns {Function} the `zzfx()` function
  */
 export const setupZzFX = (global) => {
-    const zzfxX = new AudioContext()
+    global.zzfxX = new AudioContext()
+    global.zzfxV = 1 // volume rate
 
-    global.zzfxV = 1
-
-    return (i=1,d=.05,z=220,e=0,P=0,S=.1,I=0,c=1,T=0,H=0,V=0,J=0,h=0,j=0,K=0,E=0,r=0,B=1,X=0,L=0,D=0)=>{let n=Math,t=2*n.PI,a=44100,F=T*=500*t/a/a,O=z*=(1-d+2*d*n.random(d=[]))*t/a,x=0,_=0,f=0,g=1,$=0,l=0,o=0,s=D<0?-1:1,u=t*s*D*2/a,G=n.cos(u),C=n.sin,Q=C(u)/4,M=1+Q,m=-2*G/M,y=(1-Q)/M,R=(1+s*G)/2/M,A=-(s+G)/M,v=R,U=0,W=0,Y=0,Z=0;for(e=a*e+9,X*=a,P*=a,S*=a,r*=a,H*=500*t/a**3,K*=t/a,V*=t/a,J*=a,h=a*h|0,i*=.3*global.zzfxV,s=e+X+P+S+r|0;f<s;d[f++]=o*i)++l%(100*E|0)||(o=I?1<I?2<I?3<I?C(x*x):n.max(n.min(n.tan(x),1),-1):1-(2*x/t%2+2)%2:1-4*n.abs(n.round(x/t)-x/t):C(x),o=(h?1-L+L*C(t*f/h):1)*(o<0?-1:1)*n.abs(o)**c*(f<e?f/e:f<e+X?1-(f-e)/X*(1-B):f<e+X+P?B:f<s-r?(s-f-r)/S*B:0),o=r?o/2+(r>f?0:(f<s-r?1:(s-f)/r)*d[f-r|0]/2/i):o,D&&(o=Z=v*U+A*(U=W)+R*(W=o)-y*Y-m*(Y=Z))),u=(z+=T+=H)*n.cos(K*_++),x+=u+u*j*C(f**5),g&&++g>J&&(z+=V,O+=V,g=0),!h||++$%h||(z=O,T=F,g=g||1);i=zzfxX.createBuffer(1,s,a),i.getChannelData(0).set(d),z=zzfxX.createBufferSource(),z.buffer=i,z.connect(zzfxX.destination),z.start()};
+    return (
+        i = 1, // volume
+        d = 0.05, // randomness
+        z = 220, // frequency
+        e = 0, // attack
+        P = 0, // sustain
+        S = 0.1, // release
+        I = 0, // shape
+        c = 1, // shape curve
+        T = 0, // slide
+        H = 0, // delta slide
+        V = 0, // pitch jump
+        J = 0, // pitch jump time
+        h = 0, // repeat time
+        j = 0, // noise
+        K = 0, // modulation
+        E = 0, // bit crush
+        r = 0, // delay
+        B = 1, // sustain volume
+        X = 0, // decay
+        L = 0, // tremolo
+        D = 0 // filter
+    ) => {
+        let n = Math,
+            t = 2 * n.PI,
+            a = 44100,
+            F = (T *= (500 * t) / a / a),
+            O = (z *= ((1 - d + 2 * d * n.random((d = []))) * t) / a),
+            x = 0,
+            _ = 0,
+            f = 0,
+            g = 1,
+            $ = 0,
+            l = 0,
+            o = 0,
+            s = D < 0 ? -1 : 1,
+            u = (t * s * D * 2) / a,
+            G = n.cos(u),
+            C = n.sin,
+            Q = C(u) / 4,
+            M = 1 + Q,
+            m = (-2 * G) / M,
+            y = (1 - Q) / M,
+            R = (1 + s * G) / 2 / M,
+            A = -(s + G) / M,
+            v = R,
+            U = 0,
+            W = 0,
+            Y = 0,
+            Z = 0
+        for (
+            e = a * e + 9,
+                X *= a,
+                P *= a,
+                S *= a,
+                r *= a,
+                H *= (500 * t) / a ** 3,
+                K *= t / a,
+                V *= t / a,
+                J *= a,
+                h = (a * h) | 0,
+                i *= 0.3 * zzfxV,
+                s = (e + X + P + S + r) | 0;
+            f < s;
+            d[f++] = o * i
+        )
+            (++l % ((100 * E) | 0) ||
+                ((o = I
+                    ? 1 < I
+                        ? 2 < I
+                            ? 3 < I
+                                ? C(x * x)
+                                : n.max(n.min(n.tan(x), 1), -1)
+                            : 1 - (((((2 * x) / t) % 2) + 2) % 2)
+                        : 1 - 4 * n.abs(n.round(x / t) - x / t)
+                    : C(x)),
+                (o =
+                    (h ? 1 - L + L * C((t * f) / h) : 1) *
+                    (o < 0 ? -1 : 1) *
+                    n.abs(o) ** c *
+                    (f < e
+                        ? f / e
+                        : f < e + X
+                          ? 1 - ((f - e) / X) * (1 - B)
+                          : f < e + X + P
+                            ? B
+                            : f < s - r
+                              ? ((s - f - r) / S) * B
+                              : 0)),
+                (o = r
+                    ? o / 2 + (r > f ? 0 : ((f < s - r ? 1 : (s - f) / r) * d[(f - r) | 0]) / 2 / i)
+                    : o),
+                D && (o = Z = v * U + A * (U = W) + R * (W = o) - y * Y - m * (Y = Z))),
+                (u = (z += T += H) * n.cos(K * _++)),
+                (x += u + u * j * C(f ** 5)),
+                g && ++g > J && ((z += V), (O += V), (g = 0)),
+                !h || ++$ % h || ((z = O), (T = F), (g = g || 1)))
+        ;((i = zzfxX.createBuffer(1, s, a)),
+            i.getChannelData(0).set(d),
+            (z = zzfxX.createBufferSource()),
+            (z.buffer = i),
+            z.connect(zzfxX.destination),
+            z.start())
+    }
 }