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
hue 255 saturation 255 value 255. Then from the VARIABLES tab, replace the hue value with your
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 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
- buttons until it looks like the picture. Then drag a conditional
0 = 0 block to replace each
true statement. Change the first
>= 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
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?
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
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
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.
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.
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
500. This will pause for a half second, creating a satisfying blink.
Then change the second
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.
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.