🐍
[PY] 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 Processing.py
    • Time Functions: Crazy Clock Mini Project
    • Pathfinding Algorithms and Facial Scanning
    • Playing with Pixels
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: Processing.py 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 and 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 and 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, elif, 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 and Libraries
    • U2LA4.2: Mouse Clicks and Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses and Nested Conditionals
    • 🎨Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Loops, Arrays, 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 Lists
    • U3LA2.2: Random Values from Lists
    • 🗃️U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Lists
    • U3LA2.4: Updating and Deleting from Lists
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars List Challenges
    • U3LA3.1: Loading Images
    • 🗃️U3LA3 Mini Project: Vision Board
    • 🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions and 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 and Oscillating Motion
    • 🤓U4LA5.2: Cosine and Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card or PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes and Overview
  • Objectives
  • Suggested Duration
  • NYS Standards
  • Vocabulary
  • Planning Notes and Materials
  • Resources
  • Assessments
  • Do Now/Warm-Up (5-10 minutes)
  • And/Or Lesson (20 - 30 minutes)
  • Wrap-Up (5-10 minutes)
  • Extensions
  1. Unit 2: Respond and Draw On Canvas

U2LA1.3: Logical Operators And/Or

How can logical operators make more specific and complex conditionals?

Teacher Notes and Overview

NB: This lesson technically covers NYS Standard 7-8.CT.8 Develop or remix a program that effectivey combines one or more control structures for creative expression or to solve a problem. However, we know not all schools can guarantee a middle school sequence prior to this course. This lesson can be significantly abbreviated or skipped entirely based on the knowledge your students come in with!

This learning activity builds on conditional statements using the Logical Operators 'and' and 'or'. Students create a changing background color using a grid for guidance. They will use these concepts as they build a traffic light in the next project.

Students should have a solid understanding of conditionals and how it is satisfied through a boolean. This lesson will focus heavily on creating more complex algorithms through the use of conditionals. Therefore it is important that students add comments to keep track of the sketches control flow. Students will also benefit greatly from peer programming because they can model their thinking behind their code.

Objectives

Students should be able to:

  • Use if, else if and else statements in conjunction with && and ||

  • Create conditional statements (event handlers)

  • Elaborate on how to satisfy a condition.

Suggested Duration

1 period (~45 minutes)

NYS Standards

7-8.CT.8 Develop or remix a program that effectively combines one or more control structures for creative expression or to solve a problem.

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

  • Conditional statements - a set of rules performed if a certain condition is met

  • Boolean expressions - a logical statement that is either TRUE or FALSE

  • and - joins two statements to make sure they are both true before the whole statement is true

  • or - joins two statements so that if one is true, the whole statement is true

Pre-Pre Vocabulary

  • Expression - is a group of terms (the terms are separated by + or − signs)

  • Relational operators - < , > , >=, <=, and, or

Planning Notes and Materials

Planning Notes
Materials

Some of the examples might be too much from some students to copy so have some way students can access the links to your projects.

Pens/Pencils

Index Cards/Half Sheets for Exit Slip (optional)

Resources

Assessments

Formative:

  • Do Now

  • End of lesson code collection and reflection responses

Summative:

  • Traffic Light (Upcoming Mini Project)

  • Drawing App (Upcoming Unit Final)

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

Ask students to look at both image 1 and image 2. They have to explain how Jose can eat ice cream with the given logical operator. Then explain the difference between both images.

Note: Creating a chart like the one below may help some students better understand logical operators. Use the images above and the chart in conjunction to explain 'and' and 'or.'

Ask students:

  • What is the difference between both images?

  • How is and, and or different?

If students still do not grasp this concept (or if you would just like them to have more practice), have them create their own conditions and explain it to a peer or the class.

And/Or Lesson (20 - 30 minutes)

The “do now” should give students a solid understanding of AND, and OR. Inform students that they will be using this to make different and specific regions of their canvas cause reactions. This is the starter baby step for figuring out making rectangular ‘buttons,’ which some may solidify as they move into the traffic light project.

For this code-along, be sure to explain the purpose of each expression that is written between 'and' and 'or.' This will model the thinking behind using logical operators to create buttons. Refer to the chart to show how each condition can be satisfied.

Begin by asking students to explore the canvas, specifically moving their mouse into each quadrant and reporting what they notice about the x and y values when they are in each area.

You will be coding along the bottom right quadrant because it is the furthest from where the mouse starts when students hit play. Ask students what they notice about values in this quadrant specifically - they should recognize that all x values are greater than 200, and all y values are also greater than 200 (the lines represent the exact centers of each axis). Together, create the following code (you will need to make the bgColor variable and use the global keyword in the draw function!):

if mouseX > 200 and mouseY > 200:
    bgColor = color(255, 0 ,255)

From there, ask students to create else if conditionals for every other quadrant and an else statement to handle if the mouse is in the exact center of the screen. This can be a pair programming activity or done independently, based on the needs of your students. You can also have them complete work independently and then swap to read for comments/bugs/etc with a partner.

As students begin working, circulate to ensure:

  • Commenting their code.

  • Using variables in the correct scope.

  • Using console.log() to debug and test

  • Saving their sketches with appropriate and clear titles.

Wrap-Up (5-10 minutes)

  1. Students can submit code via a Google Form if you would like to collect it. If not, have students come back together for a discussion on what struggles they encountered in this activity.

  2. Students can also lead code-alongs or walk through their code with the class.

Guiding Questions for Assessment:

  • What is the difference between the && and || operators?

  • What was challenging about creating a hover button? Why was it challenging?

  • What was easy?

Extensions

Have students create 4 rectangles in each corner of the canvas that will change a feature of an ellipse in the center of the canvas when the mouse is on top of them:

  • Color

  • Size

  • X position

  • Y position

PreviousU2LA1.2: Conditionals and if, elif, and else statementsNextU2LA1 Mini Project: Make a Traffic Light

Last updated 1 year ago

And/Or Starter Code ()

(Youtube Video)

Ask students to make a copy of the And/Or Starter Code (). Students will be writing conditionals to change the background color when the mouse is in each different quadrant; note that the entire background will be changing, and not each individual quadrant, which can be a sticking point for students.

✨
Trinket
Logical Operators on Canvas
Trinket
Image demonstrating the 'AND' operator
Image demonstrating the 'OR' operator
Image showing tables of outcomes for values of a/b using and/or