Vizualizacia
JavaScript performance comparison
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
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
test1 |
|
pending… |
test2 |
|
pending… |
You can edit these tests or add even more tests to this page by appending /edit to the URL.
0 comments