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 
@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.
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()
}