49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/src/js/balls.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | 'use strict';
3 |
4 | /*********************************************************
5 | Notes about the physics in the simulations:
6 | The balls are equally hard (and have equal weight), so they don't lose energy when bouncing between themself.
7 | In the horizontal simulation, a ball loses energy when bouncing from a wall (the wall is harder and stationary) and air resistence.
8 | The ball also loses energy from the air resistence, hitting the ground, rolling on the ground and gravity in the vertical simulation
9 | (but not from spinning and some other 3d things possible in billiard and basketball).
10 |
11 | Known issue:
12 | In "vertical" space/direction when the bottom is full with balls (when there is no space for a new ball)
13 | adding a new ball will make all balls go crazy (jumping randomly). This is because the balls will always
14 | collide and won't lose energy from colliding (I'm not sure how to solve this).
15 | *********************************************************/
16 |
17 | /**************
18 | * Ball class *
19 | ***************/
20 | function Ball(position, velocity, radius, localDimensions) {
21 | // base constructor
22 | this.position = position;
23 | this.velocity = velocity;
24 | this.radius = radius;
25 | this._borderCoords = {
26 | top: radius,
27 | bottom: localDimensions.height - radius,
28 | left: radius,
29 | right: localDimensions.width - radius
30 | };
31 | }
32 |
33 | function moveBallsOutOfCollision(ball1, ball2) {
34 | /*********************************************************
35 | Find the positions of the balls when the collision occurred.
36 | (because right they have collided - they're overlapping)
37 |
38 | old ball1.position = ball1.position - T * ball1.velocity
39 | old ball2.position = ball2.position - T * ball2.velocity
40 |
41 | In this moment T is unknown. Solve this equation to find T:
42 | distance(old ball1.position, old ball2.position) = (ball1.radius + ball2.radius)
43 |
44 | This can be solved using the Quadratic formula, because after simplifying
45 | the left side of the equation we'll get something like: a*(T^2) + b*T + c = 0
46 | *********************************************************/
47 | var v = ball1.velocity.sub(ball2.velocity);
48 | var p = ball1.position.sub(ball2.position);
49 | var r = ball1.radius + ball2.radius;
50 |
51 | // quadratic formula coeficients
52 | var a = v.X*v.X + v.Y*v.Y;
53 | var b = (-2)*(p.X*v.X + p.Y*v.Y);
54 | var c = p.X*p.X + p.Y*p.Y - r*r;
55 |
56 | // quadratic formula discriminant
57 | var d = b*b - 4*a*c;
58 |
59 | // t1 and t2 from the quadratic formula (need only the positive solution)
60 | var t = (-b - Math.sqrt(d)) / (2*a);
61 | if (t < 0)
62 | t = (-b + Math.sqrt(d)) / (2*a);
63 |
64 | // calculate the old positions (positions when the collision occurred)
65 | var oldPosition1 = ball1.position.sub(ball1.velocity.mult(t));
66 | var oldPosition2 = ball2.position.sub(ball2.velocity.mult(t));
67 |
68 | var maxChange = ball1.radius * 3;
69 |
70 | if ((a == 0) || (d < 0) ||
71 | (oldPosition1.distance(ball1.position) > maxChange) ||
72 | (oldPosition2.distance(ball2.position) > maxChange)) {
73 | // 1) if 'a' is zero then both balls have equal velocities, no solution
74 | // 2) the discriminant shouldn't be negative in this simulation, but just in case check it
75 | // 3) the chages are too big, something is wrong
76 |
77 | if (ball1.position.distance(ball2.position) == 0) {
78 | // move only one ball up
79 | ball1.position = ball1.position.add(new Vector2D(0, -r));
80 | } else {
81 | // move both balls using the vector between these positions
82 | var diff = (r - ball1.position.distance(ball2.position)) / 2;
83 | ball1.position = ball1.position.add(ball1.position.sub(ball2.position).tryNormalize().mult(diff));
84 | ball2.position = ball2.position.add(ball2.position.sub(ball1.position).tryNormalize().mult(diff));
85 | }
86 | } else {
87 | // use the old positions
88 | ball1.position = oldPosition1;
89 | ball2.position = oldPosition2;
90 | }
91 | }
92 |
93 | Ball.prototype.collision = function(ball) {
94 | if (this.position.distance(ball.position) <= ball.radius + this.radius) {
95 | moveBallsOutOfCollision(this, ball);
96 |
97 | var positionSub = this.position.sub(ball.position);
98 | var distance = positionSub.length();
99 |
100 | /*********************************************************
101 | The formula could be found here: https://en.wikipedia.org/wiki/Elastic_collision
102 | velocityA -= (dot(velocityAB_sub, positionAB_sub) / distance^2) * positionAB_sub
103 | velocityB -= (dot(velocityBA_sub, positionBA_sub) / distance^2) * positionBA_sub
104 | but this thing (dot(velocityAB_sub, positionAB_sub) / distance^2) is same for 2 velocities
105 | because dot and length methods are commutative properties, and velocityAB_sub = -velocityBA_sub, same for positionSub
106 | *********************************************************/
107 | var coeff = this.velocity.sub(ball.velocity).dot(positionSub) / (distance * distance);
108 | this.velocity = this.velocity.sub(positionSub.mult(coeff));
109 | ball.velocity = ball.velocity.sub(positionSub.opposite().mult(coeff));
110 | }
111 | }
112 |
113 | /************************
114 | * HorizontalBall class *
115 | *************************/
116 | var horizontalMovementProperties = {
117 | airResistance: 0.99, // slows down the speed in each frame
118 | hitResistance: 0.8, // slows down the speed when a wall is hitted
119 | velocityFactor: 0.2 // velocity factor (converts vector from the mouse dragging to this environment)
120 | };
121 |
122 | function HorizontalBall(position, velocity, radius, localDimensions) {
123 | // HorizontalBall constructor
124 | // call the base constructor
125 | Ball.call(this, position, velocity.mult(horizontalMovementProperties.velocityFactor), radius, localDimensions);
126 | }
127 |
128 | // HorizontalBall inherits from the Ball class
129 | HorizontalBall.prototype = Object.create(Ball.prototype);
130 | HorizontalBall.prototype.constructor = HorizontalBall; // keep the constructor
131 |
132 | HorizontalBall.prototype.move = function() {
133 | if (this.velocity.isNearZero() && !this.velocity.isZero())
134 | this.velocity = Vector2D.zero(); // the ball is staying in place
135 |
136 | // move the ball using the velocity
137 | this.position = this.position.add(this.velocity);
138 |
139 | if (this.position.X <= this._borderCoords.left || this.position.X >= this._borderCoords.right) {
140 | // move ball inside the borders
141 | this.position.X = (this.position.X <= this._borderCoords.left) ?
142 | this._borderCoords.left : this._borderCoords.right;
143 |
144 | // apply hit resistance
145 | this.velocity = this.velocity.mult(horizontalMovementProperties.hitResistance);
146 |
147 | // reflection angle is an inverse angle to the perpendicular axis to the wall (in this case the wall is Y axis)
148 | this.velocity.X = -this.velocity.X;
149 | }
150 | if (this.position.Y <= this._borderCoords.top || this.position.Y >= this._borderCoords.bottom) {
151 | // move ball inside the borders
152 | this.position.Y = (this.position.Y <= this._borderCoords.top) ?
153 | this._borderCoords.top : this._borderCoords.bottom;
154 |
155 | // apply hit resistance
156 | this.velocity = this.velocity.mult(horizontalMovementProperties.hitResistance);
157 |
158 | // reflection angle is an inverse angle to the perpendicular axis to the wall (in this case the wall is X axis)
159 | this.velocity.Y = -this.velocity.Y;
160 | }
161 |
162 | // apply air resistance
163 | this.velocity = this.velocity.mult(horizontalMovementProperties.airResistance);
164 | }
165 |
166 | /**********************
167 | * VerticalBall class *
168 | ***********************/
169 | var verticalMovementProperties = {
170 | airResistance: 0.995, // slows down the speed in each frame
171 | hitResistance: 0.8, // slows down the Y speed when the surface is hitted
172 | rollingResistance: 0.98, // slows down the X speed when rolling on the ground
173 | gravity: 0.05, // pulls the ball to the ground in each frame
174 | velocityFactor: 0.07 // velocity factor (converts vector from the mouse dragging to this environment)
175 | };
176 |
177 | function VerticalBall(position, velocity, radius, localDimensions) {
178 | // VerticalBall constructor
179 | // call the base constructor
180 | Ball.call(this, position, velocity.mult(verticalMovementProperties.velocityFactor), radius, localDimensions);
181 | }
182 |
183 | // VerticalBall inherits from the Ball class
184 | VerticalBall.prototype = Object.create(Ball.prototype);
185 | VerticalBall.prototype.constructor = VerticalBall; // keep the constructor
186 |
187 | VerticalBall.prototype.move = function() {
188 | if (this.velocity.isNearZero() && this.position.Y == this._borderCoords.bottom && !this.velocity.isZero())
189 | this.velocity = Vector2D.zero(); // the ball is staying in place
190 |
191 | // move the ball using the velocity
192 | this.position = this.position.add(this.velocity);
193 |
194 | if (this.position.X <= this._borderCoords.left || this.position.X >= this._borderCoords.right) {
195 | // move ball inside the borders
196 | this.position.X = (this.position.X <= this._borderCoords.left) ?
197 | this._borderCoords.left : this._borderCoords.right;
198 |
199 | // reflection
200 | this.velocity.X = -this.velocity.X;
201 | }
202 | if (this.position.Y <= this._borderCoords.top || this.position.Y >= this._borderCoords.bottom) {
203 | // move ball inside the borders
204 | this.position.Y = (this.position.Y <= this._borderCoords.top) ?
205 | this._borderCoords.top : this._borderCoords.bottom;
206 |
207 | if (this.position.Y == this._borderCoords.bottom) {
208 | // when ball is on the ground, update resistances
209 | this.velocity.Y *= verticalMovementProperties.hitResistance;
210 | this.velocity.X *= verticalMovementProperties.rollingResistance;
211 | }
212 |
213 | // reflection
214 | this.velocity.Y = -this.velocity.Y;
215 | }
216 |
217 | // apply air resistance
218 | this.velocity = this.velocity.mult(verticalMovementProperties.airResistance);
219 |
220 | if (this.position.Y == this._borderCoords.bottom && Math.abs(this.velocity.Y) <= Vector2D.NEAR_ZERO)
221 | // the ball isn't falling or jumping
222 | this.velocity.Y = 0;
223 | else
224 | // apply gravity if falling or jumping
225 | this.velocity.Y += verticalMovementProperties.gravity;
226 | }
227 |
228 | /* Save these classes as global */
229 | var Balls = {
230 | HorizontalBall: HorizontalBall,
231 | VerticalBall: VerticalBall
232 | };
233 |
234 | // Establish the root object, `window` (`self`) in the browser, `global`
235 | // on the server, or `this` in some virtual machines.
236 | var root = typeof self == 'object' && self.self === self && self ||
237 | typeof global == 'object' && global.global === global && global ||
238 | this || {};
239 |
240 | // Export the Balls object for **Node.js**, with
241 | // backwards-compatibility for their old module API. If we're in
242 | // the browser, add Balls as a global object.
243 | // (`nodeType` is checked to ensure that `module`
244 | // and `exports` are not HTML elements.)
245 | if (typeof exports != 'undefined' && !exports.nodeType) {
246 | if (typeof module != 'undefined' && !module.nodeType && module.exports) {
247 | exports = module.exports = Balls;
248 | }
249 | exports.Balls = Balls;
250 | } else {
251 | root.Balls = Balls;
252 | }
253 |
254 | }());
--------------------------------------------------------------------------------
/src/js/bouncing-balls.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 'use strict';
3 |
4 | /**************
5 | ** CONSTANTS **
6 | ***************/
7 | var fps = 60; // Note: if you change this, you'll need to addapt gravity and resistance logic in ball.js
8 | var intervalMs = 1000 / fps;
9 | var localDimensions = {
10 | width: 100, // 1 localDimensions.width is 1 local unit
11 | height: 100 * (2/3) // the canvas ratio is always 3:2
12 | };
13 | var ballProperties = {
14 | radius: 1, // local units
15 | startAngle: 0,
16 | endAngle: 2 * Math.PI,
17 | color: '#000000'
18 | };
19 | var aimProperties = {
20 | shrink: 0.6,
21 | maxSpeed: 30, // local units
22 | headPart: 0.2,
23 | strokeAngle: Math.PI / 5,
24 | color: '#000000'
25 | };
26 |
27 | /******************************************************************************************
28 | ** PROPERTIES USED FOR COMUNICATION BETWEEN HELPERS, EVENTS, UPDATE AND PUBLIC FUNCTIONS **
29 | *******************************************************************************************/
30 | var updateInterval, canvas, context, canvasDimensions, isAiming, balls,
31 | ballType, enabledCollisions, mousePosition, newBallPosition, newBallDirection;
32 |
33 | /************
34 | ** HELPERS **
35 | *************/
36 | function getCanvasDimensions() {
37 | return {
38 | width: canvasDimensions.offsetWidth,
39 | height: canvasDimensions.offsetHeight,
40 | top: canvasDimensions.offsetTop,
41 | left: canvasDimensions.offsetLeft,
42 | scaleRatio: canvasDimensions.offsetWidth / localDimensions.width
43 | }
44 | }
45 |
46 | function addNewBall() {
47 | isAiming = false;
48 |
49 | // save the new ball
50 | var newBall = new ballType(
51 | newBallPosition.clone(),
52 | newBallDirection.clone(),
53 | ballProperties.radius,
54 | localDimensions
55 | );
56 | balls.push(newBall);
57 |
58 | // reset values
59 | newBallDirection = Vector2D.zero();
60 | newBallPosition = new Vector2D();
61 | }
62 |
63 | /************
64 | ** DRAWING **
65 | *************/
66 | function drawCanvasBorder(dimensions) {
67 | context.strokeStyle = '#000000';
68 | context.strokeRect(0, 0, dimensions.width, dimensions.height);
69 | }
70 |
71 | function drawBall(ballCoords, scaleRatio) {
72 | var scaledCoords = ballCoords.mult(scaleRatio); // convert the coordinates in CANVAS size
73 |
74 | context.beginPath();
75 | context.arc(scaledCoords.X, scaledCoords.Y, ballProperties.radius * scaleRatio, // convert the radius too
76 | ballProperties.startAngle, ballProperties.endAngle);
77 | context.closePath();
78 |
79 | context.fillStyle = ballProperties.color;
80 | context.fill();
81 | }
82 |
83 | function drawAim(scaleRatio) {
84 | if (newBallDirection.isNearZero())
85 | return; // no direction, the mouse is in the start position
86 |
87 | var directionLength = newBallDirection.length();
88 | var radiusRatio = ballProperties.radius / directionLength;
89 | var scaledShrink = aimProperties.shrink * scaleRatio;
90 |
91 | // convert start and end points in CANVAS coordinates (using scaleRatio)
92 | // move the start point on the ball border (using the ball direction)
93 | // and adjust end point (using the start point)
94 | var startPoint = newBallPosition.add(newBallDirection.mult(radiusRatio)).mult(scaleRatio);
95 | var endPoint = startPoint.add(newBallDirection.mult(scaledShrink));
96 |
97 | // calculate head strokes angle
98 | var headLength = directionLength * scaledShrink * aimProperties.headPart;
99 | var arrowAngle = newBallDirection.angle(); // angle between Y axis and the arrow direction
100 | var leftStrokeAngle = arrowAngle - aimProperties.strokeAngle;
101 | var rightStrokeAngle = arrowAngle + aimProperties.strokeAngle;
102 |
103 | context.beginPath();
104 | // draw the body
105 | context.moveTo(startPoint.X, startPoint.Y);
106 | context.lineTo(endPoint.X, endPoint.Y);
107 | // draw the head strokes
108 | context.lineTo(endPoint.X - headLength * Math.sin(leftStrokeAngle),
109 | endPoint.Y - headLength * Math.cos(leftStrokeAngle));
110 | context.moveTo(endPoint.X, endPoint.Y);
111 | context.lineTo(endPoint.X - headLength * Math.sin(rightStrokeAngle),
112 | endPoint.Y - headLength * Math.cos(rightStrokeAngle));
113 |
114 | context.strokeStyle = aimProperties.color;
115 | context.stroke();
116 | }
117 |
118 | /********************
119 | ** EVENT LISTENERS **
120 | *********************/
121 | function onMouseMove(event) {
122 | if (isAiming) {
123 | var eventDoc, doc, body;
124 | event = event || window.event; // IE-ism
125 |
126 | // if pageX/Y aren't available and clientX/Y are, calculate pageX/Y - logic taken from jQuery.
127 | // (this is to support old IE)
128 | if (event.pageX == null && event.clientX != null) {
129 | eventDoc = (event.target && event.target.ownerDocument) || document;
130 | doc = eventDoc.documentElement;
131 | body = eventDoc.body;
132 |
133 | event.pageX = event.clientX +
134 | (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
135 | (doc && doc.clientLeft || body && body.clientLeft || 0);
136 | event.pageY = event.clientY +
137 | (doc && doc.scrollTop || body && body.scrollTop || 0) -
138 | (doc && doc.clientTop || body && body.clientTop || 0 );
139 | }
140 |
141 | // convert mouse coordinates to local coordinates
142 | var dimensions = getCanvasDimensions();
143 | mousePosition = new Vector2D(event.pageX, event.pageY).convertToLocal(dimensions);
144 | if (newBallPosition.isUndefined())
145 | newBallPosition = mousePosition.clone(); // start aiming
146 |
147 | // check where the pointer is located
148 | if (mousePosition.X <= 0 || mousePosition.X >= localDimensions.width
149 | || mousePosition.Y <= 0 || mousePosition.Y >= localDimensions.height) {
150 | addNewBall();
151 | } else {
152 | // calculate aim direction
153 | newBallDirection = mousePosition.direction(newBallPosition);
154 |
155 | // directionLength shoud be smaller or equal to aimProperties.maxSpeed
156 | var directionLength = newBallDirection.length();
157 | if (directionLength > aimProperties.maxSpeed)
158 | newBallDirection = newBallDirection.mult(aimProperties.maxSpeed / directionLength);
159 | }
160 | }
161 | }
162 |
163 | function onMouseDown(event) {
164 | // button=0 is left mouse click, button=1 is middle mouse click, button=2 is right mouse click
165 | if (event.button == 0) {
166 | isAiming = true;
167 | onMouseMove(event); // calculate the start position
168 | } else if (isAiming) {
169 | addNewBall();
170 | }
171 | }
172 |
173 | function onMouseUp() {
174 | if (isAiming)
175 | addNewBall();
176 | }
177 |
178 | function onTouchMove(event) {
179 | // isAiming will be true ONLY if 1 finger touches the screen
180 | onMouseMove(event.touches[0]);
181 | }
182 |
183 | function onTouchStart(event) {
184 | if (event.touches.length == 1) {
185 | event.touches[0].button = 0; // imitate a left mouse button click
186 | onMouseDown(event.touches[0]);
187 | } else {
188 | onMouseUp();
189 | }
190 | event.preventDefault();
191 | }
192 |
193 | function onTouchEnd() {
194 | onMouseUp();
195 | event.preventDefault();
196 | }
197 |
198 | /******************
199 | ** MAIN FUNCTION **
200 | *******************/
201 | function update() {
202 | // check dimensions and clear canvas
203 | // the canvas is cleared when a new value is attached to dimensions (no matter if a same value)
204 | var dimensions = getCanvasDimensions();
205 | canvas.width = dimensions.width;
206 | canvas.height = dimensions.height;
207 |
208 | // draw canvas border
209 | drawCanvasBorder(dimensions);
210 |
211 | // aiming mode
212 | if (isAiming) {
213 | // draw new ball
214 | drawBall(newBallPosition, dimensions.scaleRatio);
215 | // draw aim
216 | drawAim(dimensions.scaleRatio);
217 | }
218 |
219 | if (enabledCollisions)
220 | // check collisions and update positions & velocities
221 | // O(N^2) but this can be much faster, O(N*LogN) searching in quadtree structure, (or sort the points and check the closest O(N*LogN))
222 | for (var i=0; i
10 |