HTMLED – LEDs in HTML
An article by August 23, 2009on
I was inspired by a work of art awhile back. It was one of those large displays you see at a concert, only this one was a movable collection of LEDs that morphed along with the structure itself. I wish I could find a photo or a video of it, the concept alone was amazing.
Nevertheless, I got to thinking about how that idea could be related in programmed visualizations. I wrote it all out in pseudo-code and promptly distilled the concept way down. I simplified it so that I could write it in HTML and jQuery.
Someday I might develop the original thoughts that I had into ActionScript or maybe even use Processing. For the time being consider this a branch of the concept.
I created what I call “visual circuits.” Each one is actually a class that gets added to a list item depending on its placement in the unordered list. Some of them will have only one class, others will have four or more.
With this sort of structure you start to see patterns in the array of list items, much as you would in a series of LEDs. Where this differs from a physical circuit is in the fact that the classes overlap and more advanced patterns emerge.
What creates the “motion”, is that you can resize your browser to drastically change the pattern. You can also change the size of each circuit’s LEDs. When one circuit changes the rest shift accordingly to create a new pattern. The combination of these things makes the number of patterns infinite.
I thought it might be interesting to throw in a few extra features. The most notable is the ability to add a background image. This can create some really organic things, or just let you pattern things over top of a photo. If you don’t see it loaded, you’ll probably want to set some of the circuits to “Opacity 0”.
You can also add three levels of noise to the visualization. This can look ridiculous in some color schemes while in others it helps vary things up a bit.
I wanted it to be a lot more responsive so I dropped the number of items way, way down. That of course means that those of you with larger screens may not have LEDs from edge to edge. It also affects things if you wanted to use really small blocks.
And there still are quite a few items to display. So, be advised that this could crash your browser.
That about wraps up the concept explanation. If you make something cool please feel free to send me a link. I’m curious to know how people use this, and what they come up with. Grab your hexadecimal values and go have fun.