littlejsengine 1.6.6 → 1.7.1

package/build/littlejs.js

@@ -1,10 +1,12 @@
+// LittleJS - MIT License - Copyright 2021 Frank Force
+
 /** 
  * LittleJS Debug System
- * - Press ~ to show debug overlay with mouse pick
+ * - Press Esc to show debug overlay with mouse pick
  * - Number keys toggle debug functions
  * - +/- apply time scale
  * - Debug primitive rendering
- * - Save a 2d canvas as an image
+ * - Save a 2d canvas as a png image
  * @namespace Debug
  */
 
@@ -34,12 +36,6 @@ const debugPointSize = .5;
  *  @memberof Debug */
 let showWatermark = 1;
 
-/** True if god mode is enabled, handle this however you want
- *  @type {Boolean}
- *  @default
- *  @memberof Debug */
-let godMode = 0;
-
 /** Key code used to toggle debug mode, Esc by default
  *  @type {Boolean}
  *  @default
@@ -144,11 +140,27 @@ function debugClear() { debugPrimitives = []; }
 /** Save a canvas to disk 
  *  @param {HTMLCanvasElement} canvas
  *  @param {String}            [filename]
+ *  @param {String}            [type='image/png']
+ *  @memberof Debug */
+function debugSaveCanvas(canvas, filename=engineName, type='image/png')
+{ debugSaveDataURL(canvas.toDataURL(type), filename); }
+
+/** Save a text file to disk 
+ *  @param {String}     text
+ *  @param {String}     [filename]
+ *  @param {String}     [type='text/plain']
  *  @memberof Debug */
-function debugSaveCanvas(canvas, filename = engineName + '.png')
+function debugSaveText(text, filename=engineName, type='text/plain')
+{ debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
+
+/** Save a data url to disk 
+ *  @param {String}     dataURL
+ *  @param {String}     filename
+ *  @memberof Debug */
+function debugSaveDataURL(dataURL, filename)
 {
-    downloadLink.download = 'screenshot.png';
-    downloadLink.href = canvas.toDataURL('image/png').replace('image/png','image/octet-stream');
+    downloadLink.download = filename;
+    downloadLink.href = dataURL;
     downloadLink.click();
 }
 
@@ -180,7 +192,7 @@ function debugUpdate()
         if (keyWasPressed(51)) // 3
             debugGamepads = !debugGamepads;
         if (keyWasPressed(52)) // 4
-            godMode = !godMode;
+            debugRaycast = !debugRaycast;
         if (keyWasPressed(53)) // 5
             debugTakeScreenshot = 1;
         //if (keyWasPressed(54)) // 6
@@ -359,8 +371,8 @@ function debugRender()
             overlayContext.fillText('2: Debug Particles', x, y += h);
             overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
             overlayContext.fillText('3: Debug Gamepads', x, y += h);
-            overlayContext.fillStyle = godMode ? '#f00' : '#fff';
-            overlayContext.fillText('4: God Mode', x, y += h);
+            overlayContext.fillStyle = debugRaycast ? '#f00' : '#fff';
+            overlayContext.fillText('4: Debug Raycasts', x, y += h);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText('5: Save Screenshot', x, y += h);
 
@@ -385,19 +397,20 @@ function debugRender()
         {
             overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
             overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
-            overlayContext.fillText(godMode ? 'God Mode' : '', x, y += h);
+            overlayContext.fillText(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
             overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
     
         overlayContext.restore();
     }
-}
+}
 /**
  * LittleJS Utility Classes and Functions
  * - General purpose math library
  * - Vector2 - fast, simple, easy 2D vector class
  * - Color - holds a rgba color with some math functions
  * - Timer - tracks time automatically
+ * - RandomGenerator - seeded random number generator
  * @namespace Utilities
  */
 
@@ -413,34 +426,34 @@ const PI = Math.PI;
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-function abs(a) { return a < 0 ? -a : a; }
+function abs(value) { return Math.abs(value); }
 
 /** Returns lowest of two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function min(a, b) { return a < b ?  a : b; }
+function min(valueA, valueB) { return Math.min(valueA, valueB); }
 
 /** Returns highest of two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function max(a, b) { return a > b ?  a : b; }
+function max(valueA, valueB) { return Math.max(valueA, valueB); }
 
 /** Returns the sign of value passed in (also returns 1 if 0)
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-function sign(a) { return a < 0 ? -1 : 1; }
+function sign(value) { return Math.sign(value); }
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {Number} dividend
  *  @param {Number} [divisor=1]
  *  @return {Number}
  *  @memberof Utilities */
-function mod(a, b=1) { return ((a % b) + b) % b; }
+function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
 
 /** Clamps the value beween max and min
  *  @param {Number} value
@@ -448,47 +461,83 @@ function mod(a, b=1) { return ((a % b) + b) % b; }
  *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-function clamp(v, min=0, max=1)
-{ return v < min ? min : v > max ? max : v; }
+function clamp(value, min=0, max=1) { return value < min ? min : value > max ? max : value; }
 
-/** Returns what percentage the value is between max and min
+/** Returns what percentage the value is between valueA and valueB
  *  @param {Number} value
- *  @param {Number} [min=0]
- *  @param {Number} [max=1]
+ *  @param {Number} valueA
+ *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function percent(v, min=0, max=1)
-{ return max-min ? clamp((v-min) / (max-min)) : 0; }
+function percent(value, valueA, valueB)
+{ return valueB-valueA ? clamp((value-valueA) / (valueB-valueA)) : 0; }
 
-/** Linearly interpolates the percent value between max and min
+/** Linearly interpolates between values passed in using percent
  *  @param {Number} percent
- *  @param {Number} [min=0]
- *  @param {Number} [max=1]
+ *  @param {Number} valueA
+ *  @param {Number} valueB
  *  @return {Number}
  *  @memberof Utilities */
-function lerp(p, min=0, max=1){ return min + clamp(p) * (max-min); }
+function lerp(percent, valueA, valueB) { return valueA + clamp(percent) * (valueB-valueA); }
+
+/** Returns signed wrapped distance between the two values passed in
+ *  @param {Number} valueA
+ *  @param {Number} valueB
+ *  @param {Number} [wrapSize=1]
+ *  @returns {Number}
+ *  @memberof Utilities */
+function distanceWrap(valueA, valueB, wrapSize=1)
+{ const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
+
+/** Linearly interpolates between values passed in with wrappping
+ *  @param {Number} percent
+ *  @param {Number} valueA
+ *  @param {Number} valueB
+ *  @param {Number} [wrapSize=1]
+ *  @returns {Number}
+ *  @memberof Utilities */
+function lerpWrap(percent, valueA, valueB, wrapSize=1)
+{ return valueB + clamp(percent) * distanceWrap(valueA, valueB, wrapSize); }
+
+/** Returns signed wrapped distance between the two angles passed in
+ *  @param {Number} angleA
+ *  @param {Number} angleB
+ *  @returns {Number}
+ *  @memberof Utilities */
+function distanceAngle(angleA, angleB) { distanceWrap(angleA, angleB, 2*PI); }
+
+/** Linearly interpolates between the angles passed in with wrappping
+ *  @param {Number} percent
+ *  @param {Number} angleA
+ *  @param {Number} angleB
+ *  @returns {Number}
+ *  @memberof Utilities */
+function lerpAngle(percent, angleA, angleB) { return lerpWrap(percent, angleA, angleB, 2*PI); }
 
 /** Applies smoothstep function to the percentage value
- *  @param {Number} value
+ *  @param {Number} percent
  *  @return {Number}
  *  @memberof Utilities */
-function smoothStep(p) { return p * p * (3 - 2 * p); }
+function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
 
 /** Returns the nearest power of two not less then the value
  *  @param {Number} value
  *  @return {Number}
  *  @memberof Utilities */
-function nearestPowerOfTwo(v) { return 2**Math.ceil(Math.log2(v)); }
+function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
  *  @param {Vector2} pointA  - Center of box A
  *  @param {Vector2} sizeA   - Size of box A
  *  @param {Vector2} pointB  - Center of box B
- *  @param {Vector2} [sizeB] - Size of box B
+ *  @param {Vector2} sizeB   - Size of box B
  *  @return {Boolean}        - True if overlapping
  *  @memberof Utilities */
-function isOverlapping(pA, sA, pB, sB)
-{ return abs(pA.x - pB.x)*2 < sA.x + sB.x && abs(pA.y - pB.y)*2 < sA.y + sB.y; }
+function isOverlapping(pointA, sizeA, pointB, sizeB)
+{ 
+    return abs(pointA.x - pointB.x)*2 < sizeA.x + sizeB.x 
+        && abs(pointA.y - pointB.y)*2 < sizeA.y + sizeB.y;
+}
 
 /** Returns an oscillating wave between 0 and amplitude with frequency of 1 Hz by default
  *  @param {Number} [frequency=1] - Frequency of the wave in Hz
@@ -515,20 +564,26 @@ function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
  *  @param {Number} [valueB=0]
  *  @return {Number}
  *  @memberof Random */
-function rand(a=1, b=0) { return b + (a-b)*Math.random(); }
+function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valueB); }
 
 /** Returns a floored random value the two values passed in
- *  @param {Number} [valueA=1]
+ *  @param {Number} valueA
  *  @param {Number} [valueB=0]
  *  @return {Number}
  *  @memberof Random */
-function randInt(a=1, b=0) { return rand(a,b)|0; }
+function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
 
 /** Randomly returns either -1 or 1
  *  @return {Number}
  *  @memberof Random */
 function randSign() { return randInt(2) * 2 - 1; }
 
+/** Returns a random Vector2 with the passed in length
+ *  @param {Number} [length=1]
+ *  @return {Vector2}
+ *  @memberof Random */
+function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
+
 /** Returns a random Vector2 within a circular shape
  *  @param {Number} [radius=1]
  *  @param {Number} [minRadius=0]
@@ -537,44 +592,62 @@ function randSign() { return randInt(2) * 2 - 1; }
 function randInCircle(radius=1, minRadius=0)
 { return radius > 0 ? randVector(radius * rand(minRadius / radius, 1)**.5) : new Vector2; }
 
-/** Returns a random Vector2 with the passed in length
- *  @param {Number} [length=1]
- *  @return {Vector2}
- *  @memberof Random */
-function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
-
 /** Returns a random color between the two passed in colors, combine components if linear
  *  @param {Color}   [colorA=Color()]
  *  @param {Color}   [colorB=Color(0,0,0,1)]
  *  @param {Boolean} [linear]
  *  @return {Color}
  *  @memberof Random */
-function randColor(cA = new Color, cB = new Color(0,0,0,1), linear)
-{ return linear ? cA.lerp(cB, rand()) : new Color(rand(cA.r,cB.r),rand(cA.g,cB.g),rand(cA.b,cB.b),rand(cA.a,cB.a)); }
-
-/** Seed used by the randSeeded function
- *  @type {Number}
- *  @default
- *  @memberof Random */
-let randSeed = 1;
+function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear)
+{
+    return linear ? colorA.lerp(colorB, rand()) : 
+        new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
+}
 
-/** Set seed used by the randSeeded function, should not be 0
- *  @param {Number} seed
- *  @memberof Random */
-function setRandSeed(seed) { randSeed = seed; }
+///////////////////////////////////////////////////////////////////////////////
 
