P5.js
Introduction to p5.js
Things to do, read and watch:
Objectives
Quick Reflection
Unplugged Activity
gged activity
Instructions: Link to Worksheet
1. Draw a robot using basic shapes
Steps:
B. Combine up to 5 shapes total. Repeat shapes if needed.
C. Place the shapes on the coordinate system on the worksheet following the guidelines below
Unplugged Activity
Ellipses:
Unplugged Activity
Rectangles:
Unplugged Activity
Triangles:
Example
gged activity
2. Deconstruct your drawing
On the second page of the worksheet, list each shape used in your drawing. In the instructions section, provide the information for each shape as if you were instructing someone to draw your robot including x-coordinate, y-coordinate, width, and height (when applicable.)
gged activity
Unplugged Activity
3. Translate your instructions into code using the following syntax.
Ellipse: ellipse(x,y,width,height)
Rectangle: rect(x,y,width,height)
Triangle: triangle(x1,y1,x2,y2,x3,y3)
gged activity
Unplugged Activity
Link to Worksheet
Reflection
Add your answers here: https://padlet.com/sepnyc/x4or6j0c5zaq
Overview
P5.js editor
What you’ll need for this Learning Activity
p5.js extends the Javascript programming language. Javascript is the standard language of the web. It allows web designers to make web pages interactive as opposed to static documents..
The p5 web editor allows for p5 sketches to be created, edited and saved in the browser.
What is it?
Play and Stop
Execute and stop
Your code
Main Navigation Menu
Editing Window
Write and edit
code
Console
Displays error
And print
messages
Preview
Displays code that is
run
Preferences
Change text size, theme
Color, toggle autosave
How does it look?
What can we do with it?
Project: Use code to draw the robot that you made on graph paper in the unplugged activity in the p5 editor.
Concepts
We’ll cover all of these concepts today by breaking them down so that they’re easy to understand. We’ll begin with functions. Functions are lines of code that perform specific tasks.
Functions
This line of code is a function that creates a p5.js canvas that is 600 pixels wide and 240 pixels high. The canvas is an element on webpage on which we will draw our graphics.
We will add lines of code to add graphics to that canvas.
First, play with the size of the canvas here
This function gives our canvas a background color between 0 (black) and 255 (white). background(value)
Change the shade of the canvas here.
Functions are lines of code that perform specific tasks. P5 has a function to draw a line, a function to draw a rectangle, and many many more. When we write one of these lines of code we are “calling a function.”
Two functions are automatically added
to your sketch when you open the editor.
Runs the bracketed code once when the program begins
Runs the bracketed code repeatedly in a loop
Functions
Read the following slides on parameters and turn and talk:
Parameters
Parameters are the values inside of the parentheses following the name of the function. These parameters will be different based on the information that the function needs. The createCanvas function needs two parameters from the programmer; the width and the height of the canvas. The background function needed the color value which in this case was a shade of gray between 0 and 255.
Parameters
Parameters
P5 makes drawing on the canvas easy by providing functions for us to draw shapes, but we need to be able to tell the program where to draw those shapes. To do that, we need to understand the coordinate system that we’ll be drawing in.
P5.js Coordinate System
Play with the point and line functions here.
Notice what each parameter controls.
point- The function name to draw a point is “point”. The parameters are (x,y) which are the x and y coordinates. In the p5 coordinate system, the top left corner is (0,0)
line- The function name to draw a line is “line.” Since a line is just a connection between two points, the parameters to draw a line are (x1,y1,x2,y2) which are the x and y coordinates of the two points that we want to connect with a line. The first x and y are the starting point and and the second are the end point.
Read the following slide on comments and add your answers to today’s padlet
Comments
Add your answers here: https://padlet.com/sepnyc/x4or6j0c5zaq
Lines with two slashes (//) before them will be read as comments in p5.js and will be ignored by the interpreter. The interpreter is the program that executes the instructions written in a programming language.
Programmers add comments to their code as notes to themselves or others who might be reading it. These comments will be ignored so they will not affect how the program works.
Comments are also useful when your program does not behave as expected. You can turn off or “comment out” lines of code one by one to find out which line is causing the problem. Different languages can use different characters to create comments.
Commenting code is excellent practice and should be constantly encouraged.
Comments
The rect function takes four parameters: x, y, width and height. For the rect function to work, it needs to know where to put the rectangle (the x and y locations) and what size the rectangle should be (width and height).
Activity: Draw another rectangle to the right of the rectangle here.
function setup( ){ this function runs once
createCanvas(600,120);
}
function draw( ){ this function runs in a loop
background(204);
rect(40,40,400,60); this shape is drawn first
ellipse(335,50,50,50); this shape is drawn second
}
Play with the order of the shapes here
Drawing Order
The program is executed from the top down so the last shape drawn will be on top
Drawing Order
Play with the strokeWeight and color here
Today’s Project:
Use code to draw on p5 the robot that you drew on graph paper.
One way to add color to our drawings is to use RGB values. We will need to pass three parameters to the fill or stroke function: one for red, one for green, and one for blue.
fill(red, green, blue)
stroke(red, green, blue)
Find an RGB color picker here
Play with the color values here
If you remember hex colors from CSS, they can also be used in p5 by writing the hex code in quotes.
fill(‘#fffff’)
We are going to learn more about these built in variables a bit later, but for now, we’ll add the following after our background in the draw function:
This will display our mouse location on the canvas to make it easier to draw more complex shapes.
Extra Project: Add color to your robot. Use RGB values, vary the stroke colors and stroke weights.
Reflection:
Add your answers here: https://padlet.com/sepnyc/x4or6j0c5zaq
Resources