littlejsengine 1.14.11 → 1.14.19

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,14 +46,14 @@ 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
         this.context.clearRect(0,0,1,h);
     
         // make WebGL texture
-        this.useWebGL(glEnable);
+        this.useWebGL();
     }
 
     render()

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);
 }

package/examples/shorts/sequencer.js

@@ -0,0 +1,122 @@
+const stepCount = 8, trackCount = 12, sequencer = [];
+let currentStep = 0, stepTime = 0, tempo = 240;
+let isPlaying = false, eraseMode = false;
+
+// sound sequencer instruments
+const sound_piano = new Sound([.3,0,220,,.1]);
+const sound_drumKick = new Sound([,,99,,,.02,,,,,,,,2]);
+const sound_drumHat = new Sound([,,1e3,,,.01,4,,,,,,,,,,,,,,4e3]);
+
+// musical note scales
+const majorScale = [0,2,4,5,7,9,11];
+const minorScale = [0,2,3,5,7,8,10];
+const pentatonicScale = [0,3,5,7,10];
+const scale = majorScale;
+
+class UISequencerButton extends UIButton
+{
+    constructor(step, track)
+    {
+        const size = vec2(68, 35);
+        let pos = vec2(step, trackCount-1-track);
+        pos = pos.multiply(size);
+        pos = pos.add(vec2(240, 40));
+        super(pos, size);
+
+        this.step = step;
+        this.track = track;
+        this.cornerRadius = 0;
+        this.dragActivate = true;
+        this.isOn = false;
+
+        // set instrument and color based on track
+        const pianoStart = 2;
+        this.hue = track*.15;
+        if (track >= pianoStart)
+        {
+            const octave = Math.floor((track-pianoStart) / scale.length);
+            const scaleNote = (track-pianoStart) % scale.length;
+            this.semitone = scale[scaleNote] + 12*octave;
+            this.sound = sound_piano;
+            this.hue = .6 - scaleNote/40 + octave*.2;
+        }
+        else
+            this.sound = [sound_drumKick, sound_drumHat][track];
+    }
+    onPress()
+    {
+        // set the button on/off and update sequencer table
+        if (mouseWasPressed(0))
+            eraseMode = this.isOn;
+        this.isOn = !eraseMode;
+        eraseMode || this.playSound();
+        const index = this.step + this.track*stepCount;
+        sequencer[index] = eraseMode ? 0 : this;
+    }
+    render()
+    {
+        this.activeColor = eraseMode ? RED : WHITE;
+        this.color = this.isActiveObject() ? BLACK : 
+            hsl(this.hue, this.isOn ? 1 : .5, this.isOn ? .5 : .15); 
+        if (isPlaying && this.step == currentStep)
+            this.color = this.color.lerp(WHITE, .5);
+        super.render();
+    }
+    playSound() { this.sound.playNote(this.semitone); }
+}
+
+function gameInit()
+{
+    // initialize UI system
+    new UISystemPlugin;
+    uiSystem.defaultCornerRadius = 8;
+    canvasClearColor = hsl(0,0,.3);
+
+    // create sequencer buttons
+    for (let step=stepCount; step--;)
+    for (let track=trackCount; track--;)
+        new UISequencerButton(step, track);
+
+    // create play/stop button
+    const playButton = new UIButton(vec2(660,500), vec2(180,60), 'PLAY');
+    playButton.onClick = ()=>
+    {
+        isPlaying = !isPlaying;
+        currentStep = stepTime = 0;
+        playButton.text = isPlaying ? 'STOP' : 'PLAY';
+    };
+
+    // create tempo slider
+    const minTempo = 120, maxTempo = 480;
+    const tempoPercent = percent(tempo, minTempo, maxTempo);
+    const tempoSlider = new UIScrollbar(vec2(380,500), vec2(340,40), tempoPercent);
+    tempoSlider.onChange = ()=>
+    {
+        tempo = lerp(minTempo, maxTempo, tempoSlider.value);
+        tempo = Math.floor(tempo/10) * 10; // round to nearest 10th
+        tempoSlider.text = `${tempo} BPM`;
+    };
+    tempoSlider.onChange();
+}
+
+function gameUpdate()
+{
+    if (!isPlaying)
+        return;
+
+    // update step time based on tempo
+    const lastStepTime = stepTime;
+    const lastStep = currentStep;
+    stepTime += timeDelta*tempo/60;
+    currentStep = Math.floor(stepTime) % stepCount;
+    if (currentStep == lastStep && lastStepTime)
+        return;
+
+    // play sounds when step changes
+    for (let i=trackCount; i--;)
+    {
+        const index = currentStep + i*stepCount;
+        const noteButton = sequencer[index];
+        noteButton && noteButton.playSound();
+    }
+}

