littlejsengine 1.14.16 → 1.14.23

package/examples/box2d/game.js

@@ -56,10 +56,9 @@ async function gameInit()
     // start up LittleJS Box2D plugin
     await LJS.box2dInit();
     //LJS.box2dSetDebug(true); // enable box2d debug draw
-    LJS.setCanvasClearColor(hsl(0,0,.8));
 
     // create a table of all sprites
-    const gameTile = (i)=> LJS.tile(i, 496, 0, 8);
+    const gameTile = (i)=> LJS.tile(i, 124, 0, 2);
     spriteAtlas =
     {
         circle:         gameTile(0),
@@ -71,6 +70,8 @@ async function gameInit()
         squareOutline2: gameTile(6),
     };
 
+    // startup the demo
+    LJS.setCanvasClearColor(hsl(0,0,.8));
     setScene(startScene);
 }
 

package/examples/breakout/game.js

@@ -104,11 +104,12 @@ function gameRenderPost()
 {
     // use built in image font for text
     const font = new LJS.FontImage;
-    font.drawText('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
+
+    font.drawTextOverlay('Score: ' + score, LJS.cameraPos.add(vec2(0,9.7)), .15, true);
     if (!brickCount)
-        font.drawText('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
+        font.drawTextOverlay('You Win!', LJS.cameraPos.add(vec2(0,-5)), .2, true);
     else if (!ball)
-        font.drawText('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
+        font.drawTextOverlay('Click to Play', LJS.cameraPos.add(vec2(0,-5)), .2, true);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -167,8 +168,7 @@ function setupPostProcess()
         c *= 1.-pow((dx*dx + dy*dy)/vignette, vignettePow);
     }`;
 
-    const includeOverlay = true;
-    new LJS.PostProcessPlugin(televisionShader, includeOverlay);
+    new LJS.PostProcessPlugin(televisionShader);
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/electron/game.js

@@ -16,13 +16,6 @@ setTileFixBleedScale(.5);
 // sound effects
 const sound_click = new Sound([1,.5]);
 
-// medals
-const medal_example = new Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-medalsInit('Hello World');
-
-// game variables
-let particleEmitter;
-
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
@@ -58,23 +51,6 @@ function gameInit()
     // setup camera
     setCameraPos(vec2(16,8));
     setCameraScale(32);
-
-    // enable gravity
-    setGravity(vec2(0,-.01));
-
-    // create particle emitter
-    particleEmitter = new ParticleEmitter(
-        vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 500, PI,              // emitSize, emitTime, rate, cone
-        tile(0, 16),                // tileIndex, tileSize
-        hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
-        hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
-        .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
-        .05, .5, true, true         // fadeRate, randomness, collide, additive
-    );
-    particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch as it moves
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -84,15 +60,6 @@ function gameUpdate()
     {
         // play sound when mouse is pressed
         sound_click.play(mousePos);
-
-        // change particle color and set to fade out
-        particleEmitter.colorStartA = randColor();
-        particleEmitter.colorStartB = randColor();
-        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
-        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
-
-        // unlock medals
-        medal_example.unlock();
     }
 
     if (mouseWheel)
@@ -101,13 +68,6 @@ function gameUpdate()
         cameraScale -= sign(mouseWheel)*cameraScale/5;
         cameraScale = clamp(cameraScale, 10, 300);
     }
-
-    // move particles to mouse location if on screen
-    if (mousePosScreen.x)
-    {
-        particleEmitter.pos = mousePos;
-        particleEmitter.velocity = mouseDelta.scale(.3*timeDelta);
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -130,7 +90,7 @@ function gameRender()
 function gameRenderPost()
 {
     // draw to overlay canvas for hud rendering
-    drawTextScreen('LittleJS Demo', 
+    drawTextScreen('LittleJS Electron Demo', 
         vec2(mainCanvasSize.x/2, 70), 80,   // position, size
         hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
 }

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?11416></script>
+<script src=../../dist/littlejs.js?1.14.24></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?11416></script>
+<script src=game.js?1.14.24></script>

package/examples/htmlMenu/game.js

@@ -64,7 +64,7 @@ function gameRender()
     for (let i=0; i<1e3; ++i)
     {
         const time = LJS.time;
-        const pos = vec2(30*Math.sin(i+time/9),20*Math.sin(i*i+time/9));
+        const pos = vec2(30*LJS.sin(i+time/9),20*LJS.sin(i*i+time/9));
         LJS.drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), time+i, !(i%2), hsl(i/9,1,.1,0));
     }
 }

package/examples/index.html

@@ -4,6 +4,17 @@
 <link rel=stylesheet href=style.css?9>
 <meta charset=utf-8>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+<!-- meta tags for social media -->
+<meta name='twitter:title'       content='LittleJS Example Browser'>
+<meta property='og:title'        content='LittleJS Example Browser'>
+<meta name='description'         content='Tiny fast HTML5 game engine!'>
+<meta name='twitter:description' content='Tiny fast HTML5 game engine!'>
+<meta property='og:description'  content='Tiny fast HTML5 game engine!'>
+<meta name='twitter:image'       content='https://3d2k.com/images/LittleJSExamples.png'>
+<meta property='og:image'        content='https://3d2k.com/images/LittleJSExamples.png'>
+<meta name='keywords'            content='JavaScript, HTML5, Game, Engine'>
+<meta name='twitter:creator'     content='@KilledByAPixel'>
+<meta name='twitter:card'        content='summary_large_image'>
 </head><body>
 <div id=container1>
 <div id=container3>
@@ -21,8 +32,7 @@ Theme:
     <option value=20px>L</option>
     <option value=24px>XL</option>
 </select>
-<span class=nowrap><input type=checkbox id=checkboxLiveEdit checked>Live Edit</span>
-<span class=nowrap><input type=checkbox id=checkboxJumpToErrors>Jump to Errors</span>
+<span class=nowrap><input type=checkbox id=checkboxLiveEdit onchange=writeSaveData() checked>Live Edit</span>
 </div>
 <div id=divTextareas>
 <textarea id=textareaCode oninput=codeInput() spellcheck=false></textarea>
@@ -79,9 +89,9 @@ const exampleList =
     new ExampleInfo('Empty', 'empty.js', 'Empty example template', false, 'beginner, text'),
     new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation', false, 'sprites, loading, tiles'),
     new ExampleInfo('Animation', 'animation.js', 'Sprite animation system', false, 'frames, loop, tiles, sprites'),
-    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives', false, 'circle, ellipses, rectangles, polygon, lines'),
-    new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL', false, 'hue, saturation, blending, rectangles'),
-    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield', false, 'space, movement, depth, rectangles'),
+    new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives', false, 'circle, ellipse, rectangle, polygon, lines'),
+    new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL', false, 'hue, saturation, blending, rectangle'),
+    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield', false, 'space, movement, depth, rectangle'),
     new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering', false, 'sheet, frames, tiles'),
     new ExampleInfo('Blending', 'blending.js', 'Additive blending and transparency', false, 'alpha, color, tiles, smooth'),
     new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system', false, 'level, map, grid, particles'),
@@ -93,10 +103,14 @@ const exampleList =
     new ExampleInfo('Parallax', 'parallax.js', 'Parallax scrolling mountains', false, 'generative, canvas, background'),
     new ExampleInfo('Maze Generator', 'maze.js', 'Procedural maze generation', false, 'generative, level, tiles, map, grid'),
     new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
-    new ExampleInfo('Clock', 'clock.js', 'Animated analog clock', false, 'time, rotation, lines, rectangles'),
+    new ExampleInfo('Tile Raycast', 'tileRaycast.js', 'Example of the tile layer raycast collision', false, 'level, map, grid'),
+    new ExampleInfo('Debug Drawing', 'debugDraw.js', 'Debug drawing system', false, 'debug, circle, line, rectangle'),
+    new ExampleInfo('Camera Mouse Drag', 'cameraDrag.js', 'Example of how to control camera with mose', false, 'ui, input, control'),
+    new ExampleInfo('Clock', 'clock.js', 'Animated analog clock', false, 'time, rotation, lines, rectangle'),
     new ExampleInfo('Piano', 'piano.js', 'Interactive piano keyboard', false, 'music, sound, audio, notes, ui, instrument'),
     new ExampleInfo('Step Sequencer', 'sequencer.js', 'Simple music loop creation tool', false, 'music, sound, audio, notes, ui, instrument'),
     new ExampleInfo('Music Player', 'musicPlayer.js', 'Advanced music player with audio seeking and drag and drop', false, 'music, sound, audio, streaming, volume, ui'),
+    new ExampleInfo('WebGL Shader', 'shader.js', 'Full canvas webgl shader', false, 'webgl, visual, effect'),
     new ExampleInfo('--- MINI GAMES ---'),
     new ExampleInfo('Pong Game', 'pongGame.js', 'Classic paddle ball bouncing', false, 'objects, collision'),
     new ExampleInfo('Platformer Game', 'platformer.js', 'Jump and run side view', false, 'objects, gravity, level, tiles, camera'),
@@ -107,7 +121,7 @@ const exampleList =
     new ExampleInfo('Hill Glide Game', 'hillGlideGame.js', 'Tiny wings style sliding game', false, 'objects, physics, speed'),
     new ExampleInfo('Sliding Puzzle', 'slidingPuzzle.js', '15 tile sliding puzzle', false, 'objects, numbers, ui'),
     new ExampleInfo('Space Game', 'spaceGame.js', 'Spaceship shooter with parallax', false, 'objects, weapons, stars, camera, rotation'),
-    new ExampleInfo('Raycasting 3D Game', 'raycasting.js', 'Pseudo 3D raycasting demo', false, '3D, maze, camera'),
+    new ExampleInfo('3D FPS Game', 'fps.js', 'Pseudo 3D raycasting demo', false, '3D, FPS, maze, camera'),
     new ExampleInfo('--- PLUGINS ---'),
     new ExampleInfo('Box2d Demo', 'box2d.js', 'Box2D physics plugin', false, 'objects, mouse'),
     new ExampleInfo('Box2d Car', 'box2dCar.js', 'Drivable car with Box2D physics', false, 'objects, vehicle, suspension, wheels'),
@@ -141,7 +155,7 @@ function initExampleBrowser()
     // set the selected example from the URL parameters
     const urlParams = new URLSearchParams(window.location.search);
     const selectedExample = urlParams.get('example') || '';
-    let exampleIndex = exampleList.findIndex((example) => example.filename === selectedExample);
+    let exampleIndex = exampleList.findIndex((example) => example.name === selectedExample);
     if (exampleIndex < 0)
         exampleIndex = 1;
     selectExample.selectedIndex = exampleIndex;
@@ -240,7 +254,7 @@ function setExample()
     
     // update URL parameter
     const url = new URL(window.location);
-    url.searchParams.set('example', example.filename);
+    url.searchParams.set('example', example.name);
     window.history.replaceState({}, '', url);
     
     loadFile(example.filename, example.largeExample);
@@ -540,7 +554,10 @@ function setCode(code, filename)
         {
             // setup frame controls
             setFrameControlsEnabled();
-            iframeContent.setGLEnable(checkboxWebGL.checked);
+            if (iframeContent.glCanEnable())
+                iframeContent.setGLEnable(checkboxWebGL.checked);
+            else
+                checkboxWebGL.disabled = true;
             checkboxWebGL.onchange = ()=> iframeContent.setGLEnable(checkboxWebGL.checked);
         })
     }
@@ -616,35 +633,6 @@ function setErrorLine(lineNumber)
         clearErrorLine();
         --lineNumber; // codeMirror uses 0-based line numbers
         errorLineMarker = codeMirror.getDoc().addLineClass(lineNumber, 'background', 'error-line');
-        if (checkboxJumpToErrors.checked)
-        {
-            codeMirror.scrollIntoView({line: lineNumber, ch: 0});
-            codeMirror.focus();
-        }
-    }
-    else if (textareaCode && checkboxJumpToErrors.checked)
-    {
-        // for textarea, calculate character position and set cursor
-        const lines = textareaCode.value.split('\n');
-        let charPos = 0;
-        for (let i = 0; i < lineNumber - 1 && i < lines.length; i++)
-        {
-            charPos += lines[i].length + 1; // +1 for newline character
-        }
-        textareaCode.setSelectionRange(charPos, charPos);
-        if (checkboxJumpToErrors.checked)
-        {
-            const line = textareaCode.value.split('\n');
-            lineNumber = Math.min(Math.max(0, lineNumber-1), lines.length-1);
-
-            // select error line in textarea
-            let start = 0;
-            for (let i = 0; i < lineNumber; i++) 
-                start += lines[i].length + 1;
-            textareaCode.selectionStart = start;
-            textareaCode.selectionEnd = start + lines[lineNumber].length;
-            textareaCode.focus();
-        }
     }
 }
 
@@ -669,13 +657,41 @@ textareaConsole.addEventListener('scroll', onScrollConsole);
 
 ///////////////////////////////////////////////////////////////////////////////
 // load saved preferences from localStorage
-const defaultTheme = 'littlejs';
-const defaultFontSize = '16px';
-const savePrefix = 'LittleJSExamples_';
-const savedTheme = localStorage.getItem(savePrefix+'theme') || defaultTheme;
-const savedFontSize = localStorage.getItem(savePrefix+'fontSize') || defaultFontSize;
-selectFontSize.value = savedFontSize;
-textareaCode.style.fontSize = savedFontSize;
+const saveName = 'LittleJSExamples';
+let savedTheme;
+
+function readSaveData()
+{
+    // load saved preferences
+    const defaultTheme = 'littlejs';
+    const defaultFontSize = '16px';
+    const saveDataJSON = localStorage.getItem(saveName);
+    const saveData = saveDataJSON ? JSON.parse(saveDataJSON) : {};
+    selectTheme.value = savedTheme = saveData.theme ?? defaultTheme;
+    selectFontSize.value = saveData.fontSize ?? defaultFontSize;
+}
+readSaveData();
+
+function writeSaveData()
+{
+    // Save preferences to localStorage
+    const theme = selectTheme.value;
+    const fontSize = selectFontSize.value;
+    const saveData =
+    {
+        theme,
+        fontSize
+    };
+    const saveDataJSON = JSON.stringify(saveData);
+    localStorage.setItem(saveName, saveDataJSON);
+}
+
+function resetDefaults()
+{
+    localStorage.removeItem(saveName);
+    readSaveData();
+    loadTheme();
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 // setup code mirror
@@ -753,20 +769,18 @@ function addCodeMirrorElement(filename, type, rel)
 
 function loadTheme()
 {
-    const theme = selectTheme.value;
-    const size = selectFontSize.value;
-    
-    // Save preferences to localStorage
-    localStorage.setItem(savePrefix+'theme', theme);
-    localStorage.setItem(savePrefix+'fontSize', size);
-    
     // Apply the theme and font size
-    textareaCode.style.fontSize = size;
+    const theme = selectTheme.value;
+    const fontSize = selectFontSize.value;
+    textareaCode.style.fontSize = fontSize;
     if (codeMirror)
     {
-        codeMirror.getWrapperElement().style.fontSize = size;
+        codeMirror.getWrapperElement().style.fontSize = fontSize;
         codeMirror.setOption('theme', theme);
     }
+    
+    // Save preferences to localStorage
+    writeSaveData();
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/module/game.js

@@ -69,16 +69,17 @@ function gameInit()
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, Math.PI,         // emitSize, emitTime, rate, cone
+        0, 0, 500, 3.14,            // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-        .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
-        .05, .5, true, true   // fadeRate, randomness, collide, additive
+        1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+        .99, 1, 1, 3.14,    // damping, angleDamping, gravityScale, cone
+        .05, .5, true, true // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch as it moves
+    particleEmitter.trailScale = 2;   // stretch as it moves
+    particleEmitter.velocityInheritance = .3; // inherit emitter velocity
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -101,10 +102,7 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (LJS.mousePosScreen.x)
-    {
         particleEmitter.pos = LJS.mousePos;
-        particleEmitter.velocity = LJS.mouseDelta.scale(.3*LJS.timeDelta);
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/particles/index.html

@@ -298,12 +298,10 @@ function getCode()
 {
     const expand = inputExpand.checked;
     let code = '';
-
-    // https://www.codingem.com/javascript-how-to-limit-decimal-places/
-    Number.prototype.round = function(n) {
-        const d = Math.pow(10, n);
-        return Math.round((this + Number.EPSILON) * d) / d;
-    }
+    
+    // limit float precision to prevent long strings
+    const trimFloat = (n, decimals=3)=>
+        Number(Number(n).toFixed(decimals));
 
     code = 'new ParticleEmitter(';
     if (expand)
@@ -325,13 +323,12 @@ function getCode()
         else if (type == 'color')
         {
             const c = particleSystem[name];
-            const p = 3;
-            value = `new Color(${c.r.round(p)}, ${c.g.round(p)}, ${c.b.round(p)}, ${c.a.round(p)})`;
+            value = `new Color(${trimFloat(c.r)}, ${trimFloat(c.g)}, ${trimFloat(c.b)}, ${trimFloat(c.a)})`;
         }
         else if (type == 'checkbox')
             value = particleSystem[name] ? 1 : 0;
         else
-            value = particleSystem[name].round(3);
+            value = trimFloat(particleSystem[name]);
         if (expand)
             code += '  ';
         code += value;

package/examples/platformer/gameCharacter.js

@@ -238,7 +238,7 @@ export class Character extends GameObjects.GameObject
         if (!this.isDead())
         {
             // bounce pos with walk cycle
-            bodyPos = bodyPos.add(vec2(0,.05*Math.sin(this.walkCyclePercent*LJS.PI)));
+            bodyPos = bodyPos.add(vec2(0,.05*LJS.sin(this.walkCyclePercent*LJS.PI)));
 
             // make bottom flush
             bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));

package/examples/platformer/gameEffects.js

@@ -15,6 +15,9 @@ import * as LJS from '../../dist/littlejs.esm.js';
 import * as GameLevel from './gameLevel.js';
 const {vec2, hsl, rgb} = LJS;
 
+// use low graphics mode on mobile devices
+const lowGraphicsMode = LJS.isTouchDevice;
+
 ///////////////////////////////////////////////////////////////////////////////
 // sound effects
 
@@ -33,7 +36,9 @@ export const sound_score =        new LJS.Sound([,,783,,.03,.02,1,2,,,940,.03,,,
 
 export const persistentParticleDestroyCallback = (particle)=>
 {
-    // copy particle to tile layer on death
+    if (lowGraphicsMode) return;
+
+    // draw particle to tile layer on death
     LJS.ASSERT(!particle.tileInfo, 'quick draw to tile layer uses canvas 2d so must be untextured');
     if (particle.groundObject)
     {
@@ -193,7 +198,7 @@ export class Sky extends LJS.EngineObject
         // draw stars
         LJS.setBlendMode(true);
         const random = new LJS.RandomGenerator(this.seed);
-        for (let i=1e3; i--;)
+        for (let i= lowGraphicsMode ? 500 : 1e3; i--;)
         {
             const size = random.float(.5,2)**2;
             const speed = random.float() < .9 ? random.float(5) : random.float(9,99);
@@ -255,7 +260,7 @@ export class ParallaxLayer extends LJS.CanvasLayer
         this.context.clearRect(0,0,1,h);
     
         // make WebGL texture
-        this.useWebGL(LJS.glEnable);
+        this.useWebGL();
     }
 
     render()

package/examples/platformer/gameObjects.js

@@ -106,7 +106,7 @@ export class Coin extends LJS.EngineObject
 
         // make it appear to spin
         const t = LJS.time+this.pos.x/4+this.pos.y/4;
-        const spinSize = vec2(.5+.5*Math.sin(t*2*LJS.PI), 1);
+        const spinSize = vec2(.5+.5*LJS.sin(t*2*LJS.PI), 1);
         if (spinSize.x > .1)
         LJS.drawTile(this.pos, spinSize, this.tileInfo, this.color);
     }
@@ -174,7 +174,7 @@ export class Enemy extends GameObject
     {
         // bounce by changing size
         const bounceTime = this.bounceTime*6;
-        this.drawSize = vec2(1-.1*Math.sin(bounceTime), 1+.1*Math.sin(bounceTime));
+        this.drawSize = vec2(1-.1*LJS.sin(bounceTime), 1+.1*LJS.sin(bounceTime));
 
         // make bottom flush
         let bodyPos = this.pos;
@@ -221,7 +221,7 @@ export class Grenade extends GameObject
 
         // draw additive flash exploding
         LJS.setBlendMode(true);
-        const flash = Math.cos(this.getAliveTime()*2*LJS.PI);
+        const flash = LJS.cos(this.getAliveTime()*2*LJS.PI);
         LJS.drawTile(this.pos, vec2(2), Game.spriteAtlas.circle, hsl(0,1,.5,.2-.2*flash));
         LJS.setBlendMode(false);
     }

package/examples/shorts/animation.js

@@ -4,13 +4,13 @@ function gameRender()
 {
     {
         // animate by changing frames
-        const pos = vec2(-5, 2*abs(Math.sin(time*2*PI)));
+        const pos = vec2(-5, 2*abs(sin(time*2*PI)));
         const frame = (time*4)%2|0;
         drawTile(pos, vec2(7), tile(3).frame(frame), RED);
     }
     {
         // animate with stretch and squash
-        const s = Math.sin(time*9)*.5;
+        const s = sin(time*9)*.5;
         const size = vec2(7-s,7+s);
         const pos = vec2(5,size.y-7);
         drawTile(pos, size, tile(5), GREEN);

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?11416></script>
+<script src=../../dist/littlejs.js?1.14.24></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source
@@ -44,4 +44,7 @@ function gameUpdatePost() {}
 function gameRender() {}
 function gameRenderPost() {}
 
+// check if WebGL can be enabled
+function glCanEnable() { return glCanBeEnabled; }
+
 </script>

package/examples/shorts/cameraDrag.js

@@ -0,0 +1,22 @@
+function gameInit()
+{
+    // create some objects
+    for (let i=500; i--;)
+    {
+        const pos = randInCircle(100);
+        const size = vec2(rand(2,9),rand(2,9));
+        const color = randColor();
+        const angle = rand(PI);
+        new EngineObject(pos, size, 0, angle, color);
+    }
+}
+
+function gameUpdate()
+{
+    // drag camera with mouse
+    if (mouseIsDown(0))
+        cameraPos = cameraPos.subtract(mouseDelta);
+
+    // zoom camera with mouse wheel
+    cameraScale = clamp(cameraScale*(1-mouseWheel/5), 1, 1e3);
+}

package/examples/shorts/debugDraw.js

@@ -0,0 +1,38 @@
+class BounceObject extends EngineObject
+{
+    constructor(pos, size, tile)
+    {
+        super(pos, size, tile);
+        this.velocity = vec2(.1);
+    }
+
+    update()
+    {
+        super.update();
+
+        // show debug info
+        debugText('Debug Text', this.pos.add(vec2(0,3)), 1, WHITE);
+        debugRect(this.pos, this.size, RED);
+        debugPoly(mousePos, [vec2(-2,-1), vec2(0,2), vec2(2,-1)], YELLOW);
+        debugLine(this.pos, mousePos, BLUE);
+
+        // bounce off screen edges
+        const cameraSize = getCameraSize();
+        if (abs(this.pos.x) > cameraSize.x/2)
+        {
+            debugCircle(this.pos, 3, GREEN, 1);
+            this.velocity.x = -this.velocity.x;
+        }
+        if (abs(this.pos.y) > cameraSize.y/2)
+        {
+            debugCircle(this.pos, 3, GREEN, 1);
+            this.velocity.y = -this.velocity.y;
+        }
+    }
+}
+
+function gameInit()
+{
+    canvasClearColor = GRAY;
+    new BounceObject(vec2(), vec2(5), tile(3,128));
+}