• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

BMS Processing Class

A Course23.com Production

"Stop, Pause, and Think..." -- Ms. Elwell
"Take your time, it isn't a race" -- Mr. Helmke

  • Home
  • Graphing and Color
    • Graphing Shapes
      • Activity 1
      • Activity 2
    • Color (R,G,B) and Grey Scale
      • Activity 3
      • Activity 4
  • Code and Sketches
    • Parts of Code
      • Activity 5
    • Your Code & OpenProcessing Sketches
      • Activity 6
      • Activity 7
  • Variables, etc
    • Variables
      • Activity pre8 and 8
      • Activity 8.1
      • Activity 9
      • Activity 10
      • Activity 11
      • Activity 11.1
    • Operator Precedence
      • Activity 12
      • Activity 13
    • Random
      • Activity 14
      • Activity 15
  • Conditionals – If, Else, Else If
  • Resources

Graphing Shapes

For many of these exercises it will help to have graph paper. If you don’t have any, you can download and print this page of graph paper

Note that in Processing, we set the grid origin (0,0) point in the upper left corner. Also note that increasing values of Y go down rather than up like you have seen in your math class. This is ok and has to do with how computer displays are normally programmed.  So, x goes across to the right; and y goes down.  Width and Height (for rect and ellipse) are determined by the little squares (pixels) on the grid.

Drawing Functions: point(), line(), rect(), ellipse()

The point function draws a point at the given x and y location on the screen. Parameters (also referred to as arguments or coordinates) are always given in (x,y) order:

1
2
point(x,y);
point(4,5);

The line function draws a line between two x and y locations on the screen:

1
2
line(x1,y1, x2,y2);
line(1,3,8,3);

The first two arguments “1,3” are the start point of the line and the last two arguments “8,3” are the end point of the line:

The triangle function draws a triangle. The function takes 6 parameters describing 3 points: x1,y1,   x2,y2,  x3,y3.

You call the triangle function like this:

1
2
triangle(x1,y1, x2,y2, x3,y3);
triangle(200,100,  300,300,  100,300);

The rect function draws a rectangle. The upper left corner of the rectangle is specified by the x and y parameters and then the width and height.

Calling the rect function looks like this with 2,3 as the x and y position of the rectangle with a width of 5 and a height of 4:

1
2
rect(x,y,w,h);
rect(2,3,5,4);

The ellipse function is similar to rect except it draws circles and ellipses. This time, the center of the ellipse is specified by the x and y parameters and then the width and height.

Calling the ellipse function looks like this example with 3,3 as the x and y position of the ellipse with a width of 5 and height of 5:

1
2
ellipse(x,y,w,h);
ellipse(3,3,5,5);

Complete Activity 1
Complete Activity 2

Primary Sidebar

Required Reading:

Course Coding Standards

Copyright © 2016–2021 Chris Elwell/Michael Helmke · This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License · Log in