CS4All Resources

U4LA3.1: Creating Many Objects

How can I use Classes, arrays, and for loops to generate many objects?

Teacher Notes && Overview

In this lesson, students will combine things they have been learning in Unit 4 with prior skills form Unit 3 to create a class and generate many objects. They will have exploratory time to add more functions to these many objects and experience how powerful Classes and objects can be at this scale.

Objectives

Students will be able to:

  • Save objects in a list

  • Utilize for loops to generate many objects

  • Utilize for loops to execute methods on objects in a list

Suggested Duration

~1 Period (45 minutes)

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.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

No new vocabulary is introduced in this lesson

Planning Notes && Materials

Resources

Assessments

Do Now/Warm Up (7 - 10 min)

Create a Bubble class that will contain all necessary properties to draw a moving Bubble (ellipse). It should also have methods to display, move (smoothly - no more random!), and bounce on edge.

If you finish early, consider styling your bubble, perhaps by making it slightly transparent so it's more bubble-ish.

Make Many Bubbles Code Along (15 - 25 min)

As students complete their warm up, bring them back together and make sure you are all on the same page and have a working class. You may want to have everyone utilize the Starter Code (p5 editor | repl.it) to make sure things work, or simply display the code and allow everyone to make edits so they have a Class that creates functional objects:

class Bubble{
  constructor(d){
    this.x = random(width)
    this.y = random(height)
    this.diameter = d
    this.xSpd = random(-3, 3)
    this.ySpd = random(-3, 3)
  }
  
  display(){
    fill(255, 255, 255, 50)
    stroke(255, 255, 255)
    strokeWeight(2)
    ellipse(this.x, this.y, this.diameter, this.diameter)
  }
  
  move(){
    this.x += this.xSpd
    this.y += this.ySpd
  }
  
  bounceOnEdge(){
    if (this.x > width-this.diameter/2 || this.x < this.diameter/2){
      this.xSpd *= -1
    }
    
    if(this.y > height-this.diameter/2 || this.y < this.diameter/2){
      this.ySpd *= -1
    }
  }
  
  animate(){
    this.display()
    this.move()
    this.bounceOnEdge()
    
  }
}

Once everyone is on the same page, create a single object and test that everything is working according to plan:

let bubble1

function setup() {
  createCanvas(400, 400);
  bubble1 = new Bubble(30, 30)
  
}

function draw() {
  background(220);
  bubble1.animate()
}

Then, explain to students that we are going to learn to make many bubbles on our canvas. This can be a confusing concept - right now, students just know that they would need to make many variables, and we haven't actually learned of a method that will automatically create new and named variable instances for us.

Instead, our solution is going to be to create our objects and load them into a list! Our empty list has infinite space to store objects, and we can use for loops to populate our list and to make our newly created objects function with methods on the canvas.

To start out, we need an empty array - let's call it bubbles. For the sake of readability, we will be deleting our one functional bubble for this lesson, but you can encourage students to simply comment it out.

let bubbles = []

function setup() {
  createCanvas(400, 400);
  
}

function draw() {
  background(220);
}

Now it's time to make our for loop. This loop is going to control how many Bubbles we put in our list and we can do it two different ways, but both will take place in setup:

//OPTION 1: This will create a new Bubble at i position in the list. Even though nothing is there (yet), this tells the computer to fill that empty spot with a Bubble.

function setup() {
  createCanvas(400, 400);
  for(i=0; i<10; i++){
    bubbles[i] = new Bubble(30,30)
  }
  
}

//OPTION 2: This uses the .push array method to add Bubbles to the end of the list. Both options get the same result - pick the one that you think will sit best with your class:

function setup() {
  createCanvas(400, 400);
  for(i=0; i<10; i++){
    bubbles.push(new Bubble(30,30))
  }
  
}

Whichever option we take, if we do try console.log(bubbles), we will see we have a list of all our Bubble objects. But just as in our Wiggler project, nothing is on our screen yet because we haven't told them they are supposed to be!

Let's head down to the draw function. We can use another for loop here to make things start happening on our canvas:

let bubbles = []

function setup() {
  createCanvas(400, 400);
  for(i=0; i<10; i++){
    bubbles.push(new Bubble(30,30))
  }
  
}

function draw() {
  background(220);
  
  for(i=0; i<bubbles.length; i++){
    bubbles[i].display()
  }
}

This for loop is iterating through our entire list, as we've seen in other projects, and for each bubble in the list, it's displaying the bubble. We could also add our other methods to this single for loop:

for(i=0; i<bubbles.length; i++){
    bubbles[i].display()
    bubbles[i].move()
    bubbles[i].bounceOnEdge()
  }

We can, of course, also just use our animate() method, but it's important for students to see and understand that they can call multiple methods in a single for loop. You may want to demonstrate to students how easily they can use this method to make significantly more than 10 bubbles - have them try to make 100 by adjusting the for loop in the setup function and see what happens!

OPTIONAL: Using forEach

If you reviewed with students, they can choose to use the .forEach() method on their list of Bubble objects. It would end up looking like this:

bubbles.forEach(bubble => {
    bubble.display()
    bubble.move()
    bubble.bounceOnEdge()
})

Student Exploration (15 - 25 min)

Give students options to continue working with their many objects! They may choose to:

  1. Return to the random wiggler - make many in different colors that spread across the screen.

  2. Create a method so the bubbles change color when they bump into each other (will need to link Collide2D if not using the starter code)

  3. Create a method so the bubbles bounce off each other when they bump into each other (will need to link Collide2D if not using the starter code)

  4. [Spicy] Recall what you learned about arrays. Can you create a method that can be used in function mousePressed() so that a bubble is deleted from the array - and thus the canvas - when clicked?

    • Bonus points to add sound to this!

Wrap-Up (5 minutes)

You may want to have students display what challenges they succeeded in or discuss sticking points. You could also have them respond to any of the following, either via discussion or written response:

  1. Think back to past projects - where did you experience many things that could've been better off as an object?

  2. How do you think you will use these skills in future projects?

  3. What was challenging about making numerous objects?

Extensions

Ask students to try to make another useful class and create many of the objects on the screen!

PreviousU4LA2 Mini Project: Build a TamagotchiNext🗃 Optional U4LA3 Mini Project: Rebuild with Objects

Last updated