This is a guest post from fellow LED fan Rupert Rawnsley
I had grand plans for the LED lighting in my new workshop, including TRON-like animations that followed you around and naturalistic patterns that mirrored the mood of the sky, but I eventually settled on simple-bright-and-white because of the usual constraints of time and money. Therefore I was thrilled when I saw Rob’s Spidey Wall, which demonstrates the power and flexibility that addressable LED strips offer.
The possibilities for animating the wall was an itch I had to scratch, and as I have been recently spending time improving my HTML5 skills, I knocked up a quick test page to start experimenting. You can use the buttons to select various preset animations, some of which are less migraine inducing than others.
The tricky part of capturing the LED positions was already done for Spidey Wall PacMan, so I was able to just grab the relevant Javascript file. I haven’t linked directly to it in the code because the server doesn’t have HTTPS enabled.
Hopefully it will be relatively easy to transfer the animation functions from Javascript to whatever language the LED microcontroller uses (Processing perhaps) and Rob has promised to video the results when they go live.
Go Your Own Way
For the purposes of this post I migrated the code to JSFiddle so you can experiment and come up with your own animations. Changing the values of the h, s, and l variables in the function renderLoop should be all you need to do. There are some handy variables for generating effects based on LED position or index etc… Programming languages delight in punishing you when you do anything wrong, but the developer tools console should help if you get stuck.
Even though the LEDs use RGB natively, it’s more natural to specify colours using HSL and easier to generate the gaudy rainbows I like. In the original examples I’ve used a bunch of classic cheap tricks to animate the LEDs, but I’m sure I don’t know them all so please share anything you come up with.
A word about HTML5: as you can see from the simplicity of this example, HTML5 and Javascript are a great way to prototype anything graphical, although beyond a few circles it’s much easier with a library like three.js. Also, given that Javascript runs out-of-the-box on anything worthy of the name “computer”, it’s the perfect language to get kids started on programming and graphical applications are far more fun than the Sieve of Eratosthenes.