🎨
[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)
  • Draw with Mouse (10-20 minutes)
  • Object Literals in p5.js (10 - 20 min)
  • Student Practice && Play (10 - 15 minutes)
  • Wrap-Up (5-10 min)
  • Extensions
  1. Unit 2: Respond and Draw on Canvas

U2LA2.1: Draw with Mouse

How can I use built-in variables to create a program that lets the user draw?

Teacher Notes && Overview

The learning activity introduces p5s program flow, demonstrating how setup() and draw() function. By using p5's mouse position variables and turning off the background function, they create expressive drawing programs. The use of a new data structure, object literals, is a way of keeping code more organized so that students do not get overwhelmed.

This lesson is primarily a code-along, as it introduces several new concepts include object literals. Students will be rewarded for sitting through a very teacher-oriented lesson with ample play time and the chance to share and review each other’s work - and object literals, which we will continue using through out the course, will make life MUCH easier.

Objectives

Students will be able to:

  • Understand how moving background out of the draw function allows the user to draw

  • Utilize pmouseX and pmouseY to create something that draws.

  • Use object literals to simplify code that involves many variables

Suggested Duration

1-2 periods (~45 minutes each)

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.

Vocabulary

  • Control flow: The order in which steps of an algorithm are executed; determined by logical constructs such as IF statements, loops, and calls to other procedures.

  • pmouseX: The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas.

  • pmouseY: The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas.

  • frameCount: The system variable frameCount contains the number of frames that have been displayed since the program started.

  • Object literal: a comma-separated list of name-value pairs inside of curly braces. (If you’ve worked in other languages, this is like a python dictionary that can also hold functions.)

Planning Notes && Materials

Planning Notes
Materials

This may bleed over into two periods with the addition of object literals in JavaScript. That’s okay! They will also get MUCH more practice with these as they go through the course, so help them as needed and it will become more intuitive over time.

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

Formative:

Draw Tool Creation

Summative:

Interactive Drawing App (Upcoming Unit Project)

Do Now/Warm Up (3-5 minutes)

Ask students to recall the difference between the setup() and draw() functions and discuss them with their partner(s).

Draw with Mouse (10-20 minutes)

So far we have been drawing static images: they don't change over time. But one of the exciting things about drawing computationally is that we can make our drawings dynamic: we can have them change over time and respond to what the user does, or to some other kind of input.

You have probably noticed that setup() and draw() come up repeatedly in the examples. These are both functions, like rect and ellipse, except that instead of calling them, we have been declaring them in our code. p5 takes care of calling them for us. In fact, it calls setup once, when our program starts, and then it calls draw once and again, forever (or until we close the sketch window).

To prove it, look at this example. Each time our draw() function is called, p5 adds 1 to a variable called frameCount. frameCount refers to the number of times the draw function reruns (essentially making a new 'frame') which is roughly 60 times per second! In the sketch below, we draw this variable to our canvas, using the text function. As you can see, frameCount keeps growing, as p5 calls draw() over and over again.

Now let's get a feel for why frames are important. With your students, remove the background by either deleting it, commenting it out, or moving it to setup() where it will only run one time. Before you hit play, ask students what do you they think will happen? Hit play to check if their predictions are true. The could should look like this, and the numbers that were continuously ticking up should still be going up - except now it's on top of each other instead of on top of a fresh background, so it simply creates a blur:

function setup(){
  createCanvas(600, 240);
  background(180); 
}

function draw() {
  // Displays the frame count
  text("I'm drawing", 20, 20);
  text(frameCount, 100, 20);


  ellipse(300, 80, 10, 10);
}

Once students are comfortable with this, explain that when we are not drawing an entirely new background each frame, we actually open up many new creative avenues for ourselves. For example, we can now try moving shapes around the page without a background to get another interesting result.

Although it might seem that our ellipse is only drawn once, it is actually being drawn over and over again for as long as our sketch runs. The reason we don't see any changes is that the ellipse is being drawn, again and again, in the same exact position. For us to see any changes, something needs to vary.

Explain: We have already used mouseX and mouseY in the previous learning activity, to help us place our shapes. Like width and height, mouseX and mouseY are built-in variables. p5 continuously checks where the mouse is and updates mouseX and mouseY with the latest position.

Let's see what happens if we put in mouseX and mouseY to our ellipse:

function setup(){
  createCanvas(600, 240);
  background(180); 
}

function draw() {
  ellipse(mouseX, mouseY, 10, 10);
}

Now let's move our mouse around the page. Since the background only draws once, we now see every time the ellipse gets drawn - and since it follows our mouse position, that allows us to draw on the screen with the ellipse!

Students will notice that as long as we move the mouse at a slow or steady pace, we can get an almost-line (it may be a little bumpy) but if we move it quite quickly, it will look more like separate shapes.

What if we really wanted to draw with one continuous line? This can be tricky, as lines require four coordinate values instead of just the two we used for an ellipse. However, there are two more variables students haven't learned about yet: pmouseX and pmouseY. These variables hold the position of the mouse in the last frame, and by connecting where the mouse was moments before with where it is now, we are able to create lines.

Our code ends up looking something like this:

