littlejsengine 1.18.4 → 1.18.7

package/examples/shorts/shader.js

@@ -1,29 +0,0 @@
-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

@@ -1,21 +0,0 @@
-function gameRender()
-{
-    // circles and ellipses
-    drawEllipse(vec2(-6,5), vec2(3,2), YELLOW, .5);
-    drawCircle(vec2(0,5), 2+oscillate(.5), RED);
-    drawEllipse(vec2(6,5), vec2(2,4), CLEAR_BLACK, .3, .5, CYAN)
-
-    // polygon shapes
-    drawRectGradient(vec2(-6,0), vec2(5,4), RED, BLUE)
-    drawRegularPoly(vec2(), 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));
-    const zPath = [vec2(5,-3), vec2(-5,-3), vec2(5,-7), vec2(-5,-7)];
-    drawLineList(zPath, .4, MAGENTA);
-}

package/examples/shorts/slidingPuzzle.js

@@ -1,52 +0,0 @@
-const gridSize = vec2(4,3);
-const pieceSize = vec2(5,4);
-let emptyGridPos = vec2();
-
-class PuzzlePiece extends EngineObject
-{
-    constructor(gridPos, size)
-    {
-        const x = gridPos.x, y = gridPos.y;
-        const color = rgb(x/(gridSize.x-1), y/(gridSize.y-1), 1);
-        super(gridPos.multiply(size), size, 0, 0, color);
-        this.gridPos = gridPos;
-        this.text = x + y*gridSize.x;
-        this.moveTimer = new Timer;
-        this.lastPos = this.pos;
-    }
-
-    update()
-    {
-        const deltaX = emptyGridPos.x - this.gridPos.x;
-        const deltaY = emptyGridPos.y - this.gridPos.y;
-        if (mouseWasPressed(0))
-        if (this.isOverlapping(mousePos))
-        if (abs(deltaX) + abs(deltaY) === 1)
-        {
-            // swap with empty space when clicked on
-            this.lastPos = this.pos;
-            this.pos = emptyGridPos.multiply(this.size);
-            [emptyGridPos, this.gridPos] = [this.gridPos, emptyGridPos];
-            this.moveTimer.set(.2);
-        }
-    }
-
-    render()
-    {
-        const movePercent = this.moveTimer.getPercent();
-        const pos = this.lastPos.lerp(this.pos, movePercent);
-        drawRect(pos, this.size, this.color);
-        drawText(this.text, pos, 2.5, BLACK);
-    }
-}
-
-function gameInit()
-{
-    // create puzzle pieces
-    for (let x=gridSize.x; x--;)
-    for (let y=gridSize.y; y--;)
-        (x||y) && new PuzzlePiece(vec2(x,y), pieceSize);
-
-    // center camera on grid
-    cameraPos = gridSize.subtract(vec2(1)).multiply(pieceSize).scale(.5);
-}

package/examples/shorts/sound.js

@@ -1,36 +0,0 @@
-function gameInit()
-{
-    // initialize UI system
-    new UISystemPlugin;
-    uiSystem.defaultShadowColor = BLACK;
-    canvasClearColor = hsl(.6,.3,.2);
-
-    // create a grid of buttons with different sounds
-    const w = 200, h = 150, gap = 20;
-    function makeSoundButton(pos, icon, sound)
-    {
-        pos = pos.multiply(vec2(w+gap, h+gap));
-        pos = pos.add(mainCanvasSize.scale(.5));
-        const button = new UIButton(pos, vec2(w, h), icon);
-        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]));
-}

package/examples/shorts/spaceGame.js

