Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 279 lines (229 sloc) 7.45 kb
b610182 @HakubJozak Initial.
authored
1 <!DOCTYPE html>
2 <html>
3 <head>
010563a @HakubJozak all merged to one file
authored
4 <script type="text/javascript" >
5 ORANGE = [[535.54303, 310.58942, 35.149006],
6 [254.351, 292.69537, 62.629139],
7 [481.86093, 483.13907, 71.576157]];
8
9 GREY = [[667.19208, 158.49007, 29.39735],
10 [478.02649, 218.56291, 33.231789],
11 [594.33777, 213.45033, 33.231789],
12 [720.87415, 230.06622, 28.119205],
13 [734.93378, 318.25827, 19.172186],
14 [633.96027, 295.25165, 28.119205],
15 // [724.70862, 409.00662, 37.066227]];
16 [365.54968, 39.622517, 29.39735],
17 // [435.84769, 28.119205, 14.059603]]
18 [521.48346, 54.960266, 29.39735],
19 [594.33777, 90.748344, 17.894039],
20 [466.52319, 102.25166, 21.728477],
21 [555.99341, 141.87418, 19.172186],
22 [383.4437, 123.98013, 19.172186],
23 [283.74835, 159.76822, 30.675497],
24 [364.91058, 276.07947, 28.758278],
25 [444.79471, 335.51324, 27.480133],
26 [198.75166, 77.327812, 26.841059],
27 [271.60596, 38.983444, 19.811258],
28 [129.73178, 132.92715, 30.675497],
29 [169.35431, 198.75165, 18.533113],
30 [127.1755, 258.82449, 10.864239],
31 [75.410599, 203.22516, 15.976821],
32 [49.208611, 276.07947, 19.172186],
33 [38.344372, 373.21854, 44.7351],
34 [131.649, 356.60266, 26.841059],
35 [214.0894, 400.0596, 25.562914],
36 [301.00333, 440.3212, 33.870861],
37 [364.27151, 389.19537, 22.36755],
38 [554.07617, 384.08279, 15.337749],
39 [617.34436, 389.83444, 28.119205],
40 [632.04303, 484.41721, 31.314569],
41 [697.86755, 576.44373, 37.705299],
42 [589.86426, 572.60925, 23.645695],
43 [502.95032, 635.2384, 31.314569],
44 [555.35431, 705.53644, 26.201986],
45 [623.73511, 663.3576, 15.976821],
46 [718.31787, 502.31125, 14.059603],
47 [352.12915, 543.85101, 16.615894],
48 [403.89404, 597.53314, 30.036425],
49 [401.97681, 677.41724, 28.119205],
50 [452.46356, 745.15894, 24.284769],
51 [336.79138, 739.40729, 31.953642],
52 [317.6192, 602.00665, 31.314569],
53 [226.87086, 590.5033, 30.036425],
54 [210.89404, 493.36423, 20.450331],
55 [143.7914, 447.99005, 14.059603],
56 [59.433773, 492.72516, 31.314569],
57 [104.16888, 582.83441, 28.119205],
58 [150.18211, 663.3576, 19.811258],
59 [246.04305, 699.78479, 34.509933],
60 [368.74503, 189.16556, 19.811258]];
61
62
63 function dot (a,b) {
64 return (a.x * b.x) + (a.y * b.y);
65 }
66
67 function size(a) {
68 return Math.sqrt((a.x * a.x) + (a.y * a.y));
69 }
70
71 function minus (a,b) {
72 return {
73 x: a.x - b.x,
74 y: a.y - b.y
75 };
76 }
77
78 function normalized (a) {
79 var s = size(a);
80 return { x: a.x / s, y: a.y / s };
81 }
82
83 function multiply (scalar,a) {
84 return { x: a.x * scalar, y: a.y * scalar };
85 }
86
87
88 function draw_circle(x,y,r,color) {
89 ctx.beginPath();
90 ctx.fillStyle = color;
91 ctx.arc(x,y,r,0.0, 2 * Math.PI);
92 ctx.shadowColor = 'black';
93 ctx.shadowOffsetX= 1;
94 ctx.shadowOffsetY= 1;
95 ctx.fill();
96 }
97
98 Ball = function (opts) {
99 this.x = opts.x;
100 this.y = opts.y;
101 this.v = { x: opts.vx, y: opts.vy },
102 this.r = opts.r;
103 this.m = 2 * Math.PI * opts.r * opts.r;
104 this.color = opts.color;
105 }
106
107 Ball.prototype.draw = function() {
108 draw_circle(this.x, this.y, this.r, this.color);
109 }
110
111 Ball.prototype.update = function() {
112 this.x += this.v.x;
113 this.y += this.v.y;
114 }
115
116
117 Ball.prototype.dist2 = function(other) {
118 var dx = this.x - other.x;
119 var dy= this.y - other.y;
120 return dx*dx + dy*dy;
121 }
122
123 Ball.prototype.dist = function(other) {
124 return Math.sqrt( this.dist2(other));
125 }
126
127
128
129 Ball.prototype.collide = function(other) {
130 var d = this.dist(other);
131 var overlap = this.r + other.r - d;
132
133 if (overlap > 0){
134 velocity = function(a,b) {
135 var c = (size(a.v) * (a.m - b.m)) - (2 * size(b.v) * b.m);
136 return Math.abs(c) / (a.m + b.m);
137 }
138
139 var unit = { x: (other.x - this.x)/d, y: (other.y - this.y)/d }
140
141 var v1 = velocity(this, other);
142 var v2 = velocity(other, this);
143
144 this.v.x = -unit.x * v1;
145 this.v.y = -unit.y * v1;
146 other.v.x = unit.x * v2;
147 other.v.y = unit.y * v2;
148
149 this.update();
150 other.update();
151 }
152 }
153
154 function add_balls(coords, color) {
155 for (var i = 0; i < coords.length; i++) {
156 var ball = coords[i];
157 // var color = Math.floor(Math.random()*16777215).toString(16);
158
159 var C = 2.7;
160 var x = 50 + ball[0] / C;
161 var y = 50 + ball[1] / C;
162 var r = ball[2] / C;
163
164 balls.push( new Ball({ x: x, y: y, vx: 0.0, vy: 0.0, r: r, color: color }));
165 }
166 }
167
168
169
170 window.onload = function () {
171 var canvas = window.document.getElementById('erm');
172 ctx = canvas.getContext('2d');
173 ctx.scale (1.0,1.0);
174
175 center = { x: canvas.width/2 - 1,
176 y: canvas.height/2 - 1 }
177
178 balls = new Array();
179 add_balls(ORANGE, 'orange');
180 add_balls(GREY, 'grey');
181 balls[1].v.x = 1.5;
182
183 // balls.push( new Ball({ x: center.x - 60.0, y:center.y - 60, vx: -3.127, vy: 0.2, r: 10.0, color: 'red' }));
184 // balls.push( new Ball({ x: center.x - 40.0, y:center.y, vx: 0.5, vy: 0.0, r: 30.0, color: 'red' }));
185 // balls.push( new Ball({ x: center.x + 40.0, y:center.y, vx: -0.5, vy: 0.0, r: 15.0, color: 'green' }));
186 // balls.push( new Ball({ x: center.x, y:center.y + 20, vx: -0.5, vy: 0.0, r: 30.0, color: 'orange' }));
187
188 wall = { r: 160 }
189
190 wall.draw = function() {
191 ctx.beginPath();
192 ctx.shadowOffsetX = 3;
193 ctx.shadowOffsetY = 3;
194 ctx.shadowColor = 'black';
195 ctx.strokeStyle = 'black';
196 ctx.fillStyle = 'white';
197 ctx.arc(center.x, center.y, wall.r,0.0, 2 * Math.PI);
198 ctx.stroke();
199 ctx.fill();
200 }
201
202
203 wall.collide = function(ball) {
204 var d = ball.dist(center);
205 var delta = ball.r + d - this.r;
206
207 if (delta > 0) {
208 var old_size = size(ball.v);
209
210 // http://en.wikipedia.org/wiki/Specular_reflection
211 var di = multiply (-1.0, normalized(ball.v)) ;
212 var dn = normalized ({ x: -(ball.x - center.x), y: -(ball.y - center.y) });
213 var ds = minus(multiply(2*dot(dn,di), dn), di);
214
215 ball.v = multiply(old_size, normalized(ds));
216 ball.update();
217 }
218 }
219
220
221 tick = function() {
222 if (true) {
223 tick_count++;
224 window.setTimeout(tick, 20);
225 }
226
227 for (var i = 0; i < balls.length; i++) {
228 balls[i].update();
229 }
230
231 for (var i = 0; i < balls.length; i++) {
232 for (var j = 0; j < balls.length; j++) {
233 if (i != j) {
234 balls[i].collide(balls[j]);
235 }
236 }
237
238 wall.collide(balls[i]);
239 }
240
241 // draw all
242 ctx.clearRect(0, 0, canvas.width, canvas.height);
243 wall.draw();
244 for (var i = 0; i < balls.length; i++) { balls[i].draw(); }
245 }
246
247 tick_count = 0;
248 tick();
249
250 }
251 </script>
b610182 @HakubJozak Initial.
authored
252 <style type="text/css">
253 html, canvas {
010563a @HakubJozak all merged to one file
authored
254 background-color: gray;
76480cc @HakubJozak scaled.
authored
255 position: relative;
256 top: 70px;
b610182 @HakubJozak Initial.
authored
257 image-rendering: -moz-crisp-edges; /* Firefox */
258 -ms-interpolation-mode: nearest-neighbor; /* IE */
259 }
76480cc @HakubJozak scaled.
authored
260
261 .digit {
262 font-size: 400px;
010563a @HakubJozak all merged to one file
authored
263 color: white;
264 text-shadow: 2px 2px 0 black; // rgba(255, 255, 255, 0.7);
265 //text-shadow: red 22px 2px 1px;
76480cc @HakubJozak scaled.
authored
266 }
b610182 @HakubJozak Initial.
authored
267 </style>
268 </head>
269 <body>
270 <center>
010563a @HakubJozak all merged to one file
authored
271 <!-- <span class="digit">4</span> -->
272
b610182 @HakubJozak Initial.
authored
273 <canvas id="erm" width="400" height="400">
274 Page not found.
275 </canvas>
276 </center>
277 </body>
278 </html>
Something went wrong with that request. Please try again.