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.
Access an element in an array using its index
Code Studio: See the rubric on bubble 7 and the quick check on bubble 9
Use the color LED array to individually control each color LED
Code Studio: See the rubric on bubble 17
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
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, we have recommendations for alternate lessons that can be used for this unit on physical computing. Click Here to read our recommendations for Unit 6.
Warm Up (5 min)
Maker App Updates
For Windows & Mac users: we've recently updated the way that students can log in with Google using the Maker App. Please see this forum post for more information about these updates and how to continue using Google to log in to the Maker App.
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.
This is the first introduction to arrays, and students will have an opportunity to try them out in the lesson, so understanding why arrays are helpful and the general ways that can use them is more important than the particular syntax or commands in the video. Students should understand that arrays are intended to hold several pieces of information, usually all of the same type. Just like any other piece of information, it needs to be assigned to a variable for a programmer to find it again. Programmers can access each element of the array by its index, or its position number in the array. Students will have a chance to practice the exact syntax in the lesson.
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.
Access an element in an array.
The program randomly displays a matching color and icon combination as described in the instructions. The elements in the array are accessed using the "myIndex" variable, and there is no unnecessary code in the program.
The program randomly displays a color and icon combination. The elements in the array are accessed using the "myIndex" variable, though there may be minor errors that prevent the program from running exactly as described.
Index notation is used to access an element from an array, although there may be major errors in the program that prevent it from running properly.
Index notation is not used.
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.
Access elements in arrays, and develop software to control a variety of physical devices.
The program works as described, has three buttons, two of which turn the color LEDs on in a distinctive pattern, and one of which turns the color LEDs off. There is no unnecessary code in the program.
The program generally works as described, has three buttons, two of which turn the lights on in a distinctive pattern, and a function that turns the color LEDs off. There may be minor errors in the program.
There is code in the program that turns the LEDs on and off, but there may be major errors that prevent the program from working properly.
There is no new code that turns the LEDs on and off.
Turning It Off
When you start this app your lights are off, but as soon as you 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.