Unit 1 Drawing, Variables, Random
How can code be used as a creative and expressive medium?

1.1 p5.js Introduction and Deconstruction

How can we break down a robot into basic shapes in p5.js?


Overview

In this learning activity students will create a visual composition using the p5 shape-drawing functions (ellipse, rect, line, point, quad, triangle), and set their fill and stroke to a grayscale value.

They will understand the p5 canvas coordinate system, call functions and pass parameters to them, and consult the p5 reference for documentation about them.

Suggested Duration

45 minutes

Objectives

Students will be able to:

  • Create an account on the editor
  • Explain what p5.js is
  • Describe things you can create on p5.js
  • Understand the p5 canvas coordinate system

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

Algorithms:

  • Explain why I used specific instructions to complete a task.
  • Compare and contrast my instructions with other instructions that complete the same task.

Vocabulary

Computational Media The practice of using programming to build expressive and interactive computer applications and media.
p5.js An open source Javascript library that allows people to make web pages animated and interactive.
IDE Integrated development area is a software application that provides a place for computer programmers to develop code.
Unplugged Activity An activity that can be conducted without the use of computers or electronic equipment.
Abstraction Abstraction is the process of taking away or removing characteristics from something in order to reduce it to a set of essential characteristics.
Width Horizontal distance of a 2D shape
Height Vertical distance of a 2D shape
Radius Distance from the center to edge of a circle
Diameter Distance from edge to edge of a circle passing through the center point
Cartesian (Coordinate) Place Four quadrant grid with an x & y axis, origin, etc.

Resources

Intro: What is p5?

In this course we are going to make projects using p5.js. Before we explain what is p5.js, watch this video and see for yourself what kind of projects you can make it with it!

p5.js (or simply p5) is a JavaScript library for creating visual and interactive art in web browsers. p5.js works with the three native web languages (JavaScript, HTML, and CSS) to make work that is easily shareable on the Internet.
This programming language will be used in this course to introduce basic programming concepts and apply them to create computational media by building expressive and interactive computer applications and media.

Unplugged Activity: Draw a Robot and Write Pseudocode

Before we start to give instructions to computers, we are going to practice by writing instructions on paper. You will use a graph that has the p5.js coordinate system to draw out a design, and write down instructions on how another person could draw them.



Step 1: Draw a robot using basic shapes

  • Use only two types of shapes: ellipses and rectangles
  • Combine up to 5 shapes total.
  • Place the shapes on the coordinate system on the worksheet, following the guidelines on the next pages.

Drawing Area: The Canvas


In p5, we use code to draw graphics on a “canvas”. The canvas displays the output of your code.

In a computer screen every pixel is a coordinate. It has an “x” value (horizontal) and a “y” value (vertical) that determines where the pixel is going to be located. But computers use a different coordinate system than the one you’re used to: the origin is located in the top left and the x value increases to the right while the y-value increases down vertically.

Source: https://processing.org/tutorials/drawing/

Example:

Use the following information to draw the robot on your worksheet.

Rectangles

  • Draw rectangles along grid lines.

Ellipses

  • Draw a point at two intersecting lines.
  • Draw an ellipse around that point with even width and height.

Step 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. You will need to specify the shape, the x and y coordinate, and the width and height of the shape (where applicable). Keep in mind that the x and y coordinate of a rectangle refer to one of it’s corners, while for an ellipse they refer to it’s center. Also keep in mind the p5 coordinate system with the origin in the upper left corner.


Extensions

Add a hat or another element to the robot:

  1. Using rectangles and ellipses.
  2. Find a partner and add one feature to their robot and have then them deconstruct the position and size of the new feature.

Create a symbol that’s meaningful to you:

  1. Think about the things that are meaningful to you, your community, or your family.
  2. If you had to make a super simple symbol for those things, what basic shapes would you use?
  3. Design a symbol on paper and then code in p5.
  4. Write a short paragraph explaining your symbol and its importance.