package/examples/shorts/shader.js

@@ -0,0 +1,29 @@
+const shader = `
+void mainImage(out vec4 c, vec2 p)
+{
+    // normalize coordinates
+    vec2 uv = (p - iResolution.xy * .5) / iResolution.y;
+    
+    // get distance and angle from center
+    float distance = length(uv);
+    float angle = atan(uv.y, uv.x);
+    
+    // color based on angle and distance
+    c.rgb = vec3(
+        .5 + .5 * sin(angle + iTime),
+        .5 + .5 * sin(angle + iTime * 2.),
+        .5 + .5 * sin(distance * 5. - iTime)
+    );
+    
+    // apply glow in center
+    c += .1 / (distance + .1);
+
+    // apply sine wave brightness
+    c *= .5 + .5 * sin(distance * 20. - iTime * 3.);
+}
+`;
+
+function gameInit()
+{
+    new PostProcessPlugin(shader);
+}

package/examples/shorts/shapes.js

@@ -7,12 +7,15 @@ function gameRender()
 
     // polygon shapes
     drawRectGradient(vec2(-6,0), vec2(5,4), RED, BLUE)
-    drawRegularPoly(vec2(0,0), vec2(4), 3, PURPLE, .2, WHITE, time);
-    const starPath = [vec2(0,2), vec2(2,-2), vec2(-3,.5), vec2(3,.5), vec2(-2,-2), vec2(0,2)];
-    drawLineList(starPath, .2, GREEN, true, vec2(6, 0));
+    drawRegularPoly(vec2(0,0), vec2(4), 3, PURPLE, .3, WHITE, time);
+    let starPath = []
+    for (let i=10; i--;)
+        starPath.push(vec2(0,2*(i%2?.4:1)).rotate(i/10*PI*2));
+    drawPoly(starPath, BLUE, .1, GREEN, vec2(6, 0));
 
     // rects and lines
     drawRect(vec2(0,-5), vec2(4,3), ORANGE, time);
     drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1,.5));
-    drawLineList([vec2(5,-3), vec2(-5,-3), vec2(5,-7), vec2(-5,-7)], .2, MAGENTA);
+    const zPath = [vec2(5,-3), vec2(-5,-3), vec2(5,-7), vec2(-5,-7)];
+    drawLineList(zPath, .4, MAGENTA);
 }

package/examples/shorts/slidingPuzzle.js

