src/third_party/WebKit/PerformanceTests/Animation/balls-javascript.html

   1 <!--
   2 Copyright (c) 2012 Cameron Adams. All rights reserved.
   3 Copyright (c) 2012 Code Aurora Forum. All rights reserved.
   4 Copyright (C) 2013 Google Inc. All rights reserved.
   5
   6 Redistribution and use in source and binary forms, with or without
   7 modification, are permitted provided that the following conditions are
   8 met:
   9     * Redistributions of source code must retain the above copyright
  10 notice, this list of conditions and the following disclaimer.
  11     * Redistributions in binary form must reproduce the above
  12 copyright notice, this list of conditions and the following disclaimer
  13 in the documentation and/or other materials provided with the
  14 distribution.
  15     * Neither the name of Code Aurora Forum Inc., Google Inc. nor the
  16 names of its contributors may be used to endorse or promote products
  17 derived from this software without specific prior written permission.
  18
  19 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  20 "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  21 LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  22 A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  23 OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  24 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  25 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  26 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  27 THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  28 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  29 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  30
  31 This test is based on code written by Cameron Adams and imported from
  32   http://themaninblue.com/experiment/AnimationBenchmark/html
  33 -->
  34
  35 <!doctype html>
  36 <head>
  37 <title>Benchmark - Balls Animation using CSS and requestAnimationFrame</title>
  38 <style>
  39 html {
  40     height: 100%;
  41 }
  42
  43 body {
  44     width: 100%;
  45     height: 100%;
  46     overflow: hidden;
  47     margin: 0;
  48     padding: 0;
  49 }
  50
  51 span {
  52     position: absolute;
  53     width: 12px;
  54     height: 12px;
  55     border-radius: 6px;
  56 }
  57 </style>
  58 <script src="../resources/runner.js"></script>
  59 <script src="resources/framerate.js"></script>
  60 <script>
  61 var stageWidth = 600;
  62 var stageHeight = 600;
  63 var maxParticles = 2500;
  64 var minVelocity = 50;
  65 var maxVelocity = 500;
  66 var particleRadius = 6;
  67 var colors = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"];
  68
  69 var testRunning = true;
  70 var particles = [];
  71 var prevTime;
  72
  73 window.onload = function () {
  74     PerfTestRunner.prepareToMeasureValuesAsync({
  75         description: 'Measures animation performance of javascript to manipulate DOM elements (animating on left and top).',
  76         done: onCompletedRun,
  77         unit: 'fps'
  78     });
  79
  80     // Create the particles
  81     for (var i = 0; i < maxParticles; i++)
  82         particles.push(new Particle());
  83
  84     // Start the animation
  85     prevTime = PerfTestRunner.now();
  86     animate();
  87     startTrackingFrameRate();
  88 }
  89
  90 function animate()
  91 {
  92     var currTime = PerfTestRunner.now();
  93     var timeDelta = currTime - prevTime;
  94
  95     // Draw each particle
  96     for (var particle in particles)
  97         particles[particle].draw(timeDelta);
  98
  99     prevTime = currTime;
 100
 101     if (testRunning)
 102         requestAnimationFrame(animate);
 103 }
 104
 105 function Particle()
 106 {
 107     var angle = Math.PI * 2 * PerfTestRunner.random();
 108     var velocity = minVelocity + ((maxVelocity - minVelocity) * PerfTestRunner.random());
 109     var x = stageWidth / 2 - particleRadius;
 110     var y = stageHeight / 2 - particleRadius;
 111     var dx = Math.cos(angle) * velocity;
 112     var dy = Math.sin(angle) * velocity;
 113
 114     // Create visual element for the particle
 115     var domNode = document.createElement('span');
 116     document.body.appendChild(domNode);
 117
 118     // Set initial position to middle of screen
 119     domNode.style.left = x + "px";
 120     domNode.style.top = y + "px";
 121
 122     // Set colour of element
 123     domNode.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
 124
 125     function destroy()
 126     {
 127         document.body.removeChild(domNode);
 128     }
 129
 130     function draw(timeDelta)
 131     {
 132         var timeDeltaSeconds = timeDelta / 1000;
 133         var testX = x + (dx * timeDeltaSeconds);
 134         var testY = y + (dy * timeDeltaSeconds);
 135
 136         if (testX < 0 || testX > stageWidth) {
 137             dx = -dx;
 138             x += dx;
 139         } else {
 140             x = testX;
 141         }
 142         if (testY < 0 || testY > stageHeight) {
 143             dy = -dy;
 144             y += dy;
 145         } else {
 146             y = testY;
 147         }
 148
 149         domNode.style.left = x + "px";
 150         domNode.style.top = y + "px";
 151     }
 152
 153     this.draw = draw;
 154     this.destroy = destroy;
 155 }
 156
 157 function onCompletedRun() {
 158     stopTrackingFrameRate();
 159
 160     for (var i = 0; i < particles.length; i++)
 161         particles[i].destroy();
 162     particles = [];
 163 }
 164 </script>
 165 </head>
 166 </html>