litecanvas 0.98.3 → 0.99.0

package/README.md

@@ -151,6 +151,99 @@ function draw() {
 }
 ```
 
+### Drawing sprites
+
+```js
+litecanvas({
+  width: 128
+})
+
+// you can create sprites with strings
+// each visible char is a pixel
+// numbers are colors
+// dots are transparent pixels
+const smile = `
+    .555555.
+    55555555
+    55055055
+    55055055
+    55555555
+    50555505
+    55000055
+    .555555.`
+
+function draw() {
+    cls(0)
+
+    spr(
+        0, 0, // position X Y
+        8, 8, // sprite Width and Height
+        smile // the pixels
+    )
+}
+```
+
+### Creating and drawing images
+
+```js
+litecanvas()
+
+// lets create the flag of the Japan
+const japan = paint(
+    48, 32, // image width and height
+    function () {
+        // the result of this drawings
+        // goes to an offscreen canvas
+        rectfill(0, 0, 48, 32, 3)
+        circfill(24, 16, 8, 4)
+    }, {
+        // you can scale your image
+        // by default, scale=1
+        scale: 4
+    }
+)
+
+function draw() {
+    cls(0)
+
+    // now the japan variable holds a image
+    image(W/2 - japan.width/2, H/2 - japan.height/2, japan)
+}
+```
+
+It's very useful when you need to draw something the same way every time. This way, you create an image of that drawing, working as a kind of cache.
+
+You can also use the `image()` function to draw PNG/JPG images, but you'll need to load them first:
+
+```js
+litecanvas()
+
+let PngImage
+
+function init() {
+    // load a image from its URL
+    const img = new Image()
+    img.onload = () => {
+        PngImage = img
+    }
+    img.src = 'https://litecanvas.js.org/icons/icon-128.png'
+}
+
+function draw() {
+    cls(0)
+
+    if (!PngImage) {
+        // if not loaded, show this message
+        text(10, 10, 'Loading image...')
+    } else {
+        // when loaded, draw the image file
+        image(0, 0, PngImage)
+    }
+}
+```
+
+To help you load multiple assets (images, fonts, music, etc.), you can I recommend you the [Asset Loader Plugin](https://github.com/litecanvas/plugin-asset-loader).
+
 ### Keyboard
 
 ```js

package/dist/dist.dev.js

@@ -32,7 +32,7 @@
   };
 
   // src/version.js
