🎨
[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 (~5 minutes)
  • Code Along: Happy Face (~15 - 20 minutes)
  • Independent Practice: Angry Face (~10 minutes)
  • Wrap-Up (~5 minutes)
  • Extensions
  1. Unit 1: Draw & Draw With Functions

U1LA4.3: Draw with Functions

How can I create a function that will draw a design?

Teacher Notes && Overview

In this lesson, students will write their first custom function that will perform an action on the screen. Today, that action will be to draw a smiley face (or other design of your choosing, if you’d like to showcase something else!).

This lesson is very teacher-heavy as students get introduced to the thought process behind writing functions. However, it is closely followed by a mini-project that will allow them to complete work independently and explore some of these ideas on their own.

Objectives

Students will be able to...

  • Create a function that draws a design

  • Incorporate parameters to control aspects of their function such as position

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

Review:

  • Function

  • Arguments

  • Parameters

Planning Notes && Materials

Planning Notes
Materials

This lesson is mostly delivered in a code along. Prior to the lesson, ensure you have a working Smartboard/Projector and students have computers available to them.

No materials needed beyond computer and starter code.

Resources

Assessments

Formative:

  • happyFace() function (Formative)

  • angryFace() function (Formative)

Summative:

  • Create an Emoji (Upcoming Mini Project)

  • Abstract Album Art (Upcoming Final Project

Do Now/Warm Up (~5 minutes)

Code Along: Happy Face (~15 - 20 minutes)

In this code along, you will build a function called happyFace() that will take the existing code for the happy face and turn it into a function. While the first step in the code along is always the same, subsequent steps can be a choose-your-own-adventure based on how your class has performed on past skills from the transformation lessons.

To begin, explain to students the setup of functions. At the bottom of the starter code, begin by setting up an empty function, explaining each piece, like so:

//Write your functions down here!
function happyFace(){

}

From there, take the code for the happy face - lines 11 - 17 - and copy/paste them into the function. Remove them from the draw() function so you have something that looks like this:

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES)
}

function draw() {
  background(220);
  text(mouseX + ", " + mouseY, 20, 20)
  
  //Happy Face
  
  //Angry Face
  noStroke()
  fill(235, 161, 70)
  ellipse(275,200,100)
  strokeWeight(2)
  stroke(0)
  line(270,196,289,183)
  line(254,196,237,188)
  strokeWeight(1)
  arc(284,200,25,25,0,180)
  arc(261,232,20,40,180,0)
  arc(245,200,15,25,0,180)
  
}

//Write your functions down here!
function happyFace(){
  strokeWeight(1)
  stroke(0)
  fill(169, 222, 183)
  ellipse(125,200,100)
  arc(110,200,25,25,180,0)
  arc(160,200,15,25,180,0)
  arc(136,226,40,10,0,180)
}

Students will notice that the happy face has disappeared. Explain that now the function has been DEFINED, you can CALL it in the draw function. In the draw function, write happyFace() below the comment so it reappears. This may not seem super impressive to students - it’s where they started, after all - but the benefit of this method is that now they can make MANY happy faces. Ask students how they could make more and prompt them to the idea of writing the function call several times if needed. They will notice a problem - there is still only one happy face. Ask students why this is - many will realize it’s because it is drawing at the same place every time.

This is your chance to choose a code along path that is most sensible to your students from the options below!

Option A (recommended):

  • Students will create parameters for x and y

  • Students will use this x and y to control the positions of each shape, adding and subtracting to keep the distances correctly related to each other.

  • This is an easy and direct approach for students who may not have felt comfortable working with push(), pop(), and translate().

//Final Product
function happyFace(xPos, yPos){
  strokeWeight(1)
  stroke(0)
  fill(169, 222, 183)
  ellipse(xPos,yPos,100) //125, 200
  arc(xPos-15,yPos,25,25,180,0)
  arc(xPos+35,yPos,15,25,180,0)
  arc(xPos+11,yPos+26,40,10,0,180)
}

Option B:

  • This option will require you to do an advance preview of transformations specifically translate(), push(), and pop(). They are relatively low lift, but anticipate it will take an additional 10-20 minutes to explain. It may confuse students still struggling with the coordinate system.

  • Students will create parameters for x and y

  • Students will use this x and y to control the translation of the shape, and will rewrite the shape to draw from 0.

  • Be sure to include a push and pop so the translation only applies in the function!

//Final Product
function happyFace(xPos, yPos){
  push()
    translate(xPos,yPos)
    strokeWeight(1)
    stroke(0)
    fill(169, 222, 183)
    ellipse(0,0,100) //125, 200
    arc(-15,0,25,25,180,0)
    arc(35,0,15,25,180,0)
    arc(11,26,40,10,0,180)
  pop()
}

Option C:

  • In this option, start with Option A, and then ask students to scan the reference sheet for something that would make moving many shapes easier. Once they get to translation, revise the function.

  • This would also be a terrific second-day activity or something to bring out as an extension when students work on the mini-project.

Once students have a working function and can use the function call several times to draw many smileys, ask them what else they may want to change about the smiley. Rather than coding that in now, ask them to include comments to come back to later.

Independent Practice: Angry Face (~10 minutes)

Explain to students that they will now practice what they’ve learned by turning the angry face into a function. You can choose to have students work alone or to pair program. If they are pair programming, have them swap after each 2-3 steps/new lines of code!

Wrap-Up (~5 minutes)

Time permitting, consider having one or two students share their solutions with the class, or having students feeling stuck share their non-solution to get feedback from the class.

You may want to collect their work (via Google Form or similar) to review the functions they have written as an exit ticket. Consider having them add any questions they still have as comments before submitting!

Extensions

After this lesson, students will be creating functions of their own unique designs. Encourage students to try for the most efficient way to write their functions now, and if they need more to do, ask them to review a previous design - like the taijitu symbol - and turn it into a function.

PreviousU1LA4.2: Intro to Functions && Function CallsNextU1LA4.4: Using the Random Function

Last updated 2 years ago

(YouTube)

Lesson Starter Code ( | )

Display link to starter code ( | ) and ask students to duplicate the code so they can be ready to begin the lesson. If you would like, this is also a great place to put an SEL check, like asking students to complete a mood meter, journal, or otherwise react to how their day or week is going.

Your First p5.js Abstraction
p5 Editor
repl.it
p5 Editor
repl.it