[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 Foundation Student Outcomes
  • Vocabulary
  • Planning Notes
  • Resources
  • Assessments
  • Do Now/Warm Up (~3-5 Minutes)
  • Class Code Along (~15-18 minutes)
  • Student Practice (~10-12 minutes)
  • Wrap Up
  • Extensions

Was this helpful?

  1. Unit 5: Functions & Abstraction

U5LA2.4: Functions with Boolean Returns

How can I create functions that return boolean values for use in my programs?

Overview & Teacher Feedback

In the past several lessons, students have engaged with functions in a way that helps their computational thinking skills, but may not be wildly applicable to projects they have made or will be making using p5.js. That all changes in this lesson, when students will create their own function to decide if the mouse is touching various shapes.

Please note that if you taught the collide2D Library instead of standard collision detection, this can still be useful, as you are essentially teaching them a basic version of what is happening behind the scenes in the collide2D Library.

Objectives

Students will be able to...

  • Write a function that returns a boolean value

  • Utilize this function in their program

Suggested Duration

45 minutes (1 class period)

NB: This could be stretched to two class periods if you would like to have them spend a period redoing a project that utilizes collision detection with the function they created. This can be great practice and can drive home the importance of functions, but is not a requirement.

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.5 Modify a function or procedure in a program to perform its computation in a different way over the same inputs, while preserving the result of the overall program.

9-12-CT.9 Systematically test and refine programs using a range of test cases, based on anticipating common errors and user behavior.

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 Foundation Student Outcomes

Abstraction, Decomposition Ideas, problems, or projects are broken down into component parts to set the stage for deeper analysis.

Abstraction, Pattern Recognition Decomposed component parts are examined to find patterns like similarities, repetition, conditional relationships, or nested relationships.

Abstraction, Generalization && Detail Removal Component parts are grouped by general characteristics, and unnecessary details filtered out.

Abstraction, Modularity A process that completes a single task is more useful when it can be chained together with other processes to accomplish something more complex.

Vocabulary

No new vocabulary words are presented in this unit

Planning Notes

Planning Notes
Materials Needed

This lesson is fairly straight forward - a brief code along followed by some student code exploration. Itโ€™s a quick and easy way to end the unit!

There are no special materials needed for this beyond computers and the starter code.

Resources

Assessments

Function Activity (formative)

Do Now/Warm Up (~3-5 Minutes)

Display on board: Think back to some of your past projects. What code did you find yourself repeating the most?

Facilitate a brief share out and consider making a list on chart paper somewhere students can see - this may help them as they remix projects later in the unit. Please also encourage students to think of specific algorithms they were writing, not just โ€˜ellipseโ€™ or โ€˜rect.โ€™

Class Code Along (~15-18 minutes)

Distribute the link to the starter code to students and explain that you are going to make two functions: one that will determine if the mouse is on an ellipse, and another that will determine if the mouse is on a rectangle. You are going to code and test the ellipse function together, and then students will work on the rectangle function on their own.

Ask students what they recall about collision with a mouse and an ellipse. Try to get a series of steps that you can leave in comments at the bottom of your code as a reference. If students are unsure or donโ€™t remember, give them time to look through past projects. (This is a great time to reinforce the importance of commenting code!)

Once you have the steps, build the following function, asking students for assistance along the way. (They should understand what values are being taken in as inputs - these are the things that will change from ellipse to ellipse - and what the desired return value is.)

function isMouseOnEllipse(x, y, d){
   var distFromCenter = dist(x, y, mouseX, mouseY)

  if(distFromCenter < d/2){
     console.log("mouse on ellipse")
     return true
  }
  else{
     return false
  }
}

Once students have created the function, demonstrate how they could use the function in their program. Create a variable to control something about one of the ellipses on the page, utilize the variable, and then create a conditional so you have something that looks like:

if(isMouseOnEllipse(50, 125, 50)){
  circColor1 = color(255, 255,0)
}
else{
  circColor1 = color(0,255,255)
}

Ask students to reflect on if this function would have assisted in past programs, then have them try using it for the two other ellipses on the page. Consider having a student share out to demonstrate what they changed and how they used the function. It may also be useful to have students brainstorm ways they could improve this function or use it with another function (built in or of their own creation).

Student Practice (~10-12 minutes)

Explain to students that they will now be repeating this process, but this time making a function to determine isMouseOnRect(). They must first define the function, and then they wil use the three rectangles on the page to test it. Encourage students to once again reference past work to look for patterns that will help them to create this function.

This was not built as a pair programming activity, but students should be encouraged to collaborate and discuss with each other as they go. Once students have completed the activity, bring them together to share out their solutions and implementation.

Wrap Up

Be sure to leave time for a student share and to revisit their original question: what other functions could they make that would improve their past or future programs? Give students time to contemplate after this activity and brainstorm if there are any ideas they would like to add to the list.

Extensions

This is a quick lesson, but for students who have zoomed ahead, have them start creating their own list or function library that they can use to remix past programs or improve future ones!

PreviousU5LA2.3: Functions with PurposeNext๐Ÿ—ƒ U5LA2 Mini Project: Build Your Own Challenge

Last updated 2 years ago

Was this helpful?

Lesson Starter Code ( | )

One simple extension that students can pursue on their own (or as a class) is the idea of . Right now, their functions will break if not fed the correct information. However, having values that are optional or have default settings can help. Ask students to research and adapt their functions accordingly, and to start thinking about situations where this could be most useful.

p5 editor
repl.it
optional and default values