@litecanvas/utils 0.14.0 → 0.16.0

package/dist/tween.js

@@ -0,0 +1,190 @@
+(() => {
+  var __defProp = Object.defineProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+
+  // src/_global.js
+  globalThis.utils = globalThis.utils || {};
+  globalThis.utils.global = () => {
+    for (const key in globalThis.utils) {
+      if ("global" === key) continue;
+      globalThis[key] = globalThis.utils[key];
+    }
+  };
+
+  // src/tween/index.js
+  var tween_exports = {};
+  __export(tween_exports, {
+    BACK_IN: () => BACK_IN,
+    BACK_IN_OUT: () => BACK_IN_OUT,
+    BACK_OUT: () => BACK_OUT,
+    BOUNCE_IN: () => BOUNCE_IN,
+    BOUNCE_IN_OUT: () => BOUNCE_IN_OUT,
+    BOUNCE_OUT: () => BOUNCE_OUT,
+    EASE_IN: () => EASE_IN,
+    EASE_IN_OUT: () => EASE_IN_OUT,
+    EASE_OUT: () => EASE_OUT,
+    ELASTIC_IN: () => ELASTIC_IN,
+    ELASTIC_IN_OUT: () => ELASTIC_IN_OUT,
+    ELASTIC_OUT: () => ELASTIC_OUT,
+    LINEAR: () => LINEAR,
+    tween: () => tween
+  });
+
+  // node_modules/litecanvas/src/zzfx.js
+  globalThis.zzfxV = 1;
+
+  // src/tween/index.js
+  var HALF_PI = Math.PI / 2;
+  var tween = (object, prop, toValue, duration = 1, easing = LINEAR) => {
+    return new TweenController(object, prop, toValue, duration, easing);
+  };
+  var LINEAR = (n) => n;
+  var EASE_IN = (n) => n * n;
+  var EASE_OUT = (n) => -n * (n - 2);
+  var EASE_IN_OUT = (n) => {
+    if (n < 0.5) {
+      return 2 * n * n;
+    }
+    return -2 * n * n + 4 * n - 1;
+  };
+  var BACK_IN = (n) => n * n * n - n * Math.sin(n * Math.PI);
+  var BACK_OUT = (n) => {
+    let a = 1 - n;
+    return 1 - (a * a * a - a * Math.sin(a * Math.PI));
+  };
+  var BACK_IN_OUT = (n) => {
+    if (n < 0.5) {
+      let a2 = 2 * n;
+      return 0.5 * (a2 * a2 * a2 - a2 * Math.sin(a2 * Math.PI));
+    }
+    let a = 1 - (2 * n - 1);
+    return 0.5 * (1 - (a * a * a - a * Math.sin(n * Math.PI))) + 0.5;
+  };
+  var ELASTIC_IN = (n) => {
+    return Math.sin(13 * HALF_PI * n) * Math.pow(2, 10 * (n - 1));
+  };
+  var ELASTIC_OUT = (n) => {
+    return Math.sin(-13 * HALF_PI * (n + 1)) * Math.pow(2, -10 * n) + 1;
+  };
+  var ELASTIC_IN_OUT = (n) => {
+    if (n < 0.5) {
+      let a2 = Math.sin(13 * HALF_PI * (2 * n));
+      let b2 = Math.pow(2, 10 * (2 * n - 1));
+      return 0.5 * a2 * b2;
+    }
+    let a = Math.sin(-13 * HALF_PI * (2 * n - 1 + 1));
+    let b = Math.pow(2, -10 * (2 * n - 1));
+    return 0.5 * (a * b + 2);
+  };
+  var BOUNCE_IN = (n) => 1 - BOUNCE_OUT(1 - n);
+  var BOUNCE_OUT = (n) => {
+    if (n < 4 / 11) {
+      return 121 * n * n / 16;
+    } else if (n < 8 / 11) {
+      return 363 / 40 * n * n - 99 / 10 * n + 17 / 5;
+    } else if (n < 9 / 10) {
+      return 4356 / 361 * n * n - 35442 / 1805 * n + 16061 / 1805;
+    }
+    return 54 / 5 * n * n - 513 / 25 * n + 268 / 25;
+  };
+  var BOUNCE_IN_OUT = (n) => {
+    if (n < 0.5) {
+      return 0.5 * BOUNCE_IN(n * 2);
+    }
+    return 0.5 * BOUNCE_OUT(n * 2 - 1) + 0.5;
+  };
+  var TweenController = class {
+    /** @type {boolean} */
+    running = false;
+    /** @type {*} */
+    _o;
+    /** @type {string} */
+    _p;
+    /** @type {number} */
+    _x;
+    /** @type {number} */
+    _d;
+    /** @type {(x: number) => number} */
+    _e;
+    /** @type {Function[]} */
+    _cb = [];
+    /** @type {number} */
+    _t = 0;
+    /** @type {Function} */
+    _u = 0;
+    /** @type {LitecanvasInstance} */
+    _lc;
+    /**
+     * @param {*} object
+     * @param {string} prop
+     * @param {number} toValue
+     * @param {number} duration
+     * @param {(x: number) => number} easing
+     */
+    constructor(object, prop, toValue, duration, easing) {
+      this._o = object;
+      this._p = prop;
+      this._x = toValue;
+      this._d = duration;
+      this._e = easing;
+    }
+    /**
+     *
+     * @param {LitecanvasInstance} engine
+     */
+    start(engine = globalThis) {
+      if (!this.running) {
+        this.stop();
+      }
+      const fromValue = this._o[this._p] || 0;
+      this._lc = engine;
+      this._u = engine.listen("update", (dt) => {
+        this._o[this._p] = engine.lerp(
+          fromValue,
+          this._x,
+          this._e(this._t / this._d)
+        );
+        this._t += dt;
+        if (this._t >= this._d) {
+          this._o[this._p] = this._x;
+          this.stop();
+        }
+      });
+      this.running = true;
+      return this;
+    }
+    /**
+     * @param {Function} callback
+     */
+    onEnd(callback) {
+      this._cb.push(callback);
+    }
+    /**
+     * @param {boolean} completed if `false` don't call the `onEnd()` registered callbacks.
+     * @returns
+     */
+    stop(completed = true) {
+      if (!this.running || !this._u) return;
+      this.running = false;
+      this._u();
+      if (completed) {
+        for (const callback of this._cb) {
+          callback(this._o);
+        }
+      }
+    }
+    reset() {
+      this._cb.length = 0;
+      this.stop();
+    }
+    get progress() {
+      return this.running ? this._t / this._d : 0;
+    }
+  };
+
+  // src/tween/_web.js
+  globalThis.utils = Object.assign(globalThis.utils || {}, tween_exports);
+})();

