littlejsengine 1.14.11 → 1.14.16

package/examples/shorts/empty.js

@@ -0,0 +1,30 @@
+function gameInit()
+{
+    // called once after the engine starts up
+    // setup the game
+}
+
+function gameUpdate()
+{
+    // called every frame at 60 frames per second
+    // handle input and update the game state
+}
+
+function gameUpdatePost()
+{
+    // called after physics and objects are updated
+    // setup camera and prepare for render
+}
+
+function gameRender()
+{
+    // called before objects are rendered
+    // draw any background effects that appear behind objects
+}
+
+function gameRenderPost()
+{
+    // called after objects are rendered
+    // draw effects or hud that appear above all objects
+    drawTextScreen('LittleJS Engine', mainCanvasSize.scale(.5), 80);
+}

package/examples/shorts/helloWorld.js

@@ -4,7 +4,7 @@ function gameRender()
     drawRectGradient(cameraPos, getCameraSize(), BLACK, WHITE);
 
     // draw text to the overlay canvas
-    drawTextOverlay('Hello World', vec2(0,3), 3);
+    drawTextOverlay('LittleJS Engine', vec2(0,3), 3);
         
     // draw a tile
     drawTile(vec2(Math.sin(time)*3,-2), vec2(7), tile(3,128));

package/examples/shorts/hillGlideGame.js

@@ -2,7 +2,7 @@ class Player extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(2), tile(9), 0, CYAN);
+        super(pos, vec2(2), tile(9), 0, RED);
         this.damping = 1; // disable damping
         this.clampSpeed = false; // disable speed clamping
     }
@@ -11,12 +11,14 @@ class Player extends EngineObject
     {
         super.update();
 
+        // check ground height
         const h = getGroundHeight(this.pos.x);
         if (this.pos.y < h + this.size.y/2)
         {
             // clamp to ground and reflect velocity
             this.pos.y = h + this.size.y/2;
-            const n = vec2((h-getGroundHeight(this.pos.x+.1))/.1, 1).normalize();
+            const h2 = getGroundHeight(this.pos.x+.1);
+            const n = vec2((h-h2)/.1, 1).normalize();
             this.velocity = this.velocity.reflect(n,0);
         }
 
@@ -40,13 +42,17 @@ function gameInit()
 {
     gravity.y = -.01;
     new Player(vec2(0,5));
-    canvasClearColor = hsl(.7,1,.8);
+    canvasClearColor = hsl(.6,1,.8);
 }
 
 function gameRender()
 {
+    // draw ground as a series of thin rectangles
     const h = 100, w = 20;
-    const pos = vec2(), sizeTop = vec2(.4), size = vec2(.2,h), color = WHITE;
+    const pos = vec2();
+    const sizeTop = vec2(.4);
+    const size = vec2(.2,h);
+    const color = rgb();
     for (let x=cameraPos.x-w; x<cameraPos.x+w; x+=.1)
     {
         pos.x = x;

package/examples/shorts/landerGame.js

@@ -14,7 +14,8 @@ class Player extends EngineObject
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .002);
-        this.applyAcceleration(vec2().setAngle(this.angle, moveInput.y*.002));
+        const accel = vec2(0, moveInput.y*.002).rotate(this.angle);
+        this.applyAcceleration(accel);
     }
 
     // explode when it collides
@@ -25,16 +26,16 @@ class Player extends EngineObject
         if (this.velocity.length() < .05)
             return true;
 
+        // explode!
         this.destroy();
         new ParticleEmitter(
-            this.pos, 0,      // pos, angle
-            1, .1, 300, 3.14, // emitSize, emitTime, emitRate, emitCone
-            0,                              // tileInfo
+            this.pos, 0,         // pos, angle
+            1, .1, 300, 3.14, 0, // emitSize, emitTime, rate, cone, tile
             rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
             rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
-            .7, .8, .2, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-            .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, particleCone, fade
-            1, 0, 1               // randomness, collide, additive
+            .7, .8, .2, .2, .05,   // time, start, end, speed, angleSpeed
+            .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, cone, fade
+            1, 0, 1                // randomness, collide, additive
         );
     }
 }
@@ -49,7 +50,9 @@ function gameInit()
     for (let i=0, y=0; i<20; ++i)
     {
         y = (y + rand(1,-1)*4) * .5;
-        const o = new EngineObject(vec2(i*2-20, y-54), vec2(2, 99), 0, 0, hsl(0,0,.5+i%.29));
+        const pos = vec2(i*2-20, y-54);
+        const color = hsl(0, 0, .5+i%.29);
+        const o = new EngineObject(pos, vec2(2, 99), 0, 0, color);
         o.setCollision(); // make object collide
         o.mass = 0; // make object have static physics
     }

