LEDstrip Browser Simulator

Simulation of WS2811/WS2812 LED strips in JavaScript

Similar projects worth following
In order to more quickly test new lighting algorithms for RGB LED strips, I emulated WS2811 behavior in the browser with JavaScript.

See the live demo on the LEDstrip Github page:

Internally, the HTML structure and the low-level JavaScript is intended to mimic the operation of addressable LED strips very closely. The main difference is that the browser implementation is not timing-based -- we take more of an ad-hoc approach, and pass in data as-needed.

The strip is modeled as an array of WS2812 modules, where each element is chained to the next, and data is passed via datain() and dataout() calls. Each time a new color value is passed into a module by datain(), it either stores it, or if there is already a color stored, it passes it to the next linked module.

The references to these modules are collected together in an ledstrip object, which has convenience methods for sending color data into the strip (either individually, or a whole buffer at once), clearing the colors, setting the display, etc. There are also colorwheel methods for converting from HSV to RGB.

When the latch() method is called on the first module in the strip, all the modules display their stored colors and clear their buffered color values.

  • 1 × A web browser with JavaScript

  • Fire2012 Animation

    dougal06/11/2015 at 13:09 0 comments

    I recently added a port of Mark Kriegsman's Fire2012 animation.

    Also, I'm adding an option to blur the LED strip, to simulate a diffuser.

  • New demo animations

    dougal05/14/2015 at 20:48 0 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.

View all 2 project logs

Enjoy this project?



pete.douma wrote 07/07/2017 at 15:35 point

What would really be great is if you could move the leds around. I have customers who use them in all sorts of patterns and then want me to make the patterns.  

  Are you sure? yes | no

Sean wrote 10/24/2016 at 21:50 point

I have a dream of a project with a hexagonal rod with a 47 LED strip of SK6812 on each long flat of the rod (six strips). Would it be trivial to arrange the simulator in six adjacent lengths of 47?

  Are you sure? yes | no

Charlie Lindahl wrote 03/19/2015 at 09:36 point

Love this simulator. Can't wait to muck about with it when I get back from SXSW 2015. I have the Larson glasses (?spelling?) and a GuggenHat that's fallen apart to test various patterns.

  Are you sure? yes | no

Powerdata44 wrote 03/23/2014 at 14:40 point
Hello, your coding is superior! I like water dropping effects and four colors chasing cross over each others on WS2811 strips. I thought brilliant but I couldn't get it to work on Arduino UNO
Code don't work on Arduino open project written as when I verify, it gave me error
I am newbie and do want to learn and share.
Advise please.

  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates