littlejsengine 1.14.19 → 1.14.28

package/examples/box2d/gameObjects.js

@@ -38,7 +38,7 @@ export function spawnCircle(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bod
 export function spawnRandomPoly(pos, diameter=1, color=LJS.WHITE, type=LJS.box2d.bodyTypeDynamic, angle=0)
 {
     const o = new LJS.Box2dObject(pos, vec2(), 0, angle, color, type);
-    o.addRandomPoly(diameter, vec2(), 0, density, friction, restitution);
+    o.addRandomPoly(diameter, density, friction, restitution);
     return o;
 }
 
@@ -77,7 +77,7 @@ export function spawnRandomEdges()
     for (let i=40, y=0; i--;)
         edgePoints.push(vec2(i, y=LJS.clamp(y+LJS.rand(-2,2),0,5)));
     edgePoints.push(vec2(0,0));
-    const o = new LJS.Box2dObject(vec2(), vec2(), 0, 0, LJS.BLACK, LJS.box2d.bodyTypeStatic);
+    const o = new LJS.Box2dStaticObject;
     o.addEdgeList(edgePoints);
 }
 
@@ -147,8 +147,6 @@ export class CarObject extends LJS.Box2dObject
     }
     update()
     {
-        super.update();
-
         // car controls
         const maxSpeed = 40;
         const input = LJS.keyDirection().x;
@@ -166,11 +164,11 @@ export class CarObject extends LJS.Box2dObject
 ///////////////////////////////////////////////////////////////////////////////
 
 // changes objects color when touched
-export class ContactTester extends LJS.Box2dObject
+export class ContactTester extends LJS.Box2dStaticObject
 {
     constructor(pos, size, color, contactColor, isCircle=true, isSensor=true)
     {
-        super(pos, size, 0, 0, color, LJS.box2d.bodyTypeStatic);
+        super(pos, size, 0, 0, color);
         isCircle ? this.addCircle(size.x) : this.addBox(size);
         this.setSensor(isSensor);
         this.contactColor = contactColor;
@@ -325,11 +323,11 @@ export class SoftBodyObject extends LJS.Box2dObject
 ///////////////////////////////////////////////////////////////////////////////
 
 // cloth sim using grid of rope joints
-export class ClothObject extends LJS.Box2dObject
+export class ClothObject extends LJS.Box2dStaticObject
 {
     constructor(pos, scale, sizeCount, color, maxJointStress=10)
     {
-        super(pos, vec2(), 0, 0, color, LJS.box2d.bodyTypeStatic);
+        super(pos, vec2(), 0, 0, color);
         const nodeSize = sizeCount.subtract(vec2(1));
         const spacing = scale.divide(nodeSize);
         const objectDiameter = LJS.min(spacing.x, spacing.y);
@@ -393,8 +391,6 @@ export class ClothObject extends LJS.Box2dObject
     }
     update()
     {
-        super.update();
-        
         for (let y=this.sizeCount.y; y--;)
         for (let x=this.sizeCount.x; x--;)
         {

package/examples/box2d/scenes.js

@@ -137,14 +137,14 @@ export function loadScene(_scene)
         }
         {
             // distance joint
-            const o1 = new LJS.Box2dObject(vec2(30,11), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor(), LJS.box2d.bodyTypeStatic);
+            const o1 = new LJS.Box2dStaticObject(vec2(30,11), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor());
             o1.renderOrder = -2;
             const o2 = GameObjects.spawnCircle(vec2(30,8), 2, LJS.randColor());
             new LJS.Box2dDistanceJoint(o1, o2);
         }
         {
             // motor joint
-            const o = new LJS.Box2dObject(vec2(10,8), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor(), LJS.box2d.bodyTypeStatic);
+            const o = new LJS.Box2dStaticObject(vec2(10,8), vec2(4), Game.spriteAtlas.circleOutline, 0, LJS.randColor());
             o.renderOrder = -2;
             new GameObjects.MotorJointObject(vec2(10,8), vec2(2), LJS.randColor(), o);
         }

package/examples/breakout/gameObjects.js

@@ -137,7 +137,7 @@ export class Ball extends PhysicsObject
         this.velocity.y = LJS.max(-this.velocity.y, .2);
 
         // speed up
-        const speed = LJS.min(1.04*this.velocity.length(), .5);
+        const speed = LJS.min(1.04*this.getSpeed(), .5);
         this.velocity = this.velocity.normalize(speed);
         sound_bounce.play(this.pos, 1, speed*2);
 

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
-        1, .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?11417></script>
+<script src=../../dist/littlejs.js?1.15.0></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?11417></script>
+<script src=game.js?1.15.0></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

@@ -84,29 +84,34 @@ class ExampleInfo
 
 const exampleList = 
 [
-    new ExampleInfo('--- SHORT EXAMPLES ---'),
+    new ExampleInfo('--- BASIC ---'),
     new ExampleInfo('Hello World', 'helloWorld.js', 'Simple starter example', false, 'beginner, gradient, text, tiles'),
     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('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'),
     new ExampleInfo('Particles', 'particles.js', 'Particle system', false, 'effects, emitter, physics, fire, smoke'),
+    new ExampleInfo('Input', 'input.js', 'Input system demo for keyboard, mouse, touch, and gamepad.', false, 'input, control'),
     new ExampleInfo('Timers', 'timers.js', 'Timer objects and UI', false, 'delay, interval, slider'),
     new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator', false, 'audio, volume, ui'),
-    new ExampleInfo('Music', 'music.js', 'Basic music load, play, pause, and stop', false, 'music, sound, audio, streaming, volume, ui'),
+    new ExampleInfo('Music', 'music.js', 'Basic load, play, pause, and stop', false, 'music, sound, audio, streaming, volume, ui'),
     new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
+    new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
+    new ExampleInfo('Tile Raycast', 'tileRaycast.js', 'Example of the tile layer raycast collision', false, 'level, map, grid'),
+    new ExampleInfo('Camera Mouse Drag', 'cameraDrag.js', 'Example of how to control camera with mose', false, 'ui, input, control'),
+    new ExampleInfo('Debug Drawing', 'debugDraw.js', 'Debug drawing system', false, 'debug, circle, line, rectangle'),
+    new ExampleInfo('--- ADVANCED ---'),
+    new ExampleInfo('Clock', 'clock.js', 'Animated analog clock', false, 'time, rotation, lines, rectangle'),
+    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield', false, 'space, movement, depth, rectangle'),
     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('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('Music Player', 'musicPlayer.js', 'Music player with audio seeking and drag and drop', false, 'sound, loading, audio, 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'),
@@ -118,10 +123,11 @@ 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'),
+    new ExampleInfo('Box2d Pool', 'box2dPool.js', 'Billiard table pool game with physics', false, 'objects, game'),
     new ExampleInfo('Post Processing', 'postProcess.js', 'Shader effects and filters', false, 'webgl, visual, effect'),
     new ExampleInfo('UI System Plugin', 'uiSystem.js', 'Buttons, sliders, and checkboxes', false, 'objects, widgets, interactive'),
     new ExampleInfo('Nine Slice', 'nineSlice.js', 'Scalable UI panels', false, 'three slice, stretch, corners, text, tiles'),
@@ -551,7 +557,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);
         })
     }

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
-        1, .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.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

@@ -34,6 +34,7 @@ export class Character extends GameObjects.GameObject
         this.deadTimer          = new Timer;
         this.grenadeThrowTimer   = new Timer;
         this.drawSize = vec2(1);
+        this.moveInput = vec2();
         this.color = hsl(LJS.rand(),1,.7);
         this.renderOrder = 10;
         this.walkCyclePercent = 0;
@@ -195,11 +196,11 @@ export class Character extends GameObjects.GameObject
         // track last pos for ladder collision code
         this.lastPos = this.pos.copy();
 
-        // call parent and update physics
+        // call parent
         super.update();
 
         // update walk cycle
-        const speed = this.velocity.length();
+        const speed = this.getSpeed();
         if (this.climbingLadder || this.groundTimer.active() && !this.dodgeTimer.active())
         {
             this.walkCyclePercent += speed * .5;
@@ -238,7 +239,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);

package/examples/platformer/gameObjects.js

@@ -26,8 +26,6 @@ export class GameObject extends LJS.EngineObject
 
     update()
     {
-        super.update();
-
         // flash white when damaged
         let brightness = 0;
         if (!this.isDead() && this.damageTimer.isSet())
@@ -97,6 +95,7 @@ export class Coin extends LJS.EngineObject
     { 
         super(pos, vec2(1), Game.spriteAtlas.coin);
         this.color = hsl(.15,1,.5);
+        this.mass = 0;
     }
 
     render()
@@ -106,7 +105,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);
     }
@@ -155,7 +154,7 @@ export class Enemy extends GameObject
             this.velocity = vec2(LJS.rand(.1,-.1), LJS.rand(.4,.2));
 
         // damage player if touching
-        if (LJS.isOverlapping(this.pos, this.size, Game.player.pos, Game.player.size))
+        if (this.isOverlappingObject(Game.player))
             Game.player.damage(1, this);
     }
 
@@ -174,7 +173,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 +220,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);
     }