package/examples/shorts/medals.js

@@ -1,8 +1,8 @@
 // create example medals
-const medal_openedExample = new Medal(0, 'Opened Example',   'You opened this example!');
-const medal_leftClick     = new Medal(1, 'Left Clicked',     'You left clicked!',     '🐁');
-const medal_rightClick    = new Medal(2, 'Right Clicked',    'You right clicked!',    '🐭');
-const medal_spacePressed  = new Medal(3, 'Pressed Spacebar', 'You pressed spacebar!', '🚀');
+const medal_openedExample = new Medal(0, 'Open', 'Opened this example!');
+const medal_leftClick = new Medal(1, 'Lefty', 'Left clicked!', '🐁');
+const medal_rightClick = new Medal(2, 'Righty', 'Right clicked!', '🐭');
+const medal_spacePressed = new Medal(3, 'Space', 'Pressed spacebar!', '🚀');
 
 // setup medals
 const saveName = 'Medals Example';

package/examples/shorts/music.js

@@ -1,7 +1,7 @@
-let playButton, stopButton, progressBar;
+let musicPlayer, playButton, stopButton, infoText;
 let musicSound = new SoundWave('song.mp3');
 let musicVolume = 1;
-let musicInstance;
+let music;
 
 function gameInit()
 {
@@ -10,27 +10,28 @@ function gameInit()
     uiSystem.defaultSoundPress = new Sound([.5,0,220]);
     uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 20;
-    canvasClearColor = hsl(.9,.3,.2); // background color
+    canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    const musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 220));
 
-    // title
-    const title = new UIText(vec2(0, -100), vec2(500, 40), 'LittleJS Music Player');
-    musicPlayer.addChild(title);
+    // infomation text
+    infoText = new UIText(vec2(0, -70), vec2(400, 50));
+    musicPlayer.addChild(infoText);
 
     // volume slider
-    const volumeSlider = new UIScrollbar(vec2(0, -40), vec2(400, 30), musicVolume, 'Music Volume');
+    const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30), 
+        musicVolume, 'Music Volume');
     musicPlayer.addChild(volumeSlider);
     volumeSlider.onChange = () => 
     {
         musicVolume = volumeSlider.value;
-        if (musicInstance) 
-            musicInstance.setVolume(musicVolume);
+        if (music) 
+            music.setVolume(musicVolume);
     };
 
     // play button
-    playButton = new UIButton(vec2(-90, 30), vec2(140, 50), 'Play');
+    playButton = new UIButton(vec2(-90, 50), vec2(140, 50), 'Play');
     musicPlayer.addChild(playButton);
     playButton.onClick = ()=>
     {
@@ -38,68 +39,40 @@ function gameInit()
             return;
         
         // handle play/pause toggle
-        if (!musicInstance)
-            musicInstance = musicSound.playMusic(musicVolume);
-        else if (musicInstance.isPaused())
-            musicInstance.resume();
+        if (!music)
+            music = musicSound.playMusic(musicVolume);
+        else if (music.isPaused())
+            music.resume();
         else
-            musicInstance.pause();
+            music.pause();
     };
 
     // stop button
