littlejsengine 1.9.7 → 1.9.9

package/src/engineDraw.js

@@ -320,7 +320,7 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
-    context.scale(mirror ? -size.x : size.x, size.y);
+    context.scale(mirror ? -size.x : size.x, -size.y);
     drawFunction(context);
     context.restore();
 }

package/src/engineExport.js

@@ -20,6 +20,7 @@ export {
 	engineObjectsUpdate,
 	engineObjectsDestroy,
 	engineObjectsCallback,
+	engineAddPlugin,
 	
 	// Globals
 	debug,
@@ -29,13 +30,16 @@ export {
 	// Debug
 	ASSERT,
 	debugRect,
+	debugPoly,
 	debugCircle,
 	debugPoint,
 	debugLine,
-	debugAABB,
+	debugOverlap,
 	debugText,
 	debugClear,
 	debugSaveCanvas,
+	debugSaveText,
+	debugSaveDataURL,
 
 	// Settings
 	cameraPos,
@@ -98,6 +102,7 @@ export {
 	setObjectMaxSpeed,
 	setGravity,
 	setParticleEmitRateScale,
+	setTouchInputEnable,
 	setGamepadsEnable,
 	setGamepadDirectionEmulateStick,
 	setInputWASDEmulateDirection,
@@ -187,7 +192,6 @@ export {
 	glCompileShader,
 	glCreateProgram,
 	glCreateTexture,
-	glInitPostProcess,
 
 	// Input
 	keyIsDown,
@@ -246,7 +250,5 @@ export {
 	medals,
 	medalsPreventUnlock,
 	medalsInit,
-	newgroundsInit,
 	Medal,
-	Newgrounds,
 };

package/src/engineInput.js

@@ -3,6 +3,7 @@
  * - Tracks keyboard down, pressed, and released
  * - Tracks mouse buttons, position, and wheel
  * - Tracks multiple analog gamepads
+ * - Touch input is handled as mouse input
  * - Virtual gamepad for touch devices
  * @namespace Input
  */
@@ -136,7 +137,8 @@ function inputUpdate()
     if (headlessMode) return;
 
     // clear input when lost focus (prevent stuck keys)
-    isTouchDevice || document.hasFocus() || clearInput();
+    if(!(touchInputEnable && isTouchDevice) && !document.hasFocus())
+        clearInput();
 
     // update mouse world space position
     mousePos = screenToWorld(mousePosScreen);
@@ -208,7 +210,7 @@ function inputInit()
     oncontextmenu = (e)=> false; // prevent right click menu
 
     // init touch input
-    if (isTouchDevice)
+    if (isTouchDevice && touchInputEnable && !headlessMode)
         touchInputInit();
 }
 
@@ -336,12 +338,12 @@ function vibrateStop() { vibrate(0); }
 
 /** True if a touch device has been detected
  *  @memberof Input */
-const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
+const isTouchDevice = window.ontouchstart !== undefined;
 
 // touch gamepad internal variables
 let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 
-// try to enable touch mouse
+// enable touch input mouse passthrough
 function touchInputInit()
 {
     // add non passive touch event listeners
@@ -450,6 +452,7 @@ function touchInputInit()
 // render the touch gamepad, called automatically by the engine
 function touchGamepadRender()
 {
+    if (!touchInputEnable || !isTouchDevice || headlessMode) return;
     if (!touchGamepadEnable || !touchGamepadTimer.isSet())
         return;
     

package/src/engineMedals.js

@@ -9,9 +9,9 @@
 'use strict';
 
 /** List of all medals
- *  @type {Array}
+ *  @type {Object}
  *  @memberof Medals */
-const medals = [];
+const medals = {};
 
 // Engine internal variables not exposed to documentation
 let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
@@ -27,9 +27,46 @@ function medalsInit(saveName)
 {
     // check if medals are unlocked
     medalsSaveName = saveName;
-    debugMedals || medals.forEach(medal=> medal.unlocked = (localStorage[medal.storageKey()] | 0));
+    if (!debugMedals)
+        medalsForEach(medal=> medal.unlocked = (localStorage[medal.storageKey()] | 0));
+
+    // engine automatically renders medals
+    engineAddPlugin(undefined, medalsRender);
+    function medalsRender()
+    {
+        if (!medalsDisplayQueue.length)
+            return;
+        
+        // update first medal in queue
+        const medal = medalsDisplayQueue[0];
+        const time = timeReal - medalsDisplayTimeLast;
+        if (!medalsDisplayTimeLast)
+            medalsDisplayTimeLast = timeReal;
+        else if (time > medalDisplayTime)
+        {
+            medalsDisplayTimeLast = 0;
+            medalsDisplayQueue.shift();
+        }
+        else
+        {
+            // slide on/off medals
+            const slideOffTime = medalDisplayTime - medalDisplaySlideTime;
+            const hidePercent = 
+                time < medalDisplaySlideTime ? 1 - time / medalDisplaySlideTime :
+                time > slideOffTime ? (time - slideOffTime) / medalDisplaySlideTime : 0;
+            medal.render(hidePercent);
+        }
+    }
 }
 
+/** Calls a function for each medal
+ *  @param {Function} callback
+ *  @memberof Medals */
+function medalsForEach(callback)
+{ Object.values(medals).forEach(medal=>callback(medal)); }
+
+///////////////////////////////////////////////////////////////////////////////
+
 /** 
  * Medal - Tracks an unlockable medal 
  * @example
@@ -74,7 +111,6 @@ class Medal
         ASSERT(medalsSaveName, 'save name must be set');
         localStorage[this.storageKey()] = this.unlocked = 1;
         medalsDisplayQueue.push(this);
-        newgrounds && newgrounds.unlockMedal(this.id);
     }
 
     /** Render a medal
@@ -122,171 +158,4 @@ class Medal
  
     // Get local storage key used by the medal
     storageKey() { return medalsSaveName + '_' + this.id; }
-}
-
-// engine automatically renders medals
-function medalsRender()
-{
-    if (!medalsDisplayQueue.length)
-        return;
-    
-    // update first medal in queue
-    const medal = medalsDisplayQueue[0];
-    const time = timeReal - medalsDisplayTimeLast;
-    if (!medalsDisplayTimeLast)
-        medalsDisplayTimeLast = timeReal;
-    else if (time > medalDisplayTime)
-    {
-        medalsDisplayTimeLast = 0;
-        medalsDisplayQueue.shift();
-    }
-    else
-    {
-        // slide on/off medals
-        const slideOffTime = medalDisplayTime - medalDisplaySlideTime;
-        const hidePercent = 
-            time < medalDisplaySlideTime ? 1 - time / medalDisplaySlideTime :
-            time > slideOffTime ? (time - slideOffTime) / medalDisplaySlideTime : 0;
-        medal.render(hidePercent);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-// global Newgrounds object
-let newgrounds;
-
-/** This can used to enable Newgrounds functionality
- *  @param {Number} app_id   - The newgrounds App ID
- *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
- *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher
- *  @memberof Medals */
-function newgroundsInit(app_id, cipher, cryptoJS)
-{ newgrounds = new Newgrounds(app_id, cipher, cryptoJS); }
-
-/** 
- * Newgrounds API wrapper object
- * @example
- * // create a newgrounds object, replace the app id with your own
- * const app_id = '53123:1ZuSTQ9l';
- * newgrounds = new Newgrounds(app_id);
- */
-class Newgrounds
-{
-    /** Create a newgrounds object
-     *  @param {Number} app_id   - The newgrounds App ID
-     *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
-     *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher */
-    constructor(app_id, cipher, cryptoJS)
-    {
-        ASSERT(!newgrounds && app_id>0, 'there can only be one newgrounds object');
-        ASSERT(!cipher || cryptoJS, 'must provide cryptojs if there is a cipher');
-
-        this.app_id = app_id;
-        this.cipher = cipher;
-        this.cryptoJS = cryptoJS;
-        this.host = location ? location.hostname : '';
-
-        // get session id from url search params
-        const url = new URL(location.href);
-        this.session_id = url.searchParams.get('ngio_session_id');
-
-        if (!this.session_id)
-            return; // only use newgrounds when logged in
-
-        // get medals
-        const medalsResult = this.call('Medal.getList');
-        this.medals = medalsResult ? medalsResult.result.data['medals'] : [];
-        debugMedals && console.log(this.medals);
-        for (const newgroundsMedal of this.medals)
-        {
-            const medal = medals[newgroundsMedal['id']];
-            if (medal)
-            {
-                // copy newgrounds medal data
-                medal.image =       new Image;
-                medal.image.src =   newgroundsMedal['icon'];
-                medal.name =        newgroundsMedal['name'];
-                medal.description = newgroundsMedal['description'];
-                medal.unlocked =    newgroundsMedal['unlocked'];
-                medal.difficulty =  newgroundsMedal['difficulty'];
-                medal.value =       newgroundsMedal['value'];
-
-                if (medal.value)
-                    medal.description = medal.description + ' (' + medal.value + ')';
-            }
-        }
-    
-        // get scoreboards
-        const scoreboardResult = this.call('ScoreBoard.getBoards');
-        this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
-        debugMedals && console.log(this.scoreboards);
-
-        const keepAliveMS = 5 * 60 * 1e3;
-        setInterval(()=>this.call('Gateway.ping', 0, true), keepAliveMS);
-    }
-
-    /** Send message to unlock a medal by id
-     * @param {Number} id - The medal id */
-    unlockMedal(id) { return this.call('Medal.unlock', {'id':id}, true); }
-
-    /** Send message to post score
-     * @param {Number} id    - The scoreboard id
-     * @param {Number} value - The score value */
-    postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, true); }
-
-    /** Get scores from a scoreboard
-     * @param {Number} id       - The scoreboard id
-     * @param {String} [user]   - A user's id or name
-     * @param {Number} [social] - If true, only social scores will be loaded
-     * @param {Number} [skip]   - Number of scores to skip before start
-     * @param {Number} [limit]  - Number of scores to include in the list
-     * @return {Object}         - The response JSON object
-     */
-    getScores(id, user, social=0, skip=0, limit=10)
-    { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
-
-    /** Send message to log a view */
-    logView() { return this.call('App.logView', {'host':this.host}, true); }
-
-    /** Send a message to call a component of the Newgrounds API
-     * @param {String}  component    - Name of the component
-     * @param {Object}  [parameters] - Parameters to use for call
-     * @param {Boolean} [async]      - If true, don't wait for response before continuing
-     * @return {Object}              - The response JSON object
-     */
-    call(component, parameters, async=false)
-    {
-        const call = {'component':component, 'parameters':parameters};
-        if (this.cipher)
-        {
-            // encrypt using AES-128 Base64 with cryptoJS
-            const cryptoJS = this.cryptoJS;
-            const aesKey = cryptoJS['enc']['Base64']['parse'](this.cipher);
-            const iv = cryptoJS['lib']['WordArray']['random'](16);
-            const encrypted = cryptoJS['AES']['encrypt'](JSON.stringify(call), aesKey, {'iv':iv});
-            call['secure'] = cryptoJS['enc']['Base64']['stringify'](iv.concat(encrypted['ciphertext']));
-            call['parameters'] = 0;
-        }
-
-        // build the input object
-        const input =
-        {
-            'app_id':     this.app_id,
-            'session_id': this.session_id,
-            'call':       call
-        };
-
-        // build post data
-        const formData = new FormData();
-        formData.append('input', JSON.stringify(input));
-        
-        // send post data
-        const xmlHttp = new XMLHttpRequest();
-        const url = 'https://newgrounds.io/gateway_v3.php';
-        xmlHttp.open('POST', url, !debugMedals && async);
-        xmlHttp.send(formData);
-        debugMedals && console.log(xmlHttp.responseText);
-        return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
-    }
 }

package/src/engineObject.js

@@ -205,7 +205,7 @@ class EngineObject
                     if (o.mass) // push away if not fixed
                         o.velocity = o.velocity.subtract(velocity);
                         
-                    debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f00');
+                    debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
                     continue;
                 }
 
@@ -267,7 +267,7 @@ class EngineObject
                     else // bounce if other object is fixed
                         this.velocity.x *= -elasticity;
                 }
-                debugOverlay && debugPhysics && debugAABB(this.pos, this.size, o.pos, o.size, '#f0f');
+                debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f');
             }
         }
         if (this.collideTiles)
