Turn Signal Animations

OK, we got hand position detection working. However, car drivers aren't going to have the Serial Monitor running on their dashboards. So we should do something other than serial output. How about the NeoPixels?

We can replace the Serial.println() commands with code that will activate the NeoPixels. Even better, since this code will be in the main loop() function, it will be called over and over again. That way we can create some simple animations and let the main loop() function drive them.

Right Turn Animation

When the glove is in the 'right turn' orientation, the NeoPixels are arranged as shown in the image below.

What would be neat is if we could make an arrow pointing to the right. Something like this:

It won't be a perfect arrow, but what about using NeoPixels 2, 5, 6, 7, 8, and 9? Here's the code to test this out.

Download: file
///////////////////////////////////////////////////////////////////////////////
// Circuit Playground Bike Glove - Right Turn Animation
//
// Author: Carter Nelson
// MIT License (https://opensource.org/licenses/MIT)

#include <Adafruit_CircuitPlayground.h>

#define BRIGHTNESS          255
#define RIGHT_COLOR         0xFFFFFF
#define ANIM_DELAY          200

///////////////////////////////////////////////////////////////////////////////
void rightTurnAnimation() {
  // just to be sure, turn off all NeoPixels
  CircuitPlayground.clearPixels();  

  // turn on NeoPixels to make an arrow shape
  CircuitPlayground.setPixelColor(2, RIGHT_COLOR);
  CircuitPlayground.setPixelColor(5, RIGHT_COLOR);
  CircuitPlayground.setPixelColor(6, RIGHT_COLOR);
  CircuitPlayground.setPixelColor(7, RIGHT_COLOR);
  CircuitPlayground.setPixelColor(8, RIGHT_COLOR);
  CircuitPlayground.setPixelColor(9, RIGHT_COLOR);

  // wait a little bit
  delay(ANIM_DELAY);

  // turn them all off
  CircuitPlayground.clearPixels();

  // wait again
  delay(ANIM_DELAY);  
}

///////////////////////////////////////////////////////////////////////////////
void setup() {
  CircuitPlayground.begin(BRIGHTNESS);
}

///////////////////////////////////////////////////////////////////////////////
void loop() {
  rightTurnAnimation();       
}

The functions rightTurnAnimation() does one 'frame' of the animation. Then, it is called over and over again by being placed in the loop() function.

Does this look like an arrow to you? Maybe. Kind of? Well, for now we'll just go ahead and use this as our right turn animation.

Left Turn Animation

When the glove is in the 'left turn' orientation, the NeoPixels are arranged as shown in the image below.

This is rotated from the right turn orientation, so the NeoPixels are arranged differently. In this arrangement, trying to make a left arrow is a bit of an issue.

Hmmmm. There are only a couple of the NeoPixels that seem to form an arrow. Maybe it would be enough to just use 8, 9, 0, and 1. But let's try something different for the left turn animation. We can make a neat chaser effect and light up the NeoPixels one at a time, moving from right to left. So first 5 & 4, then 6 & 3, then 7 & 2, then 8 & 1, and finally 9 & 0. Something like this:

Here's the code to test this out.

Download: file
///////////////////////////////////////////////////////////////////////////////
// Circuit Playground Bike Glove - Left Turn Animation
//
// Author: Carter Nelson
// MIT License (https://opensource.org/licenses/MIT)

#include <Adafruit_CircuitPlayground.h>

#define BRIGHTNESS          255
#define LEFT_COLOR          0xFFFFFF
#define ANIM_DELAY          200

///////////////////////////////////////////////////////////////////////////////
void leftTurnAnimation() {
  // just to be sure, turn off all NeoPixels
  CircuitPlayground.clearPixels();

  // Turn on 5 & 4
  CircuitPlayground.setPixelColor(5, LEFT_COLOR);  
  CircuitPlayground.setPixelColor(4, LEFT_COLOR);
  delay(ANIM_DELAY);
  CircuitPlayground.clearPixels();

  // Turn on 6 & 3
  CircuitPlayground.setPixelColor(6, LEFT_COLOR);  
  CircuitPlayground.setPixelColor(3, LEFT_COLOR);    
  delay(ANIM_DELAY);
  CircuitPlayground.clearPixels();

  // Turn on 7 & 2
  CircuitPlayground.setPixelColor(7, LEFT_COLOR);  
  CircuitPlayground.setPixelColor(2, LEFT_COLOR);    
  delay(ANIM_DELAY);
  CircuitPlayground.clearPixels();

  // Turn on 8 & 1
  CircuitPlayground.setPixelColor(8, LEFT_COLOR);  
  CircuitPlayground.setPixelColor(1, LEFT_COLOR);    
  delay(ANIM_DELAY);
  CircuitPlayground.clearPixels();

  // Turn on 9 & 0
  CircuitPlayground.setPixelColor(9, LEFT_COLOR);  
  CircuitPlayground.setPixelColor(0, LEFT_COLOR);       
  delay(ANIM_DELAY);
  CircuitPlayground.clearPixels();    
}

///////////////////////////////////////////////////////////////////////////////
void setup() {
  CircuitPlayground.begin(BRIGHTNESS);
}

///////////////////////////////////////////////////////////////////////////////
void loop() {
  leftTurnAnimation();       
}

Just like before, the leftTurnAnimation() function does one pass through the animation. Then it is called over and over by the main loop().

This looks pretty cool, so let's use it for our left turns.

This guide was first published on Jun 05, 2017. It was last updated on Jun 05, 2017. This page (Turn Signal Animations) was last updated on Jul 16, 2019.