[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit 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
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • 🔮Unit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • 🗃️🗃U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • 🗃️🗃U1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • 🎨🎨 Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • 🔮Unit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • 🗃️🗃U2LA1 Mini Project: Make a Traffic Light 🚦
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • 🗃️🗃U2LA2 Mini Project: Light Switch Game
    • U2LA3.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 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • 🗃️🗃U3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • 🗃️🗃U3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • 🗃️🗃U3LA5 Mini Project: Keyboard/Patatap
  • 🎨🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • 🔮🔮 Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • 🗃️🗃 U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • 🎨🎨 Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • 🔮🔮 Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • 🗃️🗃 U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • 🗃️🗃 U5LA2 Mini Project: Build Your Own Challenge
    • 🔮🔮 Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Overview && Teacher Feedback
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Blueprint Foundations Student Outcomes
  • Vocabulary
  • Planning Notes
  • Resources
  • Assessments
  • Do Now/Warm Up (3-5 minutes)
  • Making Shapes Clickable (10 - 20 minutes)
  • Problems Counting (10 - 20 minutes)
  • Wrap Up
  • Extensions

Was this helpful?

  1. Unit 2: Respond & Draw on Canvas

U2LA2.2: Mouse Clicks && Shapes As Buttons

How can I use mouse clicks in p5.js?

Overview && Teacher Feedback

This lesson continues to use collide2D to determine if the mouse is hitting a shape, and now introduces click functionality in two different ways. Make sure students have completed the prior lesson before beginning so they are up to speed on what is happening and have all necessary resources.

This lesson adds on to what they were doing in U2LA2.1 - so much that students will be duplicating code from that lesson to continue! Adding clicks once collide2D is being used is not a huge lift, but it feels mind blowing to the students.

Students may be confused as to why a variable is changing in conditionals instead of a fill or other action - the reason for this is efficiency in drawing order, and to make sure each button changes independently of the others. If students are struggling, try this quick unplugged example:

  • Have two students stand at the front of the room as you walk through the code. When the variable is declared, hand one student a paper cup or plate with the variable name on it.

  • Make sure students understand that it is an empty holder until initialized. When the variable is initialized, put a marker (or another colored writing utensil) in/on the cup/plate.

  • Give another color to the second student. When the fill is called using the variable, have the first student take the marker from the cup/plate and mime coloring.

  • When the if statement is activated, have the second student swap the marker from the first student’s hand.

  • Swap back when the if statement is not activated.

Code reading is much more challenging than code writing. Encourage students to read and discuss code as often as possible!

Objectives

Students should be able to:

  • Use conditionals to define a reactive shape button

  • Use mouseIsPressed or function mousePressed() to create mouse click reactions

Suggested Duration

1 Period, ~45 minutes

Use your best judgment in timing! This lesson can easily be completed in one period, however, if you believe students need more practice, give them ideas of how they could keep honing these skills and allow them time to work!

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

Blueprint Foundations Student Outcomes

Abstraction

  • Describe different things I tried in order to achieve a goal.

  • Explain why I chose to include the specific components of my prototype over others.

  • Explain characteristics or patterns that informed a function or an interface I created.

  • Explain why using patterns is necessary when creating with a computer.

Algorithms

  • Describe how instructions can have different outputs depending on inputs.

  • Demonstrate the benefit of using an event, conditional or loop in my prototype.

Programming

  • Discuss what can and cannot be done with a specific set of commands.

  • Describe the changes I made after testing at least three parts of my program.

Vocabulary

  • mouseIsPressed - this is a built-in variable that is True when the mouse button is pressed, and False when it is not pressed

  • mousePressed() - a major callback function in the p5 library that executes once, each time the mouse is pressed.

  • Efficiency - In this case, making it easier and faster to debug and edit your code

  • Nesting Conditionals - When one conditional lives within another -- so both of the conditions have to be met before your code will execute.

Planning Notes

Planning Notes
Needed Materials

No specific planning notes for this lesson

If you need to act out changing values of variables in conditionals, having paper plates or cups on hand can help with variable understanding.

Resources

Assessments

Assess the learning activity. Check for the ability to:

  • Repeat the process demonstrated in the code along

  • Create a program with clickable shape buttons

Assess the Wrap Up assignment. Check for the ability to:

  • Explain the characteristics or patterns that informed the interface they created.

Do Now/Warm Up (3-5 minutes)

Ask students to open up the following website and just record what they notice about how they must interact with it:

Making Shapes Clickable (10 - 20 minutes)

The brainstarter should have shown students that hovering isn’t always enough: to engage with the bubble wrap, they need to be able to click on the shapes that are on the screen. In their p5 programs, there are several ways to do this, but all of them utilize what we call event Listeners - that is, something in the program that is waiting to see if an event, like a mouse being clicked, is happening.

To start, we are going to use the mouseIsPressed variable. This variable holds a boolean variable, which either holds the value false if the mouse is not being pressed or true if the mouse is being pressed. This works great for certain situations and it’s pretty quick and easy to deal with. Later in the lesson, we will look at another way of checking of the mouse is pressed and we will compare the pros/cons of each.

if(collidePointLine(mouseX, mouseY, 25,20,155,70) && mouseIsPressed){
 lineWeight = 10
}
else{
 lineWeight = 2
}

Once you’ve finished, ask students to go back into their code and try making all of the other shapes clickable, as well. This should not be a particularly long task; when they are done, regroup and ensure they understand that using mouseIsPressed in any conditional will determine if the mouse is being clicked or not - it does not need to take place on a shape.

Problems Counting (10 - 20 minutes)

Now, mouseIsPressed is a great quick solution to our problem of getting information from the mouse. However, it does have some limitations which we will see in this section. If you feel that your students are really struggling with the code or with big concepts, this may be something you choose to come back to at a later date/time or split into multiple lessons to allow time to process.

if(collidePointCircle(mouseX, mouseY, 200, 200, 100) && mouseIsPressed){
   score = score + 1 //alternately, score += 1
}

This will make the score increase, but students will probably be quick to notice something odd: despite the fact that they told it to increase by 1, it will increase in jumps. Explain that this is because mouseIsPressed checks to see if the mouse is clicked in the moment the code is run - and because the draw function runs on a loop VERY QUICKLY, we are often not fast enough to lift up our finger before it loops and counts it a second, third, or even fourth time.

Show students how to add in this function - ensuring it is completely outside of both setup an draw - and how to move the conditional they wrote earlier into this function. Explain the logic of what is happening, that this function only checks the conditional when the mouse is pressed and then only one time.

function mousePressed(){
  if(collidePointCircle(mouseX, mouseY, 200, 200, 100) && mouseIsPressed){
   score = score + 1 //alternately, score += 1
 }
}

From here, you may ask students to try to make other things clickable using mousePressed, or simply wrap up the lesson.

Wrap Up

Ask students to respond to one or more of the following questions:

  • What is the difference between the variable mouseIsPressed and the callback function mousePressed?

  • Why might you choose to use one instead of the other?

  • Which of the methods we learned today seems easier to you?

  • Describe a situation where mouseIsPressed works fine.

  • Describe a different one where you would prefer mousePressed.

Extensions

Encourage students to further explore conditional logic by using nested if-else statements to set each shape so it is one color when a mouse is not touching it, another color when the mouse is hovering, and a third color when it is clicked.

PreviousU2LA2.1 - Collision with Collide2DNext🗃U2LA2 Mini Project: Light Switch Game

Last updated 2 years ago

Was this helpful?

(Youtube Video) | - completed in last lesson (| )

Blank Collide2D Template ( | )

(make your own)

Video tutorial 3.4:

Learning Processing book: , section 5 |

Have students open their work from U2LA2.1, specifically the hover reactions they had created from . With the students, show them how they can include this variable with the collide2D library in order to make the line change only when clicked. The code look something like this:

Explain to students that we will be trying to make a variable that counts, or keeps score - this is the backbone of a lot of games and it’s a useful skill to have! Go ahead and start a new program with the collide library linked (). Ask students to create a single ellipse in the middle - this is what you’ll be clicking on! Then declare a variable at the top of your program called score, initialize it in setup with a value of 0, and display it somewhere in the screen using the text() function. Ask students to figure out how you could make this score increase by one each time the circle is clicked. Give students time to think and work (potentially in pairs or groups) before coming together to make sure you agree on this:

To help us when this problem arises, there are other tools built into the p5 library that interrupt the flow of the draw function and run only once when an action occurs. The one we will look at today is the mousePressed major callback function - but they can look on the under ‘Events’ if they’d like to know more for now.

Collide && Click
Starter Code
p5 editor
repl.it
p5 editor
repl.it
Variables in p5.js
Boolean Variables
Chapter 3
Code
this starter code
blank template for that is here
p5 reference sheet
LogoBubble wrap popBubble wrap pop