littlejsengine 1.14.19 → 1.14.23

package/src/engineUtilities.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-/** A shortcut to get Math.PI
+/** The value of PI
  *  @type {number}
  *  @default Math.PI
  *  @memberof Utilities */
@@ -20,25 +20,80 @@ const PI = Math.PI;
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
-function abs(value) { return Math.abs(value); }
+const abs = Math.abs;
+
+/** Returns floored value of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const floor = Math.floor;
+
+/** Returns ceiled value of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const ceil = Math.ceil;
+
+/** Returns rounded value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const round = Math.round;
 
 /** Returns lowest value passed in
  *  @param {...number} values
  *  @return {number}
  *  @memberof Utilities */
-function min(...values) { return Math.min(...values); }
+const min = Math.min;
 
 /** Returns highest value passed in
  *  @param {...number} values
  *  @return {number}
  *  @memberof Utilities */
-function max(...values) { return Math.max(...values); }
+const max = Math.max;
 
 /** Returns the sign of value passed in
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
-function sign(value) { return Math.sign(value); }
+const sign = Math.sign;
+
+/** Returns hypotenuse of values passed in
+ *  @param {...number} values
+ *  @return {number}
+ *  @memberof Utilities */
+const hypot = Math.hypot;
+
+/** Returns log2 of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const log2 = Math.log2;
+
+/** Returns sin of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const sin = Math.sin;
+
+/** Returns cos of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const cos = Math.cos;
+
+/** Returns tan of value passed in
+ *  @param {number} value
+ *  @return {number}
+ *  @memberof Utilities */
+const tan = Math.tan;
+
+/** Returns atan2 of values passed in
+ *  @param {number} y
+ *  @param {number} x
+ *  @return {number}
+ *  @memberof Utilities */
+const atan2 = Math.atan2;
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {number} dividend
@@ -143,7 +198,7 @@ function isPowerOfTwo(value) { return !(value & (value - 1)); }
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
-function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
+function nearestPowerOfTwo(value) { return 2**ceil(log2(value)); }
 
 /** Returns true if two axis aligned bounding boxes are overlapping
  *  this can be used for simple collision detection between objects
@@ -211,7 +266,7 @@ function isIntersecting(start, end, pos, size)
  *  @return {number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
 function wave(frequency=1, amplitude=1, t=time, offset=0)
-{ return amplitude/2 * (1 - Math.cos(offset + t*frequency*2*PI)); }
+{ return amplitude/2 * (1 - cos(offset + t*frequency*2*PI)); }
 
 /** Formats seconds to mm:ss style for display purposes
  *  @param {number} t - time in seconds
@@ -250,6 +305,96 @@ function isNumber(n) { return typeof n === 'number' && !isNaN(n); }
  * @memberof Utilities */
 function isString(s) { return s !== undefined && s !== null && typeof s.toString() === 'string'; }
 
