2.2: Lines, Points, Color
How can I add other shapes and color to my sketch?
Teacher Notes && Overview
This lesson builds on students' first foray into code by introducing more ways to draw on the canvas, including styling shapes and lines and adding color beyond black/white/grey. As per the first lesson, please allow extra time if you feel your students need the practice.
If you are looking for further resources, activities, or would generally like a deeper dive into these topics, we recommend taking a look at the following lessons from our Introduction to Computational Media curriculum:
Objectives
Students will be able to:
Draw lines and points on the p5 canvas
Style shapes by adjusting strokeWeight, stroke color, and fill
Use RGB colors
Suggested Duration
1-2 Days Longer if you would like to utilize the extension/additions.
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
line() - p5 function to draw a line between two given points
point() - p5 function to draw a point based on a given x, y coordinate
stroke() - p5 function to change the color of lines, points, and shape outlines based on given RGB values
strokeWeight() - p5 function to set the width of lines, points, and shape outlines based on an integer value
subtractive mixing - color mixing that involves absorbing light from the surrounding area to show the desired color
additive mixing - color mixing that involves adding light to create the desired color
RGB - a color mode defined by mixing red, green, and blue colors to create value
opacity - how opaque or solid a shape appears
transparency - how transparent or see through a shape appears
Planning Notes && Materials
Please plan on printing or otherwise distributing copies of the Line Worksheet prior to the start of the lesson.
Resources
Line Worksheet (PDF)
p5 Reference Sheet (p5 Website)
Pair Programming Starter Code (p5 editor)
Adobe Color Picker (Adobe)
Assessments
Formative:
Pair Programming Activity
Summative:
Upcoming Mini Project
Do Now/Warm Up (~3 - 5 min)
Distribute the Line Worksheet to students upon entry. Ask students to identify the (x, y) endpoints for each line using the p5 coordinate system - they should clearly record these somewhere on the page.
Learning Lines (~10 - 12 minutes)
Ask students to create a new file in the p5 editor. They should practice renaming this file something useful, like 'Lesson 2.1 - Lines, Points, Color' or similar. Remember that they will need to hit the save button early and often to make sure they don't lose their project or progress!
Once students are in the program, explain to them that they are going to replicate what they see on the worksheet on the page, but first they need to know how to tell p5 to draw lines. Model with students navigating to the reference sheet and finding the line() function. This one behaves differently than the others as they are not setting a size - rather, they are giving it two points for a total of 4 values. The program will then create a line between these two points.
Be sure to capture this in a code comment and then draw one of the lines as a code along with your students - you can pick any line, but the result should be something like:
Release students to code in the other lines for ~3 - 5 minutes. Once done, ask them to call out code to you so you can add it to your displayed example.
Once you have a finished example, explain that there is one more shape you must learn - the point. If you look in the reference sheet, the point() function requires just two numbers - an x and a y. Practice putting a point anywhere on the page. Likely, students will be unable to see it, or will need to look VERY CLOSELY to see it. Explain to students that this is because it's taking up just a single pixel at the width of a line!
But - we can adjust. There is a function called strokeWeight() that controls the thickness of lines, points, and outlines around shapes. Add this ahead of your point (which can be at any location):
As with the fill from yesterday, students should notice that everything suddenly has a thicker strokeWeight. If we want each to be unique, they will need their own function. Add one to a line, then release students to add the rest. Each line should have a different thickness one they are done:
stroke() and Color (~10 - 12 minutes)
stroke() and Color (~10 - 12 minutes)Now, what if we want our lines to be different shades, like we did with the ellipses and rectangles? Students may have already tried using fill() and had no results. This is because lines, points, and the outlines of shapes do not have a fill() - they just have a stroke(). We can apply stroke() to change their color in the exact same way we do fill!
Give students ~3 minutes to add a stroke to each line/point.
Once they have it added, discuss that so far, all of their shapes have been in greyscale. But p5 does so much more than greyscale! Open up the reference sheet to fill() or stroke() and you'll notice there are a few different ways to get color. The most versatile is to use the default color mode RGB - red, green, blue - which will accept 3 numbers between 0 and 255 and mix the levels of red/blue/green together to create a color on the screen.
The only problem here is that this uses additive mixing - what students are used to seeing in art class is subtractive mixing. Subtractive mixing absorbs light so that students only see the light that is left, while additive mixing adds light to create the color. This creates differences in mixing:
This may make it difficult for students to intuit colors based on the number values. Luckily, there are a wide variety of color pickers online that will provide RGB (and HEX and HSB and many other) color numbers for students. A simple one is to just google 'color picker' which will bring up the one built into the google search engine. Students can also use the Adobe Color Picker, which will help them design more thoughtful palettes. Armed with this knowledge, give students ~5 -7 minutes to explore colors and give every line a different non-black/white/grey color with stroke.
fill() and Transparency (10 - 12 min)
fill() and Transparency (10 - 12 min)NB: This may be the start of a new class period - if so, treat the beginning portions of opening the code - or wherever you ended the previous day - like a do now activity.
Ask students to open the ellipse/rectangle code from the previous lesson. Instead of working directly into this code, ask them to duplicate the file and then adjust the name to include something about color, which is what they will be adding.
Explain that previously, they changed the color of things with stroke(), but that also works just as well for changing the inside color of shapes with fill(). Demonstrate adding a fill to one of the shapes that use all 3 values to make a color, then give students ~5-7 minutes to color the remaining shapes.
Once students have color on all their shapes, explain that there is actually an optional 4th value to color - also out of 255 - that controls opacity/transparency. The higher the number, the more opaque a shape is, and the lower the number, the more transparent. With students, try adjusting the opacity value of one of the circles that is sitting on top of a rectangle and see what happens.
Invite students to play with this idea for the next ~5 minutes - they may even want to add a few additional shapes or move shapes so they are partially overlapping, partially not to see how that changes the color results.
Pair Programming Challenge (~10 - 15 minutes)
After all of that, it's time for some student practice! For this practice activity, students will practice pair programming. Each student will need a partner; if you have an odd number, you may need to make adjustments to the starter code so that each student has an equal number of 'at bats.' One student from each pairing will make a copy of the Pair Programming starter code; they will share the link with their partner(s) after completing and saving.
To begin, one student will start as the 'driver' and one will be the 'navigator.' The driver is the only one allowed to touch the computer, and they must do what the navigator directs them to do, including where to click and what to type.
In this activity, students will be adding a stroke() and fill() color to each of the circles on the page. One student will drive and the other will navigate for the top row, and they will swap roles to complete the bottom row.
Wrap Up (~5 minutes)
As an exit slip or group discussion, ask students the following:
What is something you learned about working with color today?
What is a question you still have about working with color?
What is something you are excited for or hope to learn in coming lessons?
Extensions and Additions
These introductory lessons introduce very basic shapes, but there are more to be had in the reference sheet. If students are moving quickly, consider introducing them to triangle(), quad(), and beginShape(). These are all functions that take and connect points rather than using a single point and size to draw a shape. We will see some of them later, but for students who would like to explore in advance, this can be a good thing to add!
Last updated
