Skip to content

Commit

Permalink
Preview pattern code now looks more like FastLED demo code.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasoncoon
jasoncoon committed Feb 9, 2022
1 parent 47a0e4d commit 7675a9f
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 72 deletions.
45 changes: 22 additions & 23 deletions fastled-map-demo/fastled-map-demo.ino
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ CRGB leds[NUM_LEDS];
#define FRAMES_PER_SECOND 120
#define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0]))

uint8_t hue = 0; // rotating "base color" used by many of the patterns
uint8_t offset = 0; // rotating "base color" used by many of the patterns
uint8_t speed = 30;

boolean autoplay = true;
Expand Down Expand Up @@ -122,6 +122,7 @@ const CRGBPalette16 palettes[] = {
const uint8_t paletteCount = ARRAY_SIZE(palettes);

uint8_t currentPaletteIndex = 0;
CRGBPalette16 currentPalette = palettes[currentPaletteIndex];

boolean autoplayPalettes = true;
uint8_t autoplayPaletteSeconds = autoplaySeconds * patternCount;
Expand All @@ -131,12 +132,9 @@ void loop()
// Call the current pattern function once, updating the 'leds' array
patterns[currentPatternIndex]();

// do some periodic updates
EVERY_N_MILLISECONDS(20)
{
hue++; // slowly cycle the "base color" through the rainbow
}
offset = beat8(speed);

// do some periodic updates
EVERY_N_SECONDS(autoplaySeconds)
{
if (autoplay)
Expand Down Expand Up @@ -171,6 +169,7 @@ void nextPalette()
{
// add one to the current palette number, and wrap around at the end
currentPaletteIndex = (currentPaletteIndex + 1) % paletteCount;
currentPalette = palettes[currentPaletteIndex];
}

// 2D map examples:
Expand All @@ -179,95 +178,95 @@ void clockwisePalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) + angles[i]);
leds[i] = ColorFromPalette(currentPalette, offset + angles[i]);
}
}

void counterClockwisePalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - angles[i]);
leds[i] = ColorFromPalette(currentPalette, offset - angles[i]);
}
}

void outwardPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - radii[i]);
leds[i] = ColorFromPalette(currentPalette, offset - radii[i]);
}
}

void inwardPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) + radii[i]);
leds[i] = ColorFromPalette(currentPalette, offset + radii[i]);
}
}

void northPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - coordsY[i]);
leds[i] = ColorFromPalette(currentPalette, offset - coordsY[i]);
}
}

void northEastPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - (coordsX[i] + coordsY[i]));
leds[i] = ColorFromPalette(currentPalette, offset - (coordsX[i] + coordsY[i]));
}
}

void eastPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - coordsX[i]);
leds[i] = ColorFromPalette(currentPalette, offset - coordsX[i]);
}
}

void southEastPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) - coordsX[i] + coordsY[i]);
leds[i] = ColorFromPalette(currentPalette, offset - coordsX[i] + coordsY[i]);
}
}

void southPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) + coordsY[i]);
leds[i] = ColorFromPalette(currentPalette, offset + coordsY[i]);
}
}

void southWestPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) + coordsX[i] + coordsY[i]);
leds[i] = ColorFromPalette(currentPalette, offset + coordsX[i] + coordsY[i]);
}
}

void westPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) + coordsX[i]);
leds[i] = ColorFromPalette(currentPalette, offset + coordsX[i]);
}
}

void northWestPalette()
{
for (uint16_t i = 0; i < NUM_LEDS; i++)
{
leds[i] = ColorFromPalette(palettes[currentPaletteIndex], beat8(speed) + coordsX[i] - coordsY[i]);
leds[i] = ColorFromPalette(currentPalette, offset + coordsX[i] - coordsY[i]);
}
}

Expand All @@ -276,7 +275,7 @@ void northWestPalette()
void rainbow()
{
// FastLED's built-in rainbow generator
fill_rainbow(leds, NUM_LEDS, hue, 7);
fill_rainbow(leds, NUM_LEDS, offset, 7);
}

void rainbowWithGlitter()
Expand All @@ -299,15 +298,15 @@ void confetti()
// random colored speckles that blink in and fade smoothly
fadeToBlackBy(leds, NUM_LEDS, 10);
int pos = random16(NUM_LEDS);
leds[pos] += CHSV(hue + random8(64), 200, 255);
leds[pos] += CHSV(offset + random8(64), 200, 255);
}

void sinelon()
{
// a colored dot sweeping back and forth, with fading trails
fadeToBlackBy(leds, NUM_LEDS, 20);
int pos = beatsin16(13, 0, NUM_LEDS - 1);
leds[pos] += CHSV(hue, 255, 192);
leds[pos] += CHSV(offset, 255, 192);
}

