Welcome! You made it!

Read this first: 

In this post, I'll share the "base code" that I've created for LED bike club. This is the simplest version of what we can make, and will act as a jumping off point for you to customize your project. 

There are two parts to this post:

1. How to Download the Code to micro:bit: Get going quickly by downloading the example just the way it is.
2. Building the Code from Scratch: Learn to build the code block-by-block. I highly recommend reading through the tutorial and creating the code from scratch in a new project. This will help you become familiar with the block coding language and understand "what is happening where" in the code so that you can make changes later. If you're a new coder - it's totally ok if it doesn't make sense right now! A college coding class would take all semester to explore the concepts used in this code.  

Questions? Ask in the "LED Bike Code" channel on Discord. 

How to Download the Code to micro:bit

Get the Code:

1) Copy this URL: https://github.com/technochic/single-led-strip-with-group-radio-control

2) Go to makecode.org

3) Click on Import

4) Click "Import URL..."

5) Paste the URL and "Go ahead!" and open the file!

Customize the code for your LEDs

The standard code expects that 24 neopixels are connected to Pin 2. Update the code to reflect the number of LEDs you have, and change the Pin if you used a different one:

Download Code to micro:bit

Adding the code to your micro:bit is very similar to adding a file to a flash drive:

• Connect your micro:bit to your computer with a USB cable
• Click the big "Download" button to download the .hex file
• Move the .hex file from your computer onto the MICROBIT drive

Some browsers allow you to connect directly to the micro:bit and download the code without having to leave the browser. Read more about uploading programs to the micro:bit here. 

If you're using a supported browser, (I use Chrome on Mac), click "Connect device" in the "..." menu. Once connected, clicking the big purple download button will add the code to your micro:bit and you're good to go! 

Now, you can connect your circuit, add a battery and light up the night!

Building the Code from Scratch:

Go to makecode.microbit.org and start a new project. 

Add Neopixel functionality to your Make Code program.

Go to the gear menu on the top right, then click "Extensions":

Click on "neopixel". (You may need to use the search bar to find it.)

Now, you should see “Neopixel” in the sidebar as shown below. 

Notice that the menu also has many other folders - these contain the blocks that we will use for our code. If you can't find a block, you can also search for it using the search bar at the top of the menu. 

Start & Forever

The project contains two functions:

on start: This function runs at the beginning of the program, before any other code. This is where we will place blocks of code that "set the stage", like setting the radio channel and the neopixel locations. 

forever: After the "on start" function runs, the forever function runs, well, forever! Once it gets to the end of the code it starts again a the top and loops through the code again and again. It's like the "Groundhog Day" of code.

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. 

Click on "Radio" in the menu and drag the “radio set group (1)” block to your "on start" block like this:

Initiate NeoPixel Strips 

From the "Neopixel" menu, drag the "set [strip] to NeoPixel..." block to "on start" as shown:

NeoPixels are connected to a pin and run along a strip with a certain number of LEDs. Your code needs to know what pin the neopixels are connected to and how many LEDs you have.

I use Pin 2, abbreviated to P2 in the drop down menu, with 24 neopixels. The number of LEDs depends on how many neopixels your specific project has, so be sure to update that number in the code block as well. 

The simulator will show you the strip and pin connections on the left side of your screen:

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 in the color chart section 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.

Name / Value Pairs

This information will be sent as a name value pair, first naming the type of data and then giving it a value. For example, Natasha's controller will send “mode: 8” or “beat: 3”. Your program will be able to make sense of it with the "on radio recieved: name, value" function block, found in the "Radio" menu: 

Add a bit of Logic

When the radio receives data, we want to check to see whether the data is the "mode" or the "beat" and act accordingly. Here's how we'll set that up:

Add a Logic Block to compare

Drag the "if <true> then" Logic block to the "on radio received" function as shown: 

The code inside the "if" block only runs when the "<condition block>" is true. If it isn't true, the code skips over those blocks.

In the Logic menu, locate the comparison operator block with quotes. This will let us compare text, also called a "string" in programming. 

Drag it to the "if...then" block, replacing the word "true":

Now, drag the word "name" from the "on radio received" block to the first set of quotes. 

Finally, type the word "mode" between the second set of quotes:

Great! Now, if the name of the data is "mode", any blocks inside the "if" block will run. If the name isn't "mode", it will skip this block and move on to the next. 

One more!

Add another "if" block to run if the name is "beat":

Variables

To keep the value of the mode and the beat, we need to create variables for them. 

In the Variables menu, click "Make a Variable..." and name it "currentMODE".

Drag the new "set [currentMODE] to _" block inside the "if name = "mode"" block. Then, drag "value" from the "on radio received" block into place. 

Next, Create another variable and name it "beatNOW". Drag the "set [beatNOW]" block into place, setting it to the incoming value just as in the last step. 

Here's how it works:

If the data's name is “mode”, it sets the variable "currentMODE" to the incoming value. If the data's name is “beat” it sets the variable called "beatNOW" to the incoming value. 

From here, you can set your code to do different things based on the value of the "currentMODE" or "beatNOW" variables.

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.

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 menu, add the block called "show rainbow from _ to _". If you'd like, experiment with changing the numbers in from _ and to _.

In the forever loop, add "call rainbow" from the Functions menu to "if (currentMODE) = 1": 

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. 

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

Change the mode yourself!

Thus far, the only way to change the mode has been the radio. But what if Natasha isn't around? And how will you know if it is working? Here's how you can change the mode locally on the micro:bit using the built-in buttons:

In the Input menu, choose the "on button [A] pressed" block. Drag a second block to the canvas and change the dropdown to "B".

From the Variables menu, drag the "change [currentMODE] by _" block to both button blocks. 

On the button A block, change the number to "-1". This will allow you to press the A button to go back (because it's on the left) and the B button to go forward through the different modes. 

Finally, add a "set [currentMODE] to _" block to the "on start" block. This will initialize the variable so that it has a value to start with. 

Test it out! 

Now, you can click on the buttons on the micro:bit simulator and see the LEDs change color. 

Download Code to micro:bit

Follow the download instructions from above to move your code to micro:bit.

You did it!

Questions? Ask in the "LED Bike Code" channel on Discord.