@@ -1,58 +0,0 @@
-class Player extends EngineObject
-{
-    constructor(pos)
-    {
-        super(pos, vec2(1,2), tile(8), 0, CYAN);
-        this.damping = .97;
-        this.angleDamping = .95;
-        this.shootTimer = new Timer;
-    }
-
-    update()
-    {
-        // space ship controls
-        const moveInput = keyDirection();
-        this.applyAngularAcceleration(moveInput.x * .005);
-        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);
-            bullet.velocity = this.getUp(.5);
-            bullet.velocity = bullet.velocity.add(this.velocity);
-            this.shootTimer.set(.1);
-        }
-
-        // move camera with player
-        cameraPos = this.pos;
-        cameraAngle = this.angle;
-    }
-}
-
-function gameInit()
-{
-    new Player(vec2(0,4));
-}
-
-function gameRender()
-{
-    // draw wrapped starfield with parallax
-    const range = 32, halfRange = range/2;
-
-    // precreate variables to avoid overhead
-    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 + 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,31 +0,0 @@
-function gameInit()
-{
-    // create a table of all sprites
-    const gameTile = (i, size=16)=>  tile(i, size);
-    spriteAtlas =
-    {
-        circle:    gameTile(0),
-        crate:     gameTile(1),
-        icon:      gameTile(2),
-        circleBig: gameTile(2, 128),
-        iconBig:   gameTile(3, 128),
-    };
-    canvasClearColor = GRAY;
-}
-
-function gameRender()
-{
-    // draw a sprite from the atlas
-    let pos = vec2(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 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);
-    drawTile(vec2( 0,4), vec2(5), spriteAtlas.circle);
-    drawTile(vec2( 7,4), vec2(5), spriteAtlas.circleBig);
-}

package/examples/shorts/starfield.js

@@ -1,15 +0,0 @@
-function gameRender()
-{
-    // precreate variables to avoid overhead
-    const pos = vec2(), size = vec2(), color = rgb();
-    for (let i=2e3; i--;)
-    {
-        // use math to generate random star positions
-        const offset = time*(9+i**2.1%15) + i**2.3;
-        pos.x = offset%70 - 35;
-        pos.y = i/110 - 9;
-        size.x = size.y = i%.11 + .07;
-        color.set(1,1,1,sin(i)**4);
-        drawRect(pos, size, color);
-    }
-}

package/examples/shorts/texture.js

@@ -1,16 +0,0 @@
-function gameRender()
-{
-    // show the full texture
-    let pos = vec2();         // 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();    // top left corner in pixels
-    let tileSize = vec2(256); // source size in pixels
-    let tileInfo = new TileInfo(tilePos, tileSize); // tile info
-
-    // draw background
-    drawRect(pos, size, GRAY);
-
-    // draw the tile
-    drawTile(pos, size, tileInfo, color);
-}

package/examples/shorts/textureWrapped.js

@@ -1,12 +0,0 @@
-function gameRender()
-{
-    // draw a wrapped texture
-    drawTextureWrapped(vec2(-6, 2), vec2(12, 6), vec2(3, 2));
-
-    // draw red tinted wrapped and rotating
-    drawTextureWrapped(vec2(9, 2), vec2(6, 6), vec2(2), 0, RED, time);
-
-    // animated wrap count
-    const wraps = 2 - sin(time);
-    drawTextureWrapped(vec2(0, -5), vec2(12, 4), vec2(wraps, 1/16));
-}

package/examples/shorts/tileLayer.js

@@ -1,48 +0,0 @@
-function gameInit()
-{
-    cameraPos = vec2(16); // setup camera
-    gravity.y = -.01; // enable gravity
-    canvasClearColor = hsl(0,0,.2); // background color
-
-    // create tile layer
-    const pos = vec2();
-    const tileLayer = new TileCollisionLayer(pos, vec2(32));
-    for (pos.x = tileLayer.size.x; pos.x--;)
-    for (pos.y = tileLayer.size.y; pos.y--;)
-    {
-        // check if tile should be solid
-        if (randBool(.7))
-            continue;
-        
-        // set tile data
-        const tileIndex = 11;
-        const direction = randInt(4)
-        const mirror = randBool();
-        const color = randColor(WHITE, hsl(0,0,.2));
-        const data = new TileLayerData(tileIndex, direction, mirror, color);
-        tileLayer.setData(pos, data);
-        tileLayer.setCollisionData(pos);
-    }
-    tileLayer.redraw(); // redraw tile layer with new data
-}
-
-function gameUpdate()
-{
-    if (mouseWasPressed(0))
-    {
-        // create particle emitter to test the collision
-        const hue = rand();
-        const particleEmitter = new ParticleEmitter(
-            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 as it moves
-    }
-}

package/examples/shorts/tileRaycast.js

@@ -1,39 +0,0 @@
-function gameInit()
-{
-    // create tile layer
-    const pos = vec2();
-    const tileLayer = new TileCollisionLayer(pos, vec2(28,16), 0);
-    cameraPos = tileLayer.size.scale(.5); // setup camera
-    for (pos.x = tileLayer.size.x; pos.x--;)
-    for (pos.y = tileLayer.size.y; pos.y--;)
-    {
-        // create random solid tiles away from level center
-        if (rand() < .7 || cameraPos.distanceSquared(pos) < 9)
-            continue;
-        
-        // set tile data
-        const data = new TileLayerData(1);
-        tileLayer.setData(pos, data);
-        tileLayer.setCollisionData(pos);
-    }
-    tileLayer.redraw();
-}
-
-function gameRenderPost()
-{
-    // cast ray from camera center to mouse
-    drawLine(cameraPos, mousePos, .1, CYAN);
-    const normal = vec2();
-    const hit = tileCollisionRaycast(cameraPos, mousePos, 0, normal);
-    if (hit)
-    {
-        // draw hit tile
-        const tilePos = hit.floor().add(vec2(.5));
-        drawRect(tilePos, vec2(1), RED);
-
-        // draw hit point and normal
-        drawRect(hit, vec2(.2), GREEN);
-        drawLine(cameraPos, hit, .1, RED);
-        drawLine(hit, hit.add(normal), .1, YELLOW);
-    }
-}

package/examples/shorts/tiltedView.js

@@ -1,63 +0,0 @@
-class GameObject extends EngineObject
-{
-    update()
-    {
-        this.renderOrder = -this.pos.y; // sort by y position
-    }
-
-    render()
-    {
-        // adjust draw position to be at the bottom of the object
-        const drawSize = this.drawSize || this.size;
-        const offset = this.getUp(drawSize.y/2);
-        const pos = this.pos.add(offset);
-        drawTile(pos, drawSize, this.tileInfo, this.color, this.angle);
-    }
-}
-
-class Player extends GameObject
-{
-    update()
-    {
-        super.update();
-
-        // apply movement controls
-        const moveInput = keyDirection().clampLength(1).scale(.2);
-        this.velocity = this.velocity.add(moveInput);
-        this.setCollision(); // make object collide
-
-        // move camera with player
-        cameraPos = this.pos.add(vec2(0,2));
-    }
-}
-
-function gameInit()
-{
-    // setup level
-    objectDefaultDamping = .7;
-    const player = new Player(vec2(), vec2(3,1), tile(5), 0, RED);
-    player.drawSize = vec2(3);
-
-    // create background objects
-    for (let i=1; i<300; ++i)
-    {
-        const pos = randInCircle(90);
-        const size = vec2(rand(59), rand(59));
-        const color = hsl(.4,.2,rand(.4,.5),.8);
-        new EngineObject(pos, size, 0, 0, color, -1e5);
-    }
-
-    // create world objects
-    for (let i=1; i<1e3; ++i)
-    {
-        const pos = randInCircle(7+i,7);
-        const isRock = randBool();
-        const size = vec2(isRock ? rand(2,4) : rand(1,2));
-        const color = hsl(.1,isRock ? 0 : .5,rand(.2,.3));
-        const o = new GameObject(pos, size, 0, 0, color);
-        o.setCollision(); // make object collide
-        o.mass = 0; // make object have static physics
-        o.angle = rand(-.1,.1); // random tilt
-        o.drawSize = vec2(size.x, isRock ? rand(2,4) : rand(5,10));
-    }
-}

package/examples/shorts/timers.js

@@ -1,53 +0,0 @@
-const timerSound = new Sound([2,0,999,,,,,1.5,,.3,-99,.1,1.63,,,.11]);
-
-function gameInit()
-{
-    // setup ui system plugin
-    new UISystemPlugin();
-    uiSystem.defaultCornerRadius = 10;
-    uiSystem.defaultShadowColor = BLACK;
-    canvasClearColor = hsl(.3,.3,.2);
-
-    // create timer button
-    const pos = mainCanvasSize.scale(.5).add(vec2(0, -40));
-    timerButton = new UIButton(pos, vec2(200, 90), 'Start');
-    timerButton.timer = new Timer;
-    timerButton.onClick = ()=>
-    {
-        timerButton.isSet = true;
-        if (timerButton.timer.isSet())
-        {
-            timerSound.play(0, .5, 2);
-            timerButton.timer.unset();
-            timerButton.text = 'Start';
-        }
-        else
-        {
-            timerSound.play(0, .5, .5);
-            timerButton.timer.set(3);
-            timerButton.text = 'Stop';
-        }
-    }
-
-    // create non-interactive slider to display timer
-    timerSlider = new UISlider(vec2(0, 100), vec2(400, 50));
-    timerSlider.interactive = false;
-    timerSlider.update = ()=>
-    {
-        if (timerButton.isSet && timerButton.timer.elapsed())
-        {
-            timerSound.play();
-            timerButton.isSet = 0;
-        }
-
-        // update the timer display
-        const t = timerButton.timer.get();
-        const timeText = t.toFixed(2) + 's';
-        const isSet = timerButton.timer.isSet();
-        const setTime = timerButton.timer.getSetTime();
-        timerSlider.text = timeText;
-        timerSlider.value = setTime ? 1+t/setTime : 1;
-        timerSlider.color = isSet ? t < 0 ? CYAN : RED : GRAY;
-    }
-    timerButton.addChild(timerSlider);
-}

package/examples/shorts/topDown.js

@@ -1,38 +0,0 @@
-class Player extends EngineObject
-{
-    constructor(pos)
-    {
-        super(pos, vec2(2), tile(5), 0, RED);
-        this.setCollision(); // make object collide
-        this.renderOrder = 1; // render player on top
-    }
-
-    update()
-    {
-        // apply movement controls
-        const moveInput = keyDirection().clampLength(1).scale(.2);
-        this.velocity = this.velocity.add(moveInput);
-
-        // move camera with player
-        cameraPos = this.pos;
-    }
-}
-
-function gameInit()
-{
-    // setup level
-    canvasClearColor = hsl(.3,.2,.6);
-    objectDefaultDamping = .7;
-    new Player;
-
-    // create collision objects
-    for (let i=300; i--;)
-    {
-        const pos = randInCircle(15+i,7);
-        const size = vec2(rand(4,9),rand(4,9));
-        const color = hsl(.1,.5,rand(.2));
-        const o = new EngineObject(pos, size, 0, 0, color);
-        o.setCollision(); // make object collide
-        o.mass = 0; // make object have static physics
-    }
-}

package/examples/shorts/tween.js

@@ -1,24 +0,0 @@
-const slider = { pos: vec2(-3, 1) };
-const pulser = { color: RED };
-let bouncerY = 4;
-
-function gameInit()
-{
-    // tween using the Tween class directly
-    new Tween((y) => bouncerY = y, 4, -3, 1.5,
-        { ease: Ease.OUT(Ease.BOUNCE) }).pingPong();
-
-    // tweens using tweenProperty helper
-    tweenProperty(slider, 'pos', vec2(-3, 1), vec2(3, -1), 2,
-        { ease: Ease.IN_OUT(Ease.SINE) }).pingPong();
-
-    // tween using built in color class
-    tweenProperty(pulser, 'color', RED, BLUE, 1).pingPong();
-}
-
-function gameRender()
-{
-    drawRect(vec2(-6, bouncerY), vec2(2), GREEN);
-    drawRect(slider.pos,         vec2(2), CYAN);
-    drawRect(vec2(6, 0),         vec2(2), pulser.color);
-}

package/examples/shorts/uiSystem.js

@@ -1,61 +0,0 @@
-function gameInit()
-{
-    // setup ui system plugin
-    new UISystemPlugin;
-    uiSystem.defaultSoundPress = new Sound([.5,0,220]);
-    uiSystem.defaultSoundClick = new Sound([.5,0,440]);
-    uiSystem.defaultCornerRadius = 8;
-    uiSystem.defaultShadowColor = BLACK;
-
-    // setup example menu
-    let navigationIndex = 0;
-    const uiMenu = new UIObject(mainCanvasSize.scale(.5), vec2(700,450));
-    canvasClearColor = hsl(0,0,.8);
-
-    // example text
-    uiMenu.addChild(new UIText(vec2(-100,-120), vec2(450, 80),
-        'LittleJS UI\nSystem Demo'));
-
-    // example image
-    uiMenu.addChild(new UITile(vec2(230,-140), vec2(170), tile(3, 128)));
-
-    // example checkbox
-    const checkbox = new UICheckbox(vec2(-170,0), vec2(50));
-    checkbox.navigationIndex = ++navigationIndex;
-    checkbox.onChange = ()=> button1.disabled = checkbox.checked;
-    uiMenu.addChild(checkbox);
-
-    // example button
-    const textInput = new UITextInput(vec2(50,0), vec2(300, 80), 'Text Input');
-    textInput.textHeight = 60;
-    textInput.maxLength = 16;
-    textInput.navigationIndex = ++navigationIndex;
-    uiMenu.addChild(textInput);
-    textInput.onChange = ()=> canvasClearColor = randColor();
-
-    // example slider
-    const slider = new UISlider(vec2(0,90), vec2(400, 50), 
-        soundVolume, 'Volume');
-    slider.navigationIndex = ++navigationIndex;
-    uiMenu.addChild(slider);
-    slider.onChange = ()=> setSoundVolume(slider.value);
-
-    // exit button
-    const button1 = new UIButton(vec2(0,170), vec2(200, 50), 'Exit Menu');
-    button1.textHeight = 40;
-    button1.navigationIndex = ++navigationIndex;
-    button1.navigationAutoSelect = true;
-    uiMenu.addChild(button1);
-    button1.onClick = ()=> uiSystem.showConfirmDialog('Exit menu?',
-        ()=> { uiMenu.visible=false; buttonBack.visible=true; });
-
-    // example button that returns to menu
-    const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200),
-        'Back\nto\nMenu');
-    buttonBack.visible = false;
-    buttonBack.textHeight = 60;
-    buttonBack.navigationIndex = ++navigationIndex;
-    buttonBack.navigationAutoSelect = true;
-    buttonBack.onClick = ()=> 
-        { uiMenu.visible=true; buttonBack.visible=false; }
-}

