Vizualizacia

JavaScript performance comparison

Test case created

Preparation code

<script src="http://158.195.199.56/vizualizacia/helpers.js"></script>
<script src="http://158.195.199.56/vizualizacia/path.js"></script>
<script src="http://158.195.199.56/vizualizacia/draw.js"></script>
<script src="http://158.195.199.56/vizualizacia/constants.js"></script>
<script src="http://158.195.199.56/vizualizacia/Thing.js"></script>
<script src="http://158.195.199.56/vizualizacia/Theme.js"></script>
<script src="http://158.195.199.56/vizualizacia/Ball.js"></script>
<div id="canvas-container">
                        <canvas id="canvas-visualization" width="200" height="200"></canvas>
                </div>
                <div id="button-container">
                        <a id="chat-button" href="#">CHAT</a>
                        <a id="settings-button" href="#">SETTINGS</a>
                        <div id="chat-screen">
                                CHAT SCREEN
                        </div>
                        <div id="settings-screen">
                                <form>
                                        <input type="checkbox" id="mainball" />
                                        <input type="checkbox" id="drawpath" />
                                </form>
                        </div>
                </div>
                <div id="footer">
                        ChatVis - Diploma Thesis - Kamil Maráz © 2012
                </div>
<script>
Benchmark.prototype.setup = function() {
    var canvas;
    var context;
    var boundingRect;
    var rectTop;
    var rectLeft;
    var xres;
    var yres;
   
    var mousePos = new Thing(0, 0);
    var message = 'Mouse position: 0, 0';
   
    var num_themes = 8;
    var num_balls = 15;
   
    var b = [];
   
    var alternate;
   
    /**
     * Determination of direction
     * @param {int} i
     * @param {int} j
     * @returns {void}
     */

    function coldet(i, j)
    {
        var radiusTemp1 = b[i].radius;
        var radiusTemp2 = b[j].radius;
        b[i].radius += 1;
        b[j].radius += 1;
        var diffx = b[j].pos.x - b[i].pos.x;
        var diffy = b[j].pos.y - b[i].pos.y;
        var size = Math.sqrt(diffx * diffx + diffy * diffy);
        if(size < (b[i].radius + b[j].radius))
        {
                var pushamount = (b[i].radius + b[j].radius - size) / 2;
                diffx /= size;
                diffy /= size;
                var pushdiffx = pushamount * (diffx);
                var pushdiffy = pushamount * (diffy);
                b[i].dir.x -= pushdiffx;
                b[i].dir.y -= pushdiffy;
                b[j].dir.x += pushdiffx;
                b[j].dir.y += pushdiffy;
   
                b[i].dir.x = b[i].dir.x * 0.995;
                b[i].dir.y = b[i].dir.y * 0.995;
                b[j].dir.x = b[j].dir.x * 0.995;
                b[j].dir.y = b[j].dir.y * 0.995;
        }
        b[i].radius = radiusTemp1;
        b[j].radius = radiusTemp2;
    }
   
    /**
     * Gravitation force
     * @param {int} i
     * @param {int} j
     * @returns {void}
     */

    function gravity(i, j)
    {
        var diffx = b[j].pos.x - b[i].pos.x;
        var diffy = b[j].pos.y - b[i].pos.y;
   
        var size = diffx * diffx + diffy * diffy;
        size = size * b[i].sizediff;
        var diffsizex = diffx / size;
        var diffsizey = diffy / size;
   
        b[i].dir.x += diffsizex;
        b[i].dir.y += diffsizey;
        b[j].dir.x -= diffsizex;
        b[j].dir.y -= diffsizey;
    }
   
    /**
     * Checks circle intersecting with something
     * @param {int} x
     * @param {int} y
     * @param {int} cx
     * @param {int} cy
     * @param {int} r
     * @returns {Boolean}
     */

    function circleIntersects(x, y, cx, cy, r)
    {
        var dx = x - cx;
        var dy = y - cy;
        return dx * dx + dy * dy <= r * r;
    }
   
    /**
     * Adds new ball to array
     * @returns {void}
     */

    function addNewBall()
    {
        var posX = mousePos.x;
        var posY = mousePos.y;
        var angle = Math.random() * PI2;
        var dirY = Math.sin(angle);
        var dirX = Math.cos(angle);
        var radius = Math.round(15 * (Math.random() + 0.7));
   
        var id = Math.round(Math.random() * (num_themes - 1));
        var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
        var theme = new Theme(id, color);
        var ba = new Ball(posX, posY, dirX, dirY, radius, theme);
        b.push(ba);
    }
   
    /**
     * Changes gravity for all balls
     * @param {int} delta
     * @returns {void}
     */

    function changeGravity(delta)
    {
        var i = b.length - 1;
        if(delta > 0)
        {
                do
                {
                        b[i].sizediff++;
                }
                while(i--)
                console.log('gravity_strenght--');
        }
        else
        {
                do
                {
                        b[i].sizediff--;
                }
                while(i--)
                console.log('gravity_strenght++');
        }
    }
   
    /**
     * Ticker, called every 1 milisecond
     * @returns {void}
     */

    function tick()
    {
        if(alternate % 2)
        {
                var i = 0;
                alternate--;
        }
        else
        {
                alternate++;
                var i = 1;
        }
        for(i; i < b.length; i += 2)
        {
                b[i].pos.x += (b[i].dir.x / 10);
                b[i].pos.y += (b[i].dir.y / 10);
   
                for(var j = i + 1; j < b.length; j++)
                {
                        coldet(i, j);
                        gravity(i, j);
                }
        }
   
        b[0].dir.x = b[0].dir.y = 0;
    }
   
    /** ******** INITIALIZATION ********************************************************************* */
   
    function initScreen()
    {
        var w = window.innerWidth;
        var h = window.innerHeight;
        var canvasW = w;
        var canvasH = h - 100;
   
        xres = canvasW;
        yres = canvasH;
   
        canvas = document.getElementById("canvas-visualization");
        context = canvas.getContext("2d");
        boundingRect = canvas.getBoundingClientRect();
   
        canvas.setAttribute('width', canvasW);
        canvas.setAttribute('height', canvasH);
   
        context.webkitImageSmoothingEnabled = false;
        context.mozImageSmoothingEnabled = false;
        context.font = '12pt Calibri';
   
        rectTop = boundingRect.top;
        rectLeft = boundingRect.left;
    }
   
    function initMain()
    {
        b = [];
        alternate = 2;
        var t;
        var color;
        var ba;
        var posX;
        var posY;
        var dirX;
        var dirY;
        var angle;
        var point;
        for(var j = 0; j < num_themes; j++)
        {
                color = '#' + Math.floor(Math.random() * 16777215).toString(16);
                t = new Theme(j, color);
                for(var i = 0; i < num_balls; i++)
                {
                        posX = Math.round(Math.random() * (xres - (xres / 8)) + (xres / 16));
                        posY = Math.round(Math.random() * (yres - (yres / 8)) + (yres / 16));
                        angle = Math.random() * PI2;
                        dirY = Math.sin(angle);
                        dirX = Math.cos(angle);
                        radius = Math.round(15 * (Math.random() + 0.7));
   
                        ba = new Ball(posX, posY, dirX, dirY, radius, t);
                        point = new Thing(posX, posY);
                        ba.path.push(point);
                        b.push(ba);
                }
        }
    }
   
    /** ******** MAIN ******************************************************************************* */
   
    document.addEventListener('DOMContentLoaded', function()
    {
        initScreen();
        initMain();
   
        /** ******** SETTINGS ********** */
   
        var mb = false;
        var mainball = document.getElementById("mainball");
        mainball.addEventListener('click', function() {mb = mainball.checked;}, false);
   
        var dp = false;
        var drawpath = document.getElementById("drawpath");
        drawpath.addEventListener('click', function() {dp = drawpath.checked;}, false);
   
        /** ******** LISTENERS ********** */
   
        canvas.addEventListener('mousemove', function(event)
        {
                if(mb)
                {
                        b[0].radius = 50;
                        b[0].pos.x = event.pageX - canvas.offsetLeft;
                        b[0].pos.y = event.pageY - canvas.offsetTop;
                        b[0].dir.x = b[0].dir.y = 0;
                }
                else
                {
                        b[0].radius = 0;
                        b[0].pos.x = 0;
                        b[0].pos.y = 0;
                        b[0].dir.x = 0;
                        b[0].dir.y = 0;
                }
                mousePos = getMousePos(event);
                message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        }, false);
   
        canvas.addEventListener('mousewheel', function(event)
        {
                var delta = event.wheelDelta;
                changeGravity(delta);
        }, false);
   
        canvas.addEventListener('click', function()
        {
                addNewBall();
        }, false);
   
        /** ******** TICKERS ********** */
   
   
        /** ******** BUTTONS ********** */
   
        var chatButton = document.getElementById("chat-button");
        var chatScreen = document.getElementById("chat-screen");
        var chatToggle = false;
        chatButton.addEventListener('click', function(event)
        {
                chatScreen.setAttribute('style', 'display: ' + (chatToggle ? 'none' : 'block'));
                chatToggle = !chatToggle;
                event.preventDefault();
        }, false);
        var settingsButton = document.getElementById("settings-button");
        var settingsScreen = document.getElementById("settings-screen");
        var settingsToggle = false;
        settingsButton.addEventListener('click', function(event)
        {
                settingsScreen.setAttribute('style', 'display: ' + (settingsToggle ? 'none' : 'block'));
                settingsToggle = !settingsToggle;
                event.preventDefault();
        }, false);
    });
};
</script>

Preparation code output

CHAT SETTINGS
CHAT SCREEN

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
test1
document.addEventListener('DOMContentLoaded', function()
{
tick();
context.clearRect(0, 0, canvas.width, canvas.height);
draw();
tick();
context.clearRect(0, 0, canvas.width, canvas.height);
draw();
tick();
context.clearRect(0, 0, canvas.width, canvas.height);
draw();
});
pending…
test2
document.addEventListener('DOMContentLoaded', function()
{
tick();
context.clearRect(0, 0, canvas.width, canvas.height);
draw();
tick();
context.clearRect(0, 0, canvas.width, canvas.height);
draw();
tick();
context.clearRect(0, 0, canvas.width, canvas.height);
draw();
});
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