+/**
+ * @callback LineTestFunction - Checks if a position is colliding
+ * @param {Vector2} pos
+ * @memberof Draw
+ */
+
+/**
+ * Casts a ray and returns position of the first collision found, or undefined if none are found
+ * @param {Vector2} posStart
+ * @param {Vector2} posEnd
+ * @param {LineTestFunction} testFunction - Check if colliding
+ * @param {Vector2} [normal] - Optional vector to store the normal
+ * @return {Vector2|undefined} - Position of the collision or undefined if none found
+ * @memberof Utilities */
+function lineTest(posStart, posEnd, testFunction, normal)
+{
+    ASSERT(isVector2(posStart), 'posStart must be a vec2');
+    ASSERT(isVector2(posEnd), 'posEnd must be a vec2');
+    ASSERT(typeof testFunction === 'function', 'testFunction must be a function');
+    ASSERT(!normal || isVector2(normal), 'normal must be a vec2');
+
+    // get ray direction and length
+    const dx = posEnd.x - posStart.x;
+    const dy = posEnd.y - posStart.y;
+    const totalLength = hypot(dx, dy);
+    if (!totalLength)
+        return;
+
+    // current integer cell we are in
+    const pos = posStart.floor();
+
+    // normalize ray direction
+    const dirX = dx / totalLength;
+    const dirY = dy / totalLength;
+
+    // step direction in grid
+    const stepX = sign(dirX);
+    const stepY = sign(dirY);
+
+    // distance along the ray to cross one full cell in X or Y
+    const tDeltaX = dirX ? abs(1 / dirX) : Infinity;
+    const tDeltaY = dirY ? abs(1 / dirY) : Infinity;
+
+    // distance along the ray from start to the first grid boundary
+    const nextGridX = stepX > 0 ? pos.x + 1 : pos.x;
+    const nextGridY = stepY > 0 ? pos.y + 1 : pos.y;
+    const tMaxX = dirX ? (nextGridX - posStart.x) / dirX : Infinity;
+    const tMaxY = dirY ? (nextGridY - posStart.y) / dirY : Infinity;
+
+    // use line drawing algorithm to test for collisions
+    let t = 0, tX = tMaxX, tY = tMaxY, wasX = tDeltaX < tDeltaY;
+    while (t < totalLength)
+    {
+        if (testFunction(pos))
+        {
+            // set hit point
+            const hitPos = vec2(posStart.x + dirX*t, posStart.y + dirY*t);
+
+            // move inside of tile if on positive edge
+            const e = 1e-9;
+            if (wasX)
+            {
+                if (stepX < 0)
+                    hitPos.x -= e;
+            }
+            if (stepY < 0)
+                hitPos.y -= e;
+
+            // set normal
+            if (normal)
+                wasX ? normal.set(-stepX,0) : normal.set(0,-stepY);
+            return hitPos;
+        }
+
+        // advance to the next grid boundary
+        if (wasX = tX < tY)
+        {
+            pos.x += stepX;
+            t = tX;
+            tX += tDeltaX;
+        }
+        else
+        {
+            pos.y += stepY;
+            t = tY;
+            tY += tDeltaY;
+        }
+    }
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Random global functions
@@ -268,7 +413,7 @@ function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valu
  *  @param {number} [valueB]
  *  @return {number}
  *  @memberof Random */
-function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
+function randInt(valueA, valueB=0) { return floor(rand(valueA,valueB)); }
 
 /** Randomly returns true or false given the chance of true passed in
  *  @param {number} [chance]
@@ -347,7 +492,7 @@ class RandomGenerator
     *  @param {number} valueA
     *  @param {number} [valueB]
     *  @return {number} */
-    int(valueA, valueB=0) { return Math.floor(this.float(valueA, valueB)); }
+    int(valueA, valueB=0) { return floor(this.float(valueA, valueB)); }
 
     /** Randomly returns true or false given the chance of true passed in
     *  @param {number} [chance]
@@ -374,6 +519,39 @@ class RandomGenerator
     *  @return {Vector2} */
     vec2(valueA=1, valueB=0)
     { return vec2(this.float(valueA, valueB), this.float(valueA, valueB)); }
+
+    /** Returns a random color between the two passed in colors, combine components if linear
+    *  @param {Color}   [colorA=(1,1,1,1)]
+    *  @param {Color}   [colorB=(0,0,0,1)]
+    *  @param {boolean} [linear]
+    *  @return {Color} */
+    randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
+    {
+        return linear ? colorA.lerp(colorB, this.float()) :
+            new Color(
+                this.float(colorA.r,colorB.r), 
+                this.float(colorA.g,colorB.g), 
+                this.float(colorA.b,colorB.b), 
+                this.float(colorA.a,colorB.a));
+    }
+
+    /** Returns a new color that has each component randomly adjusted
+     * @param {Color} color
+     * @param {number} [amount]
+     * @param {number} [alphaAmount]
+     * @return {Color} */
+    mutateColor(color, amount=.05, alphaAmount=0)
+    {
+        ASSERT_NUMBER_VALID(amount);
+        ASSERT_NUMBER_VALID(alphaAmount);
+        return new Color
+        (
+            color.r + this.float(amount, -amount),
+            color.g + this.float(amount, -amount),
+            color.b + this.float(amount, -amount),
+            color.a + this.float(alphaAmount, -alphaAmount)
+        ).clamp();
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -525,7 +703,7 @@ class Vector2
 
     /** Returns the clockwise angle of this vector, up is angle 0
      * @return {number} */
-    angle() { return Math.atan2(this.x, this.y); }
+    angle() { return atan2(this.x, this.y); }
 
     /** Sets this vector with clockwise angle and length passed in
      * @param {number} [angle]
@@ -535,8 +713,8 @@ class Vector2
     {
         ASSERT_NUMBER_VALID(angle);
         ASSERT_NUMBER_VALID(length);
-        this.x = length*Math.sin(angle);
-        this.y = length*Math.cos(angle);
+        this.x = length*sin(angle);
+        this.y = length*cos(angle);
         return this;
     }
 
@@ -546,7 +724,7 @@ class Vector2
     rotate(angle)
     {
         ASSERT_NUMBER_VALID(angle);
-        const c = Math.cos(-angle), s = Math.sin(-angle);
+        const c = cos(-angle), s = sin(-angle);
         return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
     }
 
@@ -578,7 +756,7 @@ class Vector2
 
     /** Returns a copy of this vector with each axis floored
      * @return {Vector2} */
-    floor() { return new Vector2(Math.floor(this.x), Math.floor(this.y)); }
+    floor() { return new Vector2(floor(this.x), floor(this.y)); }
 
     /** Returns new vec2 with modded values
     *  @param {number} [divisor]
@@ -886,67 +1064,67 @@ class Color
 /** Color - White #ffffff
  *  @type {Color}
  *  @memberof Utilities */
-const WHITE = protectEngineConstant(rgb());
+const WHITE = debugProtectConstant(rgb());
 
 /** Color - Clear White #757474ff with 0 alpha
  *  @type {Color}
  *  @memberof Utilities */
-const CLEAR_WHITE = protectEngineConstant(rgb(1,1,1,0));
+const CLEAR_WHITE = debugProtectConstant(rgb(1,1,1,0));
 
 /** Color - Black #000000
  *  @type {Color}
  *  @memberof Utilities */
-const BLACK = protectEngineConstant(rgb(0,0,0));
+const BLACK = debugProtectConstant(rgb(0,0,0));
 
 /** Color - Clear Black #000000 with 0 alpha
  *  @type {Color}
  *  @memberof Utilities */
-const CLEAR_BLACK = protectEngineConstant(rgb(0,0,0,0));
+const CLEAR_BLACK = debugProtectConstant(rgb(0,0,0,0));
 
 /** Color - Gray #808080
  *  @type {Color}
  *  @memberof Utilities */
-const GRAY = protectEngineConstant(rgb(.5,.5,.5));
+const GRAY = debugProtectConstant(rgb(.5,.5,.5));
 
 /** Color - Red #ff0000
  *  @type {Color}
  *  @memberof Utilities */
-const RED = protectEngineConstant(rgb(1,0,0));
+const RED = debugProtectConstant(rgb(1,0,0));
 
 /** Color - Orange #ff8000
  *  @type {Color}
  *  @memberof Utilities */
-const ORANGE = protectEngineConstant(rgb(1,.5,0));
+const ORANGE = debugProtectConstant(rgb(1,.5,0));
 
 /** Color - Yellow #ffff00
  *  @type {Color}
  *  @memberof Utilities */
-const YELLOW = protectEngineConstant(rgb(1,1,0));
+const YELLOW = debugProtectConstant(rgb(1,1,0));
 
 /** Color - Green #00ff00
  *  @type {Color}
  *  @memberof Utilities */
-const GREEN = protectEngineConstant(rgb(0,1,0));
+const GREEN = debugProtectConstant(rgb(0,1,0));
 
 /** Color - Cyan #00ffff
  *  @type {Color}
  *  @memberof Utilities */
-const CYAN = protectEngineConstant(rgb(0,1,1));
+const CYAN = debugProtectConstant(rgb(0,1,1));
 
 /** Color - Blue #0000ff
  *  @type {Color}
  *  @memberof Utilities */
-const BLUE = protectEngineConstant(rgb(0,0,1));
+const BLUE = debugProtectConstant(rgb(0,0,1));
 
 /** Color - Purple #8000ff
  *  @type {Color}
  *  @memberof Utilities */
-const PURPLE = protectEngineConstant(rgb(.5,0,1));
+const PURPLE = debugProtectConstant(rgb(.5,0,1));
 
 /** Color - Magenta #ff00ff
  *  @type {Color}
  *  @memberof Utilities */
-const MAGENTA = protectEngineConstant(rgb(1,0,1));
+const MAGENTA = debugProtectConstant(rgb(1,0,1));
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -1009,39 +1187,9 @@ class Timer
 
     /** Returns this timer expressed as a string
      * @return {string} */
-    toString() { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }
+    toString() { return this.isSet() ? 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(); }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// Helper functions used by the engine
-
-// make color constants immutable with debug assertions
-function protectEngineConstant(obj)
-{
-    if (debug)
-    {
-        // get properties and store original values
-        const props = Object.keys(obj), values = {};
-        props.forEach(prop => values[prop] = obj[prop]);
-        
-        // replace with getters/setters that assert
-        props.forEach(prop =>
-        {
-            Object.defineProperty(obj, prop, {
-                get: () => values[prop],
-                set: (value) => 
-                {
-                    ASSERT(false, `Cannot modify engine constant. Attempted to set constant (${obj}) property '${prop}' to '${value}'.`);
-                },
-                enumerable: true
-            });
-        });
-    }
-    
-    // freeze the object to prevent adding new properties
-    return Object.freeze(obj);
 }

package/src/engineWebGL.js

@@ -29,7 +29,7 @@ let glContext;
 let glAntialias = true;
 
 // WebGL internal variables not exposed to documentation
-let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos;
+let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos, glCanBeEnabled = true;
 
 // WebGL internal constants
 const gl_ARRAY_BUFFER_SIZE = 5e5;
@@ -48,7 +48,11 @@ function glInit()
     // keep set of texture infos so they can be restored if context is lost
     glTextureInfos = new Set;
 
-    if (!glEnable || headlessMode) return;
+    if (!glEnable || headlessMode)
+    {
+        glCanBeEnabled = false;
+        return;
+    }
 
     // create the canvas and textures
     glCanvas = document.createElement('canvas');
@@ -59,10 +63,11 @@ function glInit()
         console.warn('WebGL2 not supported, falling back to 2D canvas rendering!');
         glCanvas = glContext = undefined;
         glEnable = false;
+        glCanBeEnabled = false;
         return;
     }
 
-    // create the WebGL canvas
+    // attach the WebGL canvas
     const rootElement = mainCanvas.parentElement;
     rootElement.appendChild(glCanvas);
     
@@ -85,7 +90,7 @@ function glInit()
     });
     glCanvas.addEventListener('webglcontextrestored', ()=>
     {
-        glEnable = true; // disable WebGL rendering
+        glEnable = true; // re-enable WebGL rendering
         glCanvas.style.display = ''; // show the gl canvas
         LOG('WebGL context restored, reinitializing...');
 
@@ -237,8 +242,8 @@ function glPreRender()
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
     const rotatedCam = cameraPos.rotate(-cameraAngle);
     const p = vec2(-1).subtract(rotatedCam.multiply(s));
-    const ca = Math.cos(cameraAngle);
-    const sa = Math.sin(cameraAngle);
+    const ca = cos(cameraAngle);
+    const sa = sin(cameraAngle);
     const transform = [
         s.x  * ca,  s.y * sa, 0, 0,
         -s.x * sa,  s.y * ca, 0, 0,
@@ -543,8 +548,8 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
         // transform the point
         const px = p.x*sx;
         const py = p.y*sy;
-        const sa = Math.sin(-angle);
-        const ca = Math.cos(-angle);
+        const sa = sin(-angle);
+        const ca = cos(-angle);
         pointsOut.push(vec2(x + ca*px - sa*py, y + sa*px + ca*py));
     }
     const drawPoints = tristrip ? glPolyStrip(pointsOut) : pointsOut;

package/examples/shorts/raycasting.js

@@ -1,79 +0,0 @@
-let playerPos = vec2(), playerAngle = 0;
-
-// a simple function to generate a level
-const levelTest = (X,Y)=> ((X|0)**3&(Y|0)**2)%30>5;
-
-// cast a ray and return the distance to the first wall hit (0-1)
-function raycast(pos, angle)
-{
-    const maxDistance = 40, delta = .05;
-    const rayX = delta*Math.sin(angle);
-    const rayY = delta*Math.cos(angle);
-    let posX = pos.x, posY = pos.y;
-    for (let distance = 0; distance < maxDistance; distance += delta)
-    {
-        if (levelTest(posX, posY))
-            return distance/maxDistance;
-        posX += rayX;
-        posY += rayY;
-    }
-    return 1;
-}
-
-function gameUpdate()
-{
-    // update camera angle with mouse pointer lock
-    if (mouseWasPressed(0))
-        pointerLockRequest();
-    if (keyWasPressed('Escape'))
-        pointerLockExit()
-    if (pointerLockIsActive() || isTouchDevice)
-        playerAngle += mouseDelta.x * .003;
-
-    // update player movement, prevent walking through walls
-    let velocity = keyDirection();
-    if (velocity.y && mouseIsDown(0))
-        velocity.y = 1; // forward movement with mouse
-    velocity = velocity.rotate(playerAngle).scale(.1);
-    const newPos = playerPos.add(velocity);
-    if (!levelTest(newPos.x, newPos.y))
-        playerPos = newPos;
-}
-
-function gameRender()
-{
-    {
-        // draw horizontal slizes to create floor and ceiling
-        const h = 9;
-        let pos = vec2(), size = vec2(39, .15), color = rgb();
-        for (let y=-h; y<h; y+=.1)
-        {
-            const p = 1.01-abs(y/h)
-            pos.y = y;
-            color.setHSLA(.1, y>0?0:.5, .7-p*.7);
-            drawRect(pos, size, color);
-        }
-    }
-    {
-        // draw vertical slices to create the walls
-        const w = 20;
-        const pos = vec2(), size = vec2(.15), color = rgb();
-        for (let x=-w; x<w; x+=.1)
-        {
-            const p = raycast(playerPos, playerAngle + x/w);
-            pos.x = x;
-            size.y = .4/p;
-            color.setHSLA(.6, .5, .7-p*.7);
-            drawRect(pos, size, color);
-        }
-    }
-    // draw instructions and pointer lock status
-    const instructions = pointerLockIsActive() ? 
-        'Mouse Control Active - ESC To Exit' : 
-        'Click To Enable Mouse Control';
-    const textPos = vec2(mainCanvasSize.x/2, 50);
-    const textSize = 24;
-    const textColor = pointerLockIsActive() ? GREEN : WHITE;
-    if (!isTouchDevice)
-        drawTextScreen(instructions, textPos, textSize, textColor);
-}