littlejsengine 1.18.4 → 1.18.8

package/examples/shorts/music.js

@@ -1,78 +0,0 @@
-const musicSound = new Sound('song.mp3');
-let musicVolume = .8, musicInstance;
-
-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;
-    uiSystem.defaultShadowColor = BLACK;
-    canvasClearColor = hsl(.9,.3,.2);
-
-    // setup music player UI
-    const center = mainCanvasSize.scale(.5);
-    musicPlayer = new UIObject(center, vec2(500, 220));
-
-    // information text
-    infoText = new UIText(vec2(0, -70), vec2(400, 50));
-    musicPlayer.addChild(infoText);
-
-    // volume slider
-    const volumeSlider = new UISlider(vec2(0, -20), vec2(400, 30), 
-        musicVolume, 'Music Volume');
-    volumeSlider.fillMode = true;
-    musicPlayer.addChild(volumeSlider);
-    volumeSlider.onChange = ()=> 
-    {
-        musicVolume = volumeSlider.value;
-        musicInstance?.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 (!musicInstance)
-            musicInstance = musicSound.playMusic(musicVolume);
-        else if (musicInstance.isPaused())
-            musicInstance.resume();
-        else
-            musicInstance.pause();
-    };
-
-    // stop button
-    stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>  musicInstance?.stop();
-    musicPlayer.addChild(stopButton);
-}
-
-function gameUpdate()
-{
-    // disable buttons while loading
-    const isDisabled = !musicSound.isLoaded();
-    playButton.disabled = stopButton.disabled = isDisabled;
-
-    // update ui
-    if (isDisabled)
-    {
-        // update loading progress
-        const loadingPercent = musicSound.loadedPercent * 100|0;
-        infoText.text = `Loading: ${loadingPercent}%`;
-    }
-    else
-    {
-        // update ui text
-        const isPlaying = musicInstance?.isPlaying();
-        playButton.text = isPlaying ? 'Pause' : 'Play';
-        const current = formatTime(musicInstance?.getCurrentTime());
-        const duration = formatTime(musicSound.getDuration());
-        infoText.text = current + ' / ' + duration;
-    }
-}

package/examples/shorts/musicPlayer.js

@@ -1,137 +0,0 @@
-
-let musicVolume = .8, musicSound, musicInstance;
-
-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;
-    uiSystem.defaultGradientColor = WHITE;
-    uiSystem.defaultShadowColor = BLACK;
-    canvasClearColor = hsl(.9,.3,.2);
-
-    // setup music player UI
-    const center = mainCanvasSize.scale(.5);
-    musicPlayer = new UIObject(center, 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 = GRAY;
-    musicPlayer.addChild(dropZoneText);
-
-    // volume slider
-    const volumeSlider = new UISlider(vec2(0, -20), vec2(400, 30),
-        musicVolume, 'Music Volume');
-    volumeSlider.fillMode = true;
-    musicPlayer.addChild(volumeSlider);
-    volumeSlider.onChange = ()=> 
-    {
-        musicVolume = volumeSlider.value;
-        musicInstance?.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 (!musicInstance)
-            musicInstance = musicSound.playMusic(musicVolume);
-        else if (musicInstance.isPaused())
-            musicInstance.resume();
-        else
-            musicInstance.pause();
-    };
-
-    // stop button
-    stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>  musicInstance?.stop();
-    musicPlayer.addChild(stopButton);
-
-    // progress bar and slider for seeking
-    progressBar = new UISlider(vec2(0, 120), vec2(400, 30), 0);
-    progressBar.disabledColor = RED;
-    progressBar.onChange = ()=> 
-    {
-        // control music seek position
-        const wasPlaying = musicInstance?.isPlaying();
-        if (!musicInstance)
-            musicInstance = musicSound.playMusic(musicVolume, 1, 1);
-        progressBar.value = min(progressBar.value, .999); // prevent wrap
-        const seekTime = progressBar.value * musicSound.getDuration();
-        musicInstance.start(seekTime);
-        if (!wasPlaying)
-            musicInstance.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 Sound(fileURL, musicVolume);
-            dropZoneText.text = file.name;
-            
-            // reset UI
-            musicInstance?.stop();
-            musicInstance = 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 = musicInstance?.isPlaying();
-        playButton.text = isPlaying ? 'Pause' : 'Play';
-        const current = musicInstance?.getCurrentTime() || 0;
-        const duration = musicSound.getDuration();
-        progressBar.text = formatTime(current) +
-            ' / ' + formatTime(duration);
-        if (!progressBar.isActiveObject())
-            progressBar.value = current / duration;
-    }
-}

package/examples/shorts/nineSlice.js

@@ -1,40 +0,0 @@
-function gameRender()
-{
-    const nineSliceTile = tile(16);
-    const threeSliceTile = tile(19);
-
-    {
-        // draw nine slice with thin border and color
-        const pos = vec2(-7,4);
-        const size = vec2(11+oscillate(.5,2), 6);
-        const color = hsl(.1,.5,.9);
-        const border = .5;
-        drawNineSlice(pos, size, nineSliceTile, color, border);
-        drawText('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 + oscillate(.2)*2;
-        const additive = hsl(time/30,.5,.5);
-        drawThreeSlice(pos, size, threeSliceTile, WHITE, border, additive);
-        drawText('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-oscillate(.3,90),120+oscillate(.3,60));
-        drawThreeSliceScreen(pos, size, threeSliceTile);
-        drawTextScreen('Three Slice\nScreen Space', pos, 30, BLACK);
-    }
-}

package/examples/shorts/parallax.js

@@ -1,72 +0,0 @@
-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
-            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;
-        let 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.updateWebGL();
-    }
-
-    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 positionOffset = vec2(0, 4-depth*3);
-        this.pos = cameraDeltaFromCenter.add(positionOffset)
-        this.size = canvasSize.scale(distance/cameraScale);
-        super.render();
-    }
-}

