Lesson 10: Arrays and Color LEDs
App Lab | Maker Toolkit
An array is an ordered collection of items, usually of the same type. In this lesson, students learn ways to access either a specific or random value from a list using its index. They then learn how to access the colorLEDs array that controls the behavior of the color LEDs on the Circuit Playground. Students will control the color and intensity of each LED, then use what they have learned to program light patterns to create a light show on their Circuit Playground.
Arrays are a common data structure in computer science, used to make storing and accessing information easier. The lesson prepares students to access items within an array, but doesn't yet cover creating and modifying arrays, which will be addressed in the following lesson. Students are also introduced to the ring of color LEDs, which are exposed as an array called
colorLeds. Students learn how to access and control each LED in the array individually, preparing them to access multiple LEDs though iteration later in the chapter.
Warm Up (5 min)
Activity (45 min)
Wrap Up (5 min)
Students will be able to:
- Access an element in an array using its index
- Use the color LED array to individually control each color LED
- Use the color() and intensity() methods to control each color LED
Warm Up (5 min)
Discussion: What is a List?
Set Up: Have students take out their journals. In their journals have students respond to the following prompt.
While the types of lists students come up with vary from class to class, the two main characteristics of lists that students should understand is that they usually are comprised of items of the same type (tasks to complete, names of people, song titles, grocery items, etc.) and that they have an order. Some common types of lists include a to-do list, a class roster, a playlist, or a grocery list.
Prompt: What is a list? What do you use lists for?
Discuss: Once students have had time to write down their own thoughts, have them share out to the whole class. Work as a class to try to get an understanding of what a list is.
Activity (45 min)
Arrays and Color LEDs
Transition: Head to Code Studio
Wrap Up (5 min)
Discussion: Objects Vs Arrays
An Object is a data structure that combines many values (such as numbers, strings, and even functions) that represent the attributes of that object (height, width, rotation, name) which are easier to keep track of if done in one place. The attributes can be of many different types but they all describe one object.
Prompt: You have now seen both objects, such as the Sprite object, and arrays. How is an array different from the attributes of an object? When would you use an array? When would you use an object?
You can either use this as an exit ticket or have a class discussion if you have time.
The code below will display four things on the screen. What do you think they will be?
Starter code has been provided that creates a list called
colors and uses it to set the colors of the rectangles on the screen. Unfortunately, the colors are out of order.
- Change the index numbers inside each selection block to make the rainbow appear as in the picture on the right.
Accessing Items in an Array
This program uses the Circuit Playground. It creates an array of the days of the week. When the left button is pressed, it displays the day as "Tuesday".
- Add code that will display the day as "Thursday" when the right button is pressed.
You can also select a random element in the list by using the
randomNumber block instead of an index. This program selects a random icon from a list and displays it on the screen when the left button is pressed. Right now, the icons are always blue.
- Add code that will select a random color from the list and use that as the icon color.
This program is like the last one, but the icons should always match the colors (red heart, yellow star, green leaf, and blue water). You can do this using the variable "myIndex", which will store the value of a random number so that it can be used to get the icon and the color from the same place on each list.
- Change the code so that both the icon and its color are chosen using the "myIndex" variable.
This program uses the colorLEDs array, which lets you control the color LEDs in your Circuit Playground.
What do you think this code will do? Write your prediction in the box below, then run the code to see what happens.
The color LEDs can use the same basic commands that you used with the red LED, such as
off(). This program should turn on and off the bottom LEDs as shown in the picture, but only one LED is working.
- Read and run the code to see how the program turns the bottom left LED on and off.
- Add more code to make both bottom LEDs turn on and off.
Adding Some Color
You probably noticed when you used
colorLeds.on() in the last level, the LEDs turned on as white. If you don't specify a color,
on() will turn on all three parts of the LED (red, green, and blue) to produce white. You'll see a new command in the toolbox called
colorLeds.color() which lets you specify a color, either as a string like "blue" or an RGB value using color
.color() command to set each of the color LEDs to a different color.
Can you debug the index values so that the rainbow shows up on the board like in the picture?
intensity() command lets you set an LED's brightness (or intensity) from 0 - 100. This program lets you choose three levels of brightness for your rainbow lights, but the medium level doesn't work yet.
- Read the program and see how the "Bright" and "Dim" buttons work.
- Add code to make the "Medium" button make the rainbow a medium level of brightness (between "Bright" and "Dim"). (Show me where)
This app already has one light pattern program, which can be activated by clicking a button. Notice that we put this pattern into a function to make the code cleaner and clearer.
Create a light pattern function of your own - maybe the colors of your favorite holiday, college, sports team, or try to create an image with the lights.
After you've created your new function, add a button and event handler so that you can switch between the two light patterns.
Turning It Off
When you start this app your lights are off, but as soon as choose a pattern, there's no way to turn the lights back off!
Create a function that turns all of the LEDs off, and then add a "Off" button to your app and make it turn off all of the color LEDs.
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
- 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
CS - Computing Systems
- 2-CS-02 - Design projects that combine hardware and software components to collect and exchange data.