2012-06-20 15:09:19 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en" >
<!--
Copyright (c) 2012 Cameron Adams. All rights reserved.
Copyright (c) 2012 Code Aurora Forum. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following
disclaimer in the documentation and/or other materials provided
with the distribution.
* Neither the name of Code Aurora Forum, Inc. nor the names of its
contributors may be used to endorse or promote products derived
from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS
BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
This test is based on code written by Cameron Adams and imported from
http://themaninblue.com/experiment/AnimationBenchmark/html
-->
< head >
< title > Benchmark - HTML & JavaScript< / title >
< meta http-equiv = "content-type" content = "text/html; charset=UTF-8" / >
< meta name = "author" content = "The Man in Blue" / >
< meta name = "robots" content = "all" / >
< meta name = "MSSmartTagsPreventParsing" content = "true" / >
< meta name = "description" content = "" / >
< meta name = "keywords" content = "" / >
< style type = "text/css" >
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
span {
position: absolute;
width: 12px;
height: 12px;
overflow: hidden;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #000000;
}
.shadows span {
-webkit-box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
-moz-box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
}
#frameRate {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 100;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
}
< / style >
< script type = "text/javascript" >
var FRAMES_PER_TIMER_READING = 10;
var MAX_PARTICLES = 2500;
var MAX_VELOCITY = 50;
var PARTICLE_RADIUS = 6;
var STAGE_WIDTH = 600;
var STAGE_HEIGHT = 600;
var COLORS = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"];
var frameTimes = [];
var iteration = 0;
var run = 0;
var animateIntervalId = 0;
var statistics = [];
var frameRates = [];
var particles = [];
2012-10-17 20:57:46 +00:00
window.onload = function () {
2013-03-03 23:19:31 +00:00
PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'fps'});
2012-06-20 15:09:19 +00:00
// Create the particles
for (var i = 0; i < MAX_PARTICLES ; i + + )
particles.push(new Particle());
// Start the animation
animateIntervalId = setInterval(animate, 1);
}
function animate()
{
2012-10-17 20:57:46 +00:00
var currTime = PerfTestRunner.now();
2012-06-20 15:09:19 +00:00
var timeDelta = currTime - frameTimes[frameTimes.length - 1];
if (isNaN(timeDelta))
timeDelta = 0;
// Draw each particle
for (var particle in particles)
particles[particle].draw(timeDelta);
if ((iteration++ % FRAMES_PER_TIMER_READING) == 0) {
// Limit the frame time array to the last 30 frames
if (frameTimes.length > 30)
frameTimes.splice(0, 1);
frameTimes.push(currTime);
// Calculate the framerate based upon the difference between the absolute times of the oldest and newest frames, subdivided by how many frames were drawn inbetween
var frameRate = document.getElementById("frameRate");
var frameRateVal = FRAMES_PER_TIMER_READING * 1000 / ((currTime - frameTimes[0]) / (frameTimes.length - 1));
2012-10-17 20:57:46 +00:00
if (!isNaN(frameRateVal))
2012-12-04 10:00:54 +00:00
PerfTestRunner.measureValueAsync(frameRateVal);
2012-06-20 15:09:19 +00:00
}
}
function Particle()
{
var angle = Math.PI * 2 * PerfTestRunner.random();
var velocity = MAX_VELOCITY / 8 * 7 * PerfTestRunner.random() + MAX_VELOCITY / 8;
var x = STAGE_WIDTH / 2 - PARTICLE_RADIUS;
var y = STAGE_HEIGHT / 2 - PARTICLE_RADIUS;
// Create visual element for the particle
var domNode = document.createElement('span');
document.body.appendChild(domNode);
// Set initial position to middle of screen
domNode.style.left = x + "px";
domNode.style.top = y + "px";
// Set colour of element
domNode.style.backgroundColor = COLORS[Math.floor(Math.random() * COLORS.length)];
function destroy()
{
document.body.removeChild(domNode);
return;
}
function draw(timeDelta)
{
// Calculate next position of particle
var nextX = x + Math.cos(angle) * velocity * (timeDelta / 1000);
var nextY = y + Math.sin(angle) * velocity * (timeDelta / 1000);
// If particle is going to move off right side of screen
if (nextX + PARTICLE_RADIUS * 2 > STAGE_WIDTH)
// If angle is between 3 o'clock and 6 o'clock
if ((angle >= 0 & & angle < Math.PI / 2 ) )
angle = Math.PI - angle;
// If angle is between 12 o'clock and 3 o'clock
else if (angle > Math.PI / 2 * 3)
angle = angle - (angle - Math.PI / 2 * 3) * 2
// If particle is going to move off left side of screen
if (nextX < 0 )
// If angle is between 6 o'clock and 9 o'clock
if ((angle > Math.PI / 2 & & angle < Math.PI ) )
angle = Math.PI - angle;
// If angle is between 9 o'clock and 12 o'clock
else if (angle > Math.PI & & angle < Math.PI / 2 * 3 )
angle = angle + (Math.PI / 2 * 3 - angle) * 2
// If particle is going to move off bottom side of screen
if (nextY + PARTICLE_RADIUS * 2 > STAGE_HEIGHT)
// If angle is between 3 o'clock and 9 o'clock
if ((angle > 0 & & angle < Math.PI ) )
angle = Math.PI * 2 - angle;
// If particle is going to move off top side of screen
if (nextY < 0 )
// If angle is between 9 o'clock and 3 o'clock
if ((angle > Math.PI & & angle < Math.PI * 2 ) )
angle = angle - (angle - Math.PI) * 2;
domNode.style.left = nextX + "px";
domNode.style.top = nextY + "px";
x = nextX;
y = nextY;
}
return { draw: draw, destroy: destroy }
}
function onCompletedRun() {
2012-10-17 20:57:46 +00:00
clearInterval(animateIntervalId);
2012-06-20 15:09:19 +00:00
for (var particle in particles) {
var p = particles[particle];
particles[particle] = 0;
p.destroy();
}
particles = [];
frameRate.innerHTML = "";
}
< / script >
< script src = "../resources/runner.js" > < / script >
< / head >
< body >
< div id = "frameRate" >
< / div >
< / body >
< / html >
