littlejsengine 1.14.10 → 1.14.16

package/examples/platformer/gameLevel.js

@@ -50,7 +50,7 @@ function loadLevelData()
 {
     // load the level data
     const tileMapData = Game.gameLevelData;
-    tileLayers = LJS.tileCollisionLoad(tileMapData, tile(0,16,1));
+    tileLayers = LJS.tileLayersLoad(tileMapData, tile(0,16,1), 0, 1);
     levelSize = tileLayers[0].size;
     playerStartPos = vec2(0, levelSize.y); // default player start
     foregroundTileLayer = tileLayers[0];

package/examples/platformer/gameObjects.js

@@ -101,10 +101,14 @@ export class Coin extends LJS.EngineObject
 
     render()
     {
+        // side of coin
+        LJS.drawTile(this.pos, vec2(.1, .6), 0, this.color);
+
         // make it appear to spin
         const t = LJS.time+this.pos.x/4+this.pos.y/4;
-        LJS.drawTile(this.pos, vec2(.1, .6), 0, this.color); // edge of coin
-        LJS.drawTile(this.pos, vec2(.5+.5*Math.sin(t*2*LJS.PI), 1), this.tileInfo, this.color);
+        const spinSize = vec2(.5+.5*Math.sin(t*2*LJS.PI), 1);
+        if (spinSize.x > .1)
+        LJS.drawTile(this.pos, spinSize, this.tileInfo, this.color);
     }
 
     update()
@@ -227,7 +231,7 @@ export class Grenade extends GameObject
 
 export class Weapon extends LJS.EngineObject 
 {
-    constructor(pos, parent) 
+    constructor(pos) 
     { 
         super(pos, vec2(.6), Game.spriteAtlas.gun);
 
@@ -238,20 +242,18 @@ export class Weapon extends LJS.EngineObject
         this.damage        = 1;
 
         // prepare to fire
-        this.renderOrder = parent.renderOrder + 1;
         this.fireTimeBuffer = this.localAngle = 0;
         this.recoilTimer = new Timer;
-        parent.addChild(this, vec2(.6,0));
 
         // shell effect
         this.addChild(this.shellEmitter = new LJS.ParticleEmitter(
-            vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emitCone
+            vec2(), 0, 0, 0, 0, .1,  // pos, angle, size, time, rate, cone
             0,                       // tileInfo
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorStartA, colorStartB
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorEndA, colorEndB
             3, .1, .1, .15, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
             1, .95, 1, 0, 0,    // damp, angleDamp, gravity, particleCone, fade
-            .1, 1               // randomness, collide, additive, colorLinear, renderOrder
+            .1, 1               // randomness, collide
         ), vec2(.1,0), -.8);
         this.shellEmitter.restitution = .5;
         this.shellEmitter.particleDestroyCallback = GameEffects.persistentParticleDestroyCallback;
@@ -366,13 +368,13 @@ export class Bullet extends LJS.EngineObject
 
         // spark effects
         const emitter = new LJS.ParticleEmitter(
-            this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emitCone
+            this.pos, 0, 0, .1, 100, .5, // pos, angle, size, time, rate, cone
             0,                           // tileInfo
             rgb(1,1,0), rgb(1,0,0), // colorStartA, colorStartB
             rgb(1,1,0), rgb(1,0,0), // colorEndA, colorEndB
             .2, .2, 0, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
             1, 1, .5, 3.14, .1, // damp, angleDamp, gravityScale, particleCone, fade, 
-            .5, 1, 1            // randomness, collide, additive, colorLinear, renderOrder
+            .5, 1, 1            // randomness, collide, additive
         );
         emitter.trailScale = 1;
         emitter.restitution = .3;

package/examples/puzzle/game.js

@@ -309,7 +309,7 @@ function clearMatches()
             const color2 = color1.lerp(hsl(), .5);
             new LJS.ParticleEmitter(
                 pos.add(vec2(.5)), 0, // pos, angle
-                .5, .1, 200, 3.14,    // emitSize, emitTime, emitRate, emitCone
+                .5, .1, 200, 3.14,    // emitSize, emitTime, rate, cone
                 0,                    // tileInfo
                 color1, color2,                      // colorStartA, colorStartB
                 color1.scale(1,0), color2.scale(1,0),// colorEndA, colorEndB

package/examples/shorts/animation.js

@@ -3,7 +3,7 @@ canvasClearColor = GRAY;
 function gameRender()
 {
     {
-        // animate using multiple frames
+        // animate by changing frames
         const pos = vec2(-5, 2*abs(Math.sin(time*2*PI)));
         const frame = (time*4)%2|0;
         drawTile(pos, vec2(7), tile(3).frame(frame), RED);

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1134></script>
+<script src=../../dist/littlejs.js?11416></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source

package/examples/shorts/blending.js

@@ -1,20 +1,14 @@
-// use smooth blending
-setCanvasPixelated(false);
-setTilesPixelated(false);
-
 function gameRender()
 {
-    const circleTile = tile(2, 128); // get the circle tile
-
-    // additive blend
+    // additive blending
     setBlendMode(1);
-    drawTile(vec2(-8,-2), vec2(7), circleTile, rgb(0,0,.5), 0, false, rgb(0,0,.5));
-    drawTile(vec2(-6, 2), vec2(7), circleTile, rgb(0,1,0));
-    drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
+    drawCircle(vec2(-8,-2), 7, rgb(0,0,.5));
+    drawCircle(vec2(-6, 2), 7, rgb(0,1,0));
+    drawCircle(vec2(-4,-2), 7, rgb(1,0,0));
 
-    // alpha blend
+    // alpha blending
     setBlendMode(0);
-    drawTile(vec2(4,-2), vec2(7), circleTile, hsl(time/9    ,1,.5), 0, false, hsl(1,1,.5));
-    drawTile(vec2(8,-2), vec2(7), circleTile, hsl(time/9+1/3,1,.5,.5));
-    drawTile(vec2(6, 2), vec2(7), circleTile, hsl(time/9+2/3,1,.5,.5));
+    drawCircle(vec2(4,-2), 7, hsl(time/9    ,1,.5));
+    drawCircle(vec2(8,-2), 7, hsl(time/9+1/3,1,.5,.5));
+    drawCircle(vec2(6, 2), 7, hsl(time/9+2/3,1,.5,.5));
 }

package/examples/shorts/box2d.js

@@ -7,13 +7,16 @@ async function gameInit()
     canvasClearColor = hsl(0,0,.9);
     
     // create ground object
-    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);
+    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0,
+        GRAY, box2d.bodyTypeStatic);
     groundObject.addBox(vec2(100,2));
 
     // add some random objects
     for (let i=50; i--;)
     {
-        const o = new Box2dObject(randInCircle(5), vec2(), 0, 0, randColor());
+        const pos = randInCircle(5);
+        const color = randColor();
+        const o = new Box2dObject(pos, vec2(), 0, 0, color);
         randInt(2) ? o.addCircle(rand(1,2)) : o.addRandomPoly(rand(1,2));
     }
 }
@@ -36,7 +39,8 @@ function gameUpdate()
         // grab object
         const object = box2d.pointCast(mousePos);
         if (object)
-            mouseJoint = new Box2dTargetJoint(object, groundObject, mousePos);
+            mouseJoint = new Box2dTargetJoint(object,
+                groundObject, mousePos);
     }
 }
 

package/examples/shorts/box2dCar.js

@@ -3,7 +3,8 @@ 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 = new Box2dObject(vec2(-8), vec2(), 0, 0,
+        GRAY, box2d.bodyTypeStatic);
     groundObject.addBox(vec2(100,6));
     new CarObject(vec2(0,-2));
     canvasClearColor = hsl(0,0,.9);

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

@@ -4,14 +4,39 @@ class Player extends EngineObject
     {
         super(pos, vec2(1,2), tile(8), 0, RED);
         this.setCollision(); // make object collide
+        this.angleDamping = .95;
     }
 
     update()
     {
         super.update();
+        
+        // space ship controls
+        const moveInput = keyDirection();
+        this.applyAngularAcceleration(moveInput.x * .002);
+        const accel = vec2(0, moveInput.y*.002).rotate(this.angle);
+        this.applyAcceleration(accel);
+    }
+
+    // explode when it collides
+    collideWithObject()
+    {
+        // don't explode if player is almost still and not tilted
+        if (abs(this.angle) < .2)
+        if (this.velocity.length() < .05)
+            return true;
 
-        // apply movement controls
-        this.applyAcceleration(keyDirection().scale(.002));
+        // explode!
+        this.destroy();
+        new ParticleEmitter(
+            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, start, end, speed, angleSpeed
+            .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, cone, fade
+            1, 0, 1                // randomness, collide, additive
+        );
     }
 }
 
@@ -25,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,67 +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 = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
+    stopButton.onClick = ()=>  music && music.stop();
     musicPlayer.addChild(stopButton);
-    stopButton.onClick = ()=>
-    {
-        if (!musicInstance)
-            return;
-
-        // stop sound
-        musicInstance.stop();
-    };
-
-    // progress bar and scrollbar for seeking
-    progressBar = new UIScrollbar(vec2(0, 100), vec2(400, 30), 0, 'Progress');
-    musicPlayer.addChild(progressBar);
-    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();
-    };
 }
 
 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);
+    }
 }