npm - littlejsengine - Versions diffs - 1.15.8 → 1.15.9 - Mend

littlejsengine 1.15.8 → 1.15.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/littlejs.d.ts +21 -2
package/dist/littlejs.esm.js +269 -211
package/dist/littlejs.esm.min.js +1 -1
package/dist/littlejs.js +265 -211
package/dist/littlejs.min.js +1 -1
package/dist/littlejs.release.js +265 -211
package/examples/box2d/game.js +1 -1
package/examples/electron/index.html +2 -2
package/examples/platformer/game.js +7 -0
package/examples/shorts/base.html +1 -2
package/examples/shorts/uiSystem.js +1 -1
package/examples/starter/index.html +2 -3
package/examples/uiSystem/game.js +4 -7
package/package.json +1 -1
package/src/engine.js +214 -25
package/src/engineBuild.js +0 -1
package/src/engineExport.js +4 -0
package/src/engineInput.js +13 -1
package/src/engineParticles.js +8 -6
package/src/engineSettings.js +24 -0
package/src/engineTileLayer.js +1 -2
package/src/engineSplash.js +0 -173

package/examples/starter/index.html CHANGED Viewed

@@ -7,11 +7,10 @@
 </head><body>
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.15.8></script>
+<script src=../../dist/littlejs.js?1.15.9></script>
 <!-- LittleJS Engine Source
 <script src=../../src/engine.js></script>
-<script src=../../src/engineSplash.js></script>
 <script src=../../src/engineDebug.js></script>
 <script src=../../src/engineUtilities.js></script>
 <script src=../../src/engineSettings.js></script>
@@ -32,4 +31,4 @@
 -->
 <!-- Add your game scripts here -->
-<script src=game.js?1.15.8></script>
+<script src=game.js?1.15.9></script>

package/examples/uiSystem/game.js CHANGED Viewed

@@ -43,14 +43,14 @@ function createUI()
     uiMenu.addChild(uiBackground);
     // example large text
-    const textTitle = new LJS.UIText(vec2(0,-220), vec2(500, 120), 'Test Title');
+    const textTitle = new LJS.UIText(vec2(0,-220), vec2(400, 120), 'Test Title');
     uiMenu.addChild(textTitle);
     textTitle.textColor = LJS.RED;
     textTitle.textLineColor = LJS.BLUE;
     textTitle.textLineWidth = 4;
     // example multiline text
-    const textTest = new LJS.UIText(vec2(-60,-120), vec2(350, 60), 'Test Text\nSecond text line.')
+    const textTest = new LJS.UIText(vec2(-60,-120), vec2(300, 60), 'Test Text\nSecond text line.')
     uiMenu.addChild(textTest);
     // example tile image
@@ -61,14 +61,11 @@ function createUI()
     let navigationIndex = 0;
     // example checkbox
-    const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
+    const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(50));
     uiMenu.addChild(checkbox);
     checkbox.onChange = ()=> button1.disabled = checkbox.checked;
     checkbox.navigationIndex = ++navigationIndex;
