littlejsengine 1.13.1 → 1.14.2

package/examples/module/game.js

@@ -101,7 +101,10 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (LJS.mousePosScreen.x)
+    {
         particleEmitter.pos = LJS.mousePos;
+        particleEmitter.velocity = LJS.mouseDelta.scale(.3*LJS.timeDelta);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -113,8 +116,8 @@ function gameUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 function gameRender()
 {
-    // draw a grey square in the background without using webgl
-    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    // draw a grey square in the background
+    LJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6));
     
     // draw the logo as a tile
     LJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));

package/examples/particles/index.html

@@ -94,7 +94,7 @@ function gameInit()
             if (type == 'color')
             {
                 const color = particleSystem[name];
-                defaultValue = color.toString(0);
+                defaultValue = color.toString(false);
             }
             else if (type == 'alpha')
             {
@@ -266,7 +266,7 @@ function updateSetting(setting, save=1)
     if (type == 'color')
     {
         const color = particleSystem[name];
-        input.value = color.toString(0);
+        input.value = color.toString(false);
     }
     else if (type == 'alpha')
     {
@@ -369,7 +369,16 @@ function gameUpdate()
 
     if (document.activeElement == document.body)
     {
-        particleSystem.pos = LJS.mouseIsDown(0) ? LJS.mousePos : vec2();
+        if (LJS.mouseIsDown(0))
+        {
+            particleSystem.pos = LJS.mousePos;
+            particleSystem.velocity = LJS.mouseDelta.scale(.3*LJS.timeDelta);
+        }
+        else
+        {
+            particleSystem.pos = vec2();
+            particleSystem.velocity = vec2();
+        }
         if (LJS.mouseWheel)
         {
             // zoom camera

package/examples/platformer/gameEffects.js

@@ -82,7 +82,7 @@ export function explosion(pos, radius=3)
             GameLevel.decorateTile(pos.add(vec2(x,y)).floor());
     }
 
-    // update webgl texture
+    // update WebGL texture
     GameLevel.updateWebGL(GameLevel.foregroundTileLayer);
 
     // kill/push objects
@@ -153,7 +153,7 @@ export function destroyTile(pos, makeSound = 1, cleanup = 1)
     layer.setData(pos, new LJS.TileLayerData, true);
     layer.setCollisionData(pos, GameLevel.tileType_empty);
 
-    // cleanup neighbors and rebuild webgl
+    // cleanup neighbors and rebuild WebGL
     if (cleanup)
     {
         for (let i=-1;i<=1;++i)
@@ -185,7 +185,7 @@ export class Sky extends LJS.EngineObject
         // fill background with a gradient
         const canvas = LJS.mainCanvas;
         const gradientDelta = 5;
-        for(let y=0; y<canvas.height; y+=gradientDelta)
+        for (let y=0; y<canvas.height; y+=gradientDelta)
         {
             // draw horizontal lines to create a gradient
             const color = this.skyColor.lerp(this.horizonColor, y/canvas.height);
@@ -216,21 +216,20 @@ export class Sky extends LJS.EngineObject
 
 export class ParallaxLayer extends LJS.CanvasLayer
 {
-    constructor(depth) 
+    constructor(pos, topColor, bottomColor, depth) 
     {
         const renderOrder = depth - 3e3;
         const canvasSize = vec2(512, 256);
-        super(vec2(), vec2(), 0, renderOrder, canvasSize);
-        this.canvasSize = canvasSize;
+        super(pos, vec2(), 0, renderOrder, canvasSize);
+        this.centerPos = pos;
         this.depth = depth;
 
         // create a gradient for the mountains
-        const topColor = GameLevel.levelColor.mutate(.2).lerp(GameLevel.sky.skyColor, .8 - depth*.15);
-        const bottomColor = GameLevel.levelColor.subtract(LJS.CLEAR_WHITE).mutate(.2);
-        for(let i = canvasSize.y; i--;)
+        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
-            const p = i/canvasSize.y;
+            const p = i/h;
             this.context.fillStyle = topColor.lerp(bottomColor, p);
             this.context.fillRect(0, i, 1, 1);
         }
@@ -239,40 +238,42 @@ export class ParallaxLayer extends LJS.CanvasLayer
         const pointiness = .2;  // how pointy the mountains are
         const levelness = .005; // how much the mountains level out
         const slopeRange = 1;   // max slope of the mountains
-        const startGroundLevel = canvasSize.y/2;
+        const startGroundLevel = h/2;
         let y = startGroundLevel, groundSlope = LJS.rand(-slopeRange, slopeRange);
-        for(let x=canvasSize.x; x--;)
+        for (let x=w; x--;)
         {
             // pull slope towards start ground level
             y += groundSlope -= (y-startGroundLevel)*levelness;
 
-            // random change slope
+            // randomly change slope
             if (LJS.rand() < pointiness)
                 groundSlope = LJS.rand(-slopeRange, slopeRange);
 
             // draw 1 pixel wide vertical slice of mountain
-            this.context.drawImage(this.canvas, 0, 0, 1, canvasSize.y, x, y, 1, canvasSize.y - 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,canvasSize.y);
+        this.context.clearRect(0,0,1,h);
     
-        // make webgl texture
+        // make WebGL texture
         this.useWebGL(LJS.glEnable);
     }
 
     render()
     {
+        const canvasSize = vec2(this.canvas.width, this.canvas.height);
         const depth = this.depth
         const distance = 4 + depth;
         const parallax = vec2(150, 30).scale(depth**2+1);
-        const levelCenter = GameLevel.levelSize.scale(.5);
-        const cameraDeltaFromCenter = LJS.cameraPos.subtract(levelCenter).divide(levelCenter.scale(-1).divide(parallax));
+        const levelCenter = this.centerPos;
+        const cameraDeltaFromCenter = LJS.cameraPos.subtract(levelCenter)
+            .divide(levelCenter.scale(-1).divide(parallax));
         const scale = distance/LJS.cameraScale;
         const positonOffset = vec2(0, 2-depth);
         const cameraOffset = cameraDeltaFromCenter.scale(1/LJS.cameraScale);
         this.pos = LJS.cameraPos.add(positonOffset).add(cameraOffset);
-        this.size = this.canvasSize.scale(scale);
+        this.size = canvasSize.scale(scale);
         super.render();
     }
 }

package/examples/platformer/gameLevel.js

@@ -39,7 +39,12 @@ export function buildLevel()
 
     // create parallax layers
     for (let i=3; i--;)
-        new GameEffects.ParallaxLayer(i);
+    {
+        const pos = levelSize.scale(.5);
+        const topColor = levelColor.mutate(.2).lerp(sky.skyColor, .8 - i*.15);
+        const bottomColor = levelColor.subtract(LJS.CLEAR_WHITE).mutate(.2);
+        new GameEffects.ParallaxLayer(pos, topColor, bottomColor, i );
+    }
 }
 
 function loadLevelData()

package/examples/shorts/base.html

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

package/examples/shorts/blending.js

@@ -1,16 +1,20 @@
+// use smoother textures
+setCanvasPixelated(false);
+setTilesPixelated(false);
+
 function gameRender()
 {
     const circleTile = tile(2, 128); // get the circle tile
 
     // additive blend
     setBlendMode(1);
-    drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
+    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(-8,-2), vec2(7), circleTile, rgb(0,0,1));
+    drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
 
     // alpha blend
     setBlendMode(0);
-    drawTile(vec2(4,-2), vec2(7), circleTile, rgb(1,0,0,.5));
-    drawTile(vec2(6, 2), vec2(7), circleTile, rgb(0,1,0,.5));
-    drawTile(vec2(8,-2), vec2(7), circleTile, rgb(0,0,1,.5));
+    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));
 }

package/examples/shorts/box2d.js

@@ -10,7 +10,7 @@ async function gameInit()
     groundObject.addBox(vec2(100,2));
 
     // add some random objects
-    for(let i=50; i--;)
+    for (let i=50; i--;)
     {
         const o = new Box2dObject(randInCircle(5), vec2(), 0, 0, randColor());
         randInt(2) ? o.addCircle(rand(1,2)) : o.addRandomPoly(rand(1,2));

package/examples/shorts/box2dCar.js

@@ -18,7 +18,7 @@ class CarObject extends Box2dObject
         this.addBox(vec2(7,2));
         const frequency = 4, maxTorque = 250;
         this.wheels = [];
-        for(let i=2; i--;)
+        for (let i=2; i--;)
         {
             const wheelPos = pos.add(vec2(i?2:-2, -1));
             const wheel = new Box2dObject(wheelPos, vec2(2), tile(7));

package/examples/shorts/clock.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // draw background
-    for(let i=12; i--;)
+    for (let i=12; i--;)
     {
         const a = i/6*PI;
         const pos = vec2(0,7).rotate(a);

package/examples/shorts/colors.js

@@ -10,12 +10,12 @@ function gameRender()
     // rgb and hsl color
     drawRect(vec2(-8, 0), vec2(3), new Color(1,0,0));
     drawRect(vec2(-4, 0), vec2(3), rgb(0,1,1));
-    drawRect(vec2(-0, 0), vec2(3), hsl(0,1,.5));
+    drawRect(vec2(-0, 0), vec2(3), hsl(0,1,.5, .5));
     drawRect(vec2( 4, 0), vec2(3), hsl(.6,.5,.5));
     drawRect(vec2( 8, 0), vec2(3), hsl(0,0,1));
 
     // color lerpping
-    for(let i=5; i--;)
+    for (let i=5; i--;)
     {
         const color1 = RED;
         const color2 = YELLOW;

package/examples/shorts/flappyGame.js

@@ -28,6 +28,7 @@ class Player extends EngineObject
         if (mouseWasPressed(0) || keyWasPressed('Space'))
             this.velocity = vec2(0,.2);
         this.angle = -this.velocity.y*2;
+        this.pos.y = max(-50, this.pos.y);
     }
 
     collideWithObject(object)
@@ -44,7 +45,7 @@ function gameInit()
     gravity.y = -.01;
     for (let i=100; i--;)
     {
-        const h=50, y=-h/2-6+rand(9), spacing=15, gap=5;
+        const h=100, y=-h/2-6+rand(9), spacing=15, gap=5;
         new Wall(vec2(14 + i*spacing,y+h + gap), vec2(3,h));
         new Wall(vec2(14 + i*spacing,y), vec2(3,h));
     }

package/examples/shorts/helloWorld.js

@@ -1,7 +1,7 @@
 function gameRender()
 {
     // draw background rect
-    drawRect(cameraPos, vec2(30), hsl(0,0,.2));
+    drawRect(cameraPos, vec2(50), hsl(0,0,.2));
 
     // draw text to the overlay canvas
     drawTextOverlay('Hello World', vec2(0,3), 3);

package/examples/shorts/maze.js

@@ -2,7 +2,7 @@ function generateMaze(size)
 {
     const maze = [], w = size.x, h = size.y;
     maze[1 + w] = 1; // start point
-    for(let k=w*h*9|0; k--;)
+    for (let k=w*h*9|0; k--;)
     {
         // get a random position on odd coordinates
         const jx = randInt(w/2-(w%2?0:2)|0)*2 + 1;

package/examples/shorts/music.js

@@ -0,0 +1,106 @@
+// Music player variables
+let musicSound = new SoundWave('song.mp3');
+let musicVolume = .8;
+let musicInstance;
+
+// UI elements
+let playButton, stopButton, progressBar;
+
+function gameInit()
+{
+    // load ui system plugin
+    new UISystemPlugin;
+    uiSystem.defaultSoundPress = new Sound([.3,0,220]);
+    uiSystem.defaultSoundClick = new Sound([.3,0,440]);
+    uiSystem.defaultCornerRadius = 20;
+
+    // setup music player UI
+    const musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+
+    // title
+    const title = new UIText(vec2(0, -100), vec2(500, 40), 'LittleJS Music Player');
+    musicPlayer.addChild(title);
+
+    // volume slider
+    const volumeSlider = new UIScrollbar(vec2(0, -40), vec2(400, 30), musicVolume, 'Music Volume');
+    musicPlayer.addChild(volumeSlider);
+    volumeSlider.onChange = () => 
+    {
+        musicVolume = volumeSlider.value;
+        if (musicInstance) 
+            musicInstance.setVolume(musicVolume);
+    };
+
+    // play button
+    playButton = new UIButton(vec2(-90, 30), vec2(140, 50), 'Play');
+    musicPlayer.addChild(playButton);
+    playButton.onClick = ()=>
+    {
+        if (!musicSound.isLoaded())
+            return;
+        
+        // handle play/pause toggle
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume);
+        else if (musicInstance.isPaused())
+            musicInstance.resume();
+        else
+            musicInstance.pause();
+    };
+
+    // stop button
+    stopButton = new UIButton(vec2(90, 30), vec2(140, 50), '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
+
+    // update ui
+    if (!musicSound.isLoaded())
+    {
+        // update loading progress
+        const loadingPercent = musicSound.loadedPercent * 100;
+        progressBar.text = `Loading: ${(loadingPercent).toFixed(2)}%`;
+    }
+    else
+    {
+        // update ui text
+        playButton.text = !musicInstance || !musicInstance.isPlaying() ? 'Play' : 'Pause';
+        const currentTime = musicInstance ? musicInstance.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';
+    }
+}

package/examples/shorts/nineSlice.js

@@ -4,18 +4,18 @@ function gameRender()
     const threeSliceTile = tile(19);
 
     // draw nine slice with thin border and color
-    drawNineSlice(vec2(-7,4), vec2(13, 6), nineSliceTile, hsl(.1,.5,.9), .5);
+    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
-    drawNineSliceScreen(vec2(700,150), vec2(250), nineSliceTile);
+    // 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 thick border and additive color
-    drawThreeSlice(vec2(-7,-4), vec2(9, 7), threeSliceTile, WHITE, 2, hsl(.6,1,.5));
-    drawTextOverlay('Three Slice\nThick Border', vec2(-7,-4), 1, 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 thick border
-    drawThreeSliceScreen(vec2(700,400), vec2(400,150), threeSliceTile);
-    drawTextScreen('Three Slice\nScreen Space', vec2(700,400), 30, 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);
 }

package/examples/shorts/parallax.js

@@ -0,0 +1,71 @@
+function gameInit()
+{
+    // create parallax layers
+    const levelColor = hsl(rand(), .5, .5);
+    for (let i=3; i--;)
+    {
+        const topColor = levelColor.mutate(.3);
+        const bottomColor = levelColor.subtract(CLEAR_WHITE).mutate(.3);
+        new ParallaxLayer(topColor, bottomColor, i);
+    }
+}
+
+class ParallaxLayer extends CanvasLayer
+{
+    constructor(topColor, bottomColor, depth) 
+    {
+        const renderOrder = depth;
+        const canvasSize = vec2(512, 256);
+        super(vec2(), vec2(), 0, renderOrder, canvasSize);
+        this.depth = depth;
+
+        // create a gradient for the mountains
+        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
+            const p = i/h;
+            this.context.fillStyle = topColor.lerp(bottomColor, p);
+            this.context.fillRect(0, i, 1, 1);
+        }
+
+        // draw random mountains
+        const pointiness = .2;  // how pointy the mountains are
+        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);
+        for (let x=w; x--;)
+        {
+            // pull slope towards start ground level
+            y += groundSlope -= (y-startGroundLevel)*levelness;
+
+            // randomly change slope
+            if (rand() < pointiness)
+                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);
+        }
+
+        // remove gradient sliver from left side
+        this.context.clearRect(0,0,1,h);
+    
+        // make WebGL texture
+        this.useWebGL(glEnable);
+    }
+
+    render()
+    {
+        const canvasSize = vec2(this.canvas.width, this.canvas.height);
+        const viewerPos = mousePos;
+        const depth = this.depth
+        const distance = 3 + depth;
+        const parallax = vec2(.2, .05).scale(depth**2+1);
+        const cameraDeltaFromCenter = viewerPos.multiply(parallax);
+        const positonOffset = vec2(0, 4-depth*3);
+        this.pos = cameraDeltaFromCenter.add(positonOffset)
+        this.size = canvasSize.scale(distance/cameraScale);
+        super.render();
+    }
+}

package/examples/shorts/piano.js

@@ -13,19 +13,18 @@ class PianoKey extends EngineObject
     }
     press()
     {
-        if (!this.isDown)
-            pianoSound.playNote(this.semitone);
-        this.isDown = true;
+        if (!this.soundInstance)
+            this.soundInstance = pianoSound.playNote(this.semitone);
     }
     release()
     {
-        if (this.isDown)
-            pianoSound.stop(.2);
-        this.isDown = false;
+        if (this.soundInstance)
+            this.soundInstance.stop(.2);
+        this.soundInstance = 0;
     }
     render()
     {
-        const color = this.isDown ? RED : this.color;
+        const color = this.soundInstance ? RED : this.color;
         drawRect(this.pos, this.drawSize, color);
     }
 }
@@ -33,16 +32,16 @@ class PianoKey extends EngineObject
 function gameInit()
 {
     // create piano keyboard
-    for(let i=15; i--;)
+    for (let i=15; i--;)
         keys.unshift(new PianoKey(vec2(i-7,0), vec2(1,4), [0,2,4,5,7,9,11][i%7]+(i/7|0)*12, 1));
-    for(let i=10; i--;)
+    for (let i=10; i--;)
         keys.unshift(new PianoKey(vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5,0), vec2(1,2), [1,3,6,8,10][i%5]+(i/5|0)*12));
 }
 
 function gameUpdate()
 {
     // update state of piano keys
-    const pressedKey = keys.find(k=>k.isDown);
+    const pressedKey = keys.find(k=>k.soundInstance);
     const newPressedKey = mouseIsDown(0) && keys.find(k=>isOverlapping(k.pos, k.size, mousePos));
     if (newPressedKey != pressedKey)
     {

package/examples/shorts/postProcess.js

@@ -6,7 +6,7 @@ function gameInit()
 function gameRender()
 {
     drawRect(vec2(), vec2(99), GRAY);
-    drawTile(vec2(), vec2(12), tile(3,128));
+    drawTile(vec2(Math.sin(time)*3, 0), vec2(12), tile(3,128));
 }
 
 const tvShader = `
@@ -16,27 +16,44 @@ float hash(vec2 p)
     p=fract(p*.3197);
     return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
 }
-float noise(vec2 p)
-{
-    vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);
-    return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+1.),u.x),u.y);
-}
+
 void mainImage(out vec4 c, vec2 p)
 {
     // setup the shader
+    vec2 uv = p;
     p /= iResolution.xy;
     c = texture(iChannel0, p);
 
     // static noise
     const float staticAlpha = .1;
-    const float staticScale = .005;
+    const float staticScale = .002;
     c += staticAlpha * hash(floor(p/staticScale) + mod(iTime*500., 1e3));
 
     // scan lines
     const float scanlineScale = 2.;
-    const float scanlineAlpha = .3;
+    const float scanlineAlpha = .5;
     c *= 1. - scanlineAlpha*cos(p.y*2.*iResolution.y/scanlineScale);
 
+    {
+        // bloom effect
+        const float blurSize = .002;
+        const float bloomIntensity = .2;
+
+        // 5-tap Gaussian blur
+        vec4 bloom = vec4(0);
+        bloom += texture(iChannel0, p + vec2(-2.*blurSize, 0)) * .12;
+        bloom += texture(iChannel0, p + vec2(   -blurSize, 0)) * .24;
+        bloom += texture(iChannel0, p)                         * .28;
+        bloom += texture(iChannel0, p + vec2(    blurSize, 0)) * .24;
+        bloom += texture(iChannel0, p + vec2( 2.*blurSize, 0)) * .12;
+        bloom += texture(iChannel0, p + vec2(0, -2.*blurSize)) * .12;
+        bloom += texture(iChannel0, p + vec2(0,    -blurSize)) * .24;
+        bloom += texture(iChannel0, p)                         * .28;
+        bloom += texture(iChannel0, p + vec2(0,     blurSize)) * .24;
+        bloom += texture(iChannel0, p + vec2(0,  2.*blurSize)) * .12;
+        c += bloom * bloomIntensity;
+    }
+
     // black vignette around edges
     const float vignette = 2.;
     const float vignettePow = 6.;

package/examples/shorts/raycasting.js

@@ -42,7 +42,7 @@ function gameRender()
     {
         // draw horizontal slizes to create floor and ceiling
         const h = 9;
-        let pos = vec2(), size = vec2(39, .11), color = WHITE;
+        let pos = vec2(), size = vec2(39, .15), color = WHITE;
         for (let y=-h; y<h; y+=.1)
         {
             const p = 1.01-abs(y/h)
@@ -54,7 +54,7 @@ function gameRender()
     {
         // draw vertical slices to create the walls
         const w = 20;
-        const pos = vec2(), size = vec2(.11), color = WHITE;
+        const pos = vec2(), size = vec2(.15), color = WHITE;
         for (let x=-w; x<w; x+=.1)
         {
             const p = raycast(playerPos, playerAngle + x/w);

package/examples/shorts/shapes.js

@@ -1,24 +1,16 @@
 function gameRender()
 {
     // polygon shapes
-    for(let j=3; j<7; ++j)
-    {
-        let points = [];
-        for(let i=0; i<j; ++i)
-        {
-            let angle = i * Math.PI * 2 / j;
-            points.push(vec2(j*4-18,0).add(vec2(Math.sin(angle), Math.cos(angle))));
-        }
-        drawPoly(points, hsl(j/4,1,.5)); // draw a star
-    }
+    for (let j=3; j<7; ++j)
+        drawRegularPoly(vec2(j*4-18,0), vec2(1), j, hsl(j/4+time/9,1,.5), .2, WHITE, time);
 
     // circles and ellipses
-    drawCircle(vec2(0,5), 1, hsl(.15,1,.5));
-    drawEllipse(vec2(-5,5), 2, 1, 0, hsl(0,1,.5));
-    drawEllipse(vec2(5,5), .5, 2, .5, hsl(.55,1,.5));
+    drawCircle(vec2(0,5), 1+wave(.5), hsl(.15,1,.5));
+    drawEllipse(vec2(-5,5), vec2(2,1), hsl(0,1,.5));
+    drawEllipse(vec2(5,5), vec2(.5,2), hsl(.55,1,.5), .5);
 
     // rects and lines
-    drawRect(vec2(0,-5), vec2(13,2), hsl(.6,1,.5));
-    drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1));
+    drawRect(vec2(0,-5), vec2(4,3), hsl(.6,1,.5), time);
+    drawLine(vec2(-5,-7), vec2(5,-3), 1,  hsl(0,0,1, .5));
     drawLine(vec2(-5,-3), vec2(5,-7), .2, hsl(1,1,.5));
 }