This project consists of several balls roaming around the screen randomly (as random as Math.random() can get). When each ball approaches a minimum or maximum on the X and Y axis, their CSS colour is animated to fade into red, green or blue as they get closer. If a ball approaches a corner, then a combination of colours are shown based on the colours of the two axis limits that the ball is approaching. There are some interesting collision physics implemented here as well, which make some of the balls pause before proceeding in another direction. Another interesting feature is that the balls will avoid your mouse cursor at all costs. If you move the cursor around, every ball in your cursor's path will switch direction and make its best effort to run away.
- Download the project files and open the
index.htmlfile in your browser
- Move your mouse cursor around on the screen to have balls avoid it
- Observe as the balls bounce and change colours
- Let me know via an issue or pull request if anything can be improved or if anything should be changed here
- This project is complete and will no longer be maintained
MIT