package/dist/tween.min.js

@@ -0,0 +1 @@
+(()=>{var p=Object.defineProperty;var h=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let t in globalThis.utils)t!=="global"&&(globalThis[t]=globalThis.utils[t])};var l={};h(l,{BACK_IN:()=>x,BACK_IN_OUT:()=>m,BACK_OUT:()=>E,BOUNCE_IN:()=>f,BOUNCE_IN_OUT:()=>w,BOUNCE_OUT:()=>n,EASE_IN:()=>_,EASE_IN_OUT:()=>T,EASE_OUT:()=>g,ELASTIC_IN:()=>I,ELASTIC_IN_OUT:()=>y,ELASTIC_OUT:()=>b,LINEAR:()=>c,tween:()=>d});globalThis.zzfxV=1;var r=Math.PI/2,d=(t,e,o,s=1,i=c)=>new a(t,e,o,s,i),c=t=>t,_=t=>t*t,g=t=>-t*(t-2),T=t=>t<.5?2*t*t:-2*t*t+4*t-1,x=t=>t*t*t-t*Math.sin(t*Math.PI),E=t=>{let e=1-t;return 1-(e*e*e-e*Math.sin(e*Math.PI))},m=t=>{if(t<.5){let o=2*t;return .5*(o*o*o-o*Math.sin(o*Math.PI))}let e=1-(2*t-1);return .5*(1-(e*e*e-e*Math.sin(t*Math.PI)))+.5},I=t=>Math.sin(13*r*t)*Math.pow(2,10*(t-1)),b=t=>Math.sin(-13*r*(t+1))*Math.pow(2,-10*t)+1,y=t=>{if(t<.5){let s=Math.sin(13*r*(2*t)),i=Math.pow(2,10*(2*t-1));return .5*s*i}let e=Math.sin(-13*r*(2*t-1+1)),o=Math.pow(2,-10*(2*t-1));return .5*(e*o+2)},f=t=>1-n(1-t),n=t=>t<4/11?121*t*t/16:t<8/11?363/40*t*t-99/10*t+17/5:t<9/10?4356/361*t*t-35442/1805*t+16061/1805:54/5*t*t-513/25*t+268/25,w=t=>t<.5?.5*f(t*2):.5*n(t*2-1)+.5,a=class{running=!1;_o;_p;_x;_d;_e;_cb=[];_t=0;_u=0;_lc;constructor(e,o,s,i,u){this._o=e,this._p=o,this._x=s,this._d=i,this._e=u}start(e=globalThis){this.running||this.stop();let o=this._o[this._p]||0;return this._lc=e,this._u=e.listen("update",s=>{this._o[this._p]=e.lerp(o,this._x,this._e(this._t/this._d)),this._t+=s,this._t>=this._d&&(this._o[this._p]=this._x,this.stop())}),this.running=!0,this}onEnd(e){this._cb.push(e)}stop(e=!0){if(!(!this.running||!this._u)&&(this.running=!1,this._u(),e))for(let o of this._cb)o(this._o)}reset(){this._cb.length=0,this.stop()}get progress(){return this.running?this._t/this._d:0}};globalThis.utils=Object.assign(globalThis.utils||{},l);})();

