HTMLED – LEDs in HTML

An article by David Brooks on August 23, 2009

 

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.

A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed
A screenshot of HTMLed

Circuits

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.

Motion

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.

Extras

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.

Caution

In the first edition of the concept I had over 10,000 list items displaying on the screen at any given time. As it turns out, that’s not a very manageable number in JavaScript. Before you could see anything change the browser would often freak out. When it finally finished crying and sorting through all of the classes it would make the changes.

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.

Conclusion

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.

Categorised in: ,

When My Daughter Met The Queen

About David Brooks

David Brooks is the owner of the small creative studio, Northward Compass, based out of Orlando, Florida. He writes electronic and ambient music as Light The Deep, and fantasy stories about a place called Elerien.

© Copyright 2005 - 2017 David N Brooks. All rights reserved.

Subscribe

Want occasional notes from me? (I promise, no spam.)