-    stopButton = new UIButton(vec2(90, 30), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>
-    {
-        if (!musicInstance)
-            return;
-
-        // stop sound
-        musicInstance.stop();
-    };
+    stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
+    stopButton.onClick = ()=>  music && music.stop();
     musicPlayer.addChild(stopButton);
-
-    // progress bar and scrollbar for seeking
-    progressBar = new UIScrollbar(vec2(0, 100), vec2(400, 30), 0, 'Progress');
-    progressBar.disabledColor = RED;
-    progressBar.onChange = ()=> 
-    {
-        // control music seek position
-        const wasPlaying = musicInstance && musicInstance.isPlaying();
-        if (!musicInstance)
-            musicInstance = musicSound.playMusic(musicVolume, true, true);
-        progressBar.value = min(progressBar.value, .999); // prevent looping around
-        const seekTime = progressBar.value * musicSound.getDuration();
-        musicInstance.start(seekTime);
-        if (!wasPlaying)
-            musicInstance.pause();
-    };
-    musicPlayer.addChild(progressBar);
 }
 
 function gameUpdate()
 {
-    // disable buttons while loading or waiting for interaction
-    const isDisabled = !musicSound.isLoaded() || !audioIsRunning();
-    playButton.disabled  = isDisabled
-    stopButton.disabled  = isDisabled
-    progressBar.disabled = isDisabled
+    // disable buttons while loading
+    const isDisabled = !musicSound.isLoaded();
+    playButton.disabled = stopButton.disabled = isDisabled;
 
     // update ui
-    if (!musicSound.isLoaded())
+    if (isDisabled)
     {
         // update loading progress
-        const loadingPercent = musicSound.loadedPercent * 100;
-        progressBar.text = `Loading: ${(loadingPercent).toFixed(2)}%`;
+        const loadingPercent = musicSound.loadedPercent * 100|0;
+        infoText.text = `Loading: ${loadingPercent}%`;
     }
     else
     {
         // update ui text
-        playButton.text = !musicInstance || !musicInstance.isPlaying() ? 'Play' : 'Pause';
-        const currentTime = musicInstance ? musicInstance.getCurrentTime() : 0;
+        const isPlaying = music && music.isPlaying();
+        playButton.text = isPlaying ? 'Pause' : 'Play';
+        const current = music ? music.getCurrentTime() : 0;
         const duration = musicSound.getDuration();
-        if (!progressBar.mouseIsHeld)
-            progressBar.value = currentTime / duration;
-        const timeText = `${formatTime(currentTime)} / ${formatTime(duration)}`;
-        progressBar.text = audioIsRunning() ? timeText : 'Click to Enable Audio';
+        infoText.text = formatTime(current) +' / '+ formatTime(duration);
     }
 }

package/examples/shorts/musicPlayer.js

@@ -0,0 +1,134 @@
+let musicPlayer, playButton, stopButton, progressBar;
+let musicSound, music;
+let musicVolume = 1;
+
+function gameInit()
+{
+    // setup ui system plugin
+    new UISystemPlugin;
+    uiSystem.defaultSoundPress = new Sound([.5,0,220]);
+    uiSystem.defaultSoundClick = new Sound([.5,0,440]);
+    uiSystem.defaultCornerRadius = 20;
+    canvasClearColor = hsl(.9,.3,.2);
+
+    // setup music player UI
+    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+    const title = new UIText(vec2(0, -100), vec2(500, 40),
+        'LittleJS Music Player');
+    musicPlayer.addChild(title);
+
+    // drop zone text
+    const dropZoneText = new UIText(vec2(0, -60), vec2(450, 20),
+        'Drag & Drop Audio Files Here!');
+    dropZoneText.textColor = hsl(.9, .3, .8, .7);
+    musicPlayer.addChild(dropZoneText);
+
+    // volume slider
+    const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30),
+        musicVolume, 'Music Volume');
+    musicPlayer.addChild(volumeSlider);
+    volumeSlider.onChange = () => 
+    {
+        musicVolume = volumeSlider.value;
+        if (music) 
+            music.setVolume(musicVolume);
+    };
+
+    // play button
+    playButton = new UIButton(vec2(-90, 50), vec2(140, 50), 'Play');
+    musicPlayer.addChild(playButton);
+    playButton.onClick = ()=>
+    {
+        if (!musicSound.isLoaded())
+            return;
+        
+        // handle play/pause toggle
+        if (!music)
+            music = musicSound.playMusic(musicVolume);
+        else if (music.isPaused())
+            music.resume();
+        else
+            music.pause();
+    };
+
+    // stop button
+    stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
+    stopButton.onClick = ()=>  music && music.stop();
+    musicPlayer.addChild(stopButton);
+
+    // progress bar and scrollbar for seeking
+    progressBar = new UIScrollbar(vec2(0, 120), vec2(400, 30), 0);
+    progressBar.disabledColor = RED;
+    progressBar.onChange = ()=> 
+    {
+        // control music seek position
+        const wasPlaying = music && music.isPlaying();
+        if (!music)
+            music = musicSound.playMusic(musicVolume, true, true);
+        progressBar.value = min(progressBar.value, .999); // prevent wrap
+        const seekTime = progressBar.value * musicSound.getDuration();
+        music.start(seekTime);
+        if (!wasPlaying)
+            music.pause();
+    };
+    musicPlayer.addChild(progressBar);
+
+    {
+        // setup drag and drop for audio files
+        function onDragEnter() { musicPlayer.color = RED; };
+        function onDragLeave() { musicPlayer.color = WHITE; };
+        function onDrop(e)
+        {
+            musicPlayer.color = WHITE
+            
+            // get the dropped file
+            const file = e.dataTransfer.files[0];
+            if (!file || !file.type.startsWith('audio'))
+                return;
+                
+            // create new sound from dropped file
+            const fileURL = URL.createObjectURL(file);
+            musicSound = new SoundWave(fileURL, musicVolume);
+            dropZoneText.text = file.name;
+            
+            // reset UI
+            music && music.stop();
+            music = undefined;
+            progressBar.value = 0;
+        }
+        uiSystem.setupDragAndDrop(onDrop, onDragEnter, onDragLeave);
+    }
+}
+
+function gameUpdate()
+{
+    // disable buttons while loading
+    const isDisabled = !musicSound || !musicSound.isLoaded();
+    playButton.disabled  = isDisabled
+    stopButton.disabled  = isDisabled
+    progressBar.disabled = isDisabled
+
+    // update ui
+    if (!musicSound)
+    {
+        // waiting for file
+        progressBar.text = 'No File Loaded';
+    }
+    else if (isDisabled)
+    {
+        // update loading progress
+        const loadingPercent = musicSound.loadedPercent * 100|0;
+        progressBar.text = `Loading: ${loadingPercent}%`;
+    }
+    else
+    {
+        // update ui text
+        const isPlaying = music && music.isPlaying();
+        playButton.text = isPlaying ? 'Pause' : 'Play';
+        const current = music ? music.getCurrentTime() : 0;
+        const duration = musicSound.getDuration();
+        progressBar.text = formatTime(current) +' / '+ formatTime(duration);
+        if (!progressBar.mouseIsHeld)
+            progressBar.value = current / duration;
+    }
+}

package/examples/shorts/nineSlice.js

@@ -3,19 +3,38 @@ function gameRender()
     const nineSliceTile = tile(16);
     const threeSliceTile = tile(19);
 
-    // draw nine slice with thin border and color
-    drawNineSlice(vec2(-7,4), vec2(11+wave(.5,2), 6), nineSliceTile, hsl(.1,.5,.9), .5);
-    drawTextOverlay('Nine Slice\nThin Border', vec2(-7,4), 1, BLACK);
-
-    // draw nine slice in screen space with thick border and rotation
-    drawNineSliceScreen(vec2(700,150), vec2(250), nineSliceTile, 32, 2, time/2);
-    drawTextScreen('Nine Slice\nScreen Space', vec2(700,150), 30, BLACK);
-    
-    // draw three slice with variable border and additive color
-    drawThreeSlice(vec2(-7,-4), vec2(9, 7), threeSliceTile, WHITE, 2+wave(.2)*2, hsl(time/30,.5,.5));
-    drawTextOverlay('Three Slice\nVariable\n Border', vec2(-7,-4), 1, BLACK);
-
-    // draw three slice in screen space with changing size
-    drawThreeSliceScreen(vec2(700,420), vec2(350-wave(.3,90),120+wave(.3,60)), threeSliceTile);
-    drawTextScreen('Three Slice\nScreen Space', vec2(700,420), 30, BLACK);
+    {
+        // draw nine slice with thin border and color
+        const pos = vec2(-7,4);
+        const size = vec2(11+wave(.5,2), 6);
+        const color = hsl(.1,.5,.9);
+        const border = .5;
+        drawNineSlice(pos, size, nineSliceTile, color, border);
+        drawTextOverlay('Nine Slice\nThin Border', pos, 1, BLACK);
+    }
+    {
+        // draw nine slice in screen space with thick border and rotation
+        const pos = vec2(700,150);
+        const size = vec2(250);
+        const border = 32;
+        const angle = time/2;
+        drawNineSliceScreen(pos, size, nineSliceTile, border, 2, angle);
+        drawTextScreen('Nine Slice\nScreen Space', pos, 30, BLACK);
+    } 
+    {
+        // draw three slice with variable border and additive color
+        const pos = vec2(-7,-4);
+        const size = vec2(9, 7);
+        const border = 2 + wave(.2)*2;
+        const additive = hsl(time/30,.5,.5);
+        drawThreeSlice(pos, size, threeSliceTile, WHITE, border, additive);
+        drawTextOverlay('Three Slice\nVariable\nBorder', pos, 1, BLACK);
+    }
+    {
+        // draw three slice in screen space with changing size        
+        const pos = vec2(700,420);
+        const size = vec2(350-wave(.3,90),120+wave(.3,60));
+        drawThreeSliceScreen(pos, size, threeSliceTile);
+        drawTextScreen('Three Slice\nScreen Space', pos, 30, BLACK);
+    }
 }

