🎨
[JS] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • 📬Leave Us Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt. 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Pathfinding Algorithms && Facial Scanning
    • Playing with Pixels
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes && Styling
    • 🗃️U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB && HSB
    • 🤓EXTRA: Color & Data Storage
    • 🤓EXTRA: Color Palette Practice
    • ✨U1LA3.1: Introducing Variables
    • ✨U1LA3.2: Creating Custom Variables
    • ✨U1LA4.1: What is Abstraction?
    • ✨U1LA4.2: Intro to Functions && Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • 🗃️U1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • 🎨Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw on Canvas
    • 🔮Unit 2 Overview
    • ✨U2LA1.1: Conditionals and If Statements
    • ✨U2LA1.2: Conditionals and if, else if, and else statements
    • ✨U2LA1.3: Logical Operators And/Or
    • 🗃️U2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • ✨U2LA3.1: Data Type Scavenger Hunt
    • ✨U2LA3.2: Functions that Return Values
    • 🤓U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions && Collide2D
    • U2LA4.2: Mouse Clicks && Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses && Nested Conditionals
    • 🎨Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • 🔮Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • 🗃️U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • 🗃️U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • U3LA2.4: Updating and Deleting from Arrays
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars Array Challenges
    • U3LA3.1: Preload, Images, Tint
    • 🤓U3LA3.2: Images and Arrays with ml5
    • U3LA3.3: Fonts && Text Styling
    • 🗃️U3LA4 Mini Project 4: Typography
    • U3LA4.1: Loading & Playing Sound Files
    • 🎨Unit 3 Final Project: Patatap
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions && Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • 🗃️U4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • 🤓🗃 Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • 🤓U4LA5.1: Sine && Oscillating Motion
    • 🤓U4LA5.2: Cosine && Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card || PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes && Overview
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Vocabulary
  • Planning Notes && Materials
  • Resources
  • Assessments
  • Do Now/Warm Up (~5 - 10 minutes)
  • Removing Items from an Array (~15 minutes)
  • Adding Items to Your Array (~10 - 15 minutes)
  • Student Practice (~5 - 10 minutes)
  • Wrap-Up (~5 minutes)
  1. Unit 3: Arrays, Loops, Media

U3LA2.4: Updating and Deleting from Arrays

How can I manage data in my array?

Teacher Notes && Overview

In this lesson, students will learn to update and delete items from an array as they create a bubble pop game. Depending on future projects, they may use this skill often, or it may be somewhat dormant until Unit 4 - both are okay, as it offers great exposure and rounds out their skills with arrays.

Objectives

Students will be able to:

  • Add items to an existing list

  • Delete items from an existing 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.CT.7 Design or remix a program that utilizes a data structure to maintain changes to related pieces of data.

9-12.CT.8 Develop a program that effectively uses control structures in order to create a computer program for practical intent, personal expression, or to address a societal issue.

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

Planning Notes && Materials

Planning Notes
Materials

Resources

Assessments

Formative:

Summative:

Do Now/Warm Up (~5 - 10 minutes)

Ensure students are working in an editor with Collide2D linked, or be prepared to ask them to link it later in the lesson.

Ask students to create an array that is prepopulated with at least 5 object literals that have information to draw a circle. They should at a minimum have the x, y, w, h information, and time permitting, have any colors they would like the circles to be.

Encourage students to use the for loops they have learned previously to do this, but if they are feeling stuck, they can do it manually.

Removing Items from an Array (~15 minutes)

If students have not already, ask them to use a loop to display the ellipses on their screen. If they are using examples from the previous lesson, they likely will do something like this:

let bubbleList = []

function setup() {
  createCanvas(400, 400);
  
  for(i=0; i < 6; i++){
    bubbleList[i] = {x:random(width), y:random(height), w:random(20, 25), h:random(20,25)}
  }
}

function draw() {
  background(220);
  
  for(i=0; i < bubbleList.length; i++){
    ellipse(bubbleList[i].x, bubbleList[i].y, bubbleList[i].w, bubbleList[i].h)
  }
}

This is perfectly acceptable, and if you feel this is enough for your students, they can get by doing this - forever! However, there is another method they can use to iterate through lists that already have values - it's called a forEach loop and is a method that works specifically on populated arrays.

The forEach is a method that takes in a callback function as a parameter and then performs that action on each item in a list. If you would like to use that method, it would look like this:

let bubbleList = []

function setup() {
  createCanvas(400, 400);
  
  for(i=0; i < 6; i++){
    bubbleList[i] = {x:random(width), y:random(height), w:random(20, 25), h:random(20,25)}
  }
}

function draw() {
  background(220);
  
  bubbleList.forEach(bubble =>{
    ellipse(bubble.x, bubble.y, bubble.w, bubble.h)
  })
}

