Prototyping RGB LED Patterns in JavaScript

I have been asked semi-frequently to add LED strips to various things, so I figured I’d like something that lets me play with LED strip patterns.

Below is my attempt at creating one. It’s pretty simple, but I think it’ll work nicely.

step = function (time) { for (var i = 0; i < NUMPIXELS; i++) { var r = triangle_wave(time / 4 + i, 10); var g = triangle_wave(time / 4 + i + 5, 10); var b = triangle_wave(time / 4 + i + 10, 10); set(i, r, g, b); } }; function triangle_wave(x, radius) { return Math.abs((x % (radius*2)) - radius) / radius * MAX; }

I stole some code from my graduation cap to make a line of “LEDs”. I defined some simple helper functions (described below) for managing the LEDs - these functions are meant to mirror the functions commonly available in WS2812B libraries, namely functions for getting and setting the nth LED in the strip. Finally, I basically just eval the contents of the code editor above, which lets you redefine the step function, which I call from some code that has been setIntervaled.

You can edit the script. The function step is called 50 times a second, and it takes as input a number that increases by one every time step is called. There are 32 LEDs for you to play iwth in my little example.

The Run button runs the code in the editor, while the Share button reloads the page to a URL that will load the code in the text box, which you can then share with others.

Here is a description of the helper functions I provide:

function set(index, r, g, b)

Sets the LED at index to have the color (r, g, b)

index is numbered from 0 to NUMPIXELS.
r, g, and b can be between 0 and 255, inclusive.
get(index) sees the result of this function immediately, but the color will not change until after step terminates.

function get(index)

Gets the LED at index

index is numbered from 0 to NUMPIXELS.
This returns an object with three properties: 'r', 'g', and 'b' - these properties represent the red, blue, and green values of the color of the LED at index.

I also define a few constants, which may also be helpful:

NUMPIXELS: the number of LEDs in the strip (32).
MIN: the minimum LED subpixel value (0).
MAX: the maximum LED subpixel value (255).
FPS: the number of times per second step is called (50).