-/** Returns a seeded random value between the two values passed in using randSeed
- *  @param {Number} [valueA=1]
- *  @param {Number} [valueB=0]
- *  @return {Number}
- *  @memberof Random */
-function randSeeded(a=1, b=0)
+/** 
+ * Seeded random number generator
+ * - Can be used to create a deterministic random number sequence
+ * @example
+ * let r = new RandomGenerator(123); // random number generator with seed 123
+ * let a = r.rand();                 // random value between 0 and 1
+ * let b = r.randInt(10);            // random integer between 0 and 9
+ * r.seed = 123;                     // reset the seed
+ * let c = r.rand();                 // the same value as a
+ */
+class RandomGenerator
 {
-    // xorshift algorithm
-    randSeed ^= randSeed << 13; 
-    randSeed ^= randSeed >>> 17; 
-    randSeed ^= randSeed << 5;
-    return b + (a-b) * abs(randSeed % 1e9) / 1e9;
+    /** Create a random number generator with the seed passed in
+     *  @param {Number} seed - Starting seed */
+    constructor(seed)
+    {
+        /** @property {Number} - random seed */
+        this.seed = seed;
+    }
+
+    /** Returns a seeded random value between the two values passed in
+    *  @param {Number} [valueA=1]
+    *  @param {Number} [valueB=0]
+    *  @return {Number} */
+    float(valueA=1, valueB=0)
+    {
+        // xorshift algorithm
+        this.seed ^= this.seed << 13; 
+        this.seed ^= this.seed >>> 17; 
+        this.seed ^= this.seed << 5;
+        return valueB + (valueA - valueB) * abs(this.seed % 1e9) / 1e9;
+    }
+
+    /** Returns a floored seeded random value the two values passed in
+    *  @param {Number} valueA
+    *  @param {Number} [valueB=0]
+    *  @return {Number} */
+    int(valueA, valueB=0) { return Math.floor(this.rand(valueA, valueB)); }
+
+    /** Randomly returns either -1 or 1 deterministically
+    *  @return {Number} */
+    sign() { return this.randInt(2) * 2 - 1; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -596,7 +669,7 @@ function vec2(x=0, y)
 
 /** 
  * Check if object is a valid Vector2
- * @param {Vector2} vector
+ * @param {Vector2} v
  * @return {Boolean}
  * @memberof Utilities
  */
@@ -629,27 +702,27 @@ class Vector2
     copy() { return new Vector2(this.x, this.y); }
 
     /** Returns a copy of this vector plus the vector passed in
-     *  @param {Vector2} vector
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     add(v) { ASSERT(isVector2(v)); return new Vector2(this.x + v.x, this.y + v.y); }
 
     /** Returns a copy of this vector minus the vector passed in
-     *  @param {Vector2} vector
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     subtract(v) { ASSERT(isVector2(v)); return new Vector2(this.x - v.x, this.y - v.y); }
 
     /** Returns a copy of this vector times the vector passed in
-     *  @param {Vector2} vector
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     multiply(v) { ASSERT(isVector2(v)); return new Vector2(this.x * v.x, this.y * v.y); }
 
     /** Returns a copy of this vector divided by the vector passed in
-     *  @param {Vector2} vector
+     *  @param {Vector2} v - other vector
      *  @return {Vector2} */
     divide(v) { ASSERT(isVector2(v)); return new Vector2(this.x / v.x, this.y / v.y); }
 
     /** Returns a copy of this vector scaled by the vector passed in
-     *  @param {Number} scale
+     *  @param {Number} s - scale
      *  @return {Vector2} */
     scale(s) { ASSERT(!isVector2(s)); return new Vector2(this.x * s, this.y * s); }
 
@@ -662,12 +735,12 @@ class Vector2
     lengthSquared() { return this.x**2 + this.y**2; }
 
     /** Returns the distance from this vector to vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     distance(v) { return this.distanceSquared(v)**.5; }
 
     /** Returns the distance squared from this vector to vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     distanceSquared(v) { return (this.x - v.x)**2 + (this.y - v.y)**2; }
 
@@ -682,12 +755,12 @@ class Vector2
     clampLength(length=1) { const l = this.length(); return l > length ? this.scale(length/l) : this; }
 
     /** Returns the dot product of this and the vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     dot(v) { ASSERT(isVector2(v)); return this.x*v.x + this.y*v.y; }
 
     /** Returns the cross product of this and the vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @return {Number} */
     cross(v) { ASSERT(isVector2(v)); return this.x*v.y - this.y*v.x; }
 
@@ -699,12 +772,17 @@ class Vector2
      * @param {Number} [angle=0]
      * @param {Number} [length=1]
      * @return {Vector2} */
-    setAngle(a=0, length=1) { this.x = length*Math.sin(a); this.y = length*Math.cos(a); return this; }
+    setAngle(angle=0, length=1) 
+    { this.x = length*Math.sin(angle); this.y = length*Math.cos(angle); return this; }
 
     /** Returns copy of this vector rotated by the angle passed in
      * @param {Number} angle
      * @return {Vector2} */
-    rotate(a) { const c = Math.cos(a), s = Math.sin(a); return new Vector2(this.x*c-this.y*s, this.x*s+this.y*c); }
+    rotate(angle)
+    { 
+        const c = Math.cos(angle), s = Math.sin(angle); 
+        return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
+    }
 
     /** Returns the integer direction of this vector, corrosponding to multiples of 90 degree rotation (0-3)
      * @return {Number} */
@@ -723,10 +801,11 @@ class Vector2
     area() { return abs(this.x * this.y); }
 
     /** Returns a new vector that is p percent between this and the vector passed in
-     * @param {Vector2} vector
+     * @param {Vector2} v - other vector
      * @param {Number}  percent
      * @return {Vector2} */
-    lerp(v, p) { ASSERT(isVector2(v)); return this.add(v.subtract(this).scale(clamp(p))); }
+    lerp(v, percent)
+    { ASSERT(isVector2(v)); return this.add(v.subtract(this).scale(clamp(percent))); }
 
     /** Returns true if this vector is within the bounds of an array size passed in
      * @param {Vector2} arraySize
@@ -744,10 +823,10 @@ class Vector2
 
 /** 
  * Create a color object with RGBA values
- * @param {Number} [r=1]
- * @param {Number} [g=1]
- * @param {Number} [b=1]
- * @param {Number} [a=1]
+ * @param {Number} [r=1] - red
+ * @param {Number} [g=1] - green
+ * @param {Number} [b=1] - blue
+ * @param {Number} [a=1] - alpha
  * @return {Color}
  * @memberof Utilities
  */
@@ -755,10 +834,10 @@ function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
 /** 
  * Create a color object with HSLA values
- * @param {Number} [h=0]
- * @param {Number} [s=0]
- * @param {Number} [l=1]
- * @param {Number} [a=1]
+ * @param {Number} [h=0] - hue
+ * @param {Number} [s=0] - saturation
+ * @param {Number} [l=1] - lightness
+ * @param {Number} [a=1] - alpha
  * @return {Color}
  * @memberof Utilities
  */
@@ -775,11 +854,11 @@ function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
  */
 class Color
 {
-    /** Create a color with the components passed in, white by default
-     *  @param {Number} [red=1]
-     *  @param {Number} [green=1]
-     *  @param {Number} [blue=1]
-     *  @param {Number} [alpha=1] */
+    /** Create a color with the rgba components passed in, white by default
+     *  @param {Number} [r=1] - red
+     *  @param {Number} [g=1] - green
+     *  @param {Number} [b=1] - blue
+     *  @param {Number} [a=1] - alpha*/
     constructor(r=1, g=1, b=1, a=1)
     {
         /** @property {Number} - Red */
@@ -797,22 +876,22 @@ class Color
     copy() { return new Color(this.r, this.g, this.b, this.a); }
 
     /** Returns a copy of this color plus the color passed in
-     * @param {Color} color
+     * @param {Color} c - other color
      * @return {Color} */
     add(c) { return new Color(this.r+c.r, this.g+c.g, this.b+c.b, this.a+c.a); }
 
     /** Returns a copy of this color minus the color passed in
-     * @param {Color} color
+     * @param {Color} c - other color
      * @return {Color} */
     subtract(c) { return new Color(this.r-c.r, this.g-c.g, this.b-c.b, this.a-c.a); }
 
     /** Returns a copy of this color times the color passed in
-     * @param {Color} color
+     * @param {Color} c - other color
      * @return {Color} */
     multiply(c) { return new Color(this.r*c.r, this.g*c.g, this.b*c.b, this.a*c.a); }
 
     /** Returns a copy of this color divided by the color passed in
-     * @param {Color} color
+     * @param {Color} c - other color
      * @return {Color} */
     divide(c) { return new Color(this.r/c.r, this.g/c.g, this.b/c.b, this.a/c.a); }
 
@@ -820,23 +899,24 @@ class Color
      * @param {Number} scale
      * @param {Number} [alphaScale=scale]
      * @return {Color} */
-    scale(s, a=s) { return new Color(this.r*s, this.g*s, this.b*s, this.a*a); }
+    scale(scale, alphaScale=scale) 
+    { return new Color(this.r*scale, this.g*scale, this.b*scale, this.a*alphaScale); }
 
     /** Returns a copy of this color clamped to the valid range between 0 and 1
      * @return {Color} */
     clamp() { return new Color(clamp(this.r), clamp(this.g), clamp(this.b), clamp(this.a)); }
 
     /** Returns a new color that is p percent between this and the color passed in
-     * @param {Color}  color
+     * @param {Color}  c - other color
      * @param {Number} percent
      * @return {Color} */
-    lerp(c, p) { return this.add(c.subtract(this).scale(clamp(p))); }
+    lerp(c, percent) { return this.add(c.subtract(this).scale(clamp(percent))); }
 
     /** Sets this color given a hue, saturation, lightness, and alpha
-     * @param {Number} [hue=0]
-     * @param {Number} [saturation=0]
-     * @param {Number} [lightness=1]
-     * @param {Number} [alpha=1]
+     * @param {Number} [h=0] - hue
+     * @param {Number} [s=0] - saturation
+     * @param {Number} [l=1] - lightness
+     * @param {Number} [a=1] - alpha
      * @return {Color} */
     setHSLA(h=0, s=0, l=1, a=1)
     {
@@ -977,14 +1057,15 @@ class Timer
     
     /** Returns this timer expressed as a string
      * @return {String} */
-    toString() { if (debug) { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); }}
+    toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}
     
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */
     valueOf()               { return this.get(); }
-}
+}
 /**
  * LittleJS Engine Settings
+ * - All settings for the engine are here
  * @namespace Settings
  */
 
@@ -1231,7 +1312,7 @@ let medalDisplayIconSize = 50;
  *  @type {Boolean}
  *  @default 0
  *  @memberof Settings */
-let medalsPreventUnlock;
+let medalsPreventUnlock;
 /** 
  * LittleJS Object System
  */
@@ -1240,12 +1321,12 @@ let medalsPreventUnlock;
 
 /** 
  * LittleJS Object Base Object Class
- * - Base object class used by the engine
+ * - Top level object class used by the engine
  * - Automatically adds self to object list
  * - Will be updated and rendered each frame
  * - Renders as a sprite from a tilesheet by default
  * - Can have color and addtive color applied
- * - 2d Physics and collision system
+ * - 2D Physics and collision system
  * - Sorted by renderOrder
  * - Objects can have children attached
  * - Parents are updated before children, and set child transform
@@ -1312,7 +1393,7 @@ class EngineObject
         /** @property {Number} [renderOrder=0]                          - Objects are sorted by render order */
         this.renderOrder = renderOrder;
         /** @property {Vector2} [velocity=Vector2()]                    - Velocity of the object */
-        this.velocity = new Vector2();
+        this.velocity = vec2();
         /** @property {Number} [angleVelocity=0]                        - Angular velocity of the object */
         this.angleVelocity = 0;
 
@@ -1372,15 +1453,17 @@ class EngineObject
             for (const o of engineObjectsCollide)
             {
                 // non solid objects don't collide with eachother
-                if (!this.isSolid & !o.isSolid || o.destroyed || o.parent || o == this)
+                if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o == this)
                     continue;
 
                 // check collision
                 if (!isOverlapping(this.pos, this.size, o.pos, o.size))
                     continue;
 
-                // pass collision to objects
-                if (!this.collideWithObject(o) | !o.collideWithObject(this))
+                // notify objects of collision and check if should be resolved
+                const collide1 = this.collideWithObject(o);
+                const collide2 = o.collideWithObject(this);
+                if (!collide1 || !collide2)
                     continue;
 
                 if (isOverlapping(oldPos, this.size, o.pos, o.size))
@@ -1405,7 +1488,7 @@ class EngineObject
                 const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
                 const elasticity = max(this.elasticity, o.elasticity);
                 
-                if (smallStepUp | isBlockedY | !isBlockedX) // resolve y collision
+                if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
                 {
                     // push outside object collision
                     this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
@@ -1434,7 +1517,7 @@ class EngineObject
                         o.velocity.y = lerp(elasticity, inelastic, elastic1);
                     }
                 }