@@ -19,7 +19,8 @@ class PuzzlePiece extends EngineObject
     {
         const deltaX = emptyGridPos.x - this.gridPos.x;
         const deltaY = emptyGridPos.y - this.gridPos.y;
-        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
+        if (mouseWasPressed(0))
+        if (isOverlapping(this.pos, this.size, mousePos))
         if (abs(deltaX) + abs(deltaY) === 1)
         {
             // swap with empty space when clicked on
@@ -32,7 +33,8 @@ class PuzzlePiece extends EngineObject
 
     render()
     {
-        const pos = this.lastPos.lerp(this.pos, this.moveTimer.getPercent());
+        const movePercent = this.moveTimer.getPercent();
+        const pos = this.lastPos.lerp(this.pos, movePercent);
         drawRect(pos, this.size, this.color);
         drawTextOverlay(this.text, pos, 2.5, BLACK);
     }

package/examples/shorts/sound.js

@@ -14,13 +14,22 @@ function gameInit()
         button.textHeight = 100;
         button.onClick = ()=> sound.play();
     }
-    makeSoundButton(vec2(-1, 1),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
-    makeSoundButton(vec2( 0, 1),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
-    makeSoundButton(vec2( 1, 1),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
-    makeSoundButton(vec2(-1, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
-    makeSoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
-    makeSoundButton(vec2( 1, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
-    makeSoundButton(vec2(-1,-1),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
-    makeSoundButton(vec2( 0,-1),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
-    makeSoundButton(vec2( 1,-1),'⚡', new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));
+    makeSoundButton(vec2(-1, 1),'💰', 
+        new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
+    makeSoundButton(vec2( 0, 1),'🥊', 
+        new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
+    makeSoundButton(vec2( 1, 1),'✨', 
+        new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
+    makeSoundButton(vec2(-1, 0),'🐁', 
+        new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
+    makeSoundButton(vec2( 0, 0),'🎹', 
+        new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
+    makeSoundButton(vec2( 1, 0),'🏌️', 
+        new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
+    makeSoundButton(vec2(-1,-1),'🌊', 
+        new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
+    makeSoundButton(vec2( 0,-1),'🛰️', 
+        new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
+    makeSoundButton(vec2( 1,-1),'⚡', 
+        new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));
 }

package/examples/shorts/spaceGame.js

@@ -15,13 +15,16 @@ class Player extends EngineObject
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .005);
-        this.applyAcceleration(vec2().setAngle(this.angle, moveInput.y*.02));
-        if (!this.shootTimer.active() && (keyIsDown('Space') || mouseIsDown(0)))
+        const accel = vec2().setAngle(this.angle, moveInput.y*.02);
+        this.applyAcceleration(accel);
+        if (!this.shootTimer.active())
+        if (keyIsDown('Space') || mouseIsDown(0))
         {
             // shoot bullet
             const pos = this.pos.add(vec2(0,1).rotate(cameraAngle));
-            const bullet = new EngineObject(pos, vec2(.2,.5), 0, this.angle, YELLOW);
-            bullet.velocity = this.velocity.add(vec2(0,.5).rotate(this.angle));
+            const bullet = new EngineObject(pos, vec2(.2,.5), 0, this.angle);
+            bullet.velocity = vec2(0,.5).rotate(this.angle);
+            bullet.velocity = bullet.velocity.add(this.velocity);
             this.shootTimer.set(.1);
         }
 
@@ -42,14 +45,15 @@ function gameRender()
     const range = 32, halfRange = range/2;
 
     // precreate variables to avoid overhead
-    const pos = vec2(), size = vec2(), color = WHITE;
+    const pos = vec2(), size = vec2(), color = rgb();
+    const x = cameraPos.x, y = cameraPos.y;
     for (let i=1e3; i--;)
     {
         // use math to generate random star positions
         const parallax = i%.13-1;
-        pos.x = mod(i**2.1 + cameraPos.x*parallax, range) + cameraPos.x - halfRange;
-        pos.y = mod(i**3.1 + cameraPos.y*parallax, range) + cameraPos.y - halfRange;
-        size.x = size.y = i%.07+.03;
+        pos.x = mod(i**2.1 + x*parallax, range) + x - halfRange;
+        pos.y = mod(i**3.1 + y*parallax, range) + y - halfRange;
+        size.x = size.y = i%.07 + .03;
         color.a = .1+i%.9;
         drawRect(pos, size, color);
     }

package/examples/shorts/spriteAtlas.js

@@ -1,5 +1,4 @@
 let spriteAtlas;
-canvasClearColor = GRAY;
 
 function gameInit()
 {
@@ -13,18 +12,19 @@ function gameInit()
         circleBig: gameTile(2, 128),
         iconBig:   gameTile(3, 128),
     };
+    canvasClearColor = GRAY;
 }
 
 function gameRender()
 {
     // draw a sprite from the atlas
-    let pos = vec2(Math.sin(time)*5,-3);// world position to draw
-    let angle = 0;                      // world space angle to draw the tile
-    let size = vec2(9);                 // world size of the tile
+    let pos = vec2(Math.sin(time)*5,-3);// world position
+    let angle = 0;                      // world space angle
+    let size = vec2(9);                 // world space size
     let mirror = 0;                     // should tile be mirrored?
-    let color = hsl(0,0,1);             // color to multiply the tile by
-    let additiveColor = hsl(0,0,0,0);   // color to add to
-    drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additiveColor);
+    let color = hsl(0,0,1);             // color to multiply by
+    let additive = hsl(0,0,0,0);        // color to add to
+    drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additive);
 
     // draw more sprites from the atlas
     drawTile(vec2(-7,4), vec2(5), spriteAtlas.crate);

package/examples/shorts/starfield.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // precreate variables to avoid overhead
-    const pos = vec2(), size = vec2(), color = new Color;
+    const pos = vec2(), size = vec2(), color = rgb();
     for (let i=2e3; i--;)
     {
         // use math to generate random star positions

package/examples/shorts/systemFont.js

@@ -2,7 +2,7 @@ function gameRender()
 {
     // draw text with built in font image system font
     const font = new FontImage;
-    font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2, true);
+    font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2);
 
     // show every character in the system font
     let s = '';
@@ -12,5 +12,5 @@ function gameRender()
             s += '\n';
         s += String.fromCharCode(i);
     }
-    font.drawText(s, cameraPos, .1, true);
+    font.drawText(s, cameraPos, .1);
 }

package/examples/shorts/texture.js

@@ -4,8 +4,8 @@ function gameRender()
     let pos = vec2(0,0);             // world position to draw
     let size = vec2(15);             // world size of the tile
     let color = hsl(0,0,1);          // color to multiply the tile by
-    let tilePos  = vec2(0,0);        // top left corner of tile in pixels
-    let tileSize = vec2(256);        // size of tile in pixels
+    let tilePos  = vec2(0,0);        // top left corner in pixels
+    let tileSize = vec2(256);        // source size in pixels
     let tileInfo = new TileInfo(tilePos, tileSize); // tile info
     drawRect(pos, size, GRAY);       // draw background
     drawTile(pos, size, tileInfo, color);

package/examples/shorts/tileLayer.js

@@ -30,19 +30,19 @@ function gameUpdate()
 {
     if (mouseWasPressed(0))
     {
-        // create particle emitter
+        // create particle emitter to test the collision
         const hue = rand();
         const particleEmitter = new ParticleEmitter(
-            mousePos, 0,                // emitPos, emitAngle
-            0, 0.1, 500, PI,            // emitSize, emitTime, emitRate, emitCone
-            tile(0, 16),                // tileIndex, tileSize
-            hsl(hue,1,.5),   hsl(hue,1,1),   // colorStartA, colorStartB
-            hsl(hue,1,.5,0), hsl(hue,1,1,0), // colorEndA, colorEndB
-            2, .2, .2, .2, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
-            .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
-            .05, .8, true, false        // fadeRate, randomness, collide, additive
+            mousePos, 0,
+            0, 0.1, 500, PI,
+            tile(0, 16),
+            hsl(hue,1,.5),   hsl(hue,1,1),
+            hsl(hue,1,.5,0), hsl(hue,1,1,0),
+            2, .2, .2, .2, .05,
+            .99, 1, 1, PI,
+            .05, .8, true
         );
         particleEmitter.restitution = .5; // bounce when it collides
-        particleEmitter.trailScale = 2;  // stretch in direction of motion
+        particleEmitter.trailScale = 2;   // stretch as it moves
     }
 }