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.
///////////////////////////////////////////////////////////////////////////////
// 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.
///////////////////////////////////////////////////////////////////////////////
// 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.
Text editor powered by tinymce.