-                if (!smallStepUp & isBlockedX) // resolve x collision
+                if (!smallStepUp && isBlockedX) // resolve x collision
                 {
                     // push outside collision
                     this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
@@ -1469,9 +1552,9 @@ class EngineObject
                 if (!tileCollisionTest(oldPos, this.size, this))
                 {
                     // test which side we bounced off (or both if a corner)
-                    const isBlockedY = tileCollisionTest(new Vector2(oldPos.x, this.pos.y), this.size, this);
-                    const isBlockedX = tileCollisionTest(new Vector2(this.pos.x, oldPos.y), this.size, this);
-                    if (isBlockedY | !isBlockedX)
+                    const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
+                    const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+                    if (isBlockedY || !isBlockedX)
                     {
                         // set if landed on ground
                         this.groundObject = wasMovingDown;
@@ -1534,7 +1617,7 @@ class EngineObject
      *  @param {EngineObject} object - the object to test against
      *  @return {Boolean}            - true if the collision should be resolved
      */
-    collideWithObject(o)              { return 1; }
+    collideWithObject(object)         { return 1; }
 
     /** How long since the object was created
      *  @return {Number} */
@@ -1542,7 +1625,7 @@ class EngineObject
 
     /** Apply acceleration to this object (adjust velocity, not affected by mass)
      *  @param {Vector2} acceleration */
-    applyAcceleration(a)              { if (this.mass) this.velocity = this.velocity.add(a); }
+    applyAcceleration(acceleration)   { if (this.mass) this.velocity = this.velocity.add(acceleration); }
 
     /** Apply force to this object (adjust velocity, affected by mass)
      *  @param {Vector2} force */
@@ -1607,12 +1690,13 @@ class EngineObject
             return text;
         }
     }
-}
+}
 /** 
  * LittleJS Drawing System
- * - Hybrid with both Canvas2D and WebGL available
+ * - Hybrid system with both Canvas2D and WebGL available
  * - Super fast tile sheet rendering with WebGL
  * - Can apply rotation, mirror, color and additive color
+ * - Font rendering system with built in engine font
  * - Many useful utility functions
  * 
  * LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
@@ -1622,7 +1706,6 @@ class EngineObject
  * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
  * 
  * The WebGL rendering system is very fast with some caveats...
- * - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
  * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
  * - Group additive rendering together using renderOrder to mitigate this issue
  * 
@@ -1666,25 +1749,29 @@ const tileImage = new Image;
 let tileImageSize, tileImageFixBleed, drawCount;
 
 /** Convert from screen to world space coordinates
- *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} screenPos
  *  @return {Vector2}
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
-    ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
-    return screenPos.add(vec2(.5)).subtract(mainCanvasSize.scale(.5)).multiply(vec2(1/cameraScale,-1/cameraScale)).add(cameraPos);
+    return new Vector2
+    (
+        (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale + cameraPos.x,
+        (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale + cameraPos.y
+    );
 }
 
 /** Convert from world to screen space coordinates
- *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} worldPos
  *  @return {Vector2}
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
-    ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
-    return worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
+    return new Vector2
+    (
+        (worldPos.x - cameraPos.x) *  cameraScale + mainCanvasSize.x/2 - .5,
+        (worldPos.y - cameraPos.y) * -cameraScale + mainCanvasSize.y/2 - .5
+    );
 }
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
@@ -1697,13 +1784,21 @@ function worldToScreen(worldPos)
  *  @param {Boolean} [mirror=0]                     - If true image is flipped along the Y axis
  *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
+ *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
  *  @memberof Draw */
