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

2. Graphics Package To use graphics, you first need to import it as it is a library To use graphics, you first need to import it as it is a library import graphics import graphics To actually use a GUI window, you will need to open it up To actually use a GUI window, you will need to open it up window = graphics.GraphWin() window = graphics.GraphWin() To close a window, use the close command To close a window, use the close command window.close() 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 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 * Instead of import graphics, use from graphics import * The * means you are importing everything inside the library The * means you are importing everything inside the library window = GraphWin() window = GraphWin() www.michaelliut.ca/cs1md3

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

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

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

7. Graphics Package varName = Rectangle(Point1(x,y), Point2(x, y)) varName = Rectangle(Point1(x,y), Point2(x, y)) varName is the name of the rectangle varName is the name of the rectangle Point1(x, y) is the point of the upper left corner Point1(x, y) is the point of the upper left corner Point2(x, y) is the point of the lower right corner Point2(x, y) is the point of the lower right corner varName = Line(Point1(x, y), Point2(x, y)) varName = Line(Point1(x, y), Point2(x, y)) varName is the name of the line varName is the name of the line Point1(x, y) is the point of one of the endpoints Point1(x, y) is the point of one of the endpoints Point2(x, y) is the point of the other end point Point2(x, y) is the point of the other end point Remember to display all your objects! 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

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. Graphics window was terminated. www.michaelliut.ca/cs1md3

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

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

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