Week 1

Introduction to shapes

Coordinate System and Shapes

• Coordinates of a point in two dimension • Draw a line between two points• Draw rectangle • Draw different shapes

X

Cartesian coordinates

• Coordinates are used to identify locations on the earth’s surface

• Are based on measurements of displacement from a given location

• Two types: • – Plane

– global

• Cartesian coordinates are determined as follows: – Locate an origin – Set two axes through origin in fixed direction, at right angles to each

other • By convention these are usually:

– Identified as x (horizontal) and y (vertical) – i.e., y is anti-clockwise from x– X is east, y is north – We write P(x1,y1).

– OP = sqrt(x12+ y12)

Y

Xp

x1

y1

o

A Cartesian Plane

• This is a Cartesian plane

• It has an x-axis, a y-axis, and an origin

• The Cartesian plane is divided into 4 quadrants by the x and y axis

Plotting Points

• Each point placed on the Cartesian plane consists of an ordered pair

• This ordered pair represents the x and y axis coordinates of the point

• For example, the point (3, 5) has an x-coordinate value of +3, and a y-coordinate value of +5

Plotting Points Examples• Plot these

points:A) (2, 5)B) (-2, 4)C) (4, -3)D) (-2, -5)E) (2, 0)F) (0, -4)

Identifying Coordinates Examples

A)B)C)D)E)F)

Cartesian coordinates

• Line • Rectangle• Square• Ellipse• Triangle • Quadrilateral

Plotting shapes

• What is needed to plot a line? (2 pts)• What do we need to plot a triangle?• what do we need to plot a rectangle?(1

pt,width, height)• What do we need to plot and ellipse? (1

pt,width, height).• Quadrilateral (4 pts)

Coordinates The coordinates ofThe point B are 4 and 5.

The coordinates ofThe point A are 1 and 0.

Draw a line between A and B

line(1,0,4,5);

Draw a line between P1(x1,y1) and P2(x2,y2)

• line(x1, y1, x2, y2);• Try this with different values of x of y.

Coordinates and computers

Simple shapespoint, line, rectangle and ellipse

point

• A point is easy to draw • We only need an x and y coordinate.

• A line() is not difficult • We only need two points: (x1,y1) and (x2,y2):

Rectangle• To draw a rectangle is bit complicated• In Processing, a rectangle is specified by the coordinate for the top left

corner of the rectangle, as well as its width and height.

Rectangle (Cont)CENTER Mode

• A different way to draw a rectangle is– Specify the center-point, width and height. The mode here is

”CENTER".

Rectangle CORNERS Mode

• Another way to rectangle is:– to specify two points (the top left corner and the bottom

right corner). The mode here is "CORNERS".

Ellipse“CENTER” Mode

• ellipse() is identical to rect() • The default mode for ellipse() is "CENTER", rather than

"CORNER.” as in the case of rect().

Ellipse“CORNER” Mode

Ellipse“CORNERS” Mode

Exercise

• Write a program to output the following:

Solution

size(200,200);rectMode(CENTER);rect(100,100,20,100);ellipse(100,70,60,60);ellipse(81,70,16,32); ellipse(119,70,16,32); line(90,150,80,160);line(110,150,120,160);

Home Activity

• Install processing • Ready chapter one from the book – Learning processing– Do online as many exercises from the book – Redo online examples.