-function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle=0, mirror, 
-    additiveColor=new Color(0,0,0,0), useWebGL=glEnable)
+function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color,
+    angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
 {
     showWatermark && ++drawCount;
+    
     if (glEnable && useWebGL)
     {
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            size = size.scale(1/cameraScale);
+        }
         if (tileIndex < 0 || !tileImage.width)
         {
             // if negative tile index or image not found, force untextured
@@ -1745,7 +1840,7 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
                 context.globalAlpha = color.a; // only alpha is supported
                 context.drawImage(tileImage, sX, sY, sWidth, sHeight, -.5, -.5, 1, 1);
             }
-        });
+        }, undefined, screenSpace);
     }
 }
 
@@ -1755,38 +1850,30 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
  *  @param {Color}   [color=Color()]
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle, useWebGL)
-{
-    drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
-}
-
-/** Draw textured tile centered on pos in screen space
- *  @param {Vector2} pos                        - Center of the tile
- *  @param {Vector2} [size=Vector2(1,1)]    - Size of the tile
- *  @param {Number}  [tileIndex=-1]             - Tile index to use, negative is untextured
- *  @param {Vector2} [tileSize=tileSizeDefault] - Tile size in source pixels
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [mirror=0]
- *  @param {Color}   [additiveColor=Color(0,0,0,0)]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @memberof Draw */
-function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL)
-{
-    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL);
-}
+function drawRect(pos, size, color, angle, useWebGL, screenSpace)
+{ drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, undefined, useWebGL, screenSpace); }
 
-/** Draw colored rectangle in screen space
- *  @param {Vector2} pos
- *  @param {Vector2} [size=Vector2(1,1)]
+/** Draw colored polygon using passed in points
+ *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawRectScreenSpace(pos, size, color, angle, useWebGL)
+function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
 {
-    drawTileScreenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
+    if (useWebGL)
+        glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
+    else
+    {
+        // draw using canvas
+        mainContext.fillStyle = color;
+        mainContext.beginPath();
+        for (const point of screenSpace ? points : points.map(worldToScreen))
+            mainContext.lineTo(point.x, point.y);
+        mainContext.fill();
+    }
 }
 
 /** Draw colored line between two points
@@ -1795,12 +1882,13 @@ function drawRectScreenSpace(pos, size, color, angle, useWebGL)
  *  @param {Number}  [thickness=.1]
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
 function drawLine(posA, posB, thickness=.1, color, useWebGL)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace);
 }
 
 /** Draw directly to a 2d canvas context in world space
@@ -1810,12 +1898,16 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL)
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
  *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext)
+function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext, screenSpace)
 {
-    // create canvas transform from world space to screen space
-    pos = worldToScreen(pos);
-    size = size.scale(cameraScale);
+    if (!screenSpace)
+    {
+        // create canvas transform from world space to screen space
+        pos = worldToScreen(pos);
+        size = size.scale(cameraScale);
+    }
     context.save();
     context.translate(pos.x+.5|0, pos.y+.5|0);
     context.rotate(angle);
@@ -1922,6 +2014,17 @@ class FontImage
         this.context = context;
     }
 
+    /** Draw text in world space using the image font
+     *  @param {String}  text
+     *  @param {Vector2} pos
+     *  @param {Number}  [scale=.25]
+     *  @param {Boolean} [center]
+     */
+    drawText(text, pos, scale=1, center)
+    {
+        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
+    }
+
     /** Draw text in screen space using the image font
      *  @param {String}  text
      *  @param {Vector2} pos
@@ -1959,17 +2062,6 @@ class FontImage
 
         context.restore();
     }
-
-    /** Draw text in world space using the image font
-     *  @param {String}  text
-     *  @param {Vector2} pos
-     *  @param {Number}  [scale=.25]
-     *  @param {Boolean} [center]
-     */
-    drawText(text, pos, scale=1, center)
-    {
-        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1992,13 +2084,13 @@ function toggleFullscreen()
     else if (document.body.requestFullscreen)
             document.body.requestFullscreen();
 }
-
+
 /** 
  * LittleJS Input System
- * - Tracks key down, pressed, and released
- * - Also tracks mouse buttons, position, and wheel
- * - Supports multiple gamepads
- * - Virtual gamepad for touch devices with touchGamepadSize
+ * - Tracks keyboard down, pressed, and released
+ * - Tracks mouse buttons, position, and wheel
+ * - Tracks multiple analog gamepads
+ * - Virtual gamepad for touch devices
  * @namespace Input
  */
 