@@ -328,6 +328,22 @@ class EngineObject
         for (const child of this.children)
             child.destroy(child.parent = 0);
     }
+
+    /** Convert from local space to world space
+     *  @param {Vector2} pos - local space point */
+    localToWorld(pos) { return this.pos.add(pos.rotate(-this.angle)); }
+
+    /** Convert from world space to local space
+     *  @param {Vector2} pos - world space point */
+    worldToLocal(pos) { return pos.subtract(this.pos).rotate(this.angle); }
+
+    /** Convert from local space to world space for a vector (rotation only)
+     *  @param {Vector2} vec - local space vector */
+    localToWorldVector(vec) { return vec.rotate(this.angle); }
+
+    /** Convert from world space to local space for a vector (rotation only)
+     *  @param {Vector2} vec - world space vector */
+    worldToLocalVector(vec) { return vec.rotate(-this.angle); }
     
     /** Called to check if a tile collision should be resolved
      *  @param {Number}  tileData - the value of the tile at the position
@@ -414,4 +430,19 @@ class EngineObject
             return text;
         }
     }
+
+    /** Render debug info for this object  */
+    renderDebugInfo()
+    {
+        if (debug)
+        {
+            // show object info for debugging
+            const size = vec2(max(this.size.x, .2), max(this.size.y, .2));
+            const color1 = rgb(this.collideTiles?1:0, this.collideSolidObjects?1:0, this.isSolid?1:0, this.parent?.2:.5);
+            const color2 = this.parent ? rgb(1,1,1,.5) : rgb(0,0,0,.8);
+            drawRect(this.pos, size, color1, this.angle, false);
+            drawRect(this.pos, size.scale(.8), color2, this.angle, false);
+            this.parent && drawLine(this.pos, this.parent.pos, .1, rgb(0,0,1,.5), false);
+        }
+    }
 }

