Purge PassRefPtr in Modules/webdatabase
[WebKit-https.git] / PerformanceTests / Animation / raf-animation.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <meta name="viewport" content="initial-scale=1.0">
6     <style>
7         body {
8             margin: 0;
9         }
10         #stage {
11             position: relative;
12             width: 320px;
13             height: 320px;
14             border: 1px solid black;
15         }
16         
17         .particle {
18             position: absolute;
19             height: 20px;
20             width: 20px;
21             background-color: blue;
22             border-radius: 50%;
23         }
24     </style>
25     <script>
26
27         function randomInt(min, max)
28         {
29             return Math.round(this.random(min, max));
30         }
31
32         function random(min, max)
33         {
34             return (Math.random() * (max - min)) + min;
35         }
36
37         function randomColor()
38         {
39             var min = 32;
40             var max = 256 - 32;
41             return "#"
42                 + this.randomInt(min, max).toString(16)
43                 + this.randomInt(min, max).toString(16)
44                 + this.randomInt(min, max).toString(16);
45         }
46         
47         function Point(x, y)
48         {
49             this.x = x;
50             this.y = y;
51         }
52
53         Point.pointOnCircle = function(angle, radius)
54         {
55             return new Point(radius * Math.cos(angle), radius * Math.sin(angle));
56         }
57
58         Point.prototype =
59         {
60             add: function(other)
61             {
62                 if(isNaN(other.x))
63                     return new Point(this.x + other, this.y + other);
64                 return new Point(this.x + other.x, this.y + other.y);
65             },
66
67             subtract: function(other)
68             {
69                 if(isNaN(other.x))
70                     return new Point(this.x - other, this.y - other);
71                 return new Point(this.x - other.x, this.y - other.y);
72             },
73
74             move: function(angle, velocity, timeDelta)
75             {
76                 return this.add(Point.pointOnCircle(angle, velocity * (timeDelta / 1000)));
77             },
78
79             multiply: function(other)
80             {
81                 if(isNaN(other.x))
82                     return new Point(this.x * other, this.y * other);
83                 return new Point(this.x * other.x, this.y * other.y);
84             },
85
86             length: function() {
87                 return Math.sqrt( this.x * this.x + this.y * this.y );
88             },
89
90             normalize: function() {
91                 var l = Math.sqrt( this.x * this.x + this.y * this.y );
92                 this.x /= l;
93                 this.y /= l;
94                 return this;
95             }
96         }
97
98         function Particle(maxPosition)
99         {
100             this.element = document.createElement('div');
101             this.element.className = 'particle';
102             this.element.style.backgroundColor = randomColor();
103             this.maxPosition = maxPosition;
104             this.reset();
105             this.move();
106         }
107
108         Particle.prototype =
109         {
110             reset: function()
111             {
112                 this.size = new Point(20, 20);
113                 this.maxLocation = this.maxPosition.subtract(this.size);
114                 this.position = new Point(this.maxPosition.x / 2, this.maxPosition.y / 4);
115
116                 var angle = Math.random() * Math.PI * 2;
117                 this._velocity = new Point(Math.sin(angle), Math.cos(angle)).multiply(random(.8, 1.2));
118             },
119
120             animate: function(timeDelta)
121             {
122                 this.position = this.position.add(this._velocity.multiply(timeDelta));
123                 this._velocity.y += 0.03;
124
125                 // If particle is going to move off right side
126                 if (this.position.x > this.maxLocation.x) {
127                     if (this._velocity.x > 0)
128                         this._velocity.x *= -1;
129                     this.position.x = this.maxLocation.x;
130                 } else if (this.position.x < 0) {
131                     // If particle is going to move off left side
132                     if (this._velocity.x < 0)
133                         this._velocity.x *= -1;
134                     this.position.x = 0;
135                 }
136
137                 // If particle is going to move off bottom side
138                 if (this.position.y > this.maxLocation.y) {
139                     // Adjust direction but maintain magnitude
140                     var magnitude = this._velocity.length();
141                     this._velocity.x *= 1.5 + .005 * this.size.x;
142                     this._velocity = this._velocity.normalize().multiply(magnitude);
143                     if (Math.abs(this._velocity.y) < 0.7)
144                         this.reset();
145                     else {
146                         if (this._velocity.y > 0)
147                             this._velocity.y *= -0.999;
148                         this.position.y = this.maxLocation.y;
149                     }
150                 } else if (this.position.y < 0) {
151                     // If particle is going to move off top side
152                     var magnitude = this._velocity.length();
153                     this._velocity.x *= 1.5 + .005 * this.size.x;
154                     this._velocity = this._velocity.normalize().multiply(magnitude);
155                     if (this._velocity.y < 0)
156                         this._velocity.y *= -0.998;
157                     this.position.y = 0;
158                 }
159                 
160                 this.move();
161             },
162
163             move: function()
164             {
165                 this.element.style.transform = "translate(" + this.position.x + "px," + this.position.y + "px) ";
166             }
167         }
168
169         var numParticles = 20;
170         var particles = [];
171
172         function makeParticles()
173         {
174             var stage = document.getElementById('stage');
175             var maxPosition = new Point(320, 320);
176             for (var i = 0; i < numParticles; ++i) {
177                 particles.push(new Particle(maxPosition));
178                 stage.appendChild(particles[i].element);
179             }
180         }
181         
182         function moveParticles()
183         {
184             for (var particle of particles)
185                 particle.animate(1);
186         }
187         
188         function animate()
189         {
190             moveParticles();
191             window.requestAnimationFrame(animate);
192         }
193         
194         function setupAnimation()
195         {
196             makeParticles();
197             animate();
198         }
199         
200         window.addEventListener('load', setupAnimation, false);
201     </script>
202 </head>
203 <body>
204
205 <div id="stage">
206 </div>
207
208 </body>
209 </html>