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