1 / 26

Week 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 different shapes. X. Cartesian coordinates. Coordinates are used to identify locations on the earth’s surface

dolan
Download Presentation

Week 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Week 1 Introduction to shapes

  2. Coordinate System and Shapes • Coordinates of a point in two dimension • Draw a line between two points • Draw rectangle • Draw different shapes X

  3. 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

  4. 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

  5. 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

  6. 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

  7. Plotting Points Examples • Plot these points: • (2, 5) • (-2, 4) • (4, -3) • (-2, -5) • (2, 0) • (0, -4)

  8. Identifying Coordinates Examples A) B) C) D) E) F)

  9. Cartesian coordinates • Line • Rectangle • Square • Ellipse • Triangle • Quadrilateral

  10. 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)

  11. Coordinates The coordinates of The point B are 4 and 5. The coordinates of The point A are 1 and 0.

  12. Draw a line between A and B line(1,0,4,5);

  13. 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.

  14. Coordinates and computers

  15. Simple shapespoint, line, rectangle and ellipse

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

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



  18. 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.

  19. Rectangle (Cont)CENTER Mode • A different way to draw a rectangle is • Specify the center-point, width and height. The mode here is ”CENTER".

  20. 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".

  21. Ellipse“CENTER” Mode • ellipse()is identical to rect() • The default mode for ellipse() is "CENTER", rather than "CORNER.” as in the case of rect().

  22. Ellipse“CORNER” Mode

  23. Ellipse“CORNERS” Mode

  24. Exercise • Write a program to output the following:

  25. 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);

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

More Related