[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 Foundational Student Outcomes
  • Vocabulary
  • Planning Notes
  • Resources
  • Assessments
  • Do Now/Warm Up (4 -8 min)
  • Intro (5 Min)
  • Draw Other Shapes and Navigate the p5.js Reference Sheet (~15-25 min)
  • Wrap Up
  • Extension

Was this helpful?

  1. Unit 1: Drawing, Variables, and Random

U1LA1.4 Various Shapes, Stroke, Weight, Fill

How can we use shape functions to create images?

Overview && Teacher Feedback

In this learning activity, students will explore the various p5 shape-drawing functions as pairs or in groups. The second focus of the lesson will be building research and collaboration skills so that students can have a successful time when programming in p5.js. Then they will continue to build on their understanding of functions and their parameters to recreate the robot from lesson 1.

  • This lesson is an exploratory lesson meant to help empower students with the ability to troubleshoot problems when coding. They will be heavily using the p5 reference website, so make students are pair programming efficiently.

  • The do-now offers great discussion questions around problem solving and collaboration.

  • Some students will struggle with researching on their own so it is important to tell them that a programmer is not able to remember every function but should be able to read and use them.

Objectives

Students should be able to:

  • Consult the p5 reference for documentations

  • Create triangles

  • Create quadrilaterals

  • Create arcs

  • Create shapes defined by its vertices

  • Use layering to create images

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.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 Foundational Student Outcomes

Abstraction:

  • Give examples of specific patterns in something I can see, do or touch.

  • 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 how I might help others identify patterns.

  • Explain why using patterns is necessary when creating with a computer.

Algorithms:

  • Describe more than one set of instructions that might complete a task.

  • Explain why I used specific instructions to complete a task.

  • Compare and contrast my instructions with other instructions that complete the same task.

Programming:

  • Experiment with the commands of a programming language.

  • Describe three ways a development environment helps me create a project.

  • Explain why I chose specific commands to communicate my instructions.

  • Describe the changes I made after testing at least three parts of my program.

  • Discuss what can and cannot be done with a specific set of commands.

Vocabulary

  • function - Functions are lines of code that perform specific tasks.

  • parameters - Function parameters are the names listed in the function definition.

  • triangle()

  • quad()

  • openShape()

  • arc()

Pre-Req Vocab:

  • vertex (plural: vertices) - a corner or a point where lines meet.

  • quadrilateral - A four-sided polygon.

  • triangle - Three-sided polygon

Planning Notes

Planning Notes
Materials Needed
  • Pairing or grouping students who have difficulty with literacy or difficulty reading the p5 reference with students who can assist in completing the task.

  • Students will need 3 tabs open or

    • p5 Editor or repl.it

    • Slide Decks (optional)

    • P5.js Reference Guide

  • Computer or laptop

  • Pens/Pencils

  • Rulers

  • Highlighters

Resources

Assessments

Formative: Guided questions, code alongs, peer examples Summative: Student Share Out, Blank Student Shape Guide

Do Now/Warm Up (4 -8 min)

  • Having an open discussion on these questions is a good way to gauge the temperature of the classroom. Students should know that a programmer does not know everything but they have them collaborate and research skills to find creative solutions.

  • Creating a poster from students' feedback can help create a successful and safe risk-taking culture in your classroom.

Ask Students:

  1. What do you do when you are stuck or confused on a problem?

  2. How do you think a software engineer solves a problem when they are stuck or confused?

  3. How does risk-taking play a role in problem-solving? Give examples using our classroom?

Optional Questions:

  1. How can we promote self-advocacy?

  2. What are successful peer collaboration skills?

  3. What would help you as a student to be able to search for solutions?

Intro (5 Min)

Tell students that this activity will have them problem-solving and researching with their peers. Ask students what they do when feeling stuck? This question will open up the discussion on how students go about solving problems.

Prompt students to think about these questions when they feel stuck. You can have them copy it from a slide deck or create a poster.

  • Ask yourself:

    • What was supposed to happen?

    • What happened instead?

  • If there is an error message look at the line number and error description. If the error message has a suggestion try that first.

  • Check for common errors working line by line from top to bottom

  • Play with the code. Make one change at a time then hit run.

  • Use teamwork. Compare your code to the code of someone next to you.

  • Attach a sticky note to the back of your laptop. Let your peers or teachers know that you need extra help.

Model how to navigate the reference guide and then how to read the arguments a function takes.

Draw Other Shapes and Navigate the p5.js Reference Sheet (~15-25 min)

One thing that students may notice is that the helper coordinate text is getting styled, too, and may become distracting or unreadable. This is because the draw function runs on a loop, meaning whatever the last styling text is will loop back up to the top and apply to whatever comes first if it is not otherwise styled. Ask students if they can figure out a solution, and they should come up with something like this:

strokeWeight(1) //alternately, they may use noStroke()
stroke(0)
fill(0)
text(mouseX + ", " + mouseY, 20, 20)

After they are done with the worksheet, ask them to create one or more of the following shapes in the p5.js:

  • Triangle using triangle() function

  • Quadrilateral using quad() function

  • Star using beginShape() function

  • An arc using the arc() function.

Their sketches should include:

  • Sketch name that matches the unit and lesson number. Make this a standard practice in your classroom.

  • A canvas size of 600 pixels wide by 120 pixels high.

  • Light gray background.

Examples of possible outputs:

Students do not have to recreate these shapes exactly. Circulate the room to ensure students are adding comments to their code to label each shape.

For students choosing to create the star shape or their own polygon, remind them that they can use the beginShape() function, and then add as many vertices as needed. Add endShape(CLOSE) at the end to close the shape.

Example:

Ask students and partners to explain the parameter of one new shape function and how their image aligns with the parameters. Teacher will circulate and and help clear confusion. Students should use the content from the reference to explain their answers.

Wrap Up

Ask 2-3 students (preferably that you have conferenced with) to share their answers to one of the shapes above. Students should share their project link with teacher prior to answering and explaining how they created their shapes.

Ask Students:

  • What are the benefits of displaying mouseX and mouseY on the canvas? How can it be used for future projects?

  • What was challenging when drawing more complex shapes?

  • What are the things important when drawing more complex shapes?

Extension

PreviousU1LA1.3: Rectangles, Ellipses, and LayeringNext🗃U1LA1 Mini Project: Taijitu Symbol

Last updated 2 years ago

Was this helpful?

Video Tutorial:

(Youtube Video)

(Youtube Video) | Starter Code ( | )

Interesting Video on Tech Culture:

Check out the p5.js online reference. Model how to navigate the reference guide and then how to read the arguments a function takes.

Explain the definition of fill(), stroke() and noStroke() to students, and then code along ( | ) to explain the difference between the 3 functions. Ensure students are adding comments to their code. After the code-along, give students time to practice using the functions on the other shapes.

The other thing they should notice is that there are shapes they haven't learned before! They work, but what do the numbers mean? In pairs or groups of 3 ask students to complete the following by filling in the missing blanks and using the to research information on each shape. Model how to complete the worksheet with the students.

|

If time allows, spend some time reviewing the arc function, angle measuring units, and how its parameters work using this and have the students compare their results in their groups. Then have them create this arc using the cheat sheet.

1.4: Color - p5.js
Basic shape guide
Blank Student Shape Guide
Using the Reference Sheet
Styling Shapes
p5 editor
repl.it
https://www.youtube.com/watch?v=QW834PGYnYI
www.p5js.org/reference
p5 editor
repl.it
worksheet
p5 reference
Possible Solution
Possible Solution with stroke() and fill()
p5 reference cheat sheet
Screenshot of the p5.js Reference Sheet
Four shapes on grey background, a triangle, a star-esque polygon, a quadrilateral, and a small arc.
Image of a continous line forming a house on a grey background
Circle (arc) with a slice missing