@@ -2270,40 +2362,32 @@ if (isTouchDevice)
     let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
     onmousedown = onmouseup = ()=> 0;
 
-    // setup touch input
-    ontouchstart = (e)=>
+    // handle all touch events the same way
+    ontouchstart = ontouchmove = ontouchend = (e)=>
     {
-        // fix mobile audio, force it to play a sound on first touch
-        zzfx(0);
-
-        // handle all touch events the same way
-        ontouchstart = ontouchmove = ontouchend = (e)=>
-        {
-            e.button = 0; // all touches are left click
+        e.button = 0; // all touches are left click
 
-            // check if touching and pass to mouse events
-            const touching = e.touches.length;
-            if (touching)
-            {
-                // set event pos and pass it along
-                e.x = e.touches[0].clientX;
-                e.y = e.touches[0].clientY;
-                wasTouching ? onmousemove(e) : mouseDown(e);
-            }
-            else if (wasTouching)
-                mouseUp(e);
-
-            // set was touching
-            wasTouching = touching;
+        // fix stalled audio on mobile
+        if (soundEnable)
+            audioContext ? audioContext.resume() : zzfx(0);
 
-            // must return true so the document will get focus
-            return true;
+        // check if touching and pass to mouse events
+        const touching = e.touches.length;
+        if (touching)
+        {
+            // set event pos and pass it along
+            e.x = e.touches[0].clientX;
+            e.y = e.touches[0].clientY;
+            wasTouching ? onmousemove(e) : mouseDown(e);
         }
+        else if (wasTouching)
+            mouseUp(e);
 
-        // try to create touch game pad
-        touchGamepadEnable && touchGamepadCreate();
+        // set was touching
+        wasTouching = touching;
 
-        return ontouchstart(e);
+        // must return true so the document will get focus
+        return true;
     }
 }
 
@@ -2314,13 +2398,13 @@ if (isTouchDevice)
 let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 
 // create the touch gamepad, called automatically by the engine
-function touchGamepadCreate()
+if (touchGamepadEnable)
 {
     // touch input internal variables
     touchGamepadButtons = [];
     touchGamepadStick = vec2();
 
-    let touchHandler = ontouchstart;
+    const touchHandler = ontouchstart;
     ontouchstart = ontouchmove = ontouchend = (e)=> 
     {
         // clear touch gamepad input
@@ -2426,7 +2510,7 @@ function touchGamepadRender()
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
     {
-        const pos = rightCenter.add((new Vector2).setAngle(i*PI/2, touchGamepadSize/2));
+        const pos = rightCenter.add(vec2().setAngle(i*PI/2, touchGamepadSize/2));
         overlayContext.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
         overlayContext.beginPath();
         overlayContext.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);
@@ -2436,15 +2520,15 @@ function touchGamepadRender()
 
     // set canvas back to normal
     overlayContext.restore();
-}
+}
 /** 
  * LittleJS Audio System
- * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - Sound Effect Generator
- * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - Music System
+ * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
+ * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - ZzFXM Music System
  * - Caches sounds and music for fast playback
  * - Can attenuate and apply stereo panning to sounds
  * - Ability to play mp3, ogg, and wave files
- * - Speech synthesis wrapper functions
+ * - Speech synthesis functions
  * @namespace Audio
  */
 
@@ -2478,12 +2562,15 @@ class Sound
         /** @property {Number} - At what percentage of range should it start tapering off */
         this.taper = taper;
 
-        // get randomness from sound parameters
-        this.randomness = zzfxSound[1] || 0;
-        zzfxSound[1] = 0;
+        /** @property {Number} - How much to randomize frequency each time sound plays */
+        this.randomness = 0;
 
-        // generate sound now for fast playback
-        this.cachedSamples = zzfxG(...zzfxSound);
+        if (zzfxSound)
+        {
+            // generate zzfx sound now for fast playback
+            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0); 
+            this.cachedSamples = zzfxSound && zzfxG(...zzfxSound);
+        }
     }
 
     /** Play the sound
@@ -2495,7 +2582,7 @@ class Sound
      */
     play(pos, volume=1, pitch=1, randomnessScale=1)
     {
-        if (!soundEnable) return;
+        if (!soundEnable || !this.cachedSamples) return;
 
         let pan;
         if (pos)
@@ -2528,12 +2615,36 @@ class Sound
      *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
      */
     playNote(semitoneOffset, pos, volume)
+    { return this.play(pos, volume, 2**(semitoneOffset/12), 0); }
+}
+
+/** 
+ * Sound Wave Object - Stores a wave sound for later use and can be played positionally
+ */
+class SoundWave extends Sound
+{
+    /** Create a sound object and cache the wave file for later use
+     *  @param {String} waveFilename - Filename of wave file to load
+     *  @param {Number} [randomness=.05] - How much to randomize frequency each time sound plays
+     *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
+     *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
+     */
+    constructor(waveFilename, randomness=.05, range, taper)
     {
+        super(0, range, taper);
+        this.randomness = randomness;
+
         if (!soundEnable) return;
+        if (!soundWaveDecoderContext)
+            soundDecoderContext = new AudioContext;
 
-        return this.play(pos, volume, 2**(semitoneOffset/12), 0);
+        fetch(waveFilename)
+        .then(response => response.arrayBuffer())
+        .then(arrayBuffer => soundWaveDecoderContext.decodeAudioData(arrayBuffer))
+        .then(audioBuffer => this.cachedSamples = audioBuffer.getChannelData(0));
     }
 }
