[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 (5 minutes)
  • Vary the Background with mouseX (15 - 20 minutes)
  • Return to Draw with Mouse (15 - 20 minutes)
  • Wrap-Up (5 - 10 min)
  • Extensions

Was this helpful?

  1. Unit 2: Respond & Draw on Canvas

U2LA1.5: The Map Function

How can the map function help me control a range of values?

Overview && Teacher Feedback

This learning activity introduces the map function and applies it to changing a sketch`s background color to grayscale, and RGB color ranges.

This lesson is primarily a code-along, followed by oodles of student exploration via pair programming.

Make sure students enlarge their canvas - it will make the map feature way more obvious. Some students will overthink the do now - it’s really just one line of code, so encourage them to think simply if their brains start swimming in the deep end of the pool.

Objectives

Students should be able to:

  • Explain the purpose and use of the map function

  • Apply the map function within their projects

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

Algorithms

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

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

  • Explain how a function I prototyped can be used by someone else.

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

map() - A built-in p5.js function that re-maps a number from one range to another.

Planning Notes

Planning Notes

This lesson is scheduled to take one period, but students may finish more quickly; if they do, it is meant to call back to the last learning activity. Give students s much time as they need to work!

Only a computer is required, but you may want pads of paper or other wireframing supplies to help students express their ideas if they are struggling with code.

Resources

Assessments

Assess the Do Now assignment. Check for the ability to demonstrate the benefit of using an event, conditional or loop in their prototype.

Assess the learning activity. Check for the ability to:

  • Experiment with the commands of a programming language.

  • Apply the map function to their program

  • Discuss what can be done with the map function

Do Now/Warm-Up (5 minutes)

Change your canvas to 800x600.

In 5 minutes, create a program where the background will change as you move your mouse left and right across the screen. It should be black when you are on the left and white only when you get to the far right - in between it should be shades of grey going from dark → light.

Vary the Background with mouseX (15 - 20 minutes)

Discuss the issues that come up during the Do Now with students - they should notice that it’s black less than halfway across the canvas, which is not what we want. Prompt students to think about why this might be, by considering possible mouseX values. You can also print the text or console.log the values to show students what’s happening.

Explain the following: You might have noticed, that the background is fully white before we reach that half of the screen. This is the mouse position ranges from 0 (when we are on the left edge of the canvas), to 600 (when we are on the right edge), while the background gray ranges from 0 to 255. Our maximum mouseX position (600) is not the same as our maximum value for color (255 for white). So when the mouse reaches pixel 255, the screen is white.

var bgColor = map(mouseX, 0, 800, 0, 255) 
//you can declare the variable globally (above the setup function) if it helps student understanding

background(bgColor)

Challenge students to determine how map could be used to make it so the canvas goes from white (on the left) to black (on the right) - allow them to work on this with their partners for ~2-4 minutes. (They should realize they will need to swap the final mapped values.)

Share out student responses (and test code as needed). Ensure students understand that this is a situation that happens over and over again as we create responsive systems: we have an input range (in this case 0 to 600), and we need to map it to a certain output range (in this case 0 to 255). It is not hard to solve this problem using simple math (a rule of three), but it is so recurrent that there is a p5 function to solve it quickly, the map function. It takes the variable to be mapped (in this case mouseX), the range that we know it will be in (0 to width), and the output range we want (0 to 255).

Once students have completed this task, draw their attention to the rest of the starter code, which has a pink rectangle and a series of challenges. Remind them that they will need to create a mapped variable for each to make it run correctly. Map can be a confusing concept for students - if they’d like to stick with individual variables that they will assign mapped values to, that is perfectly fine, however, if they would like to - or if you would like to push them to - continue using object literal, it is important to note that the mapped value would need to be assigned in draw. This is because all the values rely on mouseX/mouseY.

If students would like to pursue an object, the code would look something like this - consider showing students how to redo the bgColor code to be in an object in a similar way as the following solution to the code challenge:

function setup() {
  createCanvas(500, 500);
}

function draw() {
var rectProps = {
  weight:map(mouseX,0,500,5,20),
  size:map(mouseY,0,500,75,175),
  red:map(mouseY,0,500,0,255)
}
 
  background(220);
 
  strokeWeight(rectProps.weight)
  fill(rectProps.red,0,255)
  rect(210,210,rectProps.size,rectProps.size)
 
}

After another example (like showing bgColor as a property of an object, or reviewing how to set up an object for an attribute of the rectangle), give students 10 minutes to pair program or independently complete the final challenges as listed in the starter code.

Return to Draw with Mouse (15 - 20 minutes)

Ask students to return to their drawing application and find ways they can integrate map while still drawing. Encourage them to create a literal object to hold the properties, as this is what they’ll be working towards in the final project!

Again, either find time to share code or ask students to post their links for others to see.

Wrap-Up (5 - 10 min)

If students post links in Google Classroom, ask students to go through and look at student projects and post comments on 3-4 of them. When posting links, you can also encourage students to post:

  • Project Link

  • One thing you are really proud of

  • One struggle you had or are still having

  • Any questions or advice you would like to get.

Extensions

Students can take each step as far as they would like, as this is solely based on exploration.

PreviousU2LA1.4: Draw with MouseNextU2LA2.1 - Collision with Collide2D

Last updated 2 years ago

Was this helpful?

(Youtube Video) | Starter Code ( | )

(Youtube Video)

Video tutorial: |

Use this to launch the map function, which will be a new concept for many students. Share this starter code ( | ) with students, then code along mapping mouseX from 0 to the width of the canvas, and run the program so students can see the difference. Your finished code should look like this (all in the draw function):

The Map Function
p5 editor
repl.it
Introduction to Objects - Code.org
2.4 The map() function
Code
p5 editor
repl.it