U3LA.2.2: Arrays with floor() and random()

How can arrays help us simplify code?

Teacher Notes && Overview

In this lesson, students will continue to practice creating and reading arrays by randomly choosing elements from an array. This lesson is very brief and serves as a soft launch into the next mini project, which is essentially a longer, more creative student practice for this lesson. While they are separated here for readability, please plan to combine them during your instruction!

Selecting a random element from an array is an important concept to know when working on this unit's final project. It would be a good idea for students to share out their solutions to the exercises so that you can clear up any misconceptions.

Nota Bene:

As a note for you, random() as it exists in this curriculum is dependent on the p5.js library. Outside of that, there is a random function in the JavaScript Math library - you would access using Math.random(). However, this function only returns values between 0 and 1, so to use as we have been, there is need to multiply the value by 100. Essentailly, p5.js is doing all of this for us behind the scenes!

It's also worth noting that a part of this abstraction to the p5 random() function is that you can say random(array) and get a random value automatically from the array. This essentially eliminates the need for this lesson, however, it abstracts out some concepts that students may need to work in other programming languages down the road, so we still view this lesson as important. However, if you have students who are truly struggling, this is an option to explore.

Objectives

Students will be able to:

• Explain how the random() function serves to return a random number

• Explain how the floor() function returns the input, rounded down

• Use the combination of random() and floor() to select random elements from arrays

Suggested Duration

45 minutes (~1 class period)

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.CT.7 Design or remix a program that utilizes a data structure to maintain changes to related pieces of data.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

• Array - an ordered series of data

• Index - a position within an array

• Zero-Indexed - The first element of an array has an index of 0, not 1

• Element - a piece of data in an array

• floor() - rounds down to the nearest integer value

• random() - a function that will return a random number in between its two parameters

• .length - accesses the property of an array and returns the length as a numeric value

Planning Notes && Materials

Planning Notes	Materials
There are no specific planning notes for this lesson, but it is the first lesson students will be using media - whoo!	No special materials needed.

Resources

• Choosing Random Values from an Array (Youtube Video)

• 7.1 What is an Array? | Code (6.1)

• Learning Processing: Chapter 9. Arrays

• Getting Started With p5.js: Chapter 4. Variables (Section: Repetition)

Assessments

Formative:

• Do Now - ability to pull from an array

• Learning Activity - use of random() and floor()

Summative:

• Create a Fortune Teller

Do Now/Warm Up (5-8 minutes)

Open a blank editor and using whatever color-choosing application you like, create an array of at least 10 different colors. (If you have time, continue adding colors.)

Students should use their work from the previous lesson as reference - as they begin this warm-up activity, circulate to ensure that you can help them troubleshoot any errors as they get used to both arrays and storing this particular data type in arrays.

random() and floor() functions (~8 - 15 minutes)

Explain to students that today, they are going to build a program with shapes that change color randomly whenever the program is run. This should feel familiar - they've done it before - but they've never done it by pulling random values from the array. And since that can be a little tricky, that will be the focus!

random() was introduced way back in Unit 1 (and likely used in Unit 2), so this should be familiar to students. If you think it's needed, feel free to take some time and review the following:

• random() is a different sort of function than something like ellipse() - like some of the ones we've written, it returns a value instead of displaying something on the screen.

• It returns a random value based on a maximum (like random(100), which would be any number between 0-100) or a range (like random(5,50) which would be any number between 5-50).

• We can use this anywhere we would use a number, or even call it to stash our random value in a variable, as has been our best practice.

• The value will be randomized each time the random() function is called.

Ask students to put a shape somewhere on their canvas and explain we will be giving this shape a random fill from our array.

The first attempt might look something like this, and will certainly end in an error:

let palette1
let randomColor

function setup(){
 createCanvas(400,400)
 
 palette1 = [color(252,214,202), color(217,138,124), 
 color(240,101,89), color(219,117,116), color(255,28,82)]
 
 randomColor = random(5) //5 is the length of the array
}

function draw(){
  background(220)
  
  fill(pallete1[randomColor])
  ellipse(200,200,100)
}

So, why did this end in an error? Well, if we comment out the fill line and add this in the setup after line 10:

console.log(randomNumber)

We should see that we are getting random numbers, but they are not random numbers that exist in our array. Things like 3.1415903 aren't values that are in our array - so we need to make sure that our program is rounding down to the nearest whole integer.

Why round down? Our ellipse goes 0 - 4 even though there are 5 items - if we rounded up (as you can with the p5 function int()), we would need to make some adjustments later. Which is fine, just a choice that can be made!

Show students this adjustment that can be made to the code:

let palette1;
let randomColor;

function setup(){
 createCanvas(400,400)
 
 palette1 = [color(252,214,202), color(217,138,124), 
 color(240,101,89), color(219,117,116), color(255,28,82)]
 
 randomColor = floor(random(5)) 
 //floor takes the random value and rounds it down
 //5 is the length of the array
 
 console.log(randomColor)
}

function draw(){
  background(220)
  
  fill(pallete1[randomColor])
  ellipse(200,200,100)
}

We should now not only see numbers being logged that are within our array, but we should also be able to get an ellipse with a random fill and no error messages. Hoorah!

There's just one more thing we need to fix before we go off to play with this idea. Notice how right now, we are taking saying random(5) because the array is 5 items long? That could become a problem later if I were to add colors but forget to update this piece of code. Or what if I was making a program where users could add their favorite colors and the program would draw with them?

Right now, the 5 in our random function is what we call a hardcoded value. Things that are hardcoded will always be the same in a program - and there are plenty of things we would want to be hardcoded, such as the score of a game starting at 0, or the timer for a soccer match half starting at 45, for example. But in this instance, we want to make sure that the value in random is dynamic so that if we make changes to our ray, the rest of our program is taken care of.

Remember that .length property we learned about in the last lesson? This is where it can come into play, like so:

randomNumber = floor(random(pallete1.length))

Essentially, this is what is happening in our code:

Breakdown of the order of operations in choosing a random value based on the length of an array.

By changing the value to the length of the list, we will ensure that even if our lists gets longer (or shorter), the code will always work correctly. This kind of thinking is a best practice as we continue to make our programs more and more complicated. Always be asking yourself: what can I do to make sure this won't break in the future?

Student Practice (10 - 20 minutes)

NB: Allot as much or little time as you'd like for this - it could easily become a quick CFU before moving into the fortune teller mini project, which is a much more engaging practice, but not as repetitive as this suggested exercise.

Ask students to create a design where at least 5 shapes change randomly using colors from the array. All shapes in their design should pull colors from the array, to practice calling array elements again, but they do not all need to be randomized.

Wrap-Up (5 min)

Ask students to post their project links in a forum such as Slack or Google Classroom. Then, have them view and comment on two other projects, leaving a glow and grow for each

Guiding questions:

• How can we use the random function to select a random element in the array?

• What would happen if we did not use the floor function?

Extensions

There are several ways that students can push their understanding of arrays:

• Ask students to create a button that will 'reroll' the randomly chosen colors.

• Have students create an array to hold the random values they generate. They can explore using .push() to add values to an array, and then call the values of that array for each shape. (This won't be as neat as it could be, yet, since they have not yet explored for loops and arrays.)

• Which goes to say - could they create a for loop to work through some of the array stuff? Advanced exploration!

• Learn about the createColorPicker() function and use that to .push() values to the palette array. (.value will allow them to access the actual color selected by the picker.)