package/src/engineRelease.js

@@ -22,10 +22,13 @@ function debugInit       (){}
 function debugUpdate     (){}
 function debugRender     (){}
 function debugRect       (){}
+function debugPoly       (){}
 function debugCircle     (){}
 function debugPoint      (){}
 function debugLine       (){}
-function debugAABB       (){}
+function debugOverlap    (){}
 function debugText       (){}
 function debugClear      (){}
-function debugSaveCanvas (){}
+function debugSaveCanvas (){}
+function debugSaveText   (){}
+function debugSaveDataURL(){}

package/src/engineSettings.js

@@ -26,9 +26,9 @@ let cameraScale = 32;
 
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
- *  @default Vector2(1920,1200)
+ *  @default Vector2(1920,1080)
  *  @memberof Settings */
-let canvasMaxSize = vec2(1920, 1200);
+let canvasMaxSize = vec2(1920, 1080);
 
 /** Fixed size of the canvas, if enabled canvas size never changes
  * - you may also need to set mainCanvasSize if using screen space coords in startup
@@ -169,6 +169,13 @@ let gamepadDirectionEmulateStick = true;
  *  @memberof Settings */
 let inputWASDEmulateDirection = true;
 
+/** True if touch input is enabled for mobile devices
+ *  - Touch events will be routed to mouse events
+ *  @type {Boolean}
+ *  @default
+ *  @memberof Settings */
+let touchInputEnable = true;
+
 /** True if touch gamepad should appear on mobile devices
  *  - Supports left analog stick, 4 face buttons and start button (button 9)
  *  - Must be set by end of gameInit to be activated
@@ -384,6 +391,11 @@ function setGamepadDirectionEmulateStick(enable) { gamepadDirectionEmulateStick
  *  @memberof Settings */
 function setInputWASDEmulateDirection(enable) { inputWASDEmulateDirection = enable; }
 
