239 lines
8.1 KiB
HTML
239 lines
8.1 KiB
HTML
<!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 = [];
|
|
|
|
window.onload = function () {
|
|
PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'fps'});
|
|
|
|
// Create the particles
|
|
for (var i = 0; i < MAX_PARTICLES; i++)
|
|
particles.push(new Particle());
|
|
|
|
// Start the animation
|
|
animateIntervalId = setInterval(animate, 1);
|
|
}
|
|
|
|
function animate()
|
|
{
|
|
var currTime = PerfTestRunner.now();
|
|
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));
|
|
|
|
if (!isNaN(frameRateVal))
|
|
PerfTestRunner.measureValueAsync(frameRateVal);
|
|
}
|
|
}
|
|
|
|
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() {
|
|
clearInterval(animateIntervalId);
|
|
|
|
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>
|