U1LA1.2 Line Functions and Parameters

How do the parameters of function effect positioning on the p5 canvas?

Teacher Notes && Overview

In this learning activity, students will create a visual composition using the p5 shape-drawing functions point() and line(). They will be introduced to functions, parameters, and then how to call them in p5.

Students should have already created an account and know how to login. If not it would be good to model it before reviewing the editor. NB: As a reminder, the p5.js Editor is not a learning management system like Google Classroom: it is strictly an online IDE for p5.js.

This lesson will be the first time that many students will be coding along with the teacher; give students enough time to copy as they get accustomed to code-alongs. Giving students access to the slide deck will help with questions, sharing links and entry points for anyone who may have gotten off track or needs help.

Objectives

Students will be able to:

• Understand the p5 canvas coordinate system

• Consult the p5 reference for documentation

• Create a line and point

• Change the grayscale value of a canvas

• Use lines to create a rectangle or a house

Suggested Duration

1 Period (~45 min)

NYS Standards

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

• IDE - Integrated development area or IDE is a software application that provides a place for computer programmers to develop code.

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

• Parameters or Arguments - Are the values inside of parenthesis following the name of the function. These are used to change the outcome of a function

Pre-Req Vocab:

• Width - Horizontal distance of a 2D shape

• Height - Vertical distance of a 2D shape

• Cartesian (Coordinate) Plane - four-quadrant grid with an x && y-axis, origin, etc.

• Vertices - a point where two or more lines meet

Planning Notes && Materials

Planning Notes	Materials
You’ll be using the online IDE A LOT - make sure every code example linked in your lesson is updated and usable Students should log-in to their account at the beginning of each class (build this as a routine in your classroom) Students will need 3 tabs open for every lesson of this course: their IDE, the p5 referene sheet, and the slide decks (optional).	Line Worksheet (printed) Pens/Pencils Highlighters (optional) Rulers (optional)

Resources

• p5.js Reference Sheet

• Line Worksheet

• Simplified Blank Editor w/ Text Coordinates (repl.it)

• Basics of Drawing (Youtube Video)

• (Optional) Desmos Coordinate Grid Activity

• (Optional) Desmos Coordinate Grid Tool

Assessments

Formative:

Summative:

• Taijitu Symbol (Upcoming Mini Project)

• Abstract Album Art (End of Unit Project)

Do Now/Warm Up (~3 - 5 min)

This unplugged activity will help reinforce your student’s understanding of the p5.js coordinate plane. Students can work as groups, pairs, or individually.

Ask students to:

• Take a Line Worksheet

• List the starting and ending points of each line using the p5 coordinate plane.

• The first point is on the left and then the second is on the right.

Once students have finished the task, ask:

1. What would be different if these lines were to be drawn on a regular cartesian plane?

2. What are the coordinates for lines 1 - 6?

Web Editor Overview (~5 - 7 minutes)

It’s up to you if you would like to run this session as a code along, or if you would like to have students clamshell their computers and simply watch. Decide based on what you know of your class and their ability to pay attention! In either situation, if possible, provide steps on a slide deck for any student who may miss steps.

Begin by reviewing how to log in and navigate your IDE of choice.

Be sure to demo saving if you are in the p5.js editor - always foreign to students who didn’t grow up with Clippy - and how to open saved files. In repl.it, you might show students how to find and organize their repls into folders.

Remind students that having a user account will allow them to save their projects and share them on the web.

Review the main parts of the IDE. If students have not, when you are finished ask students to log in to their accounts. You might have to walk them through again on how to log in.

Once students are logged in, continue to the next section.

createCanvas() and background()

Introducing functions and their parameters for the canvas will be the students' first code alone so some students may ask you to repeat a step or to zoom in on sections of code - make life easier by making your text large in advance!

Start by adjusting the values within createCanvas(), hitting run each time. Once you've done it a few times, allow students ~20-30 seconds to experiment on their own. Then ask: What do you think this function does? What do these numbers control?

Once students have answers that they control the size - specifically width and height of the canvas - add a code comment using //. It may look something like this:

