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

1.3 Rectangles, Ellipses, and Layering

How can we use shape functions to create images?


Overview

In this learning activity students will create a visual composition using the p5 shape-drawing functions rect() and ellipse(). They will continue to build on their understanding of functions and their parameters to recreate the robot from lesson 1.

Suggested Duration

45 minutes

Objectives

Students will be able to:

  • Consult the p5 reference
  • Create rectangles using the rect() function
  • Create ellipses using the ellipse() function
  • Understand the concept of layering to create images using multiple shape functions

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:

  • 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.
  • Discuss what can and cannot be done with a specific set of commands.

Vocabulary

Functions Functions are lines of code that perform specific tasks.
Parameters or arguments Are the values inside of a parenthesis following the name of the function. These are used to change the outcome of a function
rect() function Draws a rectangle to the screen
ellipse() function Draws an ellipse to the screen
Height Vertical distance of a 2D shape
Rectangle A 2D figure with four straight sides and four right angles
Ellipse A regular oval shape

Resources

Draw A Rectangle

p5 has many built-in functions to draw different shapes. In this example, we are drawing a rectangle.

The rect function takes four parameters: x, y, width and height. The x and y values refer to location on the canvas and the width and height refer to size.

Recreate the following example and play with the parameter values.

Example

To help you place shapes where you want them on the canvas, you can add the following line to your code:

text(mouseX + ", " + mouseY, 20, 20)

Take a look at the example below. You can move your mouse to where you would like your shape to be, and write down the coordinates to use them as parameters in your function call.

You also use this blank grid template to help you position your shapes.

Drawing Order

In p5, shape and color functions are rendered to the canvas in the order they're written in the program - from top to bottom.

Play with the order of the shapes here. Then remove the comments to see how the rectangles layer on one another.

http://alpha.editor.p5js.org/cs4all/sketches/S1aG4fO7m

Practice Drawing Rectangles

Recreate the following sketch using rectangles

Solution

Draw an Ellipse

Now draw an ellipse. Its parameters are the same as for the rectangle.

The ellipse function takes four parameters: x, y, width and height. The x and y values refer to location on the canvas and the width and height refer to size.

Recreate or access this example and play with the parameter values.

Your ellipse might overlap with your rectangle, like in the example below. Because the code in your sketch is executed from the top down, one line at a time, the shape that was drawn last will always be on top of the rest.

To change the drawing order, simply cut the line ellipse(335, 50, 50, 50); and paste it before the line rect(40, 40, 400, 60);

Practice Drawing Ellipses

Recreate the following image using rectangles and ellipses:

Some calculations will be needed in order to get the ellipse in the corner. You should duplicate your previous sketch so that they don't have to code one from scratch and keep a copy of their original sketch.

Draw Your Robot

Using code, draw the robot that you made on graph paper. You can use this starter sketch that contains the following:
  • Mouse canvas position indicator (x, y)
  • Adaptable grid

Think about the different components that make up your robot and what order will you need to draw its shapes. List them on paper before you start coding.

Extensions

Check out the p5.js reference online and add more shapes to your robot. Can you figure out how to add a triangle? A polygon?