-  var version = "0.98.3";
+  var version = "0.99.0";
 
   // src/index.js
   function litecanvas(settings = {}) {
@@ -50,7 +50,7 @@
       keyboardEvents: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
+    let _initialized = false, _paused = true, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
     const instance = {
       /** @type {number} */
       W: 0,
@@ -283,8 +283,8 @@
        */
       rseed(value) {
         DEV: assert(
-          null == value || isNumber(value) && value >= 0,
-          "[litecanvas] rseed() 1st param must be a positive number or zero"
+          isNumber(value) && value >= 0,
+          "[litecanvas] rseed() 1st param must be a positive integer or zero"
         );
         _rngSeed = ~~value;
       },
@@ -995,7 +995,7 @@
         _fpsInterval = 1e3 / ~~value;
       },
       /**
-       * Returns information about that engine instance.
+       * Returns information about the engine instance.
        *
        * @param {number|string} index
        * @returns {any}
@@ -1028,43 +1028,32 @@
           _rngSeed,
           // 10
           _fontSize,
-          //  11
-          _fontFamily
+          // 11
+          _fontFamily,
+          // 12
+          _colorPaletteState
         ];
         const data = { index, value: internals[index] };
         instance.emit("stat", data);
         return data.value;
       },
-      /**
-       * Stops the litecanvas instance and remove all event listeners.
-       */
-      quit() {
-        instance.pause();
-        instance.emit("quit");
-        _eventListeners = {};
-        for (const removeListener of _browserEventListeners) {
-          removeListener();
-        }
-        if (settings.global) {
-          for (const key in instance) {
-            delete root[key];
-          }
-          delete root.ENGINE;
-        }
-        _initialized = false;
-      },
       /**
        * Pauses the engine loop (update & draw).
        */
       pause() {
+        _paused = true;
         cancelAnimationFrame(_rafid);
-        _rafid = 0;
       },
       /**
        * Resumes (if paused) the engine loop.
        */
       resume() {
-        if (_initialized && !_rafid) {
+        DEV: assert(
+          _initialized,
+          '[litecanvas] resume() cannot be called before the "init" event and neither after the quit() function'
+        );
+        if (_initialized && _paused) {
+          _paused = false;
           _accumulated = _fpsInterval;
           _lastFrameTime = Date.now();
           _rafid = raf(drawFrame);
@@ -1076,7 +1065,26 @@
        * @returns {boolean}
        */
       paused() {
-        return !_rafid;
+        return _paused;
+      },
+      /**
+       * Shutdown the litecanvas instance and remove all event listeners.
+       */
+      quit() {
+        instance.emit("quit");
+        instance.pause();
+        _initialized = false;
+        _eventListeners = {};
+        for (const removeListener of _browserEventListeners) {
+          removeListener();
+        }
+        if (settings.global) {
+          for (const key in instance) {
+            delete root[key];
+          }
+          delete root.ENGINE;
+        }
+        DEV: console.warn("[litecanvas] quit() terminated a Litecanvas instance.");
       }
     };
     for (const k of _mathFunctions.split(",")) {
@@ -1428,7 +1436,7 @@
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));
     } else {
-      raf(init);
+      _rafid = raf(init);
     }
     return instance;
   }

package/dist/dist.js

@@ -42,7 +42,7 @@
       keyboardEvents: true
     };
     settings = Object.assign(defaults, settings);