-    // text attached to checkbox
-    const checkboxText = new LJS.UIText(vec2(170,0), vec2(300, 60), 'Test Checkbox');
-    checkbox.addChild(checkboxText);
+    checkbox.text = 'Test Checkbox';
     // example scrollbar
     const scrollbar = new LJS.UIScrollbar(vec2(0,60), vec2(350, 50));

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.15.8",
+  "version": "1.15.9",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/src/engine.js CHANGED Viewed

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.8';
+const engineVersion = '1.15.9';
 /** Frames per second to update
  *  @type {number}
@@ -305,23 +305,48 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         if (canvasFixedSize.x)
         {
-            // clear canvas and set fixed size
-            mainCanvas.width  = canvasFixedSize.x;
-            mainCanvas.height = canvasFixedSize.y;
-            // fit to window by adding space on top or bottom if necessary
-            const aspect = innerWidth / innerHeight;
-            const fixedAspect = mainCanvas.width / mainCanvas.height;
-            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
+            // set canvas fixed size
+            mainCanvasSize = canvasFixedSize.copy();
+            // fit to window using css width and height
+            const innerAspect = innerWidth / innerHeight;
+            const fixedAspect = canvasFixedSize.x / canvasFixedSize.y;
+            const w = innerAspect < fixedAspect ? '100%' : '';
+            const h = innerAspect < fixedAspect ? '' : '100%';
+            overlayCanvas.style.width  = mainCanvas.style.width  = w;
+            overlayCanvas.style.height = mainCanvas.style.height = h;
+            if (glCanvas)
+            {
+                glCanvas.style.width  = w;
+                glCanvas.style.height = h;
+            }
         }
         else
         {
-            // clear canvas and set size to same as window
-            mainCanvas.width = min(innerWidth, canvasMaxSize.x);
-            mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+            // get main canvas size based on window size
+            mainCanvasSize.x = min(innerWidth,  canvasMaxSize.x);
+            mainCanvasSize.y = min(innerHeight, canvasMaxSize.y);
+            // responsive aspect ratio with native resolution
+            const innerAspect = innerWidth / innerHeight;
+            if (canvasMaxAspect && innerAspect > canvasMaxAspect)
+            {
+                // full height
+                const w = mainCanvasSize.y * canvasMaxAspect | 0;
+                mainCanvasSize.x = min(w,  canvasMaxSize.x);
+            }
+            else if (innerAspect < canvasMinAspect)
+            {
+                // full width
+                const h = mainCanvasSize.x / canvasMinAspect | 0;
+                mainCanvasSize.y = min(h, canvasMaxSize.y);
+            }
         }
+        // clear main and overlay canvas and set size
+        overlayCanvas.width  = mainCanvas.width  = mainCanvasSize.x;
+        overlayCanvas.height = mainCanvas.height = mainCanvasSize.y;
         // apply the clear color to main canvas
         if (canvasClearColor.a > 0)
         {
@@ -330,13 +355,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             mainContext.fillStyle = BLACK.toString();
         }
-        // clear overlay canvas and set size
-        overlayCanvas.width  = mainCanvas.width;
-        overlayCanvas.height = mainCanvas.height;
-        // save canvas size
-        mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
         // set default line join and cap
         const lineJoin = 'round', lineCap = 'round';
         mainContext.lineJoin = overlayContext.lineJoin = lineJoin;
@@ -360,7 +378,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
         'touch-action:none;' +        // prevent mobile pinch to resize
-        '-webkit-touch-callout:none';// compatibility for ios
+        '-webkit-touch-callout:none'; // compatibility for ios
     rootElement.style.cssText = styleRoot;
     drawCanvas = mainCanvas = document.createElement('canvas');
     rootElement.appendChild(mainCanvas);
@@ -377,7 +395,8 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     rootElement.appendChild(overlayCanvas);
     overlayContext = overlayCanvas.getContext('2d');
-    // set canvases
+    // setup canvases
+    // transform way is still more reliable then flexbox or grid
     const styleCanvas = 'position:absolute;'+ // allow canvases to overlap
         'top:50%;left:50%;transform:translate(-50%,-50%)'; // center on screen
     mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
@@ -441,9 +460,176 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
     // wait for all the promises to finish
     await Promise.all(promises);
     return startEngine();
+    ///////////////////////////////////////////////////////////////////////////
+    // LittleJS Splash Screen
+    function drawEngineSplashScreen(t)
+    {
+        const x = overlayContext;
+        const w = overlayCanvas.width = innerWidth;
+        const h = overlayCanvas.height = innerHeight;
+        {
+            // background
+            const p3 = percent(t, 1, .8);
+            const p4 = percent(t, 0, .5);
+            const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
+            g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
+            g.addColorStop(1,hsl(0,0,0,p3).toString());
+            x.save();
+            x.fillStyle = g;
+            x.fillRect(0,0,w,h);
+        }
+        // draw LittleJS logo...
+        const rect = (X, Y, W, H, C)=>
+        {
+            x.beginPath();
+            x.rect(X,Y,W,C?H*p:H);
+            x.fillStyle = C;
+            C ? x.fill() : x.stroke();
+        };
+        const line = (X, Y, Z, W)=>
+        {
+            x.beginPath();
+            x.lineTo(X,Y);
+            x.lineTo(Z,W);
+            x.stroke();
+        };
+        const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
+        {
+            const D = (A+B)/2, E = p*(B-A)/2;
+            x.beginPath();
+            F && x.lineTo(X,Y);
+            x.arc(X,Y,R,D-E,D+E);
+            x.fillStyle = C;
+            C ? x.fill() : x.stroke();
+        };
+        const color = (c=0, l=0) =>
+            hsl([.98,.3,.57,.14][c%4],.8,[0,.3,.5,.8,.9][l]).toString();
+        const alpha = wave(1,1,t);
+        const p = percent(alpha, .1, .5);
+        // setup
+        x.translate(w/2,h/2);
+        const size = min(6, min(w,h)/99); // fit to screen
+        x.scale(size,size);
+        x.translate(-40,-35);
+        x.lineJoin = x.lineCap = 'round';
+        x.lineWidth = .1 + p*1.9;
+        // drawing effect
+        const p2 = percent(alpha,.1,1);
+        x.setLineDash([99*p2,99]);
+        // cab top
+        rect(7,16,18,-8,color(2,2));
+        rect(7,8,18,4,color(2,3));
+        rect(25,8,8,8,color(2,1));
+        rect(25,8,-18,8);
+        rect(25,8,8,8);
+        // cab
+        rect(25,16,7,23,color());
+        rect(11,39,14,-23,color(1,1));
+        rect(11,16,14,18,color(1,2));
+        rect(11,16,14,8,color(1,3));
+        rect(25,16,-14,24);
+        // cab window
+        rect(15,29,6,-9,color(2,2));
+        circle(15,21,5,0,PI/2,color(2,4),1);
+        rect(21,21,-6,9);
+        // little stack
+        rect(37,14,9,6,color(3,2));
+        rect(37,14,4.5,6,color(3,3));
+        rect(37,14,9,6);
+        // big stack
+        rect(50,20,10,-8,color(0,1));
+        rect(50,20,6.5,-8,color(0,2));
+        rect(50,20,3.5,-8,color(0,3));
+        rect(50,20,10,-8);
+        circle(55,2,11.4,.5,PI-.5,color(3,3));
+        circle(55,2,11.4,.5,PI/2,color(3,2),1);
+        circle(55,2,11.4,.5,PI-.5);
+        rect(45,7,20,-7,color(0,2));
+        rect(45,-1,20,4,color(0,3));
+        rect(45,-1,20,8);
+        // engine
+        for (let i=5; i--;)
+        {
+            // stagger radius to fix slight seam
+            circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
+            circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
+            circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
+        }
+        // engine outline
+        circle(36,30,10,PI/2,PI*3/2);
+        circle(48,30,10,PI/2,PI*3/2);
+        circle(60,30,10);
+        line(36,20,60,20);
+        // engine front light
+        circle(60,30,4,PI,3*PI,color(3,2));
+        circle(60,30,4,PI,2*PI,color(3,3));
+        circle(60,30,4,PI,3*PI);
+        // front brush
+        for (let i=6; i--;)
+        {
+            x.beginPath();
+            x.lineTo(53,54);
+            x.lineTo(53,40);
+            x.lineTo(53+(1+i*2.9)*p,40);
+            x.lineTo(53+(4+i*3.5)*p,54);
+            x.fillStyle = color(0,i%2+2);
+            x.fill();
+            i%2 && x.stroke();
+        }
+        // wheels
+        rect(6,40,5,5);
+        rect(6,40,5,5,color());
+        rect(15,54,38,-14,color());
+        for (let i=3; i--;)
+        for (let j=2; j--;)
+        {
+            circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
+            x.stroke();
+            circle(15*i+15,47,j?7:1,0,PI,color(i,2));
+            x.stroke();
+        }
+        line(6,40,68,40); // center
+        line(77,54,4,54); // bottom
+        // draw engine name
+        const s = engineName;
+        x.font = '900 16px arial';
+        x.textAlign = 'center';
+        x.textBaseline = 'top';
+        x.lineWidth = .1+p*3.9;
+        let w2 = 0;
+        for (let i=0; i<s.length; ++i)
+            w2 += x.measureText(s[i]).width;
+        for (let j=2; j--;)
+        for (let i=0, X=41-w2/2; i<s.length; ++i)
+        {
+            x.fillStyle = color(i,2);
+            const w = x.measureText(s[i]).width;
+            x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
+            X += w;
+        }
+        x.restore();
+    }
+    ///////////////////////////////////////////////////////////////////////////
 }
 /** Update each engine object, remove destroyed objects, and update time
+ * can be called manually if objects need to be updated outside of main loop
  *  @memberof Engine */
 function engineObjectsUpdate()
 {
@@ -495,18 +681,21 @@ function engineObjectsDestroy()
 function engineObjectsCollect(pos, size, objects=engineObjects)
 {
     const collectedObjects = [];
-    if (!pos) // all objects
+    if (!pos)
     {
+        // all objects
         for (const o of objects)
             collectedObjects.push(o);
     }
-    else if (size instanceof Vector2)  // bounding box test
+    else if (size instanceof Vector2)
     {
+        // bounding box test
         for (const o of objects)
             o.isOverlapping(pos, size) && collectedObjects.push(o);
     }
-    else  // circle test
+    else
     {
+        // circle test
         const sizeSquared = size*size;
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && collectedObjects.push(o);

package/src/engineBuild.js CHANGED Viewed

@@ -26,7 +26,6 @@ const engineSourceFiles =
     `${SOURCE_FOLDER}/engineParticles.js`,
     `${SOURCE_FOLDER}/engineMedals.js`,
     `${SOURCE_FOLDER}/engineWebGL.js`,
-    `${SOURCE_FOLDER}/engineSplash.js`,
 ];
 const enginePluginFiles =
 [

package/src/engineExport.js CHANGED Viewed

@@ -56,6 +56,8 @@ export
 	canvasColorTiles,
 	canvasClearColor,
 	canvasMaxSize,
+	canvasMinAspect,
+	canvasMaxAspect,
 	canvasFixedSize,
 	canvasPixelated,
 	overlayCanvasPixelated,
@@ -99,6 +101,8 @@ export
 	setCanvasColorTiles,
 	setCanvasClearColor,
 	setCanvasMaxSize,
+	setCanvasMinAspect,
+	setCanvasMaxAspect,
 	setCanvasFixedSize,
 	setCanvasPixelated,
 	setOverlayCanvasPixelated,

package/src/engineInput.js CHANGED Viewed

@@ -243,6 +243,16 @@ function gamepadConnected(gamepad=gamepadPrimary)
     return !!inputData[gamepad+1];
 }
+/** Returns how many control sticks the passed in gamepad has
+ *  @param {number} [gamepad]
+ *  @return {number}
+ *  @memberof Input */
+function gamepadStickCount(gamepad=gamepadPrimary)
+{
+    ASSERT(isNumber(gamepad), 'gamepad must be a number');
+    return gamepadStickData[gamepad]?.length ?? 0;
+}
 /** True if a touch device has been detected
  *  @memberof Input */
 const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
@@ -583,9 +593,11 @@ function inputUpdate()
                 dpad.set(x, -y);
                 sticks[0] = dpad.clampLength(); // clamp to circle
             }
-            const rightTouchStick = touchGamepadSticks[1] ?? vec2();
             if (touchGamepadButtonCount === 1)
+            {
+                const rightTouchStick = touchGamepadSticks[1] ?? vec2();
                 sticks[1] = applyDeadZones(rightTouchStick);
+            }
             // read virtual gamepad buttons
             const data = inputData[1] ?? (inputData[1] = []);

package/src/engineParticles.js CHANGED Viewed

@@ -109,9 +109,9 @@ class ParticleEmitter extends EngineObject
         /** @property {Color} - Color at start of life 2, randomized between start colors */
         this.colorStartB = colorStartB.copy();
         /** @property {Color} - Color at end of life 1, randomized between end colors */
-        this.colorEndA   = colorEndA.copy();
+        this.colorEndA = colorEndA.copy();
         /** @property {Color} - Color at end of life 2, randomized between end colors */
-        this.colorEndB   = colorEndB.copy();
+        this.colorEndB = colorEndB.copy();
         /** @property {boolean} - Should color be randomized linearly or across each component */
         this.randomColorLinear = randomColorLinear;
@@ -195,8 +195,10 @@ class ParticleEmitter extends EngineObject
         if (debugParticles)
         {
             // show emitter bounds
-            const emitSize = typeof this.emitSize === 'number' ? vec2(this.emitSize) : this.emitSize;
-            debugRect(this.pos, emitSize, '#0f0', 0, this.angle);
+            if (typeof this.emitSize === 'number')
+                debugCircle(this.pos, this.emitSize/2, '#0f0');
+            else
+                debugRect(this.pos, this.emitSize, '#0f0', 0, this.angle);
         }
     }
