The Coder's Handbook

Drawing Shapes

THE CANVAS

Making The Canvas

When you write a processing program, the first thing you need to do is set the size of the canvas. You must do so in the setup() method. There are two options:


void size(int canvasWidth, int canvasHeight)

  • Creates a window with the specific height and width


Code:

size(800, 600); // Creates a window that is 800 wide and 600 tall


void fullScreen()

  • Makes your running program take up the whole screen


Code:

fullScreen(); // Makes your code take up the whole screen

Built-In Variables

  • Once you have set the width and height of the window, you can access them any time using the variables width and height.

  • Hard coded values in your code are called magic numbers and are considered a bad practice. Instead of repeating them, use width and height.


println(width + " by " + height); // Prints out 800 by 600

The Coordinate Plane

 In Processing, you’ll use a coordinate plane. This works like in your math class:


  • The x axis is exactly the same
    As you move to the right, X gets bigger.

  • However, the y axis is flipped.
    As you move down, Y gets bigger.

  • Notice that there are no negative values.
    0,0 is in the top left corner of the screen.


SHAPES

Rectangle


void rect(int x, int y, int width, int height)

  • A rectangle's x and y coordinates refer to its top-left corner


Code:

rect(200, 300, 60, 25) // Rectangle at (200, 300) that is 60 wide and 25 tall



Ellipse


void ellipse(int x, int y, int width, int height)

  • An ellipse's x and y coordinates refer to its center


Code:

ellipse(150, 150, 25, 25) // Ellipse at (150, 150) that is 25 wide and 25 tall



Lines


void line(int x1, int y1, int x2, int y,2)

  • Draws a line between two points


Code:

line(90, 80, 150, 200) // Draws a line between (90, 80) and (150, 200)

Triangle

void triangle(int x1, int y1, int x2, int y2, int x3, int y3)

  • Draws a line between three points


Code:

triangle(90, 80, 10, 20, 75, 80) // Draws a triangle between (90, 80), (10, 20), and (75, 80)

Looking for more shapes? Check out the official reference.
Note: A few of these may only work on the newest version of Processing.

AN EXAMPLE

Putting It All Together


Code:

void setup()

{

size(400,300);

rect(50, 50, 20, 100);

ellipse(200, 100, 50, 50);

triangle(0, 300, 400, 300, 200, 200);

line(50, 250, 350, 50);

}

RESOURCES

  • Chapter 1 - Pixels