+/** Set if touch input is allowed
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setTouchInputEnable(enable) { touchInputEnable = enable; }
+
 /** Set if touch gamepad should appear on mobile devices
  *  @param {Boolean} enable
  *  @memberof Settings */

package/src/engineUtilities.js

@@ -301,7 +301,7 @@ class RandomGenerator
  */
 function vec2(x=0, y)
 {
-    return typeof x === 'number' ? 
+    return typeof x == 'number' ? 
         new Vector2(x, y == undefined? x : y) : 
         new Vector2(x.x, x.y);
 }
@@ -330,13 +330,19 @@ class Vector2
      *  @param {Number} [y] - Y axis location */
     constructor(x=0, y=0)
     {
-        ASSERT(typeof x === 'number' && typeof y === 'number');
+        ASSERT(typeof x == 'number' && typeof y == 'number');
         /** @property {Number} - X axis location */
         this.x = x;
         /** @property {Number} - Y axis location */
         this.y = y;
     }
 
+    /** Sets values of this vector and returns self
+     *  @param {Number} [x] - X axis location
+     *  @param {Number} [y] - Y axis location
+     *  @return {Vector2} */
+    set(x=0, y=0) { this.x=x; this.y=y; return this; }
+
     /** Returns a new vector that is a copy of this
      *  @return {Vector2} */
     copy() { return new Vector2(this.x, this.y); }
