Thursday, March 04, 2010

March Madness Challenge - Day 4

Kept thinking about yesterday's setTimeout and how to chain it into a a color show. Inspired the by the Trippy RGB Waves kit. I wanted to create a Javascript simulation of the rgb color show. The Trippy RGB Waves kit uses an array called lightTab to hold information about the hold time, fade time, and the rgb color values. So I took that array an implemented in Javascript. In order to display values I built a test page, test css, test Javascript. I ran out of time to write the fader. So I have a color show based on the lightTab array. setTimeout is used in a recursive fashion. The issues run into were needing to make sure the lightTab was global, and that an anonymous function was used to call the function in the site time out. Here's the example:

setTimeout("runShow(" + (i + 1) + ")", holdTime);
setTimeout(function () {runShow(i + 1);}, holdTime);

If I was executing more code or had more values in my function then anonymous function route is much easier to type, and less error prone. Other thing, I love jQuery, but none of my Javascript entries have used it. Sort of just checking out the plain old DOM and seeing what can be done.

Without further ado here is the html, css, and js.

test.html
====

====

rgb.css
====

====

rgb.js
====

====

No comments: