Work in Progress
This post is in progress, please take a look now, and come back for more later!
Add Neopixel functionality to your Make Code program.
Go to Extensions in the gear menu, then click on ‘neopixel’:
Your install is successful when you see “Neopixel” in the sidebar as shown:
Set up your code to react to the group’s radio commands.
Set up the Radio:
This is like setting the “station” on your radio. We will use group 1. You must include the “radio set group (1)” block in your on start block like this:
Receive data over Radio.
Natasha will have a controller that will send two types of data, the “mode” and the “beat.” The mode will be used to change the bikes to a certain color or color scheme (described below). The beat will be used to add accents to the beat like getting brighter or initiating an animation sequence as you see in many music visualizations.
This information will be sent as a name value pair, first naming the type of data and then giving a value. For example, it will send “mode: 8” or “beat: 3”. Your program will be able to make sense of it with this block of code on the left. Simply put, when the radio receives information it checks if the data is the mode or the beat. If its name is “mode” it sets the value to a variable called currentMODE (you will need to create this variable in the variables section). If its name is “beat” it sets the value to a different variable called beatNOW.
From here, you can set your code to do different things based on the value of the "currentMODE" or "beatNOW" variables.
Initiate NeoPixel Strips
NeoPixels are connected to a pin and run along a strip with a certain number of LEDs.
The number of LEDs depends on what your specific project has. Your code needs to know what pin and how many LEDs you have, so add the “set” block to the “on start” as shown:
The simulator will show you the strip and pin connections on the left side of your screen:
Make it do stuff - together!
Now that your code can tell what mode the group is in and when a beat is dropped (drop that beat!) It's time to do something with the information.
In your “forever" loop, add an if statement like the one shown here.
If the value of currentMODE is 1, then it will call a function called “rainbow” (explained in the next section), and so on and so forth, all the way up to 16.
That’s right - we will have 16 color modes to choose from! This will give you tons of space to experiment with different animations.
Add a simple function: "rainbow"
To organize our code, we can put the code into "functions". When the mode changes, we will "call the function" to make it run.
Under "Advanced", click "Functions" and "Make a Function..."
Name the function "rainbow" and click done.
In the Neopixel section, add the block called "show rainbow from _ to _".
In the forever loop, add the "call rainbow" from the Functions section. If you'd like, experiment with changing the numbers in from _ and to _.
Add a function with a "color" variable
Let's make a function that turns all the pixels to a color at once.
Using the same process as you used for the "rainbow" function, create a new function, name it "solid" and call it in the if/else statement when currentMODE = 2.
Because the variable in the block is (red), this will program the strip to show red.
But wait! (There's MORE!) What if we want to use the same function again to turn the entire strip to a different color? For this, we can modify the function to accept a color variable so that we can call it over and over again and simply specify the color.
Right click on the function and choose "Edit Function".
Click "Number" from the parameter list at the top. Name it "Color1".
You now have the "color1" parameter available at the top of the function.
Drag "color1" to replace "red".
Now, in the forever loop, the function needs to know which color to show. (The 1 is the default placeholder).
From the "Neopixel" section, drag the "hue, saturation, luminosity" block into the solid function's variable spot. To show red, use these values: Hue = 10, Saturation = 100, Luminosity = 50.
Learn more about this color space in the next section.
All about Colors - Let's Sync Up!
The goal is to have all the bikes “go together” by changing to certain colors at the same time. This will allow for each person to customize and design their own animation and grow - from simply turning all one color to adding movement and animations.
First, a quick note on color:
We will be using the Hue, Saturation, Luminosity color chart for our colors. This is a simple way to reference color on the color wheel starting at red (0º) and moving through the rainbow and back to red again (360º).
This chart shows the standard colors to use in your design.
Hue = listed below *Saturation = 100 (except where noted) *Luminosity = 50
||Designs should show rainbows or use many colors
|2||Red||Hue = 10
|3||Orange||Hue = 30
|4||Yellow||Hue = 58
|5||Green||Hue = 105
|6||Cyan Blue||Hue = 180
|7||Dark Blue||Hue = 235
||Hue = 280
|9||Pink||Hue = 335
|10||Pink & Dark Blue||Hues same as colors above
|11||Reds & Oranges (Fire!)||Hues same as colors above
|12||Red, White, Blue||White: Hue = 0 and Saturation = 0, Other hues same as colors above
|13||Pink & White||Hues same as colors above
|14||Cyan, Magenta, Yellow||Magenta Hue = 316 Other hues same as colors above
|15||Green & Yellow||Hues same as colors above
|16||Black / Off||All LEDs off.|