@@ -588,6 +594,15 @@ class Color
         this.a = a;
     }
 
+    /** Sets values of this color and returns self
+     *  @param {Number} [r] - red
+     *  @param {Number} [g] - green
+     *  @param {Number} [b] - blue
+     *  @param {Number} [a] - alpha
+     *  @return {Color} */
+    set(r=1, g=1, b=1, a=1)
+    { this.r=r; this.g=g; this.b=b; this.a=a; return this; }
+
     /** Returns a new color that is a copy of this
      * @return {Color} */
     copy() { return new Color(this.r, this.g, this.b, this.a); }
@@ -749,6 +764,64 @@ class Color
     }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+// default colors
+
+/** Color - White
+ *  @type {Color}
+ *  @memberof Utilities */
+const WHITE = rgb();
+
+/** Color - Black
+ *  @type {Color}
+ *  @memberof Utilities */
+const BLACK = rgb(0,0,0);
+
+/** Color - Gray
+ *  @type {Color}
+ *  @memberof Utilities */
+const GRAY = rgb(.5,.5,.5);
+
+/** Color - Red
+ *  @type {Color}
+ *  @memberof Utilities */
+const RED = rgb(1,0,0);
+
+/** Color - Orange
+ *  @type {Color}
+ *  @memberof Utilities */
+const ORANGE = rgb(1,.5,0);
+
+/** Color - Yellow
+ *  @type {Color}
+ *  @memberof Utilities */
+const YELLOW = rgb(1,1,0);
+
+/** Color - Green
+ *  @type {Color}
+ *  @memberof Utilities */
+const GREEN = rgb(0,1,0);
+
+/** Color - Cyan
+ *  @type {Color}
+ *  @memberof Utilities */
+const CYAN = rgb(0,1,1);
+
+/** Color - Blue
+ *  @type {Color}
+ *  @memberof Utilities */
+const BLUE = rgb(0,0,1);
+
+/** Color - Purple
+ *  @type {Color}
+ *  @memberof Utilities */
+const PURPLE = rgb(.5,0,1);
+
+/** Color - Magenta
+ *  @type {Color}
+ *  @memberof Utilities */
+const MAGENTA = rgb(1,0,1);
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /**

package/src/engineWebGL.js

@@ -87,7 +87,7 @@ function glPreRender()
 
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width=mainCanvas.width, glCanvas.height=mainCanvas.height);
-    //glContext.clear(gl_COLOR_BUFFER_BIT); // auto cleared when size is set
+    glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
     glContext.useProgram(glShader);
@@ -270,99 +270,6 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdd
     glInstanceCount++;
 }
 
-///////////////////////////////////////////////////////////////////////////////
-// post processing - can be enabled to pass other canvases through a final shader
-
-let glPostShader, glPostTexture, glPostIncludeOverlay;
-
-/** Set up a post processing shader
- *  @param {String} shaderCode
- *  @param {Boolean} includeOverlay
- *  @memberof WebGL */
-function glInitPostProcess(shaderCode, includeOverlay=false)
-{
-    ASSERT(!glPostShader, 'can only have 1 post effects shader');
-    if (headlessMode) return;
-    if (!shaderCode) // default shader pass through
-        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
-
-    // create the shader
-    glPostShader = glCreateProgram(
-        '#version 300 es\n' +            // specify GLSL ES version
-        'precision highp float;'+        // use highp for better accuracy
-        'in vec2 p;'+                    // position
-        'void main(){'+                  // shader entry point
-        'gl_Position=vec4(p+p-1.,1,1);'+ // set position
-        '}'                              // end of shader
-        ,
-        '#version 300 es\n' +            // specify GLSL ES version
-        'precision highp float;'+        // use highp for better accuracy
-        'uniform sampler2D iChannel0;'+  // input texture
-        'uniform vec3 iResolution;'+     // size of output texture
-        'uniform float iTime;'+          // time
-        'out vec4 c;'+                   // out color
-        '\n' + shaderCode + '\n'+        // insert custom shader code
-        'void main(){'+                  // shader entry point
-        'mainImage(c,gl_FragCoord.xy);'+ // call post process function
-        'c.a=1.;'+                       // always use full alpha
-        '}'                              // end of shader
-    );
-
-    // create buffer and texture
-    glPostTexture = glCreateTexture(undefined);
-    glPostIncludeOverlay = includeOverlay;
-
-    // hide the original 2d canvas
-    mainCanvas.style.visibility = 'hidden';
-    if (glPostIncludeOverlay)
-        overlayCanvas.style.visibility = 'hidden';
-}
-
-// Render the post processing shader, called automatically by the engine
-function glRenderPostProcess()
-{
-    if (!glPostShader || headlessMode) return;
-    
-    // prepare to render post process shader
-    if (glEnable)
-    {
-        glFlush(); // clear out the buffer
-        mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
-    }
-    else
-    {
-        // set the viewport
-        glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
-    }
-
-    // copy overlay canvas so it will be included in post processing
-    glPostIncludeOverlay && mainContext.drawImage(overlayCanvas, 0, 0);
-
-    // setup shader program to draw one triangle
-    glContext.useProgram(glPostShader);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
-    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, 1);
-    glContext.disable(gl_BLEND);
-
-    // set textures, pass in the 2d canvas and gl canvas in separate texture channels
-    glContext.activeTexture(gl_TEXTURE0);
-    glContext.bindTexture(gl_TEXTURE_2D, glPostTexture);
-    glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, mainCanvas);
-
-    // set vertex position attribute
-    const vertexByteStride = 8;
-    const pLocation = glContext.getAttribLocation(glPostShader, 'p');
-    glContext.enableVertexAttribArray(pLocation);
-    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, false, vertexByteStride, 0);
-
-    // set uniforms and draw
-    const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
-    glContext.uniform1i(uniformLocation('iChannel0'), 0);
-    glContext.uniform1f(uniformLocation('iTime'), time);
-    glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
-    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 // store gl constants as integers so their name doesn't use space in minifed
 const