createCanvas(400,400) //Changes width, height of canvas

Then, move on to the background() and similarly adjust the value within the (). Repeat the process of exploration before asking: What do the numbers in the background function control?

Students may not recognize that the background function numbers must be in a certain range - if you go to high it will always be white, and negative numbers will always be black. Explain that this is taking a color range from 0 - 255. Again, teach students to leave a comment such as:

background(220) // The num controls color, 0 - 255

This visual may help students in understanding background colors:

A scale going from black (0) to white (255) with number values marked in between.

Make sure students understand that they've been assessing functions, which are the words with () after them. Different functions will accept different arguments, which fulfill parameters to make them behave differently. Not all functions accept the same arguments!

If time permits, you may start to grow student thinking by asking: What do you think would happen if I add another background?

Add another background of a color directly below the first - you should only see the last typed background. This is because the code runs in order, top down, which means it is making both backgrounds - but the last one typed is 'painting over' the previous one(s). Students will explore this idea of order more in later lessons.

Line && Point Function Code Along (5 min)

For this code along it is important to spend time reviewing how the canvas works in p5 and its differences from a cartesian plane. Students can copy these functions and their definitions into a journal. A good practice is to hang posters around the classroom every time a new function is added. Recreate the following example (p5 editor | repl.it) with your students:

function setup() {
  createCanvas( 600,  120 );
}

function draw() {
  background ( 180 ) ;
  
  //Code along: Draw a point at x=110, and y=80
  point( 110,  80 );

  //Code along: Draw a line from point(300, 20) to (400, 100)
  line( 300,  20,  400,  100 );
}

Begin by explaining that you are going to draw a point() and a line() on the screen. (Beware - points are hard to see without changing strokeWeight, so students may need to do some squinting on their own screens!) We don't know much about p5 yet, but luckily, there is a resource to help us.

Direct students to the p5 reference sheet and start by looking up points. Review how we know what to type in our own code, and ask students how many arguments and what sort of arguments we need to create a point. Once they have an idea, take some values and create one together.

As you create, be sure to leave comments. Consistently model how to create and utilize comments so students can build great habits of annotating their code! This is ag reat practice for debugging, testing new code, temporarily blocking out old code, and generally keeping track of what they're doing.

Next, tell students you want to draw a line. Go back to the reference sheet and again ask: What arguments/parameters does a line function need in order to work? What are values I could use to draw a test line?

Draw one line together and label with a comment.

Student Practice

Once students are comfortable in the code along, they will be trying to recreate the lines from their worksheet as a p5 sketch.

Ask students to complete the following exercises on the online editor and title it "LinesU1L1.2"

1. Code the lines they found on their worksheet, leaving a comment for each one, and then:

2. Draw a point near the top-right corner of the canvas.

3. Draw a point in the middle of the canvas.

4. Draw a point near the bottom-left.

5. Draw a horizontal line, a vertical line, a diagonal line.

6. Draw a line from the top-left corner to the bottom-right corner.

Use the wrap-up section to have display students' work and for peer feedback.

Wrap Up

Bring students together to discuss successes and sticking points from the line() and point() practice. Have students come up to the front and live code the lines that they deconstructed from the do now activity.

Student share-outs are a powerful way to build community and promote student ownership of learning. One approach could be creating a “sharing calendar” where 1-2 students share daily on a rotation (once the whole class has gone, shares start over again).

Students should share struggles or strengths, and can either a) ask the class for help when sharing or b) share something helpful they learned with the class. Aim to be a teacher facilitator and allow the class to coach itself.

If you want students to share consistently, be sure to plan to hold mini-conferences with students the day they share prior to sharing. This can help them pinpoint something they would like to say or share.

Extensions

For students that finish early, ask them to:

• Check that their code has comments so that they can pick up their work from wherever they left off.

• Use multiple line functions to create a rectangle and a triangle so the lines create a house (pentagon).

• Add comments for each line position.

For classrooms in need of extra help:

Consider utilizing the optional Desmos activities to better familiarize students with the canvas.