package/examples/shorts/videoPlayer.js

@@ -1,34 +0,0 @@
-function gameInit()
-{
-    new UISystemPlugin;
-    uiSystem.defaultCornerRadius = 20;
-    uiSystem.defaultShadowColor = BLACK;
-    canvasClearColor = hsl(0,0,.1);
-
-    // video player
-    const center = mainCanvasSize.scale(.5);
-    const videoPos = center.add(vec2(0, -50));
-    const videoSize = vec2(480, 270);
-    const filename = 'video.webm';
-    const autoplay = true;
-    videoPlayer = new UIVideo(videoPos, videoSize, filename, autoplay);
-    videoPlayer.lineWidth = 5;
-    videoPlayer.lineColor = WHITE;
-
-    // play/pause button
-    const buttonSize = vec2(200, 100);
-    const playButtonPos = center.add(vec2(-130, 170));
-    const playButton = new UIButton(playButtonPos, buttonSize);
-    playButton.onClick = ()=> videoPlayer.isPaused() ? 
-        videoPlayer.play() : videoPlayer.pause();
-    playButton.onUpdate = ()=> playButton.text = 
-        videoPlayer.isPaused() ? 'Play' : 'Pause';
-
-    // status text
-    const statusTextPos = center.add(vec2(130, 170));
-    const statusText = new UIText(statusTextPos, vec2(250, 90));
-    statusText.textColor = WHITE;
-    statusText.onUpdate = ()=> statusText.text = 
-        videoPlayer.hasEnded() ? 'Ended' :
-        videoPlayer.isPlaying() ? 'Playing' : 'Paused';
-}