week 1 introduction to shapes. coordinate system and shapes coordinates of a point in two dimension...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/1.jpg)
Week 1
Introduction to shapes
![Page 2: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/2.jpg)
Coordinate System and Shapes
• Coordinates of a point in two dimension • Draw a line between two points• Draw rectangle • Draw different shapes
X
![Page 3: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/4.jpg)
• 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
![Page 5: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/7.jpg)
Plotting Points Examples• Plot these
points:A) (2, 5)B) (-2, 4)C) (4, -3)D) (-2, -5)E) (2, 0)F) (0, -4)
![Page 8: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/8.jpg)
Identifying Coordinates Examples
A)B)C)D)E)F)
![Page 9: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/9.jpg)
Cartesian coordinates
• Line • Rectangle• Square• Ellipse• Triangle • Quadrilateral
![Page 10: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/10.jpg)
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)
![Page 11: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/11.jpg)
Coordinates The coordinates ofThe point B are 4 and 5.
The coordinates ofThe point A are 1 and 0.
![Page 12: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/12.jpg)
Draw a line between A and B
line(1,0,4,5);
![Page 13: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/13.jpg)
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.
![Page 14: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/14.jpg)
Coordinates and computers
![Page 15: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/15.jpg)
Simple shapespoint, line, rectangle and ellipse
![Page 16: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/16.jpg)
point
• A point is easy to draw • We only need an x and y coordinate.
![Page 17: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/17.jpg)
• A line() is not difficult • We only need two points: (x1,y1) and (x2,y2):
![Page 18: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/18.jpg)
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.
![Page 19: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/19.jpg)
Rectangle (Cont)CENTER Mode
• A different way to draw a rectangle is– Specify the center-point, width and height. The mode here is
”CENTER".
![Page 20: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/20.jpg)
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".
![Page 21: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/21.jpg)
Ellipse“CENTER” Mode
• ellipse() is identical to rect() • The default mode for ellipse() is "CENTER", rather than
"CORNER.” as in the case of rect().
![Page 22: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/22.jpg)
Ellipse“CORNER” Mode
![Page 23: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/23.jpg)
Ellipse“CORNERS” Mode
![Page 24: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/24.jpg)
Exercise
• Write a program to output the following:
![Page 25: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/25.jpg)
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);
![Page 26: 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](https://reader035.vdocuments.site/reader035/viewer/2022062712/56649c765503460f94929e6e/html5/thumbnails/26.jpg)
Home Activity
• Install processing • Ready chapter one from the book – Learning processing– Do online as many exercises from the book – Redo online examples.