void bpm()
Expand All @@ -317,8 +316,8 @@ void bpm()
CRGBPalette16 palette = PartyColors_p;
uint8_t beat = beatsin8(BeatsPerMinute, 64, 255);
for (int i = 0; i < NUM_LEDS; i++)
{ //9948
leds[i] = ColorFromPalette(palette, hue + (i * 2), beat - hue + (i * 10));
{ // 9948
leds[i] = ColorFromPalette(palette, offset + (i * 2), beat - offset + (i * 10));
}
}

Expand Down
7 changes: 5 additions & 2 deletions index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -532,8 +532,11 @@ <h6 class="mb-2 text-muted">
</div>

<div class="row mt-3 gap-2">
<div class="col-12">Input parameters: i (LED index), x, y, angle, radius, offset (incrementing counter)</div>
<div class="col-12">return CHSV(hue, sat, val) or CRGB(r, g, b) all 0-255</div>
<div class="col-12">Input parameters: i (LED index), offset (incrementing counter), coordsX, coordsY, angles, radii (number arrays)</div>
<div class="col-12">
return CHSV(hue, sat, val) or CRGB(r, g, b) all 0-255, or any
<a href="https://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank" rel="noopener noreferrer">CSS color</a>
</div>
<div id="renderError" class="col-12 text-danger"></div>
</div>
</div>
Expand Down
84 changes: 37 additions & 47 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@ let width, height, rows, leds;
let minX, minY, minAngle, minRadius;
let maxX, maxY, maxAngle, maxRadius;

let offset = 0;
let coordsX, coordsY, angles, radii;

let running = true;
let showPreviewBorders = true;
let showPreviewNumbers = true;
Expand Down Expand Up @@ -145,54 +148,48 @@ function onParsePixelblazeClick() {
generateCode();
}

let offset = 0;

