Oppgave 9

Resultat

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var punch,
        hitmark,
        horns;

    // Skjul start og stopp
    document.getElementById("start").style.display = "none";
    document.getElementById("stop").style.display = "none";

    // Build suspense
        new Audio("oppgave-9-materiale/20th.mp3").play();

    // More suspense
    setTimeout(function() {
        new Audio("oppgave-9-materiale/suspense7.wav").play();
    }, 19000);

    // Something spicey before we go, and then spice again every once in a while
    setInterval(function() {
        new Audio("oppgave-9-materiale/damn.mp3").play();
    }, 25000);

    // More spice
    setTimeout(function() {
        new Audio("oppgave-9-materiale/horns.mp3").play();
        
        makeArt("white");

        setTimeout(function() {
            makeArt("white");
        }, 250);

        setTimeout(function() {
            makeArt("white");
        }, 500);

        setTimeout(function() {
            makeArt("white");
        }, 750);

        setTimeout(function() {
            makeArt("white");
        }, 1000);

        var shot = setInterval(function() {
            new Audio("oppgave-9-materiale/shot.wav").play();

            makeArt("#FF5254");
            makeArt("#745cc4");
            makeArt("#5CACC4");
            makeArt("#8CD19D");
            makeArt("#f4de7c");
            makeArt("#FCB859");
        }, 1500);

        setTimeout(function() {
            clearInterval(shot);
        }, 6000);
    }, 26000);

    // Yasss
    setTimeout(function() {
        punch = setInterval(function() {
            new Audio("oppgave-9-materiale/punch.mp3").play();
            
            makeArt("#5CACC4");
        }, 1000);

        hitmark = setInterval(function() {
            new Audio("oppgave-9-materiale/hitmark.wav").play();

            makeArt("#FF5254");
        }, 250);

        horns = setInterval(function() {
            new Audio("oppgave-9-materiale/horns.mp3").play();

            makeArt("white");

            setTimeout(function() {
                makeArt("white");
            }, 250);

            setTimeout(function() {
                makeArt("white");
            }, 500);

            setTimeout(function() {
                makeArt("white");
            }, 750);

            setTimeout(function() {
                makeArt("white");
            }, 1000);
        }, 12000);

        document.getElementById("stop").style.display = "inline-block"; // Vis stop

        document.getElementById("stop").onclick = function() {
            document.getElementById("start").style.display = "inline-block"; // Vis start når stop er blitt trykket på
            clearInterval(punch);
            clearInterval(hitmark);
            clearInterval(horns);
        }
    }, 28000);

    document.getElementById("start").onclick = function() {
        ready();
    }
}

var o9Canvas = document.getElementById("o9-canvas")
    o9Ctx = o9Canvas.getContext("2d"),
    o9Video = document.getElementById('o9-video'),
    width = o9Canvas.width,
    height = o9Canvas.height,
    rotation = 0,
    rectSize = 300;

o9Video.addEventListener('play', function() {
    var $this = this;

    (function loop() {
      if (!$this.paused && !$this.ended) {
        o9Ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 24); // Sett fps til 24
      }
    })();
});

setTimeout(function() {
    o9Video.style.display = "none";
    o9Ctx.fillStyle = "black";
    o9Ctx.fillRect(0, 0, width, height);
}, 21000);

function makeArt(color) {
    o9Ctx.globalAlpha = 0.2;
    o9Ctx.fillStyle = "black";
    o9Ctx.fillRect(0, 0, width, height);
    o9Ctx.save();

    o9Ctx.globalAlpha = 1;
    o9Ctx.strokeStyle = color;
    o9Ctx.translate(width/2, height/2);
    o9Ctx.rotate(rotation);
    o9Ctx.lineWidth = 5;
    o9Ctx.strokeRect(-(rectSize/2), -(rectSize/2), rectSize, rectSize);
    o9Ctx.restore();
    o9Ctx.save();

    rotation += Math.PI/360+0.1;
}
                
            

HTML

                
<div class="space-v-small">
    <button id="start" class="btn success">Start</button>
    <button id="stop" class="btn alert">Stop</button>
</div>
<video id="o9-video" controls="false" autoplay>
    <source src="oppgave-9-materiale/20th.webm" type="video/webm">
    <source src="oppgave-9-materiale/20th.mp4" type="video/mp4">
</video>
<canvas id="o9-canvas" width="668" height="512"></canvas>