package/examples/shorts/parallax.js

@@ -23,7 +23,7 @@ class ParallaxLayer extends CanvasLayer
         const w = canvasSize.x, h = canvasSize.y;
         for (let i = h; i--;)
         {
-            // draw a 1 pixel gradient line on the left side of the canvas
+            // draw a 1 pixel gradient line on the left side
             const p = i/h;
             this.context.fillStyle = topColor.lerp(bottomColor, p);
             this.context.fillRect(0, i, 1, 1);
@@ -34,7 +34,8 @@ class ParallaxLayer extends CanvasLayer
         const levelness = .005; // how much the mountains level out
         const slopeRange = 1;   // max slope of the mountains
         const startGroundLevel = h/2;
-        let y = startGroundLevel, groundSlope = rand(-slopeRange, slopeRange);
+        let y = startGroundLevel;
+        let groundSlope = rand(-slopeRange, slopeRange);
         for (let x=w; x--;)
         {
             // pull slope towards start ground level
@@ -45,7 +46,7 @@ class ParallaxLayer extends CanvasLayer
                 groundSlope = rand(-slopeRange, slopeRange);
 
             // draw 1 pixel wide vertical slice of mountain
-            this.context.drawImage(this.canvas, 0, 0, 1, h, x, y, 1, h - y);
+            this.context.drawImage(this.canvas, 0,0,1,h,x,y,1,h-y);
         }
 
         // remove gradient sliver from left side

package/examples/shorts/particles.js

@@ -4,25 +4,25 @@ function gameInit()
 
     // fire
     new ParticleEmitter(
-        vec2(-5,-2), 0,                  // pos, angle
-        2, 0, 200, PI,                  // emitSize, emitTime, emitRate, emitCone
-        tile(0),                        // tileInfo
-        rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
-        rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
-        .7, 2, 0, .2, .05,  // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, -1, PI, .05, // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 1, 0         // randomness, collide, additive, colorLinear
+        vec2(-5,-2), 0,                // pos, angle
+        2, 0, 200, PI,                 // emitSize, emitTime, rate, cone
+        tile(0),                       // tileInfo
+        rgb(1,.5,.1), rgb(1,.1,.1),    // colorStartA, colorStartB
+        rgb(1,.5,.1,0), rgb(1,.1,.1,0),// colorEndA, colorEndB
+        .7, 2, 0, .2, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+        .9, 1, -1, PI, .05,// damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 1, 0        // randomness, collide, additive, colorLinear
     );
     
     // smoke
     new ParticleEmitter(
         vec2(5,-2), 0,               // pos, angle
-        3, 0, 100, PI,                // emitSize, emitTime, emitRate, emitCone
-        tile(0),                      // tileInfo
-        hsl(0,0,0,.5), hsl(0,0,1,.5), // colorStartA, colorStartB
-        hsl(0,0,0,0), hsl(0,0,1,0), // colorEndA, colorEndB
-        1, 1, 5, .2, .01,   // time, sizeStart, sizeEnd, speed, angleSpeed
-        .85, 1, -1, PI, .3, // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 0, 1         // randomness, collide, additive, colorLinear
+        3, 0, 100, PI,               // emitSize, emitTime, rate, cone
+        tile(0),                     // tileInfo
+        hsl(0,0,0,.5), hsl(0,0,1,.5),// colorStartA, colorStartB
+        hsl(0,0,0,0), hsl(0,0,1,0),  // colorEndA, colorEndB
+        1, 1, 5, .2, .01,  // time, sizeStart, sizeEnd, speed, angleSpeed
+        .85, 1, -1, PI, .3,// damp, angleDamp, gravity, particleCone, fade
+        .5, 0, 0, 1        // randomness, collide, additive, colorLinear
     );
 }

package/examples/shorts/piano.js

