mtrajk / bouncing-balls

Bouncing balls simulation using plain JavaScript

Bouncing Balls

Simple bouncing balls simulation using plain JavaScript. Drawing in HTML Canvas, also plain CSS is used. (without third-part frameworks/code)

Try it here

Description

• With a mouse click on the canvas a new ball is created, aim with holding the mouse down and moving it (drag the mouse further from the start point for greater speed), shoot the new ball with releasing the mouse button. (also touch screens/devices are supported, the same rules are used for touch events)
• The canvas is updated (redrawn) 60 times in 1 second. (60 fps)
• The canvas is responsive, with help from CSS media queries.
• Because of that, the whole physics engine (all maths and logics inside) works with local coordinates/units. The local width is always 100 local units, and the height is always 66.6667 local units. (because the canvas ratio is 3:2)
• The simulation is not a 100% real-world simulation, because there are many more factors for moving/colliding in the real world like the ball spinning, the softness of balls, the type of walls, even the weather, and sound waves have influence in the real world.
• More description of the physics you can find inside the code, for example, when the balls collide these formulas are used, link.
• Known issue: In "vertical" space/direction when the bottom is full with balls (when there is no space for a new ball) adding a new ball will make all balls go crazy (jumping randomly). This is because the balls will always collide and won't lose energy from colliding (at this moment I'm not sure how to solve this).

Repo structure

• images - several gifs from the simulations
• test - unit tests, Mocha framework is used for unit testing.This is how to run these tests using Mocha:
  • install NodeJS
  • install mocha in this project npm install mocha
  • run the tests from this project npm test
• src - the source code of the application
  • index.html - a simple HTML page, JS and CSS files are imported and the choices and canvas are defined here
  • css/styles.css - used to define media queries (for responsiveness), and other very simple CSS rules
  • js/choice.js - used to initialize and stop the simulation (using the values from the choices)
  • js/bouncing-balls.js - handles the screen interaction (mouse and touch events) and draws in the canvas (some kind of mini game engine)
  • js/balls.js - balls collision and movement logics/physics
  • js/vector2d.js - 2 dimensional vector class, all vector related things are located here

License

This project is licensed under the MIT - see the LICENSE file for details

bouncing-balls's Issues

The dancing balls problem

Hello! I find that with this code (both in your demo and in my re-implementation in my program) there happens to be the problem of the "dancing balls". Sometimes balls that come into contact start "dancing" around each other instead of bouncing.

As I have found out that happens because in certain circumstances the collided balls do not get repositoned outside each other correctly. The error is in these two lines:

bouncing-balls/src/js/balls.js

Lines 56 to 57 in 9edad0f

	this.position = this.position.add(this.velocity.tryNormalize().mult(diff));
	ball.position = ball.position.add(ball.velocity.tryNormalize().mult(diff));

it should instead be

    this.position = this.position.add((this.position - ball.position).tryNormalize().mult(diff));
    ball.position = ball.position.add((ball.position - this.position).tryNormalize().mult(diff));

So that we reposition the balls not in their speeds directions, which might be directed anywhere and won't always take the balls to positions where they separate. But rather in the direction of a line that passes through both of their centers, in opposite directions, effectively pulling them away from each other.

Strange behavior of balls

@MTrajK thx for your code :) Im find some strange thing: if the bottom line is completely filled with balls, then the balls are shaking.