@@ -206,8 +208,8 @@ class ParticleEmitter extends EngineObject
     {
         // spawn a particle
         let pos = typeof this.emitSize === 'number' ? // check if number was used
-            randInCircle(this.emitSize/2)            // circle emitter
-            : vec2(rand(-.5,.5), rand(-.5,.5))       // box emitter
+            randInCircle(this.emitSize/2)             // circle emitter
+            : vec2(rand(-.5,.5), rand(-.5,.5))        // box emitter
                 .multiply(this.emitSize).rotate(this.angle)
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
         if (!this.localSpace)

package/src/engineSettings.js CHANGED Viewed

@@ -48,6 +48,20 @@ let canvasClearColor = CLEAR_BLACK;
  *  @memberof Settings */
 let canvasMaxSize = vec2(1920, 1080);
+/** Minimum aspect ratio of the canvas (width/height), unused if 0
+ *  Can be used with canvasMaxAspect to limit aspect ratio
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let canvasMinAspect = 0;
+/** Maximum aspect ratio of the canvas (width/height), unused if 0
+ *  Can be used with canvasMinAspect to limit aspect ratio
+ *  @type {number}
+ *  @default
+ *  @memberof Settings */
+let canvasMaxAspect = 0;
 /** 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
  *  @type {Vector2}
@@ -344,6 +358,16 @@ function setCanvasClearColor(color) { canvasClearColor = color.copy(); }
  *  @memberof Settings */
 function setCanvasMaxSize(size) { canvasMaxSize = size.copy(); }
+/** Set minimum aspect ratio of the canvas (width/height), unused if 0
+ *  @param {number} aspect
+ *  @memberof Settings */
+function setCanvasMinAspect(aspect) { canvasMinAspect = aspect; }
+/** Set maximum aspect ratio of the canvas (width/height), unused if 0
+ *  @param {number} aspect
+ *  @memberof Settings */
+function setCanvasMaxAspect(aspect) { canvasMaxAspect = aspect; }
 /** Set fixed size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */

package/src/engineTileLayer.js CHANGED Viewed

@@ -211,8 +211,7 @@ class CanvasLayer extends EngineObject
     /** Destroy this canvas layer */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
         this.textureInfo.destroyWebGLTexture();
         super.destroy();

package/src/engineSplash.js DELETED Viewed

@@ -1,173 +0,0 @@
-/**
- * LittleJS Engine Splash Screen
- * @namespace Settings
- */
-'use strict';
-///////////////////////////////////////////////////////////////////////////////
-// LittleJS splash screen and logo
-function drawEngineSplashScreen(t)
-{
-    const x = overlayContext;
-    const w = overlayCanvas.width = innerWidth;
-    const h = overlayCanvas.height = innerHeight;
-    {
-        // background
-        const p3 = percent(t, 1, .8);
-        const p4 = percent(t, 0, .5);
-        const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,hypot(w,h)*.7);
-        g.addColorStop(0,hsl(0,0,lerp(0,p3/2,p4),p3).toString());
-        g.addColorStop(1,hsl(0,0,0,p3).toString());
-        x.save();
-        x.fillStyle = g;
-        x.fillRect(0,0,w,h);
-    }
-    // draw LittleJS logo...
-    const rect = (X, Y, W, H, C)=>
-    {
-        x.beginPath();
-        x.rect(X,Y,W,C?H*p:H);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const line = (X, Y, Z, W)=>
-    {
-        x.beginPath();
-        x.lineTo(X,Y);
-        x.lineTo(Z,W);
-        x.stroke();
-    };
-    const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
-    {
-        const D = (A+B)/2, E = p*(B-A)/2;
-        x.beginPath();
-        F && x.lineTo(X,Y);
-        x.arc(X,Y,R,D-E,D+E);
-        x.fillStyle = C;
-        C ? x.fill() : x.stroke();
-    };
-    const color = (c=0, l=0) =>
-        hsl([.98,.3,.57,.14][c%4],.8,[0,.3,.5,.8,.9][l]).toString();
-    const alpha = wave(1,1,t);
-    const p = percent(alpha, .1, .5);
-    // setup
-    x.translate(w/2,h/2);
-    const size = min(6, min(w,h)/99); // fit to screen
-    x.scale(size,size);
-    x.translate(-40,-35);
-    x.lineJoin = x.lineCap = 'round';
-    x.lineWidth = .1 + p*1.9;
-    // drawing effect
-    const p2 = percent(alpha,.1,1);
-    x.setLineDash([99*p2,99]);
-    // cab top
-    rect(7,16,18,-8,color(2,2));
-    rect(7,8,18,4,color(2,3));
-    rect(25,8,8,8,color(2,1));
-    rect(25,8,-18,8);
-    rect(25,8,8,8);
-    // cab
-    rect(25,16,7,23,color());
-    rect(11,39,14,-23,color(1,1));
-    rect(11,16,14,18,color(1,2));
-    rect(11,16,14,8,color(1,3));
-    rect(25,16,-14,24);
-    // cab window
-    rect(15,29,6,-9,color(2,2));
-    circle(15,21,5,0,PI/2,color(2,4),1);
-    rect(21,21,-6,9);
-    // little stack
-    rect(37,14,9,6,color(3,2));
-    rect(37,14,4.5,6,color(3,3));
-    rect(37,14,9,6);
-    // big stack
-    rect(50,20,10,-8,color(0,1));
-    rect(50,20,6.5,-8,color(0,2));
-    rect(50,20,3.5,-8,color(0,3));
-    rect(50,20,10,-8);
-    circle(55,2,11.4,.5,PI-.5,color(3,3));
-    circle(55,2,11.4,.5,PI/2,color(3,2),1);
-    circle(55,2,11.4,.5,PI-.5);
-    rect(45,7,20,-7,color(0,2));
-    rect(45,-1,20,4,color(0,3));
-    rect(45,-1,20,8);
-    // engine
-    for (let i=5; i--;)
-    {
-        // stagger radius to fix slight seam
-        circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
-        circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
-        circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
-    }
-    // engine outline
-    circle(36,30,10,PI/2,PI*3/2);
-    circle(48,30,10,PI/2,PI*3/2);
-    circle(60,30,10);
-    line(36,20,60,20);
-    // engine front light
-    circle(60,30,4,PI,3*PI,color(3,2));
-    circle(60,30,4,PI,2*PI,color(3,3));
-    circle(60,30,4,PI,3*PI);
-    // front brush
-    for (let i=6; i--;)
-    {
-        x.beginPath();
-        x.lineTo(53,54);
-        x.lineTo(53,40);
-        x.lineTo(53+(1+i*2.9)*p,40);
-        x.lineTo(53+(4+i*3.5)*p,54);
-        x.fillStyle = color(0,i%2+2);
-        x.fill();
-        i%2 && x.stroke();
-    }
-    // wheels
-    rect(6,40,5,5);
-    rect(6,40,5,5,color());
-    rect(15,54,38,-14,color());
-    for (let i=3; i--;)
-    for (let j=2; j--;)
-    {
-        circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
-        x.stroke();
-        circle(15*i+15,47,j?7:1,0,PI,color(i,2));
-        x.stroke();
-    }
-    line(6,40,68,40); // center
-    line(77,54,4,54); // bottom
-    // draw engine name
-    const s = engineName;
-    x.font = '900 16px arial';
-    x.textAlign = 'center';
-    x.textBaseline = 'top';
-    x.lineWidth = .1+p*3.9;
-    let w2 = 0;
-    for (let i=0; i<s.length; ++i)
-        w2 += x.measureText(s[i]).width;
-    for (let j=2; j--;)
-    for (let i=0, X=41-w2/2; i<s.length; ++i)
-    {
-        x.fillStyle = color(i,2);
-        const w = x.measureText(s[i]).width;
-        x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
-        X += w;
-    }
-    x.restore();
-}