function setup(){
    createCanvas(600, 240);
    background(0);
}

function draw() {
    line(mouseX, mouseY, pmouseX, pmouseY);
}

Object Literals in p5.js (10 - 20 min)

So we now have something that draws, but it's just something *really basic* that draws. Our ellipse and/or line look pretty boring because we are a) just drawing single shapes and b) drawing single shapes without any styling!

With students, create a list somewhere in the room of all the things that you could change about this line or another shape (and feel free to get specific - you can change the color or just one value in the color, opacity, etc).

Likely, students have made a really long list. That means they may be stuck making a lot of variables, and that can be annoying. Luckily, JavaScript and other programming languages have structures built in to handle that! Here, we can use something called an object literal: this is a JavaScript structure similar to a dictionary in other languages that is really just a comma-separated list of key:value pairs. Each key works a bit like a variable - it holds a value, and can be called by name.

As students have never encountered this before, walk them through how to create an object literal and how they can call values using keys, as in the example below, which you should code along with your students:

//NOTE: You are coding a lot of properites for theLine to demonstrate 
//objects literal - but you're only going to use one in this example. 
//A good follow up is 'If I wanted to make a stroke color using this 
//information, how would I do that?' and then let students come up 
//with the answer using variable.property notation.

let theLine //create variable

function setup() {
  createCanvas(400, 400);
  background(220);
  
  //assign object literal and values - note the { }!
  theLine = {
    weight:5,
    red: 255,
    green: 0,
    blue: 255,
    opacity: 100
  }
  
}

function draw() {
  strokeWeight(theLine.weight) //call object dot key to get value
  line(mouseX, mouseY, pmouseX, pmouseY)
}

NB: As in previous examples, this variable could be given value above setup since it is only using numeric values. However, if students want to use anything p5 specific - such as random(), color(), dist(), etc for a value, that would need to happen in setup() or draw(), so it may be easier to demonstrate that protocol from the start, depending on the needs and understanding of your classroom.

The nicest thing about having our values stored in a key:value pair within an object is that we can change these values easily, as we would with a variable. If we wanted to reassign the value to our key, it would look something like this:

theLine.weight = 10 //this would assign the value of 10 to the 'weight' key of theLine object.Student Practice (10 - 15 minutes)

We could use this to make something interesting happen in our program, such as with a conditional:

if(mouseX > 200){
    theLine.weight = 10
}
else{
    theLine.weight = 5
}

Student Practice && Play (10 - 15 minutes)

After all that learning, students need some time to practice and play. Allow them time to create their own drawing tool or tools that will draw in an interesting way as the mouse moves.

Make your program unique - you can draw with a line, a shape, a design. You can adjust the fill and transparency, and even try to calculate values to change how your program looks. You can integrate conditionals to make it draw differently in different places. You MUST use an object literal to hold all of the changing values of your drawing tool! Ask that students make the most UNIQUE program possible, as we will be looking at each other’s code!

For bonus points: think about how you can abstract your drawing tool (or tools) into functions so you can easily reuse them in other programs!

Encourage students to be creative. This is a great opportunity to experiment with code. They can use mouseX and/or mouseY for different values and test the output. They can play with the dist() function and experiment with color and shapes.

  • Draw with different shapes.

  • Change the fill or stroke based on your mouse position (remember to save values in an object literal!)

  • Change the size based on your mouse position. (remember to save values in an object literal!)

  • Use the random() dist() function to vary your tool based on how fast your mouse is moving

Wrap-Up (5-10 min)

Wrap-Up will be a bit longer to give students a chance to see each other’s work. A recommended strategy is this:

Ask students to pull up their program and hit play, so it’s running. Put on a song and allow students to circulate around the room - when the song stops, students must sit at the closest computer to them and explore the program and code. (Think: musical chairs, but always the right number of chairs.) Repeat this several times.

When you have finished, come together for student shout outs. Show student code and go over interesting examples.

Extensions

Students can push the drawing program as far as they would like - either with their own imagination or trying one of the following:

  • Explore the dist() function which will calculate the distance between two points - it's a great way to vary especially lines by calculating distance between where the mouse was (pmouseX/pmouseY) and where it currently is (mouseX/mouseY)

  • Try to code a rainbow by separating multiple colored lines and drawing with each one.

  • Make the drawing tool different depending on where on the canvas you're drawing. Split the canvas into four; the drawing app should be different in each quadrant.

PreviousU2LA1 Mini Project: Make a Traffic LightNextU2LA2.2: The Map Function

Last updated 2 years ago

( | )

Video tutorial: |

(Youtube Tutorial)

(Youtube Video)

(Youtube Video)

Learning Processing book: , sections 3.1, 3.2 and 3.4 |

Getting Started With p5.js: Chapter 5, examples 5.04 to 5.09 |

Start students with this code ( | ) which they should duplicate and put into their own accounts. Structure this section as a code along - ask students to first hit play, and they should notice that something interesting happens.

Lesson Starter Code
p5 editor
repl.it
2.1 Variables in p5.js (mouseX, mouseY)
Code
Objects in p5.js
Introduction to Objects - Code.org
Draw with Mouse
Chapter 3
Code
Code
p5 editor
repl.it