This code will create a slowly animating gradient of 2-3 colors. Each time you touch the D0 pad on Gemma, the gradient will shift to a new color range. You can make an animated gradient that matches every outfit you have, without having to change the code. It's a bit more involved to build, but so satisfying to have so much control over what your lights are doing.
The first part of the code is exactly the same as in the Simple Rainbow code, so start there. Get your on start loop all set up, then come back here to continue.
Create some variables. In the VARIABLES tab, make a variable called hue, one called gradient, and one called toggle. Drag an instance of set gradient to 0 into the on start loop. Drag a second instance make it read set hue to gradient.
These variables will allow us to change and store color values on the fly. Variables are essential to creating smooth color animations.
Go to MORE and drag an instance of set strip pixel 0 to red into your forever loop. From the LIGHT tab, replace the red with hue 255 saturation 255 value 255. Then from the VARIABLES tab, replace the hue value with your hue variable.
To get the animation to move along the strip and light up all the pixels one by one, add an instance of MORE > strip rotate by 1 into your forever loop. Then go to LOOPS and add a pause 100ms block to slow the animation down a bit. You can change this number to whatever you'd like to change the speed of the motion.
Hue, Saturation and Value
Hue, saturation and value are a means of defining a specific color using just numbers, on a scale of 0-255.
Hue refers to the color on the spectrum -- red, blue, purple, etc. Red is at 0, blue is at around 140, purple comes in at around 180, and the spectrum loops around back to red at 255.
Saturation refers to how pastel or how vivid the colors are: 0 is a plain white, no matter what your hue is -- any completely unsaturated color just turns white. 255 is fully vivid and saturated with color.
Value, for our purposes, refers to the brightness or intensity of the color. The higher the value, the more red or blue is added.
You can read far more than you ever wanted to know about this on Wikipedia. What matters to us is that we can mess with the NeoPixel colors in all sorts of fun ways using hue, saturation and value. For this animation, we will focus on messing with hue and leave the saturation and value alone.
From the VARIABLES tab, drag an instance of change hue by 0 into your forever loop. Change it to read change hue by toggle using an instance of the toggle variable you made earlier. We'll use this variable to change the hue upwards or downwards by a set amount, giving us a gradient effect.
Now we'll set up a conditional limit on the hue. This means the hue value will count up until it reaches its top limit, then it will start counting down again until it hits its bottom limit. From the LOGIC tab drag an instance of if/then/else into your forever loop. Click the + and - buttons until it looks like the picture. Then drag a conditional 0 = 0 block to replace each true statement. Change the first = to >= and the second to <=.
Now drag your hue variable to replace the first 0 in each conditional statement. Drag your gradient variable to replace the 0 in the second block. Add set toggle to 0 inside both slots. Set the first toggle change to -5 and the second to 5.
From the MATH tab, grab an instance of 0 + 0 and replace the remaining 0 in the conditional statement. Insert the gradient variable to replace one of these 0s, and change the other to 75, making the line read hue >= 75 + gradient.
Check out the emulator. You should see a gradient animation that rotates from red to orange and a bit into green before rotating back to red and repeating. What is happening here?
The hue variable tells pixel 0 what color to be. Then, the rotate block tells pixel 1 then pixel 2 etc to become that color. This creates the animation.
By changing the value of hue, each time the forever loop runs will tell pixel 0 (and then subsequently the other pixels) to be a slightly different color. Since our gradient value started at 0 (remember, in our on start loop we specified this) then the hue value will increase by 5 each time until it reaches 75, at which time it will start counting down by 5. When it reaches 0, it will start counting up again.
The magic here is that we can change the starting value of gradient, and the whole thing will hang together and show whatever portion of the spectrum we want. Try changing gradient to 50 or 100 in your on start loop and see what happens to the LEDs in the emulator.
We can harness this magic! We'll set it up so each time we touch one of Gemma's capacitive touch pads, the value of gradient changes by 50. This will allow us to change to whatever colors we want just by touching the Gemma.
From the INPUT tab drag an instance of on touch D0 click into your workspace. Place an instance of change gradient by 0 inside and change the 0 to 50. Now each time you touch the D0 pad the value of gradient will increase by 50.
This will work perfectly for the first 5 times you touch it. But once the value of gradient surpasses 255, it will stop changing. Remember, we're looking for a hue between 0-255, so let's add some code that will reset the value to 0 if it gets too high.
Drag an if/then block form the LOGIC tab. Make it read if gradient >= 255 set gradient to 0. Then drag an instance of VARIABLES > set hue to 0 and make it read set hue to gradient. Now the value will reset and cycle through the colors over and over.
Try this out with the emulator. Click the D0 button and watch to see if the LED animation changes in a way that pleases you. Try changing some of the values to tweak it so it does exactly what you want.
Extra Credit - Add a Feedback Blink
I finished this code and downloaded it. It works great, but because of how it refreshes it's a little hard to tell whether the touch was actually sensed or not. I found myself unsure as to whether it worked, so I decided to add some code to make the pixels blink a bit when a touch was sensed. This made the whole thing a bit more satisfying to use.
From the LIGHTS > MORE tab drag two instances of set strip to red into your on click loop above the last block. Change the first one to black. Drag two instances of pause 100 ms in between, changing the 100 to 500. This will pause for a half second, creating a satisfying blink.
Then change the second red to hsv (from the LIGHT tab) and replace the hue value with gradient. This will make the blink happen in the same color range you're already in.
Click the D0 pad on the Gemma emulator to test and see how it works. If you're happy, it's time to download to the Gemma.
Click the Download button, and plug your Gemma into your computer via the USB port.
Click the Reset button on the face of the Gemma and a drive will appear on your computer called GEMMABOOT. This means it's in bootloader mode and you can program it. Drag the file you just downloaded onto that drive.
Another way to tell if Gemma is in bootloader mode is that you'll see a red and green light on the Gemma's face. Once you've downloaded the code to Gemma, the light will be magenta and the code will be running. To get back into bootloader mode for another download, just click the reset button again.
Troubleshooting
If the GEMMABOOT drive is not appearing, first check to be sure that the on/off switch on the face of the Gemma is switched on. It's easy to miss!
Next, try using a different USB cable. Some cables are "charge-only" and won't pass data. Also try using a different USB port on your computer (mine is sometimes twitchy).
If it's still not working, head over to the Gemma M0 intro guide for more suggestions.
If you can drag the code onto GEMMABOOT but your LED strand isn't lighting up, check to be sure that your code reflects the pin you soldered to (did you remember to change to D1?). Also be sure you've soldered your connector to the IN end of the LED strand -- it won't work if you soldered to the OUT end.
Text editor powered by tinymce.
