Window

JavaScript performance comparison

Test case created

Preparation code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Window</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
        <div style="text-align:center;">FENSTER</div><br><br><br>
        <div id="canvas_container">
                <canvas id="canvas">Your Browser not support CANVAS</canvas><br>
        </div>
       
        <div id="fps"></div>
       
        <audio id="bgNatur" preload="auto" loop>
                <source src="sound/natur2.mp3" type="audio/mp3" />
                <source src="sound/natur2.wav" type="audio/wav" />
        </audio>
       
        <script src="//cdn.ext/library.js" type="text/javascript"></script>
        <!-- <script src="smoke.js" type="text/javascript"></script>-->
</body>
</html>
 
<script>
Benchmark.prototype.setup = function() {
    // JavaScript Document
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
   
    var speed = -1;
    var imgX = 0;
    var imgY = 0;
    var windowOpen = false;
    var anim = false;
   
    var imgWindow = new Image();
    var imgFrame  = new Image();
    var imgBg = new Image();
   
    imgWindow.src = "img/window.png";
    imgFrame.src = "img/frame.png";
    imgBg.src = "img/bg.png";
   
    var posX = 220; //Position x of the Smoke
    var posY = 95; //Position y of the Smoke
   
    var smokeSetting = {
        quantity                : 30, //Do not use more than 200...
        color                   : "#FFF", //Color
        opacityStart    : 9,
        opacityEnd              : 9,
        width                   : 2, //The width where the Smoke is coming out
        minSpeed                : 50, //The min Speed of a particel
        maxSpeed                : 100, //The max Speed of a particel
        minLength               : 50, //The min lenght of the Smoke...
        maxLenght               : 80, //The max lenght of the Smoke...
        size                    : 0.4,  //Size of one particel
        speedX                  : 0.02 // "Wind"
    };
   
    function circle(obj) {
        context.beginPath();
        context.arc(obj.posX + posX, obj.posY, obj.size, 0, Math.PI * 2, true);
        context.fillStyle = obj.color;
        context.fill();
    }
   
    //Calculate a random number...
    function randomFromInterval(from,to)
    {
        return Math.floor(Math.random()*(to-from+1)+from);
    }
   
    function openWindow(){
        if(imgX >= -300){
                imgX += speed;
        } else {
                anim = false;
                windowOpen = true;
                playSound('bgNatur');
        }
    }
   
    function closeWindow(){
        if(imgX <= 0){
                imgX += speed;
        } else{
                windowOpen = false;
                anim = false;
                stopSound('bgNatur');
        }
   
    }
   
    function playSound(id){
        document.getElementById(id).currentTime = 0;
        document.getElementById(id).play();
    }
   
    function stopSound(id){
        //document.getElementById(id).stop();
        document.getElementById(id).pause();
   
    }
   
    function initialize(){
        smoke = new Array();
        for(var i = 0; i < smokeSetting.quantity; i++){
                smoke[i] = new Object();
                smoke[i]["speed"]               = randomFromInterval(smokeSetting.minSpeed, smokeSetting.maxSpeed) / 2000;
                smoke[i]["lenght"]              = randomFromInterval(smokeSetting.minLength, smokeSetting.maxLenght);
                smoke[i]["posX"]                = randomFromInterval(0, smokeSetting.width);
                smoke[i]["posY"]                = posY;
                smoke[i]["size"]                = smokeSetting.size;
                smoke[i]["color"]               = smokeSetting.color;
                smoke[i]["speedX"]              = smokeSetting.speedX;
               
                //Start the animation
                animate();
        }      
    }
   
    function animate(){
        reqAnimFrame =
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame;
   
        reqAnimFrame(animate);
       
        $("#canvas").click(function(){
                anim = true
        });
       
        if(anim){
                if(!windowOpen){
                        if(speed > 0){
                                speed = -speed;
                        }
                        openWindow();
                } else{
                        if(speed < 0){
                                speed = -speed;
                        }
                        closeWindow();
                }
        }
       
        for(var i = 0; i < smoke.length; i++) {
                for (var attribute in smoke[i]){
                        if(smoke[i]["posY"] < -smoke[i]["lenght"] + posY){
                                smoke[i]["posY"] = posY;
                                smoke[i]["posX"] = randomFromInterval(0, smokeSetting.width);
                        } else{
                                smoke[i]["posY"] += -smoke[i]["speed"];
                               
                                if(smoke[i]["posY"] > ((smoke[i]["lenght"] + smoke[i]["posY"]) / 2)){
                                        smoke[i]["posX"] += smoke[i]["speedX"]
                                }
                        }
                }
        }
   
       
       draw();
    }
   
    function draw(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
       
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
       
        context.drawImage(imgBg, 0, 0, 300, 150);
        context.drawImage(imgWindow, imgX, imgY, 300, 150);
        context.drawImage(imgFrame, 0, 0, 300, 150);
       
        for (var i = 0; i < smoke.length; i++) {
                for (var attribute in smoke[i]){
                        circle(smoke[i]);
                }
        }
    }
   
    initialize();
   
};
</script>

Preparation code output

Window
FENSTER



Your Browser not support CANVAS

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
test
test
pending…
test
test
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment