PerformanceTests/Animation/balls.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3
   4 <!--
   5     Copyright (c) 2012 Cameron Adams. All rights reserved.
   6     Copyright (c) 2012 Code Aurora Forum. All rights reserved.
   7
   8     Redistribution and use in source and binary forms, with or without
   9     modification, are permitted provided that the following conditions are
  10     met:
  11         * Redistributions of source code must retain the above copyright
  12           notice, this list of conditions and the following disclaimer.
  13         * Redistributions in binary form must reproduce the above
  14           copyright notice, this list of conditions and the following
  15           disclaimer in the documentation and/or other materials provided
  16           with the distribution.
  17         * Neither the name of Code Aurora Forum, Inc. nor the names of its
  18           contributors may be used to endorse or promote products derived
  19           from this software without specific prior written permission.
  20
  21     THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED
  22     WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
  23     MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT
  24     ARE DISCLAIMED.  IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS
  25     BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  26     CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  27     SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
  28     BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
  29     WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
  30     OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
  31     IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  32
  33     This test is based on code written by Cameron Adams and imported from
  34       http://themaninblue.com/experiment/AnimationBenchmark/html
  35 -->
  36
  37 <head>
  38
  39     <title>Benchmark - HTML &amp; JavaScript</title>
  40
  41     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  42     <meta name="author" content="The Man in Blue" />
  43     <meta name="robots" content="all" />
  44     <meta name="MSSmartTagsPreventParsing" content="true" />
  45     <meta name="description" content="" />
  46     <meta name="keywords" content="" />
  47
  48     <style type="text/css">
  49
  50     html {
  51         height: 100%;
  52     }
  53
  54     body {
  55         width: 100%;
  56         height: 100%;
  57         overflow: hidden;
  58         margin: 0;
  59         padding: 0;
  60     }
  61
  62     span {
  63         position: absolute;
  64         width: 12px;
  65         height: 12px;
  66         overflow: hidden;
  67         -webkit-border-radius: 6px;
  68         -moz-border-radius: 6px;
  69         border-radius: 6px;
  70         background-color: #000000;
  71     }
  72
  73     .shadows span {
  74         -webkit-box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
  75         -moz-box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
  76         box-shadow: 4px 4px 3px rgba(0,0,0,0.33);
  77     }
  78
  79     #frameRate {
  80         position: absolute;
  81         right: 10px;
  82         bottom: 10px;
  83         z-index: 100;
  84         font-size: 25px;
  85         font-family: Arial, Helvetica, sans-serif;
  86     }
  87
  88     </style>
  89
  90     <script type="text/javascript">
  91
  92     var FRAMES_PER_TIMER_READING = 10;
  93     var MAX_PARTICLES = 2500;
  94     var MAX_VELOCITY = 50;
  95     var PARTICLE_RADIUS = 6;
  96     var STAGE_WIDTH = 600;
  97     var STAGE_HEIGHT = 600;
  98     var COLORS = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"];
  99
 100     var frameTimes = [];
 101     var iteration = 0;
 102     var run = 0;
 103     var animateIntervalId = 0;
 104     var statistics = [];
 105     var frameRates = [];
 106     var particles = [];
 107
 108     window.onload = function () {
 109         PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'fps'});
 110
 111         // Create the particles
 112         for (var i = 0; i < MAX_PARTICLES; i++)
 113             particles.push(new Particle());
 114
 115         // Start the animation
 116         animateIntervalId = setInterval(animate, 1);
 117     }
 118
 119     function animate()
 120     {
 121         var currTime = PerfTestRunner.now();
 122         var timeDelta = currTime - frameTimes[frameTimes.length - 1];
 123
 124         if (isNaN(timeDelta))
 125             timeDelta = 0;
 126
 127         // Draw each particle
 128         for (var particle in particles)
 129             particles[particle].draw(timeDelta);
 130
 131         if ((iteration++ % FRAMES_PER_TIMER_READING) == 0) {
 132             // Limit the frame time array to the last 30 frames
 133             if (frameTimes.length > 30)
 134                 frameTimes.splice(0, 1);
 135
 136             frameTimes.push(currTime);
 137
 138             // 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
 139             var frameRate = document.getElementById("frameRate");
 140             var frameRateVal = FRAMES_PER_TIMER_READING * 1000 / ((currTime - frameTimes[0]) / (frameTimes.length - 1));
 141
 142             if (!isNaN(frameRateVal))
 143                 PerfTestRunner.measureValueAsync(frameRateVal);
 144         }
 145     }
 146
 147     function Particle()
 148     {
 149         var angle = Math.PI * 2 * PerfTestRunner.random();
 150         var velocity = MAX_VELOCITY / 8 * 7 * PerfTestRunner.random() + MAX_VELOCITY / 8;
 151         var x = STAGE_WIDTH / 2 - PARTICLE_RADIUS;
 152         var y = STAGE_HEIGHT / 2 - PARTICLE_RADIUS;
 153
 154         // Create visual element for the particle
 155         var domNode = document.createElement('span');
 156         document.body.appendChild(domNode);
 157
 158         // Set initial position to middle of screen
 159         domNode.style.left = x + "px";
 160         domNode.style.top = y + "px";
 161
 162         // Set colour of element
 163         domNode.style.backgroundColor = COLORS[Math.floor(Math.random() * COLORS.length)];
 164
 165         function destroy()
 166         {
 167             document.body.removeChild(domNode);
 168             return;
 169         }
 170
 171         function draw(timeDelta)
 172         {
 173             // Calculate next position of particle
 174             var nextX = x + Math.cos(angle) * velocity * (timeDelta / 1000);
 175             var nextY = y + Math.sin(angle) * velocity * (timeDelta / 1000);
 176
 177             // If particle is going to move off right side of screen
 178             if (nextX + PARTICLE_RADIUS * 2 > STAGE_WIDTH)
 179                 // If angle is between 3 o'clock and 6 o'clock
 180                 if ((angle >= 0 && angle < Math.PI / 2))
 181                     angle = Math.PI - angle;
 182                 // If angle is between 12 o'clock and 3 o'clock
 183                 else if (angle > Math.PI / 2 * 3)
 184                     angle = angle - (angle - Math.PI / 2 * 3) * 2
 185
 186             // If particle is going to move off left side of screen
 187             if (nextX < 0)
 188                 // If angle is between 6 o'clock and 9 o'clock
 189                 if ((angle > Math.PI / 2 && angle < Math.PI))
 190                     angle = Math.PI - angle;
 191                 // If angle is between 9 o'clock and 12 o'clock
 192                 else if (angle > Math.PI && angle < Math.PI / 2 * 3)
 193                     angle = angle + (Math.PI / 2 * 3 - angle) * 2
 194
 195             // If particle is going to move off bottom side of screen
 196             if (nextY + PARTICLE_RADIUS * 2 > STAGE_HEIGHT)
 197                 // If angle is between 3 o'clock and 9 o'clock
 198                 if ((angle > 0 && angle < Math.PI))
 199                     angle = Math.PI * 2 - angle;
 200
 201             // If particle is going to move off top side of screen
 202             if (nextY < 0)
 203                 // If angle is between 9 o'clock and 3 o'clock
 204                 if ((angle > Math.PI && angle < Math.PI * 2))
 205                     angle = angle - (angle - Math.PI) * 2;
 206
 207             domNode.style.left = nextX + "px";
 208             domNode.style.top = nextY + "px";
 209
 210             x = nextX;
 211             y = nextY;
 212         }
 213
 214         return { draw: draw, destroy: destroy }
 215     }
 216
 217     function onCompletedRun() {
 218         clearInterval(animateIntervalId);
 219
 220         for (var particle in particles) {
 221             var p = particles[particle];
 222             particles[particle] = 0;
 223             p.destroy();
 224         }
 225         particles = [];
 226
 227         frameRate.innerHTML = "";
 228     }
 229     </script>
 230     <script src="../resources/runner.js"></script>
 231 </head>
 232
 233 <body>
 234     <div id="frameRate">
 235     </div>
 236 </body>
 237
 238 </html>