This was an older, yet fun exercise in using Javascript for 2D rendering into an HTML5 canvas. Integrating it into this web page via WordPress was not immediately obvious at the time, and I made it work using <iframe> tags. To make it more interesting, I coded it as a riddle.
There are 45 stars bouncing around. When you first load the page (or hit refresh) in your browser there are 13 red stars, 15 yellow stars, and 17 blue ones randomly scattered inside the box. As they bounce against the edges of the box, whenever two stars of different colors collide they both change into stars of the third color. When two stars of the same color collide, they remain their original color. For example, when a red star collides with a yellow star, they both change into blue stars and continue bouncing. When a blue star meets a red star they both turn into yellow stars. However, when two blue stars collide they remain blue. How long would you have to wait until all stars become the same color? Which color might that be?