Add memory measurement to balls.html and dromaeorunner.js
[WebKit-https.git] / 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, "Time:");
256         PerfTestRunner.getAndPrintMemoryStatistics();
257
258         if (++run < MAX_RUNS) {
259             PerfTestRunner.log("<br>===================================================<br>");
260             init();
261         }
262         else if (window.testRunner)
263             testRunner.notifyDone();
264     }
265     </script>
266     <script src="../resources/runner.js"></script>
267 </head>
268
269 <body>
270     <div id="frameRate">
271     </div>
272 </body>
273
274 </html>