littlejsengine 1.6.6 → 1.7.1

package/src/engineUtilities.js

@@ -4,6 +4,7 @@
  * - 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
  */
 
@@ -19,34 +20,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
@@ -54,47 +55,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
@@ -121,20 +158,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]
@@ -143,44 +186,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; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -202,7 +263,7 @@ function vec2(x=0, y)
 
 /** 
  * Check if object is a valid Vector2
- * @param {Vector2} vector
+ * @param {Vector2} v
  * @return {Boolean}
  * @memberof Utilities
  */
@@ -235,27 +296,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); }
 
@@ -268,12 +329,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; }
 
@@ -288,12 +349,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; }
 
@@ -305,12 +366,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} */
@@ -329,10 +395,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
@@ -350,10 +417,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
  */
@@ -361,10 +428,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
  */
@@ -381,11 +448,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 */
@@ -403,22 +470,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); }
 
@@ -426,23 +493,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)
     {
@@ -583,7 +651,7 @@ 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} */

package/src/engineWebGL.js

@@ -203,8 +203,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;
 }
@@ -225,39 +225,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;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -351,14 +387,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,
@@ -389,6 +425,6 @@ 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;

package/examples/electron/build.bat

@@ -1,52 +0,0 @@
-rem Simple build script for LittleJS by Frank Force
-rem Minfies and combines index.html and index.js and zips the result
-
-set NAME=game
-set BUILD_FOLDER=build
-set BUILD_FILENAME=index.js
-
-rem remove old files
-rmdir /s /q %BUILD_FOLDER%
-mkdir %BUILD_FOLDER%
-pushd %BUILD_FOLDER%
-
-rem copy engine release build
-type ..\..\..\build\littlejs.release.js >> %BUILD_FILENAME%
-echo. >> %BUILD_FILENAME%
-
-rem add your game's files to include here
-type ..\game.js >> %BUILD_FILENAME%
-echo. >> %BUILD_FILENAME%
-
-rem copy images to build folder
-copy ..\tiles.png tiles.png
-
-rem minify code with uglify
-call npx uglifyjs -o %BUILD_FILENAME% --compress --mangle -- %BUILD_FILENAME%
-if %ERRORLEVEL% NEQ 0 (
-    pause
-    exit /b %ERRORLEVEL%
-)
-
-rem build the html, you can add html header and footers here
-rem type ..\header.html >> index.html
-echo ^<body^>^<script^> >> index.html
-type %BUILD_FILENAME% >> index.html
-echo ^</script^> >> index.html
-
-rem delete intermediate files
-del %BUILD_FILENAME%
-
-rem copy elecron files to build folder
-copy ..\electron.js electron.js
-copy ..\package.json package.json
-
-popd
-
-rem build with electron
-call npx electron-packager ./%BUILD_FOLDER% --overwrite
-if %ERRORLEVEL% NEQ 0 (
-    pause
-    exit /b %ERRORLEVEL%
-)
-pause