Graphics

1. Graphics Michael Liut (liutm@mcmaster.ca) Ming Quan Fu(fumq@mcmaster.ca) Brandon Da Silva(dasilvbc@mcmaster.ca) www.michaelliut.ca/cs1md3

2. Graphics Package • To use graphics, you first need to import it as it is a library • import graphics • To actually use a GUI window, you will need to open it up • window = graphics.GraphWin() • To close a window, use the close command • window.close() www.michaelliut.ca/cs1md3

3. Graphics Package • Since there are many methods inside the graphics library, there are short cuts to reduce the amount of code you type • Instead of import graphics, use from graphics import * • The * means you are importing everything inside the library • window = GraphWin() www.michaelliut.ca/cs1md3

4. Graphics Package • The default GUI window has a display size of 200px (length) by 200px (height) • Think of the GUI window as a graph with each pixel representing one unit • Only be one coordinate plane • The origin (0, 0) is the upper left corner • X-Value increases as you move right • Y-Value increases as you move down www.michaelliut.ca/cs1md3

5. Graphics Package • A point is just a pixel on the GUI • To create a point… • varName = Point (x, y) • varName is the variable name • x is the value of the x coordinate • Y is the value of the y coordinate • point1 = Point (100, 100) • After creating the point, you must display it • point1.draw(window) www.michaelliut.ca/cs1md3

6. Graphics Package • varName = Circle(Point(x,y), r) • varName is the name of the circle • Point(x, y) is the center of the circle • r is the radius • varName = Text(Point(x, y), text) • varName is the name of the text • Point(x, y) is the center of the text • text is a string denoted with double quotations www.michaelliut.ca/cs1md3

7. Graphics Package • varName = Rectangle(Point1(x,y), Point2(x, y)) • varName is the name of the rectangle • Point1(x, y) is the point of the upper left corner • Point2(x, y) is the point of the lower right corner • varName = Line(Point1(x, y), Point2(x, y)) • varName is the name of the line • Point1(x, y) is the point of one of the endpoints • Point2(x, y) is the point of the other end point • Remember to display all your objects! www.michaelliut.ca/cs1md3

8. Graphics Example 1 www.michaelliut.ca/cs1md3

9. Graphics Example 1 - RUN www.michaelliut.ca/cs1md3

10. Graphics Example 2 www.michaelliut.ca/cs1md3

11. Graphics Example 2 - CTD www.michaelliut.ca/cs1md3 www.michaelliut.ca/cs1md3

12. Graphics Example 2 - RUN www.michaelliut.ca/cs1md3

13. Graphics Example 2 - RUN www.michaelliut.ca/cs1md3

14. Graphics Example 2 - RUN www.michaelliut.ca/cs1md3

15. Graphics Example 2 - RUN www.michaelliut.ca/cs1md3

16. Graphics Example 2 - RUN • Graphics window was terminated. www.michaelliut.ca/cs1md3

17. setCoords Explanation https://ctools.umich.edu/access/content/group/8a0551bf-5d66-4a39-004b-3a90ff183423/Lectures/Zelle%20-%20Chapter%2005.pdf www.michaelliut.ca/cs1md3

18. Graphics - Assignment 3 • Due: Tuesday March 13, 2014 BY 11PM Expectations: • Follow the format specified in the assignment. • Read the assignment very carefully. Do NOT assume,if you are unsure ask! • Proper naming, use of functions, etc… • YOU MUST COMMENT ALL YOUR CODE! www.michaelliut.ca/cs1md3

19. Link to Guide • On my website: • http://www.michaelliut.ca/uploads/2/1/0/3/21032302/graphics.pdf • This package includes descriptions of how to use the graphics functions (included in graphics.py). www.michaelliut.ca/cs1md3