-    let _initialized = false, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
+    let _initialized = false, _paused = true, _canvas, _scale = 1, _ctx, _outline_fix = 0.5, _timeScale = 1, _lastFrameTime, _fpsInterval = 1e3 / 60, _accumulated, _rafid, _fontFamily = "sans-serif", _fontSize = 20, _rngSeed = Date.now(), _colorPalette = defaultPalette, _colorPaletteState = [], _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1], _coreEvents = "init,update,draw,tap,untap,tapping,tapped,resized", _mathFunctions = "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp", _eventListeners = {};
     const instance = {
       /** @type {number} */
       W: 0,
@@ -687,7 +687,7 @@
         _fpsInterval = 1e3 / ~~value;
       },
       /**
-       * Returns information about that engine instance.
+       * Returns information about the engine instance.
        *
        * @param {number|string} index
        * @returns {any}
@@ -716,43 +716,28 @@
           _rngSeed,
           // 10
           _fontSize,
-          //  11
-          _fontFamily
+          // 11
+          _fontFamily,
+          // 12
+          _colorPaletteState
         ];
         const data = { index, value: internals[index] };
         instance.emit("stat", data);
         return data.value;
       },
-      /**
-       * Stops the litecanvas instance and remove all event listeners.
-       */
-      quit() {
-        instance.pause();
-        instance.emit("quit");
-        _eventListeners = {};
-        for (const removeListener of _browserEventListeners) {
-          removeListener();
-        }
-        if (settings.global) {
-          for (const key in instance) {
-            delete root[key];
-          }
-          delete root.ENGINE;
-        }
-        _initialized = false;
-      },
       /**
        * Pauses the engine loop (update & draw).
        */
       pause() {
+        _paused = true;
         cancelAnimationFrame(_rafid);
-        _rafid = 0;
       },
       /**
        * Resumes (if paused) the engine loop.
        */
       resume() {
-        if (_initialized && !_rafid) {
+        if (_initialized && _paused) {
+          _paused = false;
           _accumulated = _fpsInterval;
           _lastFrameTime = Date.now();
           _rafid = raf(drawFrame);
@@ -764,7 +749,25 @@
        * @returns {boolean}
        */
       paused() {
-        return !_rafid;
+        return _paused;
+      },
+      /**
+       * Shutdown the litecanvas instance and remove all event listeners.
+       */
+      quit() {
+        instance.emit("quit");
+        instance.pause();
+        _initialized = false;
+        _eventListeners = {};
+        for (const removeListener of _browserEventListeners) {
+          removeListener();
+        }
+        if (settings.global) {
+          for (const key in instance) {
+            delete root[key];
+          }
+          delete root.ENGINE;
+        }
       }
     };
     for (const k of _mathFunctions.split(",")) {
@@ -1076,7 +1079,7 @@
     if ("loading" === document.readyState) {
       on(root, "DOMContentLoaded", () => raf(init));
     } else {
-      raf(init);
+      _rafid = raf(init);
     }
     return instance;
   }

package/dist/dist.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.98.3",
+    "version": "0.99.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

@@ -48,6 +48,8 @@ export default function litecanvas(settings = {}) {
 
     let /** @type {boolean} */
         _initialized = false,
+        /** @type {boolean} */
+        _paused = true,
         /** @type {HTMLCanvasElement} _canvas */
         _canvas,
         /** @type {number} */
@@ -351,10 +353,9 @@ export default function litecanvas(settings = {}) {
          */
         rseed(value) {
             DEV: assert(
-                null == value || (isNumber(value) && value >= 0),
-                '[litecanvas] rseed() 1st param must be a positive number or zero'
+                isNumber(value) && value >= 0,
+                '[litecanvas] rseed() 1st param must be a positive integer or zero'
             )
-
             _rngSeed = ~~value
         },
 
@@ -1057,6 +1058,7 @@ export default function litecanvas(settings = {}) {
                 'string' === typeof eventName,
                 '[litecanvas] emit() 1st param must be a string'
             )
+
             if (_initialized) {
                 eventName = lowerCase(eventName)
 
@@ -1157,7 +1159,7 @@ export default function litecanvas(settings = {}) {
         },
 
         /**
-         * Returns information about that engine instance.
+         * Returns information about the engine instance.
          *
          * @param {number|string} index
          * @returns {any}
@@ -1191,8 +1193,10 @@ export default function litecanvas(settings = {}) {
                 _rngSeed,
                 // 10
                 _fontSize,
-                //  11
+                // 11
                 _fontFamily,
+                // 12
+                _colorPaletteState,
             ]
 
             const data = { index, value: internals[index] }
@@ -1203,49 +1207,24 @@ export default function litecanvas(settings = {}) {
             return data.value
         },
 
-        /**
-         * Stops the litecanvas instance and remove all event listeners.
-         */
-        quit() {
-            // stop the game loop (update & draw)
-            instance.pause()
-
-            // emit "quit" event to manual clean ups
-            instance.emit('quit')
-
-            // clear all engine event listeners
-            _eventListeners = {}
-
-            // clear all browser event listeners
-            for (const removeListener of _browserEventListeners) {
-                removeListener()
-            }
-
-            // maybe clear global context
-            if (settings.global) {
-                for (const key in instance) {
-                    delete root[key]
-                }
-                delete root.ENGINE
-            }
-
-            // unset that flag
-            _initialized = false
-        },
-
         /**
          * Pauses the engine loop (update & draw).
          */
         pause() {
+            _paused = true
             cancelAnimationFrame(_rafid)
-            _rafid = 0
         },
 
         /**
          * Resumes (if paused) the engine loop.
          */
         resume() {
-            if (_initialized && !_rafid) {
+            DEV: assert(
+                _initialized,
+                '[litecanvas] resume() cannot be called before the "init" event and neither after the quit() function'
+            )
+            if (_initialized && _paused) {
+                _paused = false
                 _accumulated = _fpsInterval
                 _lastFrameTime = Date.now()
                 _rafid = raf(drawFrame)
@@ -1258,7 +1237,39 @@ export default function litecanvas(settings = {}) {
          * @returns {boolean}
          */
         paused() {
-            return !_rafid
+            return _paused
+        },
+
+        /**
+         * Shutdown the litecanvas instance and remove all event listeners.
+         */
+        quit() {
+            // emit "quit" event to manual clean ups
+            instance.emit('quit')
+
+            // stop the game loop (update & draw)
+            instance.pause()
+
+            // deinitialize the engine
+            _initialized = false
+
+            // clear all engine event listeners
+            _eventListeners = {}
+
+            // clear all browser event listeners
+            for (const removeListener of _browserEventListeners) {
+                removeListener()
+            }
+
+            // maybe clear global context
+            if (settings.global) {
+                for (const key in instance) {
+                    delete root[key]
+                }
+                delete root.ENGINE
+            }
+
+            DEV: console.warn('[litecanvas] quit() terminated a Litecanvas instance.')
         },
     }
 
@@ -1714,7 +1725,7 @@ export default function litecanvas(settings = {}) {
     if ('loading' === document.readyState) {
         on(root, 'DOMContentLoaded', () => raf(init))
     } else {
-        raf(init)
+        _rafid = raf(init)
     }
 
     return instance

package/src/version.js

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

package/types/global.d.ts

@@ -583,9 +583,9 @@ declare global {
      */
     function framerate(fps: number): void
     /**
-     * Returns information about that engine instance.
+     * Returns information about the engine instance.
      *
-     * - n = 0: the settings passed to that instance
+     * - n = 0: the settings passed to this instance
      * - n = 1: returns true if the "init" event has already been emitted
      * - n = 2: the current delta time (dt)
      * - n = 3: the current canvas element scale (not the context 2D scale)
@@ -597,15 +597,12 @@ declare global {
      * - n = 9: the current RNG state
      * - n = 10: the current font size
      * - n = 11: the current font family
+     * - n = 12: the current state of the color palette
      * - n = *any other value*: probably returns undefined
      *
-     * @param n
+     * @param index
      */
-    function stat(n: number): any
-    /**
-     * Shutdown the litecanvas instance and remove all event listeners.
-     */
-    function quit(): void
+    function stat(index: number | string): any
     /**
      * Pauses the engine loop (update & draw).
      */
@@ -618,4 +615,8 @@ declare global {
      * Returns `true` if the engine loop is paused.
      */
     function paused(): boolean
+    /**
+     * Shutdown the litecanvas instance and remove all event listeners.
+     */
+    function quit(): void
 }

package/types/types.d.ts

@@ -573,9 +573,9 @@ type LitecanvasInstance = {
      */
     framerate(fps: number): void
     /**
-     * Returns information about that engine instance.
+     * Returns information about the engine instance.
      *
-     * - n = 0: the settings passed to that instance
+     * - n = 0: the settings passed to this instance
      * - n = 1: returns true if the "init" event has already been emitted
      * - n = 2: the current delta time (dt)
      * - n = 3: the current canvas element scale (not the context 2D scale)
@@ -587,15 +587,12 @@ type LitecanvasInstance = {
      * - n = 9: the current RNG state
      * - n = 10: the current font size
      * - n = 11: the current font family
+     * - n = 12: the current state of the color palette
      * - n = *any other value*: probably returns undefined
      *
-     * @param n
+     * @param index
      */
-    stat(n: number): any
-    /**
-     * Stops the litecanvas instance and remove all event listeners.
-     */
-    quit(): void
+    stat(index: number | string): any
     /**
      * Pauses the engine loop (update & draw).
      */
@@ -608,6 +605,10 @@ type LitecanvasInstance = {
      * Returns `true` if the engine loop is paused.
      */
     paused(): boolean
+    /**
+     * Shutdown the litecanvas instance and remove all event listeners.
+     */
+    quit(): void
 }
 
 type LitecanvasOptions = {