NeoPixel Ring HSV rotující kruhy

Zápisník experimentátora

Hierarchy: WS2812

Nudnou teorii o převodu mezi barevným prostorem HSV a RGB jsme si ukázali v předchozím článku. V tomto článku využijeme opět barevný prostor HSV. Budeme si pomocí něj vytvářet rotující animace na NeoPixel Ring. Vytvoříme si tři různé animace, které budou vycházet z jednoduchého algoritmu. Jednoduchý algoritmus neznamená, že bude výsledek ošklivý. Právě naopak. I z jednoduchých algoritmů mohou vzniknout zajímavé efekty.

Použité součástky

  • Arduino Uno {linkArduino} - Můžete použít libovolnou verzi Arduina.
  • Breadboard {linkBreadboard}
  • NeoPixel Ring 24 LED {linkNeopixel} - Obsahuje 24 RGB LED diód s čipem WS2812B.
  • Rezistor 1k {linkR} - Rezistor se připojí na datový vstup NeoPixel Ringu. Slouží jako ochrana pinu.
  • Kondenzátor 220 uF {linkC} - Kondenzátor se připojí mezi VCC a GND na NeoPixel Ringu. Slouží k vyrovnávání napěťových špiček.

Ochranné součástky jsou nutné proto, aby se NeoPixel Ring nepoškodil. Podrobnosti ochrany jsou uvedeny v článku o napájení těchto diod.

Na obrázku je Ring s 12 diodami. Ring s 24 diodami se nijak mimořádně od něj neliší a je proto možné použít i menší ring po příslušné úpravě kódu.

Efekt rotace

Protože je ve všech třech příkladech použitý stejný algoritmus, vysvětlíme si ho pouze jednou. Do zdrojového kódu jsem doplnil proměnnou position. Každých 50 ms k proměnné připočtu hodnotu 1. Díky tomu vytvořím pohyb, který za jednu sekundu vytvoří 20 nových počátečních pozic. A protože má NeoPixel Ring pouze 24 pixelů, musím se postarat o to, abych výslednou pozici nastavil vždy jen v intervalu 0-23. To zajišťuje operátor modulo ve výrazu (i + position) % CNT. Postupně tak rotují počáteční pozice na NeoPixel Ring. Pár hodnot jsem zapsal do tabulky, aby bylo vidět, jak se operátor modulo projevuje na výsledku.

idx 0 1 ... 22 23
position=0 0 1 ... 22 23
position=1 1 2 ... 23 0
position=2 2 3 ... 0 1

Rotující duhový prstenec

V tomto příkladu rotuje po obvodu NeoPixel Ring duhový prstenec.

#include <Adafruit_NeoPixel.h>
#include "hsv.h"

// data pin
#define PIN 6
// led count
#define CNT 24
// max Hue
#define MAXHUE 256*6

int position = 0;

Adafruit_NeoPixel strip = Adafruit_NeoPixel(CNT, PIN, NEO_GRB + NEO_KHZ800);

void setup() {
  strip.begin();
}

void loop() {
  // hue - whole circle
  // saturation - maximum
  // value - very low
  for (int i = 0; i < CNT; i++)
    strip.setPixelColor((i + position) % CNT, getPixelColorHsv(i, i * (MAXHUE / CNT), 255, 10));
  strip.show();
  position++;
  position %= CNT;
  delay(50);
}

Rotující červený prstenec

V tomto příkladu rotuje po obvodu NeoPixel Ring postupně slábnoucí červený bod.

#include <Adafruit_NeoPixel.h>
#include "hsv.h"

// data pin
#define PIN 6
// led count
#define CNT 24
// max Hue
#define MAXHUE 256*6

int position = 0;

Adafruit_NeoPixel strip = Adafruit_NeoPixel(CNT, PIN, NEO_GRB + NEO_KHZ800);

void setup() {
  strip.begin();
}

void loop() {
  // hue - red
  // saturation - max
  // value - 0-255
  for (int i = 0; i < CNT; i++)
    strip.setPixelColor((i + position) % CNT, getPixelColorHsv(i, 0, 255, strip.gamma8(i * (255 / CNT))));
  strip.show();
  position++;
  position %= CNT;
  delay(50);
}

Rotující prstenec, který mění barvu podle HSV

V tomto příkladu rotuje po obvodu NeoPixel Ring postupně slábnoucí bod. Bod mění barvu a postupně projde přes všechny barevné odstíny.

#include <Adafruit_NeoPixel.h>
#include "hsv.h"

// data pin
#define PIN 6
// led count
#define CNT 24
// max Hue
#define MAXHUE 256*6

int position = 0;
int hue = 0;

Adafruit_NeoPixel strip = Adafruit_NeoPixel(CNT, PIN, NEO_GRB + NEO_KHZ800);

void setup() {
  strip.begin();
}

void loop() {
  // hue - red
  // saturation - max
  // value - 0-255
  for (int i = 0; i < CNT; i++)
    strip.setPixelColor((i + position) % CNT, getPixelColorHsv(i, hue, 255, strip.gamma8(i * (255 / CNT))));
  strip.show();
  position++;
  position %= CNT;
  hue += 2;
  hue %= MAXHUE;
  delay(50);
}

Video

Ve videu jsou všechny tři algoritmy. Z ilustračních obrázků si umíte těžší představit, co se na NeoPixel Ring děje. Ve videu to vidíte přímo v akci.

Zdrojový kód

Zdrojový kód se nachází na serveru GitHub.


Video


29.05.2019

Menu