🎨
[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 (3-5 minutes)
  • Press a Specific Key (10 - 20 minutes)
  • Practice & Play (10 - 15 minutes)
  • 🤓 keyCode (Extra)
  • Wrap Up (5 - 7 minutes)
  • Extensions
  1. Unit 2: Respond and Draw on Canvas

U2LA5.1: Key Presses && Nested Conditionals

How can I use key presses to control elements of my program?

Teacher Notes && Overview

In this learning activity, students learn to incorporate keyboard interactions into their sketches, responding to key presses and drawing letters on the canvas. Students learn to wrap conditionals so that they can create many color options with key presses.

This is a great chance to challenge student creativity and have them consider what they can control in a program. Push that as far as you can!

A common misconception is that students will call keyIsPressed in multiple if statements; this will sometimes make their program messy. A better solution is to have one ‘parent’ conditional that checks for any key being pressed, with every subsequent specific key condition nested inside of it.

This pair programming experience is very open-ended - try to encourage students to talk together about features for their program, rather than each person deciding for the group when it is their turn to navigate.

Push students to think about the user experience in leaving their feedback: did they know which keys to press without reading the code? How could this be improved?

Objectives

Students will be able to:

Integrate key presses to control aspects of their program

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

  • Key press - p5 can register the most recently pressed key and whether a key is currently pressed

  • Event Handlers - alter the normal flow of a program when an action such as a key press or mouse movement takes place.

  • keyIsPressed - The system variable keyIsPressed is true if a key is pressed and is false if not

Planning Notes && Materials

Planning Notes
Materials

This lesson is fairly straightforward programmatically but is an excellent time to challenge your students to think about user experience, especially when dealing with key presses (which are not visible like a button).

No materials other than a computer!

Resources

Assessments

Formative:

  • Do Now responses

  • Learning Activity solutions

  • Wrap Up responses

Summative:

  • Interactive Drawing App (Upcoming Unit Final)

Do Now/Warm Up (3-5 minutes)

Ask students to draw an ellipse in the center of their screen with a size of 50. Then, they should leave comments for as many aspects of this ellipse as possible that they may want to change.

Press a Specific Key (10 - 20 minutes)

Ask students to share out some things they may want to change - remind them that this list could be long, and making buttons for everything might not make sense. Some things can change with a key press.

Code along with students; suggest that you all change the size of the circle together. Take notes in code that you want the circle to get bigger when you press b and smaller when you press s. Be sure to demonstrate that because size will change, it needs a new variable to control it. Explain that you will be changing many different attributes of this circle eventually, so even though you are just changing one thing for now, you are going to set up your code using an object, like so:

var theCircle;

function setup(){
 createCanvas(400,400)

 theCircle = {
  size: 200
 }
}

function draw(){
 ellipse(200,200, theCircle.size, theCircle.size)
}

After the variable and base code has been set up, demonstrate using keyIsPressed in an if statement but do not specify a key yet. Ask students to press b - the circle should get larger. Then ask them to press s or any other key and ask what the problem is:

if(keyIsPressed){
 theCircle.size += 5 //alternately, theCircle.size = theCircle.size + 5
}

Students should notice that all keys currently cause the circle to grow. This is your cue to begin discussing nested if statements, specifically ones that will check if the key is the same as a specific letter. With your students, set up “b” and “s” and then ask them to play again and determine what is wrong.

if(keyIsPressed){
 if(key == 'b'){
  theCircle.size += 5 //alternately, theCircle.size = theCircle.size + 5
 }
 else if (key == 's'){
  theCircle.size -= 5 //alternately, theCircle.size = theCircle.size - 5
 }
}

Students should notice that after a point, the circle gets too small and the key values ‘swap.’ This is because numbers have become negative and the computer is trying to react. Still, with the whole group, demonstrate how you could use && operators to safeguard against the circle getting too small or too large.

if(keyIsPressed){
 if(key == 'b' && theCircle.size < width){
  theCircle.size += 5 //alternately, theCircle.size = theCircle.size + 5
 }
 else if (key == 's' && theCircle.size > 0){
  theCircle.size -= 5 //alternately, theCircle.size = theCircle.size - 5
 }
}

Practice & Play (10 - 15 minutes)

From there, send students to pair program. With their partners, they should decide on six additional features & keys to add to the program that will change the circle or any other element they’d like to add, swapping off driver and navigator as they add each one.

🤓 OPTIONAL BUT ENCOURAGED: Much like with mouseIsPressed/mousePressed, there is a keyPressed callback function that students may choose to explore along with other keyboard based events in the p5 reference sheet. Depending on your students’ comfort levels, you may choose to review this with them, leave it as a general statement, or ignore it entirely.

🤓 keyCode (Extra)

Wrap Up (5 - 7 minutes)

Ask students to post their project links in a forum such as Slack or the Google Classroom. Then, have them view and comment on two other projects, leaving a glow and grow for each

Guiding questions:

  • How does wrapping conditionals help our drawing app?

  • Which function would you use to change the size of the text?

  • What was challenging about wrapping one conditional inside another?

Extensions

Give students specific and logically challenging tasks for their key presses, such as:

  • Make your circle change color, but only to shades of yellow.

  • Make the stroke change color but never be the same as the circle color.

  • Make the strokeWidth change, but ensure that it will never be the same thickness as the circleSize.

PreviousU2LA2 Mini Project: Light Switch GameNextUnit 2 Final Project: Interactive Drawing App

Last updated 2 years ago

(Youtube Video) | Starter Code ( | )

For this section, you may have students start from scratch or utilize this starter code ( | ), working from just one circle and saving the others for practice.

Students may want to use keys outside of letters, which is possible but works a bit differently. Instead of saying ‘if (key===) ‘, they can say ‘if (keyCode ===) ‘ and use this website to identify keycodes:

For more information on where key codes come from, students can look into the Unicode system, which will be useful in AP CSP.

Key Presses in p5.js
p5 editor
repl.it
Keycode Info
Getting started with p5 Example 5-15: Tap a Key
p5 editor
repl.it
http://keycode.info/
https://en.wikipedia.org/wiki/Unicode