A Hex On Your M5Stack

Posted by codepope on Sunday, April 7, 2019
Last Modified on Saturday, August 31, 2024

So, I was looking for something to do at HackWimbledon today and as I’d just got my hands on the Hex Neopixel panels from M5Stack, I thought I’d see what I could get going. And down I fell into a hole which lead to playing with spreadsheets. Lets look at the device in question:

As seen on Aliexpress

Pretty neat eh. The demo code was easy enough to get going and it slaps a rainbow over all the pixels. Super.

Then I decided I wanted to roll a pixel around the hex. Now, your Neopixels are chained so there’s an effective strip of 0 to 36 pixels and… well how do you know which ones next to the other. Well, thats where the spreadsheet came in. Surely there was a simple and effective algorithm to work it out and after careful pondering I… well… I decided to just use the raw data in the spreadsheet.

I’d taken each hex and gone around clockwise to see what pixel was adjacent to that side and noted them all. I just took that data set and turned it into a C array of 8 bit ints…

Well let’s look at the code…


#include <M5Stack.h>
#include "FastLED.h"

#define Neopixel_PIN    21
#define NUM_LEDS    37

CRGB leds[NUM_LEDS];
uint8_t gHue = 0;
uint8_t pixel = 18;

int pixels[37][7] = {
  {0, -99, 1, 5, 4, -99, -99},
  {1, -99, 2, 6, 5, 0, -99},
  {2, -99, 3, 7, 6, 1, -99},
  {3, -99, -99, 8, 7, 2, -99},
  {4, 0, 5, 10, 9, -99, -99},
  {5, 1, 6, 11, 10, 4, 0},
  {6, 2, 7, 12, 11, 5, 1},
  {7, 3, 8, 13, 12, 6, 2},
  {8, -99, -99, 14, 13, 7, 3},
  {9, 4, 10, 16, 15, -99, -99},
  {10, 5, 11, 17, 16, 9, 4},
  {11, 6, 12, 18, 17, 10, 5},
  {12, 7, 13, 19, 18, 11, 6},
  {13, 8, 14, 20, 19, 12, 7},
  {14, -99, -99, 21, 20, 13, 8},
  {15, 9, 16, 22, -99, -99, -99},
  {16, 10, 17, 23, 22, 15, 9},
  {17, 11, 18, 24, 23, 16, 10},
  {18, 12, 19, 25, 24, 17, 11},
  {19, 13, 20, 26, 25, 18, 12},
  {20, 14, 21, 27, 26, 19, 13},
  {21, -99, -99, -99, 27, 20, 14},
  {22, 16, 23, 28, -99, -99, 15},
  {23, 17, 24, 29, 28, 22, 16},
  {24, 18, 25, 30, 29, 23, 17},
  {25, 19, 26, 31, 30, 24, 18},
  {26, 20, 27, 32, 31, 25, 19},
  {27, 21, -99, -99, 32, 26, 20},
  {28, 23, 29, 33, -99, -99, 22},
  {29, 24, 30, 34, 33, 28, 23},
  {30, 25, 31, 35, 34, 29, 24},
  {31, 26, 32, 36, 35, 30, 25},
  {32, 27, -99, -99, 36, 31, 26},
  {33, 29, 34, -99, -99, -99, 28},
  {34, 30, 35, -99, -99, 33, 29},
  {35, 31, 36, -99, -99, 34, 30},
  {36, 32, -99, -99, -99, 35, 31}
};

void setup() {
  Serial.begin(115200);
  Serial.println("Go!");
  M5.begin();
  M5.Lcd.clear(BLACK);
  M5.Lcd.setTextColor(YELLOW); M5.Lcd.setTextSize(2); M5.Lcd.setCursor(40, 0);
  M5.Lcd.println("Neopixel Example");
  M5.Lcd.setTextColor(WHITE);
// Neopixel initialization
  FastLED.addLeds<WS2811, Neopixel_PIN, GRB>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
  FastLED.setBrightness(10);
fill_solid(leds, NUM_LEDS, CRGB::Black);
}

void loop()
{
for (;;) {
    leds[pixel] = CRGB::Black;
    int dp=-99;
    while(dp==-99) {
        int dir = random(1, 7);
        dp = pixels[pixel][dir];
    }
    pixel = dp;
    leds[pixel] = CRGB::White;
    FastLED.show();// must be executed for neopixel becoming effective
    delay(100);
  }
}

It the array, where there’s no pixel to go to, it’s marked with -99. We start out pixel off at position 18, dead center. To move one pixel, we select a value 1 to 6 and look at the 18th entry in our array and that values entry in the array there we get what pixel we will be at if we went in that direction. (It’s 1 to 6 because for simplicitly, the first element of the array is the start pixel number). Anyway, in a loop, we flicker through and repeat. Oh, and if there’s no pixel to move to - the -99 - we just pick another direction. It all comes out as a nice wandering pixel with a steady pace as you can see here:

Now, the questions are

  • Is there a better way to map the hex
  • Can I make this work with an M5Stick
  • Can I make it react to an accelerometer
  • Can I chain lots of these together to make a huge hex

Hope you enjoy…