Tutors

Lab-01

Labs

Drawing Simple Shapes

We will use the following built-in functions to draw simple shapes:
- rect()
- line()
- ellipse()

Drawing Rectangles

The syntax of the rect function is:

    rect(x, y, w, h)
        x = x-coordinate of the upper left corner of the rectangle
        y = y-coordinate of the upper left corner of the rectangle
        w = width of the rectangle
        h = height of the rectangle

Note that, in computing, the coordinates start in the top left hand corner i.e. (0,0) is in the top left of the screen. In the following picture, you can see the coordinates of the rectangle (1,2) along with its width (4) and height (3).

Rectangle example from www.processing.org

Enter the following code in your sketchbook:

    rect(20,30,50,30);

Run the code, by clicking on the play button (highlighted in red in the screen shot below):

Running code - click on the play button

The following window should appear with a rectangle that:
- starts at the (x,y) coordinates (20,30) [measured in pixels]
- has a width of 50 pixels
- has a height of 30 pixels

Rectangle

Drawing Squares

Using the rect() function, you can draw squares. Just set the width and height to the same number of pixels.
Below the code you wrote previously, try drawing a square that starts at the (x,y) coordinates of (40,5) and has a length of 20.
Run the code. Did a square appear?

Rectangle and square

Drawing Lines

The syntax of the line function is:

    line(x1, y1, x2, y2)
        x1 = x-coordinate of first point
        y1 = y-coordinate of first point
        x2 = x-coordinate of second point
        y2 = y-coordinate of second point

In the following picture, you can see an example of a line.

Line example from www.processing.org

Enter the following code in your open sketchbook:

    line(5,30,20,90);

When you run the code, you should see the following line that starts at (5,30) and ends at (20,90):

Drawing a line

Lab-01

Lab-01

Coding in Processing

Static Drawings