+let soundDecoderContext; // audio context used only to decode audio files
 
 /**
  * Music Object - Stores a zzfx music track for later use
@@ -2676,16 +2787,17 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 {
     if (!soundEnable) return;
 
-    // create audio context
+    // create audio context if needed
     if (!audioContext)
         audioContext = new AudioContext;
 
-    // fix stalled audio
-    audioContext.resume();
-
     // prevent sounds from building up if they can't be played
     if (audioContext.state != 'running')
+    {
+        // fix stalled audio
+        audioContext.resume();
         return;
+    }
 
     // create buffer and source
     const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
@@ -2877,7 +2989,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
       patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
 
       // check if there are more channels
-      hasMore |= !!patterns[patternIndex][channelIndex];
+      hasMore ||= !!patterns[patternIndex][channelIndex];
 
       // get next offset, use the length of first channel
       nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - !notFirstBeat) * beatLength;
@@ -2890,7 +3002,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
 
         // stop if end, different instrument or new note
         stop = i == patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
-            instrument != (patternChannel[0] || 0) | note | 0;
+            instrument != (patternChannel[0] || 0) || note | 0;
 
         // fill buffer with samples for previous beat, most cpu intensive part
         for (j = 0; j < beatLength && notFirstBeat;
@@ -2934,7 +3046,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   }
 
   return [leftChannelBuffer, rightChannelBuffer];
-}
+}
 /** 
  * LittleJS Tile Layer System
  * - Caches arrays of tiles to off screen canvas for fast rendering
@@ -3004,12 +3116,12 @@ function tileCollisionTest(pos, size=vec2(), object)
     for (let x = minX; x < maxX; ++x)
     {
         const tileData = tileCollision[y*tileCollisionSize.x+x];
-        if (tileData && (!object || object.collideWithTile(tileData, new Vector2(x, y))))
+        if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
             return 1;
     }
 }
 
-/** Return the center of tile if any that is hit (this does not return the exact hit point)
+/** Return the center of tile if any that is hit (does not return the exact intersection)
  *  @param {Vector2}      posStart
  *  @param {Vector2}      posEnd
  *  @param {EngineObject} [object]
@@ -3018,28 +3130,41 @@ function tileCollisionTest(pos, size=vec2(), object)
 function tileCollisionRaycast(posStart, posEnd, object)
 {
     // test if a ray collides with tiles from start to end
-    // todo: a way to get the exact hit point, it must still register as inside the hit tile
-    const posDelta = (posEnd = posEnd.floor()).subtract(posStart = posStart.floor());
-    const dx = abs(posDelta.x),  dy = -abs(posDelta.y);
-    const sx = sign(posDelta.x), sy = sign(posDelta.y);
-
-    for (let x = posStart.x, y = posStart.y, e = dx + dy;;)
+    // todo: a way to get the exact hit point, it must still be inside the hit tile
+    const delta = posEnd.subtract(posStart);
+    const totalLength = delta.length();
+    const normalizedDelta = delta.normalize();
+    const unit = vec2(abs(1/normalizedDelta.x), abs(1/normalizedDelta.y));
+    const flooredPosStart = posStart.floor();
+
+    // setup iteration variables
+    let pos = flooredPosStart;
+    let xi = unit.x * (delta.x < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1);
+    let yi = unit.y * (delta.y < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1);
+
+    while (1)
     {
-        const tileData = getTileCollisionData(vec2(x,y));
-        if (tileData && (object ? object.collideWithTileRaycast(tileData, new Vector2(x, y)) : tileData > 0))
+        // check for tile collision
+        const tileData = getTileCollisionData(pos);
+        if (tileData && (!object || object.collideWithTile(tileData, pos)))
         {
-            debugRaycast && debugLine(posStart, posEnd, '#f00',.02, 1);
-            debugRaycast && debugPoint(new Vector2(x+.5, y+.5), '#ff0', 1);
-            return new Vector2(x+.5, y+.5);
+            debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
+            debugRaycast && debugPoint(pos.add(vec2(.5)), '#ff0');
+            return pos.add(vec2(.5));
         }
 
-        // update Bresenham line drawing algorithm
-        if (x == posEnd.x & y == posEnd.y) break;
-        const e2 = 2*e;
-        if (e2 >= dy) e += dy, x += sx;
-        if (e2 <= dx) e += dx, y += sy;
+        // check if past the end
+        if (xi > totalLength && yi > totalLength)
+            break;
+
+        // get coordinates of the next tile to check
+        if (xi > yi)
+            pos.y += sign(delta.y), yi += unit.y;
+        else
+            pos.x += sign(delta.x), xi += unit.x;
     }
-    debugRaycast && debugLine(posStart, posEnd, '#00f',.02, 1);
+
+    debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3282,7 +3407,7 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
      *  @param {Number}  [angle=0] */
     drawRect(pos, size, color, angle) 
     { this.drawTile(pos, size, -1, 0, color, angle); }
-}
+}
 /** 
  * LittleJS Particle System
  */
