## 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

Code:

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

void fullScreen()

Code:

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

Built-In Variables

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:

SHAPES

Rectangle

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

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)

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

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)

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

Drawing and Shapes