This project shows how to animate a ball using plain JavaScript without the use of any library.
The ball is just a plain DOM object. A ball shape is given by making sure the width and height is same of a div element with a border-radius of 50%. The ball is animated over time by changing its position repeatedly by calling the setInterval method.
Requires no installation. You can simply download the repository and run each index.html file under the sub-folders directly in your browser.
Currently, there is one example which generates 1000 random balls.
To run the generate-random-balls example, drag the index.html file to your browser window. It should start running immediately. To run it again, just refresh your browser.
Feel free to get in touch with me on either Twitter or Email for any issue running the code.
You can also watch a walk-through of the code here if you wish to use it in your own projects.
https://www.youtube.com/watch?v=R5X6D1kBwxM
There are many interesting examples that can be created with a basic 2D ball animation.
For example:
- organic movement of the ball mimicking live organism
- abstract painting generation by tracing the ball movement
In the future, the plan is to release more examples.
The project is released under the MIT license. The original project is part of an assignment for the MIT xPRO Web Development with JavaScript course.