Presentation is loading. Please wait.

# Introduction to shapes

## Presentation on theme: "Introduction to shapes"— Presentation transcript:

Introduction to shapes
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

Y p X o 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 p y1 X o x1

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: (2, 5) (-2, 4) (4, -3) (-2, -5) (2, 0) (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 of The point B are 4 and 5.
The point A are 1 and 0.

Draw a line between A and B

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 shapes point, 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.

Similar presentations

Ads by Google