function onPatternChange() {
let code;

let saturation = "100%";
let lightness = "50%";

switch (selectPattern.value) {
case "rainbow":
// code = "return `hsl(${mapNumber(led.index - timestamp / 20, 0, leds.length - 1, 0, 360)}, 100%, 50%)`;";
code = "return CHSV(i - offset, 255, 255)";
break;
case "clockwise rainbow":
code = "return CHSV(angle - offset, 255, 255);";
code = "return CHSV(angles[i] - offset, 255, 255);";
break;
case "counter-clockwise rainbow":
code = "return CHSV(angle + offset, 255, 255);";
code = "return CHSV(angles[i] + offset, 255, 255);";
break;
case "outward rainbow":
code = "return CHSV(radius - offset, 255, 255);";
code = "return CHSV(radii[i] - offset, 255, 255);";
break;
case "inward rainbow":
code = "return CHSV(radius + offset, 255, 255);";
code = "return CHSV(radii[i] + offset, 255, 255);";
break;
case "north rainbow":
code = "return CHSV(y + offset, 255, 255);";
code = "return CHSV(coordsY[i] + offset, 255, 255);";
break;
case "northeast rainbow":
code = "return CHSV(x - y - offset, 255, 255);";
code = "return CHSV(coordsX[i] - coordsY[i] - offset, 255, 255);";
break;
case "east rainbow":
code = "return CHSV(x - offset, 255, 255);";
code = "return CHSV(coordsX[i] - offset, 255, 255);";
break;
case "southeast rainbow":
code = "return CHSV(x + y - offset, 255, 255);";
code = "return CHSV(coordsX[i] + coordsY[i] - offset, 255, 255);";
break;
case "south rainbow":
code = "return CHSV(y - offset, 255, 255);";
code = "return CHSV(coordsY[i] - offset, 255, 255);";
break;
case "southwest rainbow":
code = "return CHSV(x - y + offset, 255, 255);";
code = "return CHSV(coordsX[i] - coordsY[i] + offset, 255, 255);";
break;
case "west rainbow":
code = "return CHSV(x + offset, 255, 255);";
code = "return CHSV(coordsX[i] + offset, 255, 255);";
break;
case "northwest rainbow":
code = "return CHSV(x + y + offset, 255, 255);";
code = "return CHSV(coordsX[i] + coordsY[i] + offset, 255, 255);";
break;
case "red":
code = "return CRGB(255, 0, 0)";
Expand Down Expand Up @@ -308,12 +305,12 @@ function hsvToRgb(h, s, v) {
}

function CHSV(hue, saturation, value) {
while (hue > 255) hue -= 255;
while (hue < 0) hue += 255;
while (saturation > 255) saturation -= 255;
while (saturation < 0) saturation += 255;
while (value > 255) value -= 255;
while (value < 0) value += 255;
while (hue > 255) hue -= 256;
while (hue < 0) hue += 256;
while (saturation > 255) saturation -= 256;
while (saturation < 0) saturation += 256;
while (value > 255) value -= 256;
while (value < 0) value += 256;
const h = mapNumber(hue, 0, 255, 0.0, 1.0);
const s = mapNumber(saturation, 0, 255, 0.0, 1.0);
const v = mapNumber(value, 0, 255, 0.0, 1.0);
Expand Down Expand Up @@ -376,10 +373,10 @@ function generateCode() {
for (led of leds) {
const { x, y, angle, radius } = led;

let x256 = mapNumber(x, minX, maxX, 0, 255); // .toFixed(0);
let y256 = mapNumber(y, minY, maxY, 0, 255); // .toFixed(0);
let angle256 = mapNumber(angle, 0, 360, 0, 255); // .toFixed(0);
let radius256 = mapNumber(radius, 0, maxRadius, 0, 255); // .toFixed(0);
let x256 = mapNumber(x, minX, maxX, 0, 255);
let y256 = mapNumber(y, minY, maxY, 0, 255);
let angle256 = mapNumber(angle, 0, 360, 0, 255);
let radius256 = mapNumber(radius, 0, maxRadius, 0, 255);

led.x256 = x256;
led.y256 = y256;
Expand All @@ -402,23 +399,15 @@ function generateCode() {
// sort leds by index ascending
leds.sort((a, b) => parseInt(a.index) - parseInt(b.index));

// const coordsX = `byte coordsX[NUM_LEDS] = { ${leds
// .map((led) => led.x)
// .join(", ")} };`;
// const coordsY = `byte coordsY[NUM_LEDS] = { ${leds
// .map((led) => led.y)
// .join(", ")} };`;
// const angles = `byte angles[NUM_LEDS] = { ${leds
// .map((led) => led.angle.toFixed(0))
// .join(", ")} };`;
// const radii = `byte radii[NUM_LEDS] = { ${leds
// .map((led) => led.radius.toFixed(0))
// .join(", ")} };`;

const coordsX256 = `byte coordsX[NUM_LEDS] = { ${leds.map((led) => led.x256.toFixed(0)).join(", ")} };`;
const coordsY256 = `byte coordsY[NUM_LEDS] = { ${leds.map((led) => led.y256.toFixed(0)).join(", ")} };`;
const angles256 = `byte angles[NUM_LEDS] = { ${leds.map((led) => led.angle256.toFixed(0)).join(", ")} };`;
const radii256 = `byte radii[NUM_LEDS] = { ${leds.map((led) => led.radius256.toFixed(0)).join(", ")} };`;
coordsX = leds.map((led) => led.x256);
coordsY = leds.map((led) => led.y256);
angles = leds.map((led) => led.angle256);
radii = leds.map((led) => led.radius256);

const coordsX256 = `byte coordsX[NUM_LEDS] = { ${coordsX.map((v) => v.toFixed(0)).join(", ")} };`;
const coordsY256 = `byte coordsY[NUM_LEDS] = { ${coordsY.map((v) => v.toFixed(0)).join(", ")} };`;
const angles256 = `byte angles[NUM_LEDS] = { ${angles.map((v) => v.toFixed(0)).join(", ")} };`;
const radii256 = `byte radii[NUM_LEDS] = { ${radii.map((v) => v.toFixed(0)).join(", ")} };`;

codeFastLED.innerText = [
// coordsX,
Expand Down Expand Up @@ -598,6 +587,7 @@ function handleRenderFunctionError(error) {

function render(timestamp) {
offset += 1;
if (offset > 255) offset = 0;
const canvasWidth = canvasPreview.width;
const canvasHeight = canvasPreview.height;

Expand All @@ -615,7 +605,7 @@ function render(timestamp) {
renderError.innerText = "";

try {
renderFunc = Function("i", "angle", "radius", "x", "y", code);
renderFunc = Function("i", "coordsX", "coordsY", "angles", "radii", code);
} catch (error) {
handleRenderFunctionError(error);
return;
Expand All @@ -625,7 +615,7 @@ function render(timestamp) {
let fillStyle;

try {
fillStyle = renderFunc(led.index, led.angle256, led.radius256, led.x256, led.y256);
fillStyle = renderFunc(led.index, coordsX, coordsY, angles, radii);
} catch (error) {
handleRenderFunctionError(error);
return;
Expand Down

0 comments on commit 7675a9f

Please sign in to comment.