4 var Height = 400; |
4 var Height = 400; |
5 var delta = [0, 0]; |
5 var delta = [0, 0]; |
6 var stage = [195, 250, 1150, 835] // bottom |
6 var stage = [195, 250, 1150, 835] // bottom |
7 var b2bod = []; |
7 var b2bod = []; |
8 |
8 |
9 var BALL_SIZE = 40; |
|
10 |
|
11 var worldAABB, world, iterations = 1, timeStep = 1 / 20; |
9 var worldAABB, world, iterations = 1, timeStep = 1 / 20; |
12 |
10 |
13 var walls = []; |
11 var walls = []; |
14 var wall_thickness = 10; |
12 var wall_thickness = 20; |
15 var wallsSetted = false; |
13 var wallsSetted = false; |
16 |
14 |
17 var bodies, elements, text; |
15 var bodies, elements, text; |
18 |
16 |
19 var createMode = false; |
17 var createMode = false; |
78 } |
72 } |
79 bodies = []; |
73 bodies = []; |
80 elements = []; |
74 elements = []; |
81 } |
75 } |
82 |
76 |
83 function onDocumentMouseDown() { |
|
84 isMouseDragging = false; |
|
85 isMouseDown = true; |
|
86 return false; |
|
87 } |
|
88 |
|
89 function onDocumentMouseUp() { |
|
90 isMouseDown = false; |
|
91 return false; |
|
92 } |
|
93 |
|
94 function onDocumentMouseMove( event ) { |
|
95 |
|
96 if(isMouseDown) |
|
97 isMouseDragging = true; |
|
98 mouse.x = event.clientX; |
|
99 mouse.y = event.clientY; |
|
100 |
|
101 } |
|
102 |
|
103 function onDocumentTouchStart( event ) { |
|
104 |
|
105 |
|
106 |
|
107 if( event.touches.length == 1 ) { |
|
108 |
|
109 event.preventDefault(); |
|
110 |
|
111 // Faking double click for touch devices |
|
112 |
|
113 var now = new Date().getTime(); |
|
114 |
|
115 if ( now - timeOfLastTouch < 250 ) { |
|
116 |
|
117 reset(); |
|
118 return; |
|
119 } |
|
120 |
|
121 timeOfLastTouch = now; |
|
122 |
|
123 mouse.x = event.touches[ 0 ].pageX; |
|
124 mouse.y = event.touches[ 0 ].pageY; |
|
125 isMouseDown = true; |
|
126 } |
|
127 } |
|
128 |
|
129 function onDocumentTouchMove( event ) { |
|
130 |
|
131 if (event.touches.length == 1) { |
|
132 |
|
133 event.preventDefault(); |
|
134 mouse.x = event.touches[ 0 ].pageX; |
|
135 mouse.y = event.touches[ 0 ].pageY; |
|
136 } |
|
137 } |
|
138 |
|
139 function onDocumentTouchEnd( event ) { |
|
140 |
|
141 if (event.touches.length == 0) { |
|
142 event.preventDefault(); |
|
143 isMouseDown = false; |
|
144 } |
|
145 } |
|
146 |
|
147 function loop() { |
77 function loop() { |
148 |
78 |
149 delta[0] += (0 - delta[0]) * .5; |
79 delta[0] += (0 - delta[0]) * .5; |
150 delta[1] += (0 - delta[1]) * .5; |
80 delta[1] += (0 - delta[1]) * .5; |
151 world.m_gravity.x = gravity.x * 350 + delta[0]; |
81 world.m_gravity.x = gravity.x * 350 + delta[0]; |
152 world.m_gravity.y = gravity.y * 350 + delta[1]; |
82 world.m_gravity.y = gravity.y * 350 + delta[1]; |
153 |
83 |
154 mouseDrag(); |
|
155 world.Step(timeStep, iterations); |
84 world.Step(timeStep, iterations); |
156 |
85 |
157 for (i = 0; i < bodies.length; i++) { |
86 for (i = 0; i < bodies.length; i++) { |
158 var body = bodies[i]; |
87 var body = bodies[i]; |
159 var element = elements[i]; |
88 var element = elements[i]; |
160 element.style.left = (body.m_position0.x - (element.width >> 1)) + 'px'; |
89 element.style.left = (body.m_position0.x - (element.width >> 1)) + 'px'; |
161 element.style.top = (body.m_position0.y - (element.height >> 1)) + 'px'; |
90 element.style.top = (body.m_position0.y - (element.height >> 1)) + 'px'; |
162 |
|
163 if (element.tagName == 'DIV') { |
|
164 var rotationStyle = 'rotate(' + (body.m_rotation0 * 57.2957795) + 'deg)'; |
|
165 text.style.WebkitTransform = rotationStyle; |
|
166 text.style.MozTransform = rotationStyle; |
|
167 text.style.OTransform = rotationStyle; |
|
168 text.style.msTransform = rotationStyle; |
|
169 } |
|
170 } |
91 } |
171 } |
92 } |
172 |
93 |
173 function createBox(world, x, y, width, height, fixed) { |
94 function createBox(world, x, y, width, height, fixed) { |
174 |
95 |
175 var c=document.createElement('canvas'); |
96 var c=document.createElement('canvas'); |
176 var ctx=c.getContext("2d"); |
97 var ctx=c.getContext("2d"); |
177 ctx.fillStyle="#FF0000"; |
98 ctx.fillStyle="#FF0000"; |
178 ctx.fillRect(0,0,1500,750); |
99 ctx.fillRect(0,0,1500,750); |
179 |
100 |
180 if (typeof(fixed) == 'undefined') { |
101 if (typeof(fixed) == 'undefined') { |
181 fixed = true; |
102 fixed = true; |
182 } |
103 } |
183 |
104 |
190 boxSd.extents.Set(width, height); |
111 boxSd.extents.Set(width, height); |
191 var boxBd = new b2BodyDef(); |
112 var boxBd = new b2BodyDef(); |
192 boxBd.AddShape(boxSd); |
113 boxBd.AddShape(boxSd); |
193 boxBd.position.Set(x,y); |
114 boxBd.position.Set(x,y); |
194 |
115 |
195 |
|
196 return world.CreateBody(boxBd); |
116 return world.CreateBody(boxBd); |
197 } |
117 } |
198 |
118 |
199 function mouseDrag() |
119 |
200 { |
|
201 // mouse press |
|
202 if (createMode) { |
|
203 |
|
204 } else if (isMouseDown && !mouseJoint) { |
|
205 |
|
206 var body = getBodyAtMouse(); |
|
207 |
|
208 if (body) { |
|
209 var md = new b2MouseJointDef(); |
|
210 md.body1 = world.m_groundBody; |
|
211 md.body2 = body; |
|
212 md.target.Set(mouse.x, mouse.y); |
|
213 md.maxForce = 30000 * body.m_mass; |
|
214 md.timeStep = timeStep; |
|
215 mouseJoint = world.CreateJoint(md); |
|
216 body.WakeUp(); |
|
217 } else { |
|
218 createMode = true; |
|
219 } |
|
220 } |
|
221 |
|
222 if (!isMouseDown) { // mouse release |
|
223 |
|
224 createMode = false; |
|
225 destroyMode = false; |
|
226 |
|
227 if (mouseJoint) { |
|
228 world.DestroyJoint(mouseJoint); |
|
229 mouseJoint = null; |
|
230 } |
|
231 } |
|
232 |
|
233 if (mouseJoint) { // mouse move |
|
234 var p2 = new b2Vec2(mouse.x, mouse.y); |
|
235 mouseJoint.SetTarget(p2); |
|
236 } |
|
237 } |
|
238 |
120 |
239 function getBodyAtMouse() { |
121 function getBodyAtMouse() { |
240 |
122 |
241 // Make a small box. |
123 // Make a small box. |
242 var mousePVec = new b2Vec2(); |
124 var mousePVec = new b2Vec2(); |
273 walls[0] = null; |
155 walls[0] = null; |
274 walls[1] = null; |
156 walls[1] = null; |
275 walls[2] = null; |
157 walls[2] = null; |
276 walls[3] = null; |
158 walls[3] = null; |
277 } else { |
159 } else { |
278 |
|
279 wall_thickness = 20; |
|
280 |
160 |
281 walls[0] = createBox(world, 1910, 900, wall_thickness, 900); // rightmost wall |
161 walls[0] = createBox(world, 1910, 900, wall_thickness, 900); // rightmost wall |
282 walls[1] = createBox(world, 1540, 600, wall_thickness, 300); // wall 4 / 3 |
162 walls[1] = createBox(world, 1540, 600, wall_thickness, 300); // wall 4 / 3 |
283 |
163 |
284 walls[2] = createBox(world, 1160, 600, wall_thickness, 300); // wall 3 / 2 |
164 walls[2] = createBox(world, 1160, 600, wall_thickness, 300); // wall 3 / 2 |
295 // Check if div podiums are already loaded |
175 // Check if div podiums are already loaded |
296 if($('#podium div').size() > 0) { |
176 if($('#podium div').size() > 0) { |
297 |
177 |
298 $('#podium div').each( function(idx, panel) { |
178 $('#podium div').each( function(idx, panel) { |
299 |
179 |
300 var idxWall = 5+idx; |
180 var idxWall = 5+idx; |
301 var yWall = 920-$(this).height(); |
181 var yWall = 920-$(this).height(); |
302 world.DestroyBody(walls[idxWall]); |
182 world.DestroyBody(walls[idxWall]); |
303 walls[idxWall] = createBox(world, 580+370*idx, yWall, 170, 10); |
183 walls[idxWall] = createBox(world, 580+370*idx, yWall, 170, 10); |
304 |
184 |
305 }); |
185 }); |
306 } |
186 } |
307 }, 1000); |
187 }, 1000); |
308 |
|
309 } |
188 } |
310 } |
189 } |
311 |
190 |
312 function createBallTweetForce(t) { |
191 function createBallTweetForce(t) { |
313 |
192 |
364 graphics.fill(-5,0,150,150); |
243 graphics.fill(-5,0,150,150); |
365 } |
244 } |
366 |
245 |
367 element.appendChild(circle); |
246 element.appendChild(circle); |
368 |
247 |
369 text = document.createElement( 'div' ); |
|
370 text.onSelectStart = null; |
|
371 text.style.color = "#95AB63"; |
|
372 text.style.position = 'absolute'; |
|
373 text.style.left = '0px'; |
|
374 text.style.top = '0px'; |
|
375 text.style.fontFamily = 'Georgia'; |
|
376 text.style.textAlign = 'center'; |
|
377 text.id = t.id_str; |
|
378 element.appendChild(text); |
|
379 |
|
380 var circle = new b2CircleDef(); |
248 var circle = new b2CircleDef(); |
381 circle.radius = BALL_SIZE/4+2 ; |
249 circle.radius = BALL_SIZE/4+2 ; |
382 circle.density = 1; |
250 circle.density = 1; |
383 circle.friction = 0.3; |
251 circle.friction = 0.3; |
384 circle.restitution = 0.3; |
252 circle.restitution = 0.3; |