Home | History | Annotate | Download | only in Animation 
      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 HTML5 Canvas</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 canvas;
     70 var context;
     71 var testRunning = true;
     72 var particles = [];
     73 var prevTime;
     74 
     75 window.onload = function () {
     76     PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'fps'});
     77 
     78     // Prepare the canvas.
     79     canvas = document.querySelector('canvas');
     80     canvas.width = stageWidth;
     81     canvas.height = stageHeight;
     82     context = canvas.getContext('2d');
     83 
     84     // Create the particles
     85     for (var i = 0; i < maxParticles; i++)
     86         particles.push(new Particle());
     87 
     88     // Start the animation
     89     prevTime = PerfTestRunner.now();
     90     animate();
     91     startTrackingFrameRate();
     92 }
     93 
     94 function animate()
     95 {
     96     var currTime = PerfTestRunner.now();
     97     var timeDelta = currTime - prevTime;
     98 
     99     context.clearRect(0, 0, stageWidth, stageHeight);
    100 
    101     // Draw each particle
    102     for (var particle in particles)
    103         particles[particle].draw(timeDelta);
    104 
    105     prevTime = currTime;
    106 
    107     if (testRunning)
    108         requestAnimationFrame(animate);
    109 }
    110 
    111 function Particle()
    112 {
    113     var angle = Math.PI * 2 * PerfTestRunner.random();
    114     var velocity = minVelocity + ((maxVelocity - minVelocity) * PerfTestRunner.random());
    115     var x = stageWidth / 2 - particleRadius;
    116     var y = stageHeight / 2 - particleRadius;
    117     var dx = Math.cos(angle) * velocity;
    118     var dy = Math.sin(angle) * velocity;
    119 
    120     // Set colour of element
    121     var color = colors[Math.floor(Math.random() * colors.length)];
    122 
    123     function draw(timeDelta)
    124     {
    125         var timeDeltaSeconds = timeDelta / 1000;
    126         var testX = x + (dx * timeDeltaSeconds);
    127         var testY = y + (dy * timeDeltaSeconds);
    128 
    129         if (testX < 0 || testX > stageWidth) {
    130             dx = -dx;
    131             x += dx;
    132         } else {
    133             x = testX;
    134         }
    135         if (testY < 0 || testY > stageHeight) {
    136             dy = -dy;
    137             y += dy;
    138         } else {
    139             y = testY;
    140         }
    141 
    142         context.fillStyle = color;
    143         context.beginPath();
    144         context.arc(x, y, particleRadius, 0, Math.PI * 2);
    145         context.fill();
    146     }
    147 
    148     this.draw = draw;
    149 }
    150 
    151 function onCompletedRun() {
    152     testRunning = false;
    153     stopTrackingFrameRate();
    154 
    155     document.body.removeChild(canvas);
    156     particles = [];
    157 }
    158 </script>
    159 </head>
    160 <canvas></canvas>
    161 </html>
    162