Animation Experiment: Background Changer

This experiment is NOT meant to be viewed on a mobile device. Your device may not be able to handle the program updating several nodes in the DOM 60 times in a second. Also your device screen may be too small to see the background changing.

I've been researching HTML5 Animation and color theory so I wanted to try a few experiments. I wanted to experiment with changing the background color of the page using the requestAnimationFrame function. Granted, this experiment is using JS and not CSS3, but it is all related.

In my head, I thought it would increment by one in hex from 000000 to FFFFFF and go through all the colors of the rainbow. Instead, it mostly cycles from black to blue and then cycles back and forth between blues and greens. When the red section gets near double F, this is when the other colors of the rainbow start to show up. It takes a very long time to get the red section to double FF.

I decided to test the background with the RGB color format. I had each color section increment simultaneously. This just displays black, then different shades of gray until it reaches white. I then, decided to add a feature to be able to add a color instead of always starting from 0. I also added a feature to capture the current background color and display a sample of the color.