@@ -2,29 +2,21 @@ const pianoSound = new Sound([,0,220,,9]);
 
 class PianoKey extends UIButton
 {
-    constructor(pos, size, semitone, isWhite)
+    constructor(pos, size, semitone, color, hoverColor)
     {
         const keySize = 65;
         size = size.scale(keySize);
         pos = pos.scale(keySize).add(vec2(0,size.y/2-keySize*2));
         pos = pos.add(mainCanvasSize.scale(.5));
-        super(pos, size, '', hsl(0,0,isWhite ? 1 : .3));
-        this.semitone = semitone;
+        super(pos, size, '', color);
+
         this.dragActivate = true;
-        this.hoverColor = hsl(0,1,isWhite ? .9 : .3);
+        this.semitone = semitone;
+        this.hoverColor = hoverColor;
         this.activeColor = RED;
     }
-    onPress()
-    {
-        if (!this.soundInstance)
-            this.soundInstance = pianoSound.playNote(this.semitone);
-    }
-    onRelease()
-    {
-        if (this.soundInstance)
-            this.soundInstance.stop(.2);
-        this.soundInstance = 0;
-    }
+    onPress()   { this.sound = pianoSound.playNote(this.semitone); }
+    onRelease() { this.sound.stop(.2); }
 }
 
 function gameInit()
@@ -35,16 +27,18 @@ function gameInit()
     // create piano keyboard
     for (let i=15; i--;)
     {
-        const pos = vec2(i-7,0);
-        const size = vec2(1,4);
+        // white keys
+        const pos = vec2(i-7, 0);
+        const size = vec2(1, 4);
         const semitone = [0,2,4,5,7,9,11][i%7]+(i/7|0)*12;
-        new PianoKey(pos, size, semitone, true);
+        new PianoKey(pos, size, semitone, WHITE, hsl(0,1,.9));
     }
     for (let i=10; i--;)
     {
-        const pos = vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5,0)
-        const size = vec2(1,2);
+        // black keys
+        const pos = vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5, 0)
+        const size = vec2(1, 2);
         const semitone = [1,3,6,8,10][i%5]+(i/5|0)*12;
-        new PianoKey(pos, size, semitone);
+        new PianoKey(pos, size, semitone, hsl(0,0,.3), hsl(0,1,.3));
     }
 }

package/examples/shorts/pongGame.js

@@ -18,10 +18,12 @@ function gameInit()
     canvasFixedSize = vec2(1280, 720); // use a 720p fixed size canvas
 
     // create objects
-    paddle = new PhysicsObject(vec2(0,1), vec2(6,1)); // create player's paddle
-    new PhysicsObject(vec2(-.5,levelSize.y/2),            vec2(1,100)); // left wall
-    new PhysicsObject(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)); // right wall
-    new PhysicsObject(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)); // top wall
+    paddle = new PhysicsObject(vec2(0,1), vec2(6,1)); // player
+
+    const w = levelSize.x, h = levelSize.y;
+    new PhysicsObject(vec2(-.5,h/2),  vec2(1,100)); // left wall
+    new PhysicsObject(vec2(w+.5,h/2), vec2(1,100)); // right wall
+    new PhysicsObject(vec2(w/2,h+.5), vec2(100,1)); // top wall
 }
 
 function gameUpdate()

package/examples/shorts/raycasting.js

@@ -45,7 +45,7 @@ function gameRender()
     {
         // draw horizontal slizes to create floor and ceiling
         const h = 9;
-        let pos = vec2(), size = vec2(39, .15), color = WHITE;
+        let pos = vec2(), size = vec2(39, .15), color = rgb();
         for (let y=-h; y<h; y+=.1)
         {
             const p = 1.01-abs(y/h)
@@ -57,7 +57,7 @@ function gameRender()
     {
         // draw vertical slices to create the walls
         const w = 20;
-        const pos = vec2(), size = vec2(.15), color = WHITE;
+        const pos = vec2(), size = vec2(.15), color = rgb();
         for (let x=-w; x<w; x+=.1)
         {
             const p = raycast(playerPos, playerAngle + x/w);
@@ -68,7 +68,12 @@ function gameRender()
         }
     }
     // draw instructions and pointer lock status
-    const instructions = pointerLockIsActive() ? 'Mouse Control Active - ESC To Exit' : 'Click To Enable Mouse Control';
+    const instructions = pointerLockIsActive() ? 
+        'Mouse Control Active - ESC To Exit' : 
+        'Click To Enable Mouse Control';
+    const textPos = vec2(mainCanvasSize.x/2, 50);
+    const textSize = 24;
+    const textColor = pointerLockIsActive() ? GREEN : WHITE;
     if (!isTouchDevice)
-        drawTextScreen(instructions, vec2(mainCanvasSize.x/2, 50), 24, pointerLockIsActive() ? GREEN : WHITE);
+        drawTextScreen(instructions, textPos, textSize, textColor);
 }