Close

New demo animations

A project log for LEDstrip Browser Simulator

Simulation of WS2811/WS2812 LED strips in JavaScript

dougaldougal 05/14/2015 at 20:480 Comments

I've recently added three new demo animations, original written by Danny Wilson for the FastLED library: Bouncing Balls, Lightning, and TwinkleSparkle. Visit the Demo Page to try them out, and of course the LEDstrip source is on Github.

TwinkleSparkle and Bouncing Balls were fairly straightforward to port to JavaScript. But the Lightning code needed a major refactor. Due to the asynchronous nature of JavaScript, there's not a good way to emulate delay() calls. So I ended up taking a state machine approach, and defining the delays in terms of some number of milliseconds from "now" between each state transition, and letting the requestAnimationFrame() loop idle until the appropriate time is reached, and more processing needs to be done.

It's pretty fun converting these animations from Processing to JavaScript, and trying to think of everything in terms of a sort of parametric equation based on time. The next thing I'll probably do is to invent another visualization of my own (ColorWave was my first), implement it in JavaScript until I have it working like I want, then convert it to Processing. That will be the real test of why I wrote this in the first place -- a way to quickly prototype lighting animations in the browser, then move them into hardware after I get them tweaked out.

Discussions