GravBall is an interactive animation that demonstrates the effects of gravitational attraction on floating particles, or otherwise simulate the effects of a black hole.
GravBall was designed over a 5 day period in June, 2018. Prior to being created a list of minimum viable products (MVPs) was formed to demonstrate a planning process before development began. These implementation of these MVPs was used to ensure I was staying on track to meet the project deadline.
- Particles move towards a gravity ball based each object's position, the total distance between them, and the size of the gravity ball.
- Used Pythagorean theorem to determine distance.
- N squared iteration of the
gravityBallsarray to create the attraction between each gravity ball. - To combine them into one larger ball, simply remove from array depending on each gravity ball's size, and increase radius of the surviving ball.
- A variation of collision detection was implemented to check whether two different gravity balls would collapse on each other.
- double click invokes
removeGravityBall()to remove a gravity ball on cursor position
- Single click was more problematic in terms of keeping it bug free due to the double click feature and added GUI.
- Specified the event target such that using the slider would not produce an additional unwanted gravity ball
- Required the use of the
setTimeoutfunction to determine whether there was a second click.
- JavaScript
- HTML 5 Canvas
- Webpack
Sources: JavaScript, Canvas, WebPack
- Vectors
- Implement a vector class to exert better control over particle attraction
- More GUI content
- Interactive sliders for particle start size
- Additional color sets
- Additional styling
- Adjust colors
- Particle and gravity ball shape/coloring