@@ -261,8 +260,6 @@ export class Weapon extends LJS.EngineObject
 
     update()
     {
-        super.update();
-
         // update recoil
         if (this.recoilTimer.active())
             this.localAngle = LJS.lerp(this.localAngle, 0, this.recoilTimer.getPercent());
@@ -318,11 +315,9 @@ export class Bullet extends LJS.EngineObject
             if (o.isGameObject)
                 this.collideWithObject(o)
         });
-            
-        super.update();
 
         this.angle = this.velocity.angle();
-        this.range -= this.velocity.length();
+        this.range -= this.getSpeed();
         if (this.range < 0)
         {
             new LJS.ParticleEmitter(

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?11417></script>
+<script src=../../dist/littlejs.js?1.15.0></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/box2d.js

@@ -7,8 +7,8 @@ async function gameInit()
     canvasClearColor = hsl(0,0,.9);
     
     // create ground object
-    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0,
-        GRAY, box2d.bodyTypeStatic);
+    groundObject = new Box2dStaticObject(vec2(-8));
+    groundObject.color = GRAY;
     groundObject.addBox(vec2(100,2));
 
     // add some random objects

package/examples/shorts/box2dCar.js

@@ -3,9 +3,19 @@ async function gameInit()
     // setup box2d and create the objects
     await box2dInit();
     gravity.y = -20;
-    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0,
-        GRAY, box2d.bodyTypeStatic);
-    groundObject.addBox(vec2(100,6));
+
+    // create edge list for ground
+    const edgePoints = [];
+    for (let i=0, y=0, s=0; i<1e3; ++i)
+    {   
+        y = clamp(y+rand(-1,1),0,5);
+        edgePoints.push(vec2(i*5-15, y-8));
+    }
+    const ground = new Box2dStaticObject;
+    ground.lineWidth = 1;
+    ground.addEdgeList(edgePoints);
+
+    // make a car
     new CarObject(vec2(0,-2));
     canvasClearColor = hsl(0,0,.9);
 }
