NeoPixel Ring HSV rotating circles

Zápisník experimentátora

Hierarchy: WS2812

The boring theory of the transformation between the color space HSV and RGB is shown in the previous article. In this article we will use the HSV color space again. We'll create rotating animations on NeoPixel Ring using it. We will create three different animations that will be based on a simple algorithm. A simple algorithm does not mean that the result will be ugly. On the contrary. Simple algorithms can also create interesting effects.

Used parts

  • Arduino Uno {linkArduino} - You can use any version of the Arduino.
  • Breadboard {linkBreadboard}
  • NeoPixel Ring 24 LED {linkNeopixel} - Includes 24 RGB LEDs with WS2812B chip.
  • Resistor 1k {linkR} - The resistor is attached to the NeoPixel Ring data input. It serves as a pin protection.
  • Capacitor 220 uF {linkC} - The capacitor is connected between VCC and GND on NeoPixel Ringu. It is used to straighten the voltage peaks.

Protective components are necessary in order to not damage NeoPixel Ring. Details of protection are in article on powering these diodes.

The picture shows a ring with 12 diodes. Ring with 24 diodes is not very different from it and it is therefore possible to use a smaller ring after minor changes in the sketch.

Rotation effect

Because the same algorithm is used in all three examples, we'll only explain it once. I added a variable position to the source code. Every 50 ms add a value of 1 to the variable. This creates a move that creates 20 new start positions in one second. And because NeoPixel Ring has only 24 pixels, I have to make sure that I always set the resulting position only at 0-23. This is provided by the modulo operator in the expression (i + position) % CNT. Gradually, they rotate the initial positions on the NeoPixel Ring. I wrote down a few values in the table to see how the modulo operator performs on the result.

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

Rotating rainbow ring

In this example, the NeoPixel Ring rotates the rainbow ring.

#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);
}

Rotating red ring

In this example, the NeoPixel Ring rotates a weakening red dot.

#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);
}

Rotating ring that changes color according to HSV

In this example, the NeoPixel Ring rotates a weakening point. The point changes color and gradually passes through all the color shades.

#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

There are all three algorithms in the video. From the illustration images you can hardly imagine what's happening on the NeoPixel Ring. You can see it directly in the video.

Source code

The source code is located on the GitHub server.



Video


29.05.2019


Menu