Because it is an array method (a function for a specific type of thing), you must call theArray.forEach. Then, in the parenthesis where your parameters usually go, you first give a name to the iterable variable - the thing that will represent each item in the list - then use a callback function with the arrow notation to indicate what action should be taken for each iterable. For some students this makes more sense than traditional for loops, and for others it may be more confusing. There are not situations in the curriculum where they must use this method, but it is nice to have in their backpocket!

Moving along, we now have bubbles on our screen. Let's make them interactive - let's say we want to click on our bubbles, and have them disappear. There are a few ways we can do this: the most basic are to have them move off the screen by changing the x and y values, or to make the width and height so small they can't be seen. But there's a better way! We can remove them from the array entirely.

To do this, first make sure you have Collide2D linked in your program. Then, let's use our function mousePressed() to add interactivity - this is because we only want this to happen once, when we first click our mouse.

Like with displaying all of our circles, we will use another loop here to check if they are being clicked:

function mousePressed(){
  for(i=0; i < bubbleList.length; i++){
    if(collidePointEllipse(mouseX, mouseY, bubbleList[i].x, bubbleList[i].y, bubbleList[i].w, bubbleList[i].h)){
      console.log("clicked a bubble")
    }
  }

We now have a conditional inside of our loop that is checking to see if each bubble has been clicked, and only when they are clicked, it will display the string in the console. You could also adjust this statement to: console.log(bubbleList[i], "clicked a bubble") to also display the object literal with all the bubble's information, if you'd like distinction!

So now, our bubbles will all respond to being clicked, but they don't vanish yet. We still need to delete them from our list. To do that in JavaScript, we need to do two things:

  1. Identify the bubble's position in our list

  2. Delete the object literal at that position

  3. This will automatically condense our list so everything else fills into the position and proceeds as usual!

We will use two methods to do this - .indexOf() which will get us the index value of our element, and .splice() which will remove the element at that index value. Our code would then look like this:

function mousePressed(){
  for(i=0; i < bubbleList.length; i++){
    if(collidePointEllipse(mouseX, mouseY, bubbleList[i].x, bubbleList[i].y, bubbleList[i].w, bubbleList[i].h)){
      console.log("clicked a bubble")
      let theIndex = bubbleList.indexOf(bubbleList[i])
      bubbleList.splice(theIndex, 1) //At theIndex's position, remove 1 element
    }
  }

And if we wanted to use a forEach loop, it would look like:

function mousePressed(){
  bubbleList.forEach(bubble => {
    if(collidePointEllipse(mouseX, mouseY, bubble.x, bubble.y, bubble.w, bubble.h)){
      console.log("clicked a bubble")
      let theIndex = bubbleList.indexOf(bubbleList[i])
      bubbleList.splice(theIndex, 1) //At theIndex's position, remove 1 element
    }
  })
}

Now, if they click the bubbles, they should see them vanish as the object gets deleted from the list!

NB: This is a great time to discuss how they could turn this into a function that could be reused. For example, you could walk students through creating a function called deleteFromList() that would take in a list and item, find the index of a given item, and then splice it away. You could also turn the entire for loop into a function that could be used to iterate through a list and delete an item!

Adding Items to Your Array (~10 - 15 minutes)

If we are loving clicking, we may notice that eventually we are out of bubbles and need to get more. While we could click play, that would require the page to reload - what if we don't want to do that? Let's create a button that will make more bubbles for us!

First, let's get a rectangle in our draw function that will display on the screen and can serve as our button:

  rect(10, 30, 110, 50)
  text("MORE BUBBLES!", 15, 60)

Now, we are also going to use function mousePressed() for this - we will just add below the code we wrote to delete our bubbles. Since Collide2D is already linked, we just need to tell our code to add a bubble, which we do using the .push() method. This will add an element, taken as a parameter to the end of the list.

Our code would look like this:

function mousePressed(){
  //your chosen for loop to make bubbles erase would live here!
  
  if (collidePointRect(mouseX, mouseY, 10, 30, 110, 50)){
    bubbleList.push({x:random(width), y:random(height), w:random(20, 25), h:random(20,25)})
}
}

And tah-dah! Just like that, you are adding elements to an array. Cool, right?

Student Practice (~5 - 10 minutes)

Ask students to work in groups to determine how they could make a button that makes many bubbles appear at once, or that can erase bubbles near each other (that's a very spicy challenge).

Wrap-Up (~5 minutes)

In whatever way you prefer to collect work, ask students to respond to one more of the following questions:

  1. Explain the process of deleting items from an array.

  2. Why are for loops useful when working with arrays?

  3. How might you use these skills in past or future projects?

PreviousU3LA2.3: Loops and ArraysNext🤓 U3LA2 Mini Project 2: CodeWars Array Challenges

Last updated 2 years ago

- will return the index of a specific item in the array

- adds/removes elements from an array at a specific index value

- adds a new element to the end of the array

(W3 Schools)

.indexOf()
.splice()
.push()
Array Methods