Lists and loops

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can keep many values in an array and read one by its place number.
• I can use a for loop to do something for every value in an array.
• I can add to an array with push, and use random numbers.

Timing

Predict and Run 10 min · Investigate 15 min · Modify 15 min · Make 15 min

Before class

Read the unit primer first. This revisits the Python lists lesson in JavaScript: places count from 0, length says how many, and push is append. The new difficulty is the counting loop for (let i = 0; i < heights.length; i++): three parts in one line, which students copy until it makes sense; the lesson's text reads it aloud, and the trace table follows i and heights[i] together. The second idea is that rect hangs from its top-left, and y counts down, so a bar that stands on the bottom has its top at 200 - height: that is the Predict and the bug task. Random numbers make every Run different, so the Predict uses a fixed array.

Running the lesson

1. Predict: draw the canvas on the board and mark the bottom of the first bar.
2. Run: press Run again several times and ask what stays the same (the code) and what changes (the numbers).
3. Investigate: fill the trace together, writing each i on the board.
4. Modify: ask which two numbers must change for 20 bars to fit (the count and the spacing).
5. Make: encourage real data (sleep, steps, scores), and ask students to say what each bar means.

The hard part (on purpose)

The three-part for line. Have students say it aloud: start at 0, keep going while less than the length, add 1 each time.

When students get stuck

Answers to the checks

1. Predict: What does the sketch draw?
   Four bars standing on the bottom edge, the fourth tallest. Each bar's top is at y = 200 - its height, and it is that tall, so its bottom is at 200: the bottom edge of the canvas. The fourth value, 150, is the biggest.
2. Follow the loop: heights is [50, 120, 80, 150]. Fill in what the loop uses each time round.
   120, 80, 80, 120, 150, 50
   i counts 0, 1, 2, 3. Each time round, heights[i] is the value at that place, and the bar's top is 200 minus it: the taller the bar, the higher up its top.
3. The last place: The array has 10 values. What is the last place number?
   9
   Places count from 0, so ten values are places 0 to 9. The loop stops when i is not less than 10, so it never uses place 10.
4. Spot the bug: The bars hang from the top of the canvas instead of standing on the bottom. Click the line that is wrong.
   line 14
   rect's y is the bar's top edge, and y counts down. y = heights[i] puts the top at that depth. For a bar standing on the bottom, the top is at 200 - heights[i].
5. Where this leads: Each bar needs a height, an x, a colour and a speed. How could you keep all of that together for one bar?
   One thing that holds them all: an object
   Four arrays matched by place number break the moment one of them is changed alone. An object keeps everything about one bar together. That is the next lesson.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Twenty bars

let heights = [];

function setup() {
  createCanvas(300, 200);
  for (let i = 0; i < 20; i++) {
    heights.push(random(20, 180));
  }
}

function draw() {
  background(20, 30, 60);
  fill(255, 210, 0);
  for (let i = 0; i < heights.length; i++) {
    rect(i * 15 + 2, 200 - heights[i], 10, heights[i]);
  }
}

Modify › Tall and short

let heights = [];

function setup() {
  createCanvas(300, 200);
  for (let i = 0; i < 10; i++) {
    heights.push(random(20, 180));
  }
}

function draw() {
  background(20, 30, 60);
  for (let i = 0; i < heights.length; i++) {
    if (heights[i] > 100) {
      fill(255, 120, 160);
    } else {
      fill(255, 210, 0);
    }
    rect(i * 30 + 5, 200 - heights[i], 20, heights[i]);
  }
}

your own chart

let sleep = [7, 6, 8, 5, 9, 10, 8];

function setup() {
  createCanvas(300, 200);
}

function draw() {
  background(20, 30, 60);
  fill(120, 220, 255);
  for (let i = 0; i < sleep.length; i++) {
    circle(30 + i * 40, 190 - sleep[i] * 15, sleep[i] * 5);
  }
  fill(255);
  text("Hours of sleep, Monday to Sunday", 10, 20);
}

Stretch and support

Stretch: Add a second array of names, and draw each name under its bar with text(). Or sort the data first with heights.sort().

Support: Give students the loop and the rect line, and ask them only to change the numbers and colours.

Exit ticket

In heights[i], what is i, and where does it start?

i is the place number of the value in the array, and the first place is 0.

What each step is for

• Investigate: A loop with a counter i visits each place in an array; heights[i] is the value at place i, and a rect hangs from its top-left corner.
• Modify: More data is a bigger number in the loop; deciding inside the loop makes each item different.
• your own chart: Goals only: a list of real or random numbers, and a loop that draws one thing for each.

Where it leads

Next lesson: objects, so one list holds stars with their own position, speed and size.