package/examples/shorts/particles.js

@@ -1,28 +0,0 @@
-function gameInit()
-{
-    gravity.y = -.01; // set default gravity
-
-    // fire
-    new ParticleEmitter(
-        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, 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

@@ -1,44 +0,0 @@
-const pianoSound = new Sound([,0,220,,9]);
-
-class PianoKey extends UIButton
-{
-    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, '', color);
-
-        this.dragActivate = true;
-        this.semitone = semitone;
-        this.hoverColor = hoverColor;
-        this.activeColor = RED;
-    }
-    onPress()   { this.sound = pianoSound.playNote(this.semitone); }
-    onRelease() { this.sound.stop(.2); }
-}
-
-function gameInit()
-{
-    // initialize UI system
-    new UISystemPlugin;
-
-    // create piano keyboard
-    for (let i=15; i--;)
-    {
-        // 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, WHITE, hsl(0,1,.9));
-    }
-    for (let i=10; i--;)
-    {
-        // 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, hsl(0,0,.3), hsl(0,1,.3));
-    }
-}

package/examples/shorts/platformer.js

@@ -1,45 +0,0 @@
-class Player extends EngineObject
-{
-    constructor(pos)
-    {
-        super(pos, vec2(2,4), 0, 0, RED);
-        this.setCollision(); // make object collide
-    }
-
-    update()
-    {
-        // apply movement controls
-        const moveInput = keyDirection();
-        this.velocity.x += moveInput.x * (this.groundObject ? .1: .01);
-        if (this.groundObject && moveInput.y > 0)
-            this.velocity.y = .9; // jump
-
-        // move camera with player
-        cameraPos = vec2(this.pos.x, 9); 
-    }
-}
-
-function gameInit()
-{
-    // setup level
-    gravity.y = -.05;
-    new Player(vec2(5,6));
-    canvasClearColor = hsl(.6,.3,.5);
-
-    // create tile layer
-    const pos = vec2();
-    const tileLayer = new TileCollisionLayer(pos, vec2(256));
-    for (pos.x = tileLayer.size.x; pos.x--;)
-    for (pos.y = tileLayer.size.y; pos.y--;)
-    {
-        // check if tile should be solid
-        const levelHeight = pos.x<9 ? 2 : (pos.x/4|0)**3.1%7;
-        if (pos.y > levelHeight)
-            continue;
-        
-        // set tile data
-        tileLayer.setData(pos, new TileLayerData(1));
-        tileLayer.setCollisionData(pos);
-    }
-    tileLayer.redraw(); // redraw tile layer with new data
-}

package/examples/shorts/pongGame.js

@@ -1,41 +0,0 @@
-let paddle, ball;
-
-class PhysicsObject extends EngineObject
-{
-    constructor(pos, size)
-    {
-        super(pos, size); // set object position and size
-        this.setCollision(); // make object collide
-        this.mass = 0; // make object have static physics
-    }
-}
-
-function gameInit()
-{
-    // setup level
-    const levelSize = vec2(38, 21);    // size of play area
-    cameraPos = levelSize.scale(.5);   // center camera in level
-    canvasFixedSize = vec2(1280, 720); // use a 720p fixed size canvas
-
-    // create objects
-    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()
-{
-    if (!ball || ball.pos.y < -1) // spawn ball
-    {
-        ball && ball.destroy(); // destroy old ball
-        ball = new PhysicsObject(cameraPos); // create a ball
-        ball.velocity = vec2(.2); // give ball some movement
-        ball.restitution = 1; // make ball bounce
-        ball.mass = 1; // make ball have dynamic physics
-    }
-
-    paddle.pos.x = mousePos.x; // move paddle to mouse
-}

package/examples/shorts/postProcess.js

@@ -1,62 +0,0 @@
-function gameInit()
-{
-    new PostProcessPlugin(tvShader);
-}
-
-function gameRender()
-{
-    drawRect(vec2(), vec2(99), GRAY);
-    drawTile(vec2(sin(time)*3, 0), vec2(12), tile(3,128));
-}
-
-const tvShader = `
-// Simple TV Shader Code
-float hash(vec2 p)
-{
-    p=fract(p*.3197);
-    return fract(1.+sin(51.*p.x+73.*p.y)*13753.3);
-}
-
-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 = .002;
-    c += staticAlpha * hash(floor(p/staticScale) + mod(iTime*500., 1e3));
-
-    // scan lines
-    const float scanlineScale = 2.;
-    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.;
-    float dx = 2.*p.x-1., dy = 2.*p.y-1.;
-    c *= 1.-pow((dx*dx + dy*dy)/vignette, vignettePow);
-}`;

package/examples/shorts/sequencer.js

@@ -1,124 +0,0 @@
-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;
-        this.shadowColor = CLEAR_BLACK;
-
-        // set instrument and color based on track
-        const pianoStart = 2;
-        this.hue = track*.15;
-        if (track >= pianoStart)
-        {
-            const octave = 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;
-    uiSystem.defaultShadowColor = BLACK;
-    canvasClearColor = GRAY;
-
-    // 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 UISlider(vec2(380,500), vec2(340,40), tempoPercent);
-    tempoSlider.onChange = ()=>
-    {
-        tempo = lerp(minTempo, maxTempo, tempoSlider.value);
-        tempo = 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 = 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();
-    }
-}