package/dist/vector.js

@@ -120,8 +120,8 @@
     if (isVector(x)) {
       return vecDiv(v, x.x, x.y);
     }
-    v.x /= x;
-    v.y /= y;
+    v.x /= x || 1;
+    v.y /= y || 1;
     return v;
   };
   var vecRotate = (v, radians) => {

package/dist/vector.min.js

@@ -1 +1 @@
-(()=>{var A=Object.defineProperty;var C=(t,e)=>{for(var o in e)A(t,o,{get:e[o],enumerable:!0})};var h={};C(h,{DOWN:()=>K,LEFT:()=>Q,ONE:()=>k,RIGHT:()=>J,UP:()=>z,Vector:()=>s,ZERO:()=>q,vec:()=>c,vecAbs:()=>j,vecAdd:()=>i,vecAngle:()=>P,vecAngleBetween:()=>w,vecCeil:()=>B,vecClamp:()=>H,vecCross:()=>U,vecDist:()=>L,vecDist2:()=>N,vecDiv:()=>y,vecDot:()=>T,vecEq:()=>u,vecFloor:()=>F,vecIsZero:()=>W,vecLerp:()=>Z,vecLimit:()=>b,vecMag:()=>R,vecMag2:()=>D,vecMove:()=>V,vecMult:()=>x,vecNorm:()=>l,vecRand:()=>$,vecReflect:()=>O,vecRotate:()=>I,vecRound:()=>G,vecSet:()=>g,vecSetMag:()=>S,vecSub:()=>a});var p=Math.sqrt,f=Math.cos,d=Math.sin,E=2*Math.PI,s=class{x;y;constructor(e=0,o=e){this.x=e,this.y=o}toString(){return`Vector (${this.x}, ${this.y})`}},n=t=>t instanceof s,c=(t=0,e=t)=>(n(t)&&(e=t.y,t=t.x),new s(t,e)),u=(t,e,o=e)=>n(e)?u(t,e.x,e.y):t.x===e&&t.y===o,g=(t,e,o=e)=>(n(e)?g(t,e.x,e.y):(t.x=e,t.y=o),t),i=(t,e,o=e)=>n(e)?i(t,e.x,e.y):(t.x+=e,t.y+=o,t),a=(t,e,o=e)=>n(e)?a(t,e.x,e.y):(t.x-=e,t.y-=o,t),x=(t,e,o=e)=>n(e)?x(t,e.x,e.y):(t.x*=e,t.y*=o,t),y=(t,e,o=e)=>n(e)?y(t,e.x,e.y):(t.x/=e,t.y/=o,t),I=(t,e)=>{let o=f(e),r=d(e);return t.x=o*t.x-r*t.y,t.y=r*t.x+o*t.y,t},O=(t,e)=>{let o=l(c(e));return a(t,x(o,2*T(t,o)))},S=(t,e)=>(l(t),x(t,e),t),R=t=>p(t.x*t.x+t.y*t.y),D=t=>t.x*t.x+t.y*t.y,l=t=>{let e=R(t);return e>0&&y(t,e),t},b=(t,e=1)=>{let o=D(t);return o>e*e&&(y(t,p(o)),x(t,e)),t},L=(t,e)=>{let o=t.x-e.x,r=t.y-e.y;return p(o*o+r*r)},N=(t,e)=>{let o=t.x-e.x,r=t.y-e.y;return o*o+r*r},P=t=>Math.atan2(t.y,t.x),w=(t,e)=>Math.atan2(e.y-t.y,e.x-t.x),T=(t,e)=>t.x*e.x+t.y*e.y,U=(t,e)=>t.x*e.y-t.y*e.x,Z=(t,e,o)=>(t.x+=(e.x-t.x)*o||0,t.y+=(e.y-t.y)*o||0,t),$=(t=1,e=t,o=globalThis.rand||Math.random)=>{let r=o()*E,M=o()*(e-t)+t;return c(f(r)*M,d(r)*M)},j=t=>(t.x=Math.abs(t.x),t.y=Math.abs(t.y),t),B=t=>(t.x=Math.ceil(t.x),t.y=Math.ceil(t.y),t),F=t=>(t.x=Math.floor(t.x),t.y=Math.floor(t.y),t),G=t=>(t.x=Math.round(t.x),t.y=Math.round(t.y),t),H=(t,e,o)=>(t.x<e.x&&(t.x=e.x),t.x>o.x&&(t.x=o.x),t.y<e.y&&(t.y=e.y),t.y>o.y&&(t.y=o.y),t),V=(t,e,o=1)=>i(t,e.x*o,e.y*o),W=t=>u(t,q),q=c(0,0),k=c(1,1),z=c(0,-1),J=c(1,0),K=c(0,1),Q=c(-1,0);globalThis.utils=Object.assign(globalThis.utils||{},h);})();
+(()=>{var A=Object.defineProperty;var C=(t,e)=>{for(var o in e)A(t,o,{get:e[o],enumerable:!0})};var h={};C(h,{DOWN:()=>K,LEFT:()=>Q,ONE:()=>k,RIGHT:()=>J,UP:()=>z,Vector:()=>s,ZERO:()=>q,vec:()=>c,vecAbs:()=>j,vecAdd:()=>i,vecAngle:()=>P,vecAngleBetween:()=>w,vecCeil:()=>B,vecClamp:()=>H,vecCross:()=>U,vecDist:()=>L,vecDist2:()=>N,vecDiv:()=>y,vecDot:()=>T,vecEq:()=>u,vecFloor:()=>F,vecIsZero:()=>W,vecLerp:()=>Z,vecLimit:()=>b,vecMag:()=>R,vecMag2:()=>D,vecMove:()=>V,vecMult:()=>x,vecNorm:()=>l,vecRand:()=>$,vecReflect:()=>O,vecRotate:()=>I,vecRound:()=>G,vecSet:()=>g,vecSetMag:()=>S,vecSub:()=>a});var p=Math.sqrt,f=Math.cos,d=Math.sin,E=2*Math.PI,s=class{x;y;constructor(e=0,o=e){this.x=e,this.y=o}toString(){return`Vector (${this.x}, ${this.y})`}},n=t=>t instanceof s,c=(t=0,e=t)=>(n(t)&&(e=t.y,t=t.x),new s(t,e)),u=(t,e,o=e)=>n(e)?u(t,e.x,e.y):t.x===e&&t.y===o,g=(t,e,o=e)=>(n(e)?g(t,e.x,e.y):(t.x=e,t.y=o),t),i=(t,e,o=e)=>n(e)?i(t,e.x,e.y):(t.x+=e,t.y+=o,t),a=(t,e,o=e)=>n(e)?a(t,e.x,e.y):(t.x-=e,t.y-=o,t),x=(t,e,o=e)=>n(e)?x(t,e.x,e.y):(t.x*=e,t.y*=o,t),y=(t,e,o=e)=>n(e)?y(t,e.x,e.y):(t.x/=e||1,t.y/=o||1,t),I=(t,e)=>{let o=f(e),r=d(e);return t.x=o*t.x-r*t.y,t.y=r*t.x+o*t.y,t},O=(t,e)=>{let o=l(c(e));return a(t,x(o,2*T(t,o)))},S=(t,e)=>(l(t),x(t,e),t),R=t=>p(t.x*t.x+t.y*t.y),D=t=>t.x*t.x+t.y*t.y,l=t=>{let e=R(t);return e>0&&y(t,e),t},b=(t,e=1)=>{let o=D(t);return o>e*e&&(y(t,p(o)),x(t,e)),t},L=(t,e)=>{let o=t.x-e.x,r=t.y-e.y;return p(o*o+r*r)},N=(t,e)=>{let o=t.x-e.x,r=t.y-e.y;return o*o+r*r},P=t=>Math.atan2(t.y,t.x),w=(t,e)=>Math.atan2(e.y-t.y,e.x-t.x),T=(t,e)=>t.x*e.x+t.y*e.y,U=(t,e)=>t.x*e.y-t.y*e.x,Z=(t,e,o)=>(t.x+=(e.x-t.x)*o||0,t.y+=(e.y-t.y)*o||0,t),$=(t=1,e=t,o=globalThis.rand||Math.random)=>{let r=o()*E,M=o()*(e-t)+t;return c(f(r)*M,d(r)*M)},j=t=>(t.x=Math.abs(t.x),t.y=Math.abs(t.y),t),B=t=>(t.x=Math.ceil(t.x),t.y=Math.ceil(t.y),t),F=t=>(t.x=Math.floor(t.x),t.y=Math.floor(t.y),t),G=t=>(t.x=Math.round(t.x),t.y=Math.round(t.y),t),H=(t,e,o)=>(t.x<e.x&&(t.x=e.x),t.x>o.x&&(t.x=o.x),t.y<e.y&&(t.y=e.y),t.y>o.y&&(t.y=o.y),t),V=(t,e,o=1)=>i(t,e.x*o,e.y*o),W=t=>u(t,q),q=c(0,0),k=c(1,1),z=c(0,-1),J=c(1,0),K=c(0,1),Q=c(-1,0);globalThis.utils=Object.assign(globalThis.utils||{},h);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litecanvas/utils",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Utilities to help build litecanvas games",
   "author": "Luiz Bills <luizbills@pm.me>",
   "license": "MIT",

package/src/actor/README.md

@@ -56,7 +56,7 @@ player.y = 200
 
 ## Actor#scale
 
-Set or get the actor scale/size
+Set or get the actor scale vector
 
 ```js
 // twice bigger
@@ -64,6 +64,36 @@ player.scale.x = 2
 player.scale.y = 2
 ```
 
+## Actor#scaleBy(x, y = x)
+
+```js
+// multiplies the scale (y is optional)
+player.scaleBy(3)
+
+// same as
+player.scale.x *= 3
+player.scale.y *= 3
+```
+
+## Actor#scaleTo(x, y = x)
+
+```js
+// sets the scale (y is optional)
+player.scaleTo(3)
+
+// same as
+player.scale.x = 3
+player.scale.y = 3
+```
+
+## Actor#flipX
+
+If `true` the actor sprite is flipped horizontally. Default is `false`.
+
+## Actor#flipY
+
+If `true` the actor sprite is flipped vertically. Default is `false`.
+
 ## Actor#anchor
 
 Set or get the actor anchor (origin). By default, the anchor is a vector `(0, 0)` (meaning anchor Top Left).

package/src/actor/index.js

@@ -1,11 +1,11 @@
 import { Vector, vec } from "../vector/index.js"
 import "litecanvas"
 
-export const ANCHOR_CENTER = vec(0.5, 0.5)
-export const ANCHOR_TOP_LEFT = vec(0, 0)
-export const ANCHOR_TOP_RIGHT = vec(1, 0)
-export const ANCHOR_BOT_LEFT = vec(0, 1)
-export const ANCHOR_BOT_RIGHT = vec(1, 1)
+export const ANCHOR_CENTER = /** @__PURE__ */ vec(0.5, 0.5)
+export const ANCHOR_TOP_LEFT = /** @__PURE__ */ vec(0, 0)
+export const ANCHOR_TOP_RIGHT = /** @__PURE__ */ vec(1, 0)
+export const ANCHOR_BOT_LEFT = /** @__PURE__ */ vec(0, 1)
+export const ANCHOR_BOT_RIGHT = /** @__PURE__ */ vec(1, 1)
 
 export class Actor {
   /** @type {Image|HTMLCanvasElement|OffscreenCanvas} */
@@ -20,6 +20,12 @@ export class Actor {
   /** @type {Vector} The actor scale */
   _s
 
+  /** @type {boolean} */
+  flipX = false
+
+  /** @type {boolean} */
+  flipY = false
+
   /** @type {number} The actor angle (in radians) */
   angle = 0
 
@@ -105,6 +111,28 @@ export class Actor {
     return this._s
   }
 
+  /**
+   * Sets the actor scale
+   *
+   * @param {number} x
+   * @param {number} [y]
+   */
+  scaleTo(x, y = x) {
+    this._s.x = x
+    this._s.y = y
+  }
+
+  /**
+   * Multiplies the actor scale
+   *
+   * @param {number} x
+   * @param {number} [y]
+   */
+  scaleBy(x, y = x) {
+    this._s.x *= x
+    this._s.y *= y
+  }
+
   /**
    * @returns {number[]}
    */
@@ -117,19 +145,19 @@ export class Actor {
   }
 
   /**
-   * Update the transformation matrix, sets the opacity and draw the actor sprite image.
+   * Draw the actor
    *
    * @param {LitecanvasInstance} [litecanvas]
    */
-  draw(litecanvas = globalThis) {
+  draw(litecanvas = globalThis, saveContext = true) {
     if (this.hidden || this.opacity <= 0) return
 
-    litecanvas.push()
+    if (saveContext) litecanvas.push()
 
     this.transform(litecanvas)
     this.drawImage(litecanvas)
 
-    litecanvas.pop()
+    if (saveContext) litecanvas.pop()
   }
 
   /**
@@ -138,16 +166,21 @@ export class Actor {
   transform(litecanvas) {
     litecanvas.translate(this.pos.x, this.pos.y)
     litecanvas.rotate(this.angle)
-    litecanvas.scale(this._s.x, this._s.y)
+    litecanvas.scale(
+      (this.flipX ? -1 : 1) * this._s.x,
+      (this.flipY ? -1 : 1) * this._s.y
+    )
   }
 
   /**
    * @param {LitecanvasInstance} litecanvas
    */
-  drawImage(litecanvas) {
-    const anchorX = this.sprite.width * this.anchor.x
-    const anchorY = this.sprite.height * this.anchor.y
-    litecanvas.alpha(this.opacity)
-    litecanvas.image(-anchorX, -anchorY, this.sprite)
+  drawImage(litecanvas, alpha = true) {
+    const anchor = this.anchor
+    const x = -this.sprite.width * (this.flipX ? 1 - anchor.x : anchor.x)
+    const y = -this.sprite.height * (this.flipY ? 1 - anchor.y : anchor.y)
+
+    if (alpha) litecanvas.alpha(this.opacity)
+    litecanvas.image(x, y, this.sprite)
   }
 }

package/src/index.js

@@ -5,3 +5,4 @@ export * from "./grid/index.js"
 export * from "./vector/index.js"
 export * from "./actor/index.js"
 export * from "./math/index.js"
+export * from "./tween/index.js"

package/src/math/README.md

@@ -62,6 +62,41 @@ function draw() {
 }
 ```
 
+[See in playground](https://litecanvas.js.org?c=eJwlyrEKwjAUheE9T3HGBKME0UVwEM0mIuqgY4ytBC6JNGlLKXl3bVwOP4evTY7i4k3haYgLRi5V1vjORD4ygEL4bDDi1ZgeWbIsGKtbb5MLvpxcYHKWIldiiuBjwoAtetNVfL5USqKMPu7OV30oyDW2dkR8r083fblL%2FOOBGQaJ9U%2BvBMtfqxAsyg%3D%3D)
+
+## advance
+
+Returns a sequence of numbers from `0` to `size - 1`.
+
+Syntax: `range(size: number): number[]`
+
+```js
+import litecanvas from "litecanvas"
+import { vec, advance } from "@litecanvas/utils"
+
+litecanvas()
+
+function init() {
+  pos = vec(0, CENTERY)
+  vel = vec(0, 0)
+  acc = vec(100, 0)
+}
+
+function update(dt) {
+  advance(pos, vel, acc, dt)
+  if (pos.x > WIDTH) {
+    pos.x = 0
+  }
+}
+
+function draw() {
+  cls(0)
+  circ(pos.x, pos.y, 48, 4)
+}
+```
+
+[See in playground](https://litecanvas.js.org?c=eJxVjjELwjAQhff%2BihtTCKWCg0tdtKCLgxTEMV5SCYS0NGlUpP%2FdS1NQhxvue7yPN3ptXHE33U0YlmdGe4XCBuHoydrRotedBW21Zzm8M4C%2Bc1BBUMhKDrv61NTna048KPPlZSQCcSGrMrHpRzn2UnjFpE9aIYOwqBjpeXTxWOdAMYW6hRgUT9jC5bhvDqkzjyFYQUnf9KeXg3gsi9E4Ng9CPWDy8Ln54rDe0NGwDwbOS1Q%3D)
+
 ## range
 
 Returns a sequence of numbers from `0` to `size - 1`.

package/src/math/advance.js

@@ -0,0 +1,20 @@
+import { Vector, vecMult, vecAdd } from "../vector"
+
+/**
+ * Move a vector (position) using another vectors: velocity and acceleration (optional).
+ * Note: This function changes the position and velocity vectors.
+ *
+ * @param {Vector} position
+ * @param {Vector} velocity
+ * @param {Vector?} acceleration
+ * @param {number?} deltaTime
+ */
+export default advance = (position, velocity, acceleration, deltaTime = 1) => {
+  if (acceleration) {
+    velocity.x += acceleration.x * deltaTime
+    velocity.y += acceleration.y * deltaTime
+  }
+
+  position.x += velocity.x * deltaTime
+  position.y += velocity.y * deltaTime
+}

package/src/math/index.js

@@ -2,3 +2,4 @@ export { default as diff } from "./diff.js"
 export { default as wave } from "./wave.js"
 export { default as fract } from "./fract.js"
 export { default as range } from "./range.js"
+export { default as advance } from "./advance.js"

package/src/tween/README.md

@@ -0,0 +1,181 @@
+# Tween
+
+You can animate object property using the `tween().`
+
+**CDN**: https://unpkg.com/@litecanvas/utils/dist/tween.js
+
+## tween
+
+Animate a object property over time.
+
+Syntax:
+
+```ts
+tween(
+    object: any,
+    prop: string,
+    toValue: number,
+    duration?: number, // default: 1
+    easing?: (n: number) => number // default: LINEAR (see below)
+): TweenController
+```
+
+```js
+// basic example
+// move the rect position x from 100 to 250 over 2 seconds
+import litecanvas from "litecanvas"
+import { tween } from "@litecanvas/utils"
+
+let object
+
+litecanvas()
+
+function init() {
+  pos = {
+    x: 100,
+    y: CENTERY,
+  }
+
+  // create the animation
+  const animation = tween(pos, "x", 250, 2)
+
+  // start the animation
+  animation.start()
+
+  // or just
+  // tween(...).start()
+}
+
+function draw() {
+  cls(0)
+  // draw the animated rect
+  rectfill(pos.x, pos.y, 50, 50, 3)
+}
+```
+
+## TweenController
+
+### TweenController#start()
+
+Starts the animation
+
+Syntax: `.start(engine?: LitecanvasInstance): TweenController`
+
+```js
+// if your litecanvas has config.global = false
+// you need to pass the engine instance to all animations
+const engine = litecanvas({
+    global: false
+})
+
+function init () {
+    engine.tween(...).start(engine)
+}
+```
+
+```js
+// otherwhise, just call `start()` without arguments
+const engine = litecanvas({
+  // global: true // default value
+})
+
+function init () {
+    // just call start
+    engine.tween(...).start()
+}
+```
+
+### TweenController#onEnd()
+
+Enqueues a callback to be executed when the animation finishes.
+
+Syntax: `.onEnd(callback?: (object:any) => void): void`
+
+```js
+// lets imagine a animation
+let anim = tween(...)
+
+// print in console when that tween finishes
+anim.onEnd(() => {
+    console.log('FINISHED')
+})
+```
+
+### TweenController#stop()
+
+Stops the animation.
+
+Syntax: `.stop(complete?: boolean): void`
+
+```js
+// lets imagine a animation with 5 seconds of duration
+let anim = tween(...)
+
+// call `stop()` to interrumpt that animation
+// and call all "onEnd" callbacks
+anim.stop()
+
+// or
+// call `stop()` to interrumpt that animation
+// and NOT call the "onEnd" callbacks
+anim.stop(false)
+```
+
+### TweenController#reset()
+
+Stops the animation and remove all `.onEnd()` registered callbacks.
+
+### TweenController#progress
+
+Returns the percentage of the animation's progress, a number between `0.0` and `1.0`. Where `0` represents 0% and `1` represents 100%.
+
+### Easing Functions
+
+We provide few easing functions:
+
+- `LINEAR` (the default)
+- `EASE_IN`
+- `EASE_OUT`
+- `EASE_IN_OUT`
+- `ELASTIC_IN`
+- `ELASTIC_OUT`
+- `ELASTIC_IN_OUT`
+- `BOUNCE_IN`
+- `BOUNCE_OUT`
+- `BOUNCE_IN_OUT`
+- `BACK_IN`
+- `BACK_OUT`
+- `BACK_IN_OUT`
+
+You should use the `tween()`'s fifth argument to choose a easing function.
+
+```js
+import litecanvas from "litecanvas"
+import { tween, BOUNCE_OUT } from "@litecanvas/utils"
+
+let object
+
+litecanvas()
+
+function init() {
+  pos = {
+    x: 100,
+    y: CENTERY,
+  }
+
+  tween(pos, "x", 250, 2, BOUNCE_OUT).start()
+}
+
+function draw() {
+  cls(0)
+  rectfill(pos.x, pos.y, 50, 50, 3)
+}
+```
+
+[See all Easing Functions in action](https://litecanvas.js.org?c=eJylVEtvGjEQvvMrJpy8zXZD2vSCRCVKaYMaEakh6qGqKrM24Nax0a43sIry3zt%2BLSyQ9lCJRfP2fPONXRkhy2wp9ZxKknQ6uValAU5LoZYlDOCpA3AzmY6HX1OUxsO78c%2FJtBFv72d75ka9Gd7NJqMYGLQjZ7R8uL2fjmLZoBy6GsNw9CVGWrFt9upzC8SUPnDEcTv%2FxXOT%2FeZ1SQK6pBX3qVK5EVrtYh%2BprPhetOQxdlQVBVcGQ3vNxFCRwvCcqkdaEju2jWBm1Ye3vZ5tkVZGlzmVvA8LKkuOfeK4F%2FFUoYQhiRs3qwoaOrlEFX%2FaNRTYwFJKPLiIPqhKytQZt33oeakO0nMH%2F0pDC5v5yHNy2eslaOKKBcO3ycfZNbwGdKRwPZ58vp55LbGpTOfVA8LM5prVGV2vMXG0EpIRd0zjzgtODZ%2FxrZlqxkl3RtdgNOQrqpYczIrD2E0N4ojPuraNBIna4a%2FWDIsQZvwMxAKIR501aBMouKkK1Wkmkm0RiEOYbXfGJgGdZsO58v16rx9Rd9v1AkLKtl6MYw%2BO1lJ8b%2FH%2Bw3afuXMJTzonTs60GitGkNDB%2B0DaieYseZan%2FRJ1g6hG40vt13vt1%2F%2FZ%2Fj4LrKAbsmPg7G8U5LIkbp%2BkUNztOrlySC4uXB3HvF8%2FihtnNWzXJooiJ4G1NIJN8Z6k8C6Jfk9MABh9B8V9W5yF2YTUhZAy7g5WiHNN4c1REQrrQi8LXpYwpwV%2BpS2mwJYqMMuVwiz8%2Bavy6pjpWCGFq1M9Kvv86AXk4cnwTECcuOUYL4495BK%2F3ZN1QFmbJmMvIwtEtQLPzwN1Bw%2FVYHCwEpnkamlWSdjO43fNvh8v3cPTG40rpdck%2Bde2I5I%2FARL3JQ%3D%3D)
+
+## Useful links
+
+- https://en.wikipedia.org/wiki/Linear_interpolation
+- https://gamedev.net/tutorials/programming/general-and-gameplay-programming/a-brief-introduction-to-lerp-r4954/
+- https://easings.net/

package/src/tween/_web.js

@@ -0,0 +1,4 @@
+import "../_global.js"
+import * as tweenUtils from "./index.js"
+
+globalThis.utils = Object.assign(globalThis.utils || {}, tweenUtils)