@@ -3370,7 +3495,7 @@ class ParticleEmitter extends EngineObject
         localSpace
     )
     {
-        super(pos, new Vector2, tileIndex, tileSize, angle, undefined, renderOrder);
+        super(pos, vec2(), tileIndex, tileSize, angle, undefined, renderOrder);
 
         // emitter settings
         /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
@@ -3437,7 +3562,7 @@ class ParticleEmitter extends EngineObject
         this.parent && super.update();
 
         // update emitter
-        if (!this.emitTime | this.getAliveTime() <= this.emitTime)
+        if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
             // emit particles
             if (this.emitRate * particleEmitRateScale)
@@ -3459,7 +3584,7 @@ class ParticleEmitter extends EngineObject
     {
         // spawn a particle
         let pos = this.emitSize.x != undefined ? // check if vec2 was used for size
-            (new Vector2(rand(-.5,.5), rand(-.5,.5)))
+            vec2(rand(-.5,.5), rand(-.5,.5))
                 .multiply(this.emitSize).rotate(this.angle) // box emitter
             : randInCircle(this.emitSize/2);                // circle emitter
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
@@ -3489,7 +3614,7 @@ class ParticleEmitter extends EngineObject
         // build particle settings
         particle.colorStart    = colorStart;
         particle.colorEndDelta = colorEnd.subtract(colorStart);
-        particle.velocity      = (new Vector2).setAngle(velocityAngle, speed);
+        particle.velocity      = vec2().setAngle(velocityAngle, speed);
         particle.angleVelocity = angleSpeed;
         particle.lifeTime      = particleTime;
         particle.sizeStart     = sizeStart;
@@ -3534,7 +3659,7 @@ class Particle extends EngineObject
      * @param {Number}  [angle=0]                  - Angle to rotate the particle
      */
     constructor(pos, tileIndex, tileSize, angle)
-    { super(pos, new Vector2, tileIndex, tileSize, angle); }
+    { super(pos, vec2(), tileIndex, tileSize, angle); }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
     render()
@@ -3542,7 +3667,7 @@ class Particle extends EngineObject
         // modulate size and color
         const p = min((time - this.spawnTime) / this.lifeTime, 1);
         const radius = this.sizeStart + p * this.sizeEndDelta;
-        const size = new Vector2(radius, radius);
+        const size = vec2(radius);
         const fadeRate = this.fadeRate/2;
         const color = new Color(
             this.colorStart.r + p * this.colorEndDelta.r,
@@ -3588,7 +3713,7 @@ class Particle extends EngineObject
             this.destroyed = 1;
         }
     }
-}
+}
 /** 
  * LittleJS Medal System
  * - Tracks and displays medals
@@ -3909,7 +4034,7 @@ class Newgrounds
         // end of Crypto-JS
         ///////////////////////////////////////////////////////////////////////////////
     }
-}
+}
 /** 
  * LittleJS WebGL Interface
  * - All webgl used by the engine is wrapped up here
@@ -4115,8 +4240,8 @@ function glFlush()
 
     // draw all the sprites in the batch and reset the buffer
     glContext.bufferSubData(gl_ARRAY_BUFFER, 0, 
-        glPositionData.subarray(0, glBatchCount * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT));
-    glContext.drawArrays(gl_TRIANGLES, 0, glBatchCount * gl_VERTICES_PER_QUAD);
+        glPositionData.subarray(0, glBatchCount * gl_INDICIES_PER_VERT));
+    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, glBatchCount);
     glBatchCount = 0;
     glBatchAdditive = glAdditive;
 }
@@ -4137,39 +4262,75 @@ function glCopyToContext(context, forceDraw)
 }
 
 /** Add a sprite to the gl draw list, used by all gl draw functions
- *  @param x
- *  @param y
- *  @param sizeX
- *  @param sizeY
- *  @param angle
- *  @param uv0X
- *  @param uv0Y
- *  @param uv1X
- *  @param uv1Y
- *  @param rgba
- *  @param [rgbaAdditive=0]
+ *  @param {Number} x
+ *  @param {Number} y
+ *  @param {Number} sizeX
+ *  @param {Number} sizeY
+ *  @param {Number} angle
+ *  @param {Number} uv0X
+ *  @param {Number} uv0Y
+ *  @param {Number} uv1X
+ *  @param {Number} uv1Y
+ *  @param {Number} rgba
+ *  @param {Number} [rgbaAdditive=0]
  *  @memberof WebGL */
 function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
 {
-    // flush if there is no room for more verts or if different blend mode
-    if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
+    // flush if there is not enough room or if different blend mode
+    const vertCount = 6;
+    if (glBatchCount >= gl_MAX_BATCH-vertCount || glBatchAdditive != glAdditive)
         glFlush();
 
     // prepare to create the verts from size and angle
     const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
     const cx = c*sizeX, cy = c*sizeY, sx = s*sizeX, sy = s*sizeY;
-        
-    // setup 2 triangles to form a quad
-    for(let i=6, offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT; i--;)
+    const positionData = 
+    [
+        x-cx+sy, y+cy+sx, uv0X, uv0Y,
+        x-cx-sy, y-cy+sx, uv0X, uv1Y,
+        x+cx+sy, y+cy-sx, uv1X, uv0Y,
+        x+cx-sy, y-cy-sx, uv1X, uv1Y,
+    ];
+
+    // setup 2 triangle strip quad
+    for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
     {
-        const a = i-4&&i>1, b = i-5&&i-2&&i-1;
-        glPositionData[offset++] = x + (a?-cx:cx) + (b?sy:-sy);
-        glPositionData[offset++] = y + (b?cy:-cy) + (a?sx:-sx);
-        glPositionData[offset++] = a ? uv0X : uv1X; 
-        glPositionData[offset++] = b ? uv0Y : uv1Y;
+        let j = clamp(i-1, 0, 3)*4;  // degenerate tri at ends
+        glPositionData[offset++] = positionData[j++];
+        glPositionData[offset++] = positionData[j++];
+        glPositionData[offset++] = positionData[j++];
+        glPositionData[offset++] = positionData[j++];
         glColorData[offset++] = rgba; 
         glColorData[offset++] = rgbaAdditive;
     }
+    glBatchCount += vertCount;
+}
+
+/** Add a convex polygon to the gl draw list
+ *  @param {Array} points - Array of Vector2 points
+ *  @param {Number} rgba - Color of the polygon
+ *  @memberof WebGL */
+function glDrawPoints(points, rgba)
+{
+    // flush if there is not enough room or if different blend mode
+    const vertCount = points.length + 2;
+    if (glBatchCount >= gl_MAX_BATCH-vertCount || glBatchAdditive != glAdditive)
+        glFlush();
+  
+    // setup triangle strip from list of points
+    for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
+    {
+        const j = clamp(i-1, 0, vertCount-3);  // degenerate tri at ends
+        const h = j>>1;
+        const point = points[j%2? h : vertCount-3-h];
+        glPositionData[offset++] = point.x;
+        glPositionData[offset++] = point.y;
+        glPositionData[offset++] = 0; // uvx
+        glPositionData[offset++] = 0; // uvy
+        glColorData[offset++] = 0;    // nothing to tint
+        glColorData[offset++] = rgba; // apply rgba via additive
+    }
+    glBatchCount += vertCount;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4263,14 +4424,14 @@ function glRenderPostProcess()
     glContext.uniform1i(uniformLocation('iChannel0'), 0);
     glContext.uniform1f(uniformLocation('iTime'), time);
     glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
-    glContext.drawArrays(gl_TRIANGLES, 0, 3);
+    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 3);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // store gl constants as integers so their name doesn't use space in minifed
 const 
 gl_ONE = 1,
-gl_TRIANGLES = 4,
+gl_TRIANGLE_STRIP = 5,
 gl_SRC_ALPHA = 770,
 gl_ONE_MINUS_SRC_ALPHA = 771,
 gl_BLEND = 3042,
@@ -4301,9 +4462,9 @@ gl_UNPACK_FLIP_Y_WEBGL = 37440,
 // constants for batch rendering
 gl_VERTICES_PER_QUAD = 6,
 gl_INDICIES_PER_VERT = 6,
-gl_MAX_BATCH = 1<<16,
+gl_MAX_BATCH = 1e5,
 gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
-gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE;
+gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTEX_BYTE_STRIDE;
 /** 
  * LittleJS - The Tiny JavaScript Game Engine That Can!
  * MIT License - Copyright 2021 Frank Force
@@ -4336,7 +4497,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.6.6';
+const engineVersion = '1.7.01';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -4426,7 +4587,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         // set canvas style
         const styleCanvas = 'position:absolute;' +
             'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
-            (canvasPixelated?'image-rendering:pixelated':'');     // set pixelated rendering
+            (canvasPixelated?'image-rendering:pixelated':'');    // set pixelated rendering
         (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         
         gameInit();
@@ -4434,7 +4595,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     };
 
     // frame time tracking
-    let frameTimeLastMS = 0, frameTimeBufferMS, averageFPS;
+    let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
 
     // main update loop
     function engineUpdate(frameTimeMS=0)
@@ -4625,4 +4786,4 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
     }
-}
+}