@@ -14,9 +24,10 @@ class CarObject extends Box2dObject
 {
     constructor(pos)
     {
-        super(pos, vec2(), 0, 0, RED);
+        super(pos);
 
         // create car with wheels
+        this.color = RED;
         this.addBox(vec2(7,2));
         const frequency = 4, maxTorque = 250;
         this.wheels = [];
@@ -28,15 +39,14 @@ class CarObject extends Box2dObject
             joint.setSpringFrequencyHz(frequency);
             joint.setMaxMotorTorque(maxTorque);
             joint.enableMotor(!i);
-            wheel.addCircle(2, vec2(), 1, 1);
+            const friction = 1;
+            wheel.addCircle(2, vec2(), 1, friction);
             wheel.motorJoint = joint;
             this.wheels[i] = wheel;
         }
     }
     update()
     {
-        super.update();
-        
         // car controls - use mouse, arrow keys, or A/D to drive
         const maxSpeed = 40;
         const input = mouseIsDown(0) ? 1 : 
@@ -44,5 +54,6 @@ class CarObject extends Box2dObject
         let s = this.wheels[0].motorJoint.getMotorSpeed();
         s = input ? clamp(s - input, -maxSpeed, maxSpeed) : 0;
         this.wheels[0].motorJoint.setMotorSpeed(s);
+        cameraPos.x = this.pos.x;
     }
 }