Lesson 10: Arrays and Color LEDs
App Lab | Maker Toolkit
Overview
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.
Purpose
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.
Assessment Opportunities
-
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
Agenda
Lesson Modifications
Warm Up (5 min)
Activity (45 min)
Wrap Up (5 min)
View on Code Studio
Objectives
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
Vocabulary
- Array - A data structure in JavaScript used to represent a list.
Introduced Code
Teaching Guide
Lesson Modifications
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.
Discussion Goal
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.
Remarks
When we program, we sometimes want to store lists of items. In Javascript, we do this using an array. An array is a collection of items that are stored in a particular order. We're going to look at different ways to use arrays, and then see how they will help us to control more LEDs on the Circuit Playground.
Activity (45 min)
Arrays and Color LEDs
Transition: Head to Code Studio
Wrap Up (5 min)
Discussion: Objects Vs Arrays
Content Corner
Arrays are frequently used to collect items of the same type (a bunch of numbers, a bunch of strings, a bunch of button names, etc), but in JavaScript all list items need not be of the same type. You can create lists the include numbers, strings, objects, and even other lists.
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.
- Lesson Overview
- Student Overview
- Video: Introduction to Arrays
- Teacher Overview
- Student Overview
Discussion Goals
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.
Questions to Consider
- When might an array be more useful than a variable?
- Why do you always need to assign an array to a variable?
- How can you access the elements in your array?
Student Instructions
Predict
The code below will display four things on the screen. What do you think they will be?
Student Instructions
Index Practice
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.
Do This
- Change the index numbers inside each selection block to make the rainbow appear as in the picture on the right.
Student Instructions
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".
Do This
- Add code that will display the day as "Thursday" when the right button is pressed.
Student Instructions
Random Selection
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.
Do This
- Add code that will select a random color from the list and use that as the icon color.
Assessment Opportunities
Access an element in an array.
Extensive Evidence
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.
Convincing Evidence
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.
Limited Evidence
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.
No Evidence
Index notation is not used.
Student Instructions
Using Variables
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.
Do This
- Change the code so that both the icon and its color are chosen using the "myIndex" variable.
- Using Arrays
- Student Overview
Student Instructions
colorLEDs
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.
Student Instructions
colorLeds
The color LEDs can use the same basic commands that you used with the red LED, such as on() and off(). This program should turn on and off the bottom LEDs as shown in the picture, but only one LED is working.
Do This
- 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.
Student Instructions
Adding Some Color
You probably noticed when you used colorLeds[0].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[0].color() which lets you specify a color, either as a string like "blue" or an RGB value using color color() command.
Do This
Use the .color() command to set each of the color LEDs to a different color.
Student Instructions
Debug: colorLeds
Can you debug the index values so that the rainbow shows up on the board like in the picture?
Student Instructions
Changing Brightness
The 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.
Do This
- 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)
- Circuit Playground: Color LEDs
- Student Overview
Student Instructions
Light Patterns
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.
Do This
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.
Assessment Opportunities
Access elements in arrays, and develop software to control a variety of physical devices.
Extensive Evidence
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.
Convincing Evidence
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.
Limited Evidence
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.
No Evidence
There is no new code that turns the LEDs on and off.
Student Instructions
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!
Do This
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.
- Challenge Levels
- Extra
Student Instructions
Challenge: More Patterns
Add some more patterns to your app. Find a partner and add their pattern as an option. Make sure to put each pattern into its own function.
Standards Alignment
View full course alignment
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.