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.