Open Source FastLED Animator / Simulator

I created a website that enables non-coders to animate led light strips. I aim to empower everyone to create art without learning to code. I would love to get the Arduino community's feedback on how I can make this better.

Website:

Code:

Demo Video

I tried 8 LEDs, 16 frames, Bounce right

When the lit LED gets back to LED 0 after the first bounce the next LED to light is number 7 so something is not correct

	//Frame 16
	leds[0].setRGB(0, 0, 0);
	leds[7].setRGB(170, 0, 0);
	FastLED.show();
	delay(500);

This seems to be the problem

Great point! I will make an issue for this one. We should make it automatic that it reads the number of LEDs that are colored and subtracts the frames automatically.

Right now, you can do this manually by subtracting frames from the second loop.

Whilst I applaud your efforts, the Arduino code that is produced is appalling, but I suspect that you know that

Working on it :slight_smile:

@UKHeliBob So, I figured out some stuff and optimized the code generation for patterns only. I also fixed the bug for pattern generation.

This is the code it generates now for the bounce right pattern.

#include <FastLED.h>
#define NUM_LEDS 30
#define DATA_PIN A0

CRGB leds[NUM_LEDS];

void shiftRight(byte reds[], byte greens[], byte blues[]) {
    int tempRed = reds[NUM_LEDS - 1];
    int tempGreen = greens[NUM_LEDS - 1];
    int tempBlue = blues[NUM_LEDS - 1];
    for(int ledIndex = NUM_LEDS - 1; ledIndex > 0; ledIndex -= 1) {
        reds[ledIndex] = reds[ledIndex - 1];
        greens[ledIndex] = greens[ledIndex - 1];
        blues[ledIndex] = blues[ledIndex - 1];
    }
    reds[0] = tempRed;
    greens[0] = tempGreen;
    blues[0] = tempBlue;  
}

void shiftLeft(byte reds[], byte greens[], byte blues[]) {
    int tempRed = reds[0];
    int tempGreen = greens[0];
    int tempBlue = blues[0];
    for(int ledIndex = 0; ledIndex < NUM_LEDS - 1; ledIndex += 1) {
        reds[ledIndex] = reds[ledIndex + 1];
        greens[ledIndex] = greens[ledIndex + 1];
        blues[ledIndex] = blues[ledIndex + 1];
    }
    reds[NUM_LEDS - 1] = tempRed;
    greens[NUM_LEDS - 1] = tempGreen;
    blues[NUM_LEDS - 1] = tempBlue;  
}

void displayLeds(byte reds[], byte greens[], byte blues[]) {
    for(int ledIndex = 0; ledIndex < NUM_LEDS; ledIndex += 1) {
        leds[ledIndex].setRGB(reds[ledIndex], greens[ledIndex], blues[ledIndex]);
    }
    FastLED.show();
    delay(500);
}

void setup() {
    FastLED.addLeds<WS2811, DATA_PIN, GRB>(leds, NUM_LEDS);
    FastLED.setBrightness(10);
}

void loop() {
    // We declare these large values here for memory reasons
    byte reds[] = { 170,170,170,170,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};
    byte greens[] = { 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};
    byte blues[] = { 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};
    
	for(int i = 0; i < 30; i += 1) {
        shiftRight(reds, greens, blues);
        displayLeds(reds, greens, blues);
    }
}

You can preview the changes here.

Thank you!

Noah

That looks much better and seems to work as expected with Bounce

Can I suggest that you make the action of left clicking on an LED a toggle action between the currently selected colour and black rather than needing to select black as the colour to turn off an LED ?

If you can do that already I have not found it

Thank you!

I do have an erase tool, but it's not super noticeable. Do you think it should be labeled better? Maybe put those three connected buttons under the paint. You can click on the individual led or mouse down and drag. Let me know what you think.

demo

So you do !

A mouse button action would be more intuitive and easier to use. Perhaps click to toggle the selected LED between the selected colour and off.

As an extra enhancement, how about having 2 currently selected colours, one linked to the left mouse button and one to the right mouse button, each with "click to toggle" the colour as above ?

I am writing that down in an issue, and I promise I will get to it. I am doing more refactoring on the code to use this versus using the delay function. Once I get the final version out for both things. Thank you for all the feedback; if you have any more ideas, please let me know!

void loop() {
  EVERY_N_MILLISECONDS(500) {
    load next frame of pattern
  }
  FastLED.show()
}