1<!-- 2Copyright (c) 2012 Cameron Adams. All rights reserved. 3Copyright (c) 2012 Code Aurora Forum. All rights reserved. 4Copyright (C) 2013 Google Inc. All rights reserved. 5 6Redistribution and use in source and binary forms, with or without 7modification, are permitted provided that the following conditions are 8met: 9 * Redistributions of source code must retain the above copyright 10notice, this list of conditions and the following disclaimer. 11 * Redistributions in binary form must reproduce the above 12copyright notice, this list of conditions and the following disclaimer 13in the documentation and/or other materials provided with the 14distribution. 15 * Neither the name of Code Aurora Forum Inc., Google Inc. nor the 16names of its contributors may be used to endorse or promote products 17derived from this software without specific prior written permission. 18 19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 20"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 21LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 22A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 23OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 24SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 25LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 26DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 27THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 28(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 31This 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> 39html { 40 height: 100%; 41} 42 43body { 44 width: 100%; 45 height: 100%; 46 overflow: hidden; 47 margin: 0; 48 padding: 0; 49} 50 51span { 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> 61var stageWidth = 600; 62var stageHeight = 600; 63var maxParticles = 2500; 64var minVelocity = 50; 65var maxVelocity = 500; 66var particleRadius = 6; 67var colors = ["#cc0000", "#ffcc00", "#aaff00", "#0099cc", "#194c99", "#661999"]; 68 69var canvas; 70var context; 71var testRunning = true; 72var particles = []; 73var prevTime; 74 75window.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 94function 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 111function 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 151function 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