From 7675a9f2b56c9236a7b25eebc9dc2389da7fad56 Mon Sep 17 00:00:00 2001 From: Jason Coon <3598755+jasoncoon@users.noreply.github.com> Date: Wed, 9 Feb 2022 09:02:06 -0600 Subject: [PATCH] Preview pattern code now looks more like FastLED demo code. --- fastled-map-demo/fastled-map-demo.ino | 45 +++++++------- index.htm | 7 ++- index.js | 84 ++++++++++++--------------- 3 files changed, 64 insertions(+), 72 deletions(-) diff --git a/fastled-map-demo/fastled-map-demo.ino b/fastled-map-demo/fastled-map-demo.ino index c6ccea8..67c0e98 100644 --- a/fastled-map-demo/fastled-map-demo.ino +++ b/fastled-map-demo/fastled-map-demo.ino @@ -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; @@ -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; @@ -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) @@ -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: @@ -179,7 +178,7 @@ 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]); } } @@ -187,7 +186,7 @@ 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]); } } @@ -195,7 +194,7 @@ 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]); } } @@ -203,7 +202,7 @@ 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]); } } @@ -211,7 +210,7 @@ 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]); } } @@ -219,7 +218,7 @@ 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])); } } @@ -227,7 +226,7 @@ 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]); } } @@ -235,7 +234,7 @@ 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]); } } @@ -243,7 +242,7 @@ 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]); } } @@ -251,7 +250,7 @@ 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]); } } @@ -259,7 +258,7 @@ 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]); } } @@ -267,7 +266,7 @@ 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]); } } @@ -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() @@ -299,7 +298,7 @@ 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() @@ -307,7 +306,7 @@ 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() @@ -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)); } } diff --git a/index.htm b/index.htm index 9c339a0..5dd6618 100644 --- a/index.htm +++ b/index.htm @@ -532,8 +532,11 @@
-
Input parameters: i (LED index), x, y, angle, radius, offset (incrementing counter)
-
return CHSV(hue, sat, val) or CRGB(r, g, b) all 0-255
+
Input parameters: i (LED index), offset (incrementing counter), coordsX, coordsY, angles, radii (number arrays)
+
+ return CHSV(hue, sat, val) or CRGB(r, g, b) all 0-255, or any + CSS color +
diff --git a/index.js b/index.js index dffefed..ae6e64e 100644 --- a/index.js +++ b/index.js @@ -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; @@ -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)"; @@ -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); @@ -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; @@ -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, @@ -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; @@ -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; @@ -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;