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_ITERATIONS = 110;
  94     var MAX_RUNS = 1;
  95     var MAX_PARTICLES = 2500;
  96     var MAX_VELOCITY = 50;
  97     var PARTICLE_RADIUS = 6;
  98     var STAGE_WIDTH = 600;
  99     var STAGE_HEIGHT = 600;
 100     var COLORS = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"];
 101
 102     var frameTimes = [];
 103     var iteration = 0;
 104     var run = 0;
 105     var animateIntervalId = 0;
 106     var statistics = [];
 107     var frameRates = [];
 108     var particles = [];
 109
 110     window.onload = init;
 111
 112     function init()
 113     {
 114         PerfTestRunner.resetRandomSeed();
 115
 116         var location = window.location.href;
 117         frameRates = [];
 118         frameTimes = [];
 119         iteration = 0;
 120         animateIntervalId = 0;
 121         particles = [];
 122
 123         // Create the particles
 124         for (var i = 0; i < MAX_PARTICLES; i++)
 125             particles.push(new Particle());
 126
 127         // Start the animation
 128         animateIntervalId = setInterval(animate, 1);
 129     }
 130
 131     function animate()
 132     {
 133         var currTime = new Date().getTime();
 134         var timeDelta = currTime - frameTimes[frameTimes.length - 1];
 135
 136         if (isNaN(timeDelta))
 137             timeDelta = 0;
 138
 139         // Draw each particle
 140         for (var particle in particles)
 141             particles[particle].draw(timeDelta);
 142
 143         if ((iteration++ % FRAMES_PER_TIMER_READING) == 0) {
 144             // Limit the frame time array to the last 30 frames
 145             if (frameTimes.length > 30)
 146                 frameTimes.splice(0, 1);
 147
 148             frameTimes.push(currTime);
 149
 150             // 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
 151             var frameRate = document.getElementById("frameRate");
 152             var frameRateVal = FRAMES_PER_TIMER_READING * 1000 / ((currTime - frameTimes[0]) / (frameTimes.length - 1));
 153
 154             if (!isNaN(frameRateVal)) {
 155                 frameRates.push(frameRateVal);
 156                 var frameRateText = frameRateVal + "";
 157                 frameRateText = frameRateText.replace(/(^[^.]+\...).*/, "$1");
 158                 frameRateText += " fps";
 159                 frameRate.innerHTML = frameRateText;
 160             }
 161         }
 162
 163         if (iteration > MAX_ITERATIONS) {
 164             clearInterval(animateIntervalId);
 165             onCompletedRun();
 166         }
 167     }
 168
 169     function Particle()
 170     {
 171         var angle = Math.PI * 2 * PerfTestRunner.random();
 172         var velocity = MAX_VELOCITY / 8 * 7 * PerfTestRunner.random() + MAX_VELOCITY / 8;
 173         var x = STAGE_WIDTH / 2 - PARTICLE_RADIUS;
 174         var y = STAGE_HEIGHT / 2 - PARTICLE_RADIUS;
 175
 176         // Create visual element for the particle
 177         var domNode = document.createElement('span');
 178         document.body.appendChild(domNode);
 179
 180         // Set initial position to middle of screen
 181         domNode.style.left = x + "px";
 182         domNode.style.top = y + "px";
 183
 184         // Set colour of element
 185         domNode.style.backgroundColor = COLORS[Math.floor(Math.random() * COLORS.length)];
 186
 187         function destroy()
 188         {
 189             document.body.removeChild(domNode);
 190             return;
 191         }
 192
 193         function draw(timeDelta)
 194         {
 195             // Calculate next position of particle
 196             var nextX = x + Math.cos(angle) * velocity * (timeDelta / 1000);
 197             var nextY = y + Math.sin(angle) * velocity * (timeDelta / 1000);
 198
 199             // If particle is going to move off right side of screen
 200             if (nextX + PARTICLE_RADIUS * 2 > STAGE_WIDTH)
 201                 // If angle is between 3 o'clock and 6 o'clock
 202                 if ((angle >= 0 && angle < Math.PI / 2))
 203                     angle = Math.PI - angle;
 204                 // If angle is between 12 o'clock and 3 o'clock
 205                 else if (angle > Math.PI / 2 * 3)
 206                     angle = angle - (angle - Math.PI / 2 * 3) * 2
 207
 208             // If particle is going to move off left side of screen
 209             if (nextX < 0)
 210                 // If angle is between 6 o'clock and 9 o'clock
 211                 if ((angle > Math.PI / 2 && angle < Math.PI))
 212                     angle = Math.PI - angle;
 213                 // If angle is between 9 o'clock and 12 o'clock
 214                 else if (angle > Math.PI && angle < Math.PI / 2 * 3)
 215                     angle = angle + (Math.PI / 2 * 3 - angle) * 2
 216
 217             // If particle is going to move off bottom side of screen
 218             if (nextY + PARTICLE_RADIUS * 2 > STAGE_HEIGHT)
 219                 // If angle is between 3 o'clock and 9 o'clock
 220                 if ((angle > 0 && angle < Math.PI))
 221                     angle = Math.PI * 2 - angle;
 222
 223             // If particle is going to move off top side of screen
 224             if (nextY < 0)
 225                 // If angle is between 9 o'clock and 3 o'clock
 226                 if ((angle > Math.PI && angle < Math.PI * 2))
 227                     angle = angle - (angle - Math.PI) * 2;
 228
 229             domNode.style.left = nextX + "px";
 230             domNode.style.top = nextY + "px";
 231
 232             x = nextX;
 233             y = nextY;
 234         }
 235
 236         return { draw: draw, destroy: destroy }
 237     }
 238
 239     function onCompletedRun() {
 240         for (var particle in particles) {
 241             var p = particles[particle];
 242             particles[particle] = 0;
 243             p.destroy();
 244         }
 245         particles = [];
 246
 247         frameRate.innerHTML = "";
 248
 249         for (var rate in frameRates)
 250             PerfTestRunner.log(frameRates[rate].toFixed(2) + " fps");
 251
 252         var stats = PerfTestRunner.computeStatistics(frameRates, "fps");
 253         statistics.push(stats);
 254
 255         PerfTestRunner.printStatistics(stats);
 256
 257         if (++run < MAX_RUNS) {
 258             PerfTestRunner.log("<br>===================================================<br>");
 259             init();
 260         }
 261         else if (window.layoutTestController)
 262             layoutTestController.notifyDone();
 263     }
 264     </script>
 265     <script src="../resources/runner.js"></script>
 266 </head>
 267
 268 <body>
 269     <div id="frameRate">
 270     </div>
 271 </body>
 272
 273 </html>