{"id":72,"date":"2019-01-15T23:24:28","date_gmt":"2019-01-15T23:24:28","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/chapter\/graphics-designing-and-developing-graphics-programs\/"},"modified":"2019-01-28T19:07:07","modified_gmt":"2019-01-28T19:07:07","slug":"graphics-designing-and-developing-graphics-programs","status":"publish","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/chapter\/graphics-designing-and-developing-graphics-programs\/","title":{"raw":"UNIT 3: Graphics: Designing and Developing Graphics Programs","rendered":"UNIT 3: Graphics: Designing and Developing Graphics Programs"},"content":{"raw":"<div class=\"unit-3:-graphics:-designing-and-developing-graphics-programs.\">\r\n<h2>Learning Objectives<\/h2>\r\n<ul>\r\n \t<li>Explain what we mean by object-oriented programming.<\/li>\r\n \t<li>Apply the fundamental concepts of computer graphics in a computer program.<\/li>\r\n \t<li>Create objects in programs and use methods to perform graphical computations.<\/li>\r\n \t<li>Write simple interactive graphics programs using objects available in the graphics module.<\/li>\r\n \t<li>Read and write programs that define functions and use function calls and parameter passing in Python.<\/li>\r\n<\/ul>\r\n<h1>Object Oriented Programming<span class=\"import-FootnoteReference\">\r\n<\/span><\/h1>\r\nPython is a multi-paradigm programming language, meaning it supports different programming approaches. In general, there are four main programming paradigms, logical, imperative, functional and object-oriented, with object-oriented being the most recent. Object-Oriented Programming's (OOP) approach to solving computational problems is by creating objects, which may contain data, in the form of fields (attributes), and code, in the form of procedures (methods).\r\n\r\nObject-Oriented Programming allows us to define, create and manipulate objects. Another feature of objects is that an object's procedures can access and often modify the data fields of the object with which they are associated. In OOP, computer programs are designed by making them out of objects that interact with one another.\r\n\r\nThere is significant diversity of OOP languages, but the most popular ones, including Python, are class-based, meaning that objects are instances of classes, which determine their data type.\r\n\r\nIt can be shown that anything solvable using one of these paradigms can be solved using the others; however, certain types of computational problems lend themselves more naturally to specific paradigms.\r\n<h3>Using Objects<\/h3>\r\nWe have been using string objects\u2014instances of class <code>str<\/code>\u2014for some time. Objects bundle data and functions together, and the data that comprise a string consist of the sequence of characters that make up the string. Strings are objects, and strings \u201cknow how\u201d to produce an uppercase version of themselves. For example, examine the following Python statements:\r\n<table style=\"border-collapse: collapse;width: 50%\" border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 100%\"><code>str = 'Hello!'<\/code>\r\n\r\n<code>str.upper()<\/code><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nHere <code>upper<\/code> is a method associated with strings. This means <code>upper<\/code> is a function that is bound to the string before the dot. This function is bound both logically, and as we see in the new notation, also syntactically. One way to think about it is that each type of data knows operations (methods) that can be applied to it. The expression <code>str.upper()<\/code> calls the method upper that is bound to the string <code>str<\/code> and returns a new uppercase string result based on the variable <code>str<\/code>.\r\n\r\nStrings are immutable, so no string method can change the original string, it can only return a new string. Confirm this by entering each line individually in the Python IDLE Shell to see the original <code>str<\/code> is unchanged:\r\n<table style=\"border-collapse: collapse;width: 50%\" border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 100%\">&gt;&gt;&gt; <code>str = \"hello\"<\/code>\r\n\r\n&gt;&gt;&gt; <code>str<\/code>\r\n\r\n<code>'hello'<\/code>\r\n\r\n&gt;&gt;&gt; <code>str2 = str.upper()<\/code>\r\n\r\n&gt;&gt;&gt; <code>str2<\/code>\r\n\r\n<code>'HELLO'<\/code>\r\n\r\n&gt;&gt;&gt; <code>str<\/code>\r\n\r\n<code>'hello'<\/code>\r\n\r\n&gt;&gt;&gt;<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\nWe are using the new object syntax:\r\n\r\n<code>object.method( )<\/code>\r\n\r\nmeaning that the method associated with the object\u2019s type is applied to the object. This is just a special syntax for a function call with an object.\r\n\r\nAnother string method is <code>lower<\/code>, analogous to upper, but producing a lowercase result.\r\n\r\nMany methods also take additional parameters between the parentheses, using the more general syntax:\r\n\r\n<code>object.method(parameters)<\/code>\r\n\r\nOne such method is <code>count()<\/code>:\r\n\r\nSyntax for count: <code>str.count(sub)<\/code>\r\n\r\nThe method <code>count()<\/code> returns the number of repetitions of a string <code>sub<\/code> that appear as substrings inside the string <code>str<\/code>. Try this in the Python Shell:\r\n<table style=\"border-collapse: collapse;width: 50%\" border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 100%\">&gt;&gt;&gt; <code>tale = 'This is the best of times. '<\/code>\r\n\r\n&gt;&gt;&gt; <code>tale<\/code>\r\n\r\n<code>'This is the best of times. '<\/code>\r\n\r\n&gt;&gt;&gt; <code>tale.count('i')<\/code>\r\n\r\n3\r\n\r\n&gt;&gt;&gt; <code>tale.count('is')<\/code>\r\n\r\n2\r\n\r\n&gt;&gt;&gt; <code>tale.count('That')<\/code>\r\n\r\n0\r\n\r\n&gt;&gt;&gt; <code>tale.count(' ')<\/code>\r\n\r\n6\r\n\r\n&gt;&gt;&gt;<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nThere is a blank space between the words in the string <code>'This is the best of times. '<\/code> above and an extra space at the end of the string. Blanks are characters like any other, except we can\u2019t see them.\r\n\r\nJust as the parameter can be replaced by a literal value or any expression, the object to which a method is bound with the dot may also be given by a literal value, or a variable name, or any expression that evaluates to the right kind of object in its place. This is true for any method call.\r\n\r\nTechnically the dot between the object and the method name is an operator, and operators have different levels of precedence. It is important to realize that this dot operator has the highest possible precedence. Read and see the difference parentheses make in the expressions (try this too!):\r\n<table style=\"border-collapse: collapse;width: 50%\" border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 100%\">&gt;&gt;&gt; <code>'hello ' + 'there'.upper()<\/code>\r\n\r\n<code>'hello THERE'<\/code>\r\n\r\n&gt;&gt;&gt; <code>('hello ' + 'there').upper()<\/code>\r\n\r\n<code>'HELLO THERE'<\/code><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nPython lets you see all the methods that are bound to an object (and any object of its type) with the built-in function <code>dir<\/code>. To see all string methods, supply the <code>dir<\/code> function with any string. For example, try in the Python IDLE Shell:\r\n\r\n<code>dir('')<\/code>\r\n\r\nMany of the names in the list start and end with two underscores, like <code>__add__<\/code>. These are all associated with methods and pieces of data used internally by the Python interpreter. You can ignore them for now. The remaining entries in the list are all user-level methods for strings. You should see <code>lower<\/code> and <code>upper<\/code> among them. Some of the methods are much more commonly used than others.\r\n\r\n[caption id=\"attachment_278\" align=\"aligncenter\" width=\"455\"]<img class=\"wp-image-278\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232337\/Picture1.png\" alt=\"\" width=\"455\" height=\"239\" \/> Figure 22: List of String Methods[\/caption]\r\n\r\nObject notation:\r\n\r\n<code>object.method(parameters)<\/code>\r\n\r\nhas been illustrated so far with just the object type <code>str<\/code>, but it applies to all types including integers and floating-point numbers.\r\n\r\nIn summary (Figure 23), objects are simply variables that are some defined data type (e.g. the variable \"age\" is an \"integer\" type). Objects have data associated with them (e.g. the variable \"age\" is assigned the value of 15 in the Python statement <code>age = 15<\/code>). To perform an operation (or procedure) on an object, we send the object a message. The set of messages an object responds to are called the methods of the object (e.g. the Python statement <code>print(age)<\/code>)\r\n<ul>\r\n \t<li>Methods are like functions that live inside the object.<\/li>\r\n \t<li>Methods are invoked using dot-notation:\r\n<code>&lt;object&gt;.&lt;method-name&gt;(&lt;param1&gt;, &lt;param2&gt;, \u2026)<\/code><\/li>\r\n<\/ul>\r\n<div class=\"unit-3:-graphics:-designing-and-developing-graphics-programs.\">\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"471\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232341\/image25.png\" alt=\"image\" width=\"471\" height=\"186\" \/> Figure 23: \"Object Oriented Programming Python Code\u201d by\u00a0 Miles J. Pool is\u00a0<span id=\"0.36263490351822636\" class=\"highlight\">license<\/span>d under CC-BY 4.0[\/caption]\r\n<h1>Simple Graphics Programming<\/h1>\r\nGraphics make programming more fun for many people. To fully introduce graphics would involve many ideas that would be a distraction now. This section introduces a simplified object oriented graphics library developed by John Zelle for use with his Python Programming book. The graphics library was designed to make it easy for novice programmers to experiment with computer graphics in an object oriented fashion.\r\n\r\nThere are two kinds of objects in the library. The <code>GraphWin<\/code> class implements a window where drawing can be done, and various graphics objects (like circles and squares) are provided that can be drawn into a <code>GraphWin<\/code>.\r\n\r\nIn order to use this module and build graphical programs you will need a copy of <code>graphics.py<\/code>. You can download this from <a href=\"http:\/\/mcsp.wartburg.edu\/zelle\/python\/graphics.py\">http:\/\/mcsp.wartburg.edu\/zelle\/python\/graphics.py<\/a> . You will want to place this file (<code>graphics.py<\/code>) in the <span style=\"text-decoration: underline\">same folder<\/span> you use for all your Python programs (the files with the <code>.py<\/code> extension).\r\n<div class=\"textbox\"><strong>Note to Reader:<\/strong> You will just be a user of the <code>graphics.py<\/code> code, so you do not need to understand the inner workings! It uses all sorts of features of Python that are way beyond the scope of this book. There is no particular need to open <code>graphics.py<\/code> in the Python IDLE editor.<\/div>\r\n<p class=\"import-Normal\">Once the module is downloaded (therefore \u2018installed\u2019), we can import it just like a library that is built into Python like math:<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>import graphics<\/code><\/p>\r\n<p class=\"import-Normal\">If typing this line in the Python IDLE Shell gives you no output, then you have installed the graphics module correctly! If there is an error message, then Python could not find the <code>graphics.py<\/code> file.<\/p>\r\n<p class=\"import-Normal\">We will begin with a simple example program, <code>graphIntroSteps.py<\/code><sup class=\"import-FootnoteReference\">[footnote]Written by: Harrington, Andrew N. \u201cHands-on Python Tutorial (Python 3.1 Version).\u201d Loyola University Chicago. https:\/\/anh.cs.luc.edu\/python\/hands-on\/3.1\/handsonHtml\/index.html#[\/footnote]<\/sup>, which you can download from here:<\/p>\r\n<p class=\"import-Normal\"><a href=\"http:\/\/www.pas.rochester.edu\/~rsarkis\/csc161\/_static\/idle\/examples\/graphIntroSteps.py\"><span class=\"import-Hyperlink\">www.pas.rochester.edu\/~rsarkis\/csc161\/_static\/idle\/examples\/graphIntroSteps.py<\/span><\/a><\/p>\r\n<p class=\"import-Normal\">Copy this .py file into the same folder that you copied the graphics.py file to and run it. Each time you press return, look at the screen and read the explanation for the next line(s).<\/p>\r\n<p class=\"import-Normal\">Look around on your screen, and possibly underneath other windows: There should be a new window labeled \u201cGraphics Window\u201d, created by the second line. Bring it to the top, and preferably drag it around to make it visible beside your Shell window. A <code>GraphWin<\/code> is a type of object from Zelle\u2019s graphics package that automatically displays a window when it is created. The assignment statement remembers the window object as win for future reference. (This will be our standard name for our graphics window object.) A small window, 200 by 200 pixels is created. A pixel is the smallest little square that can be displayed on your screen. Modern screens usually have more than 1000 pixels across the whole screen. <span class=\"import-st\">A <\/span><em class=\"import-Emphasis\">pixel<\/em><span class=\"import-st\"> is the basic unit of programmable color on a computer display or in a computer image.<\/span><\/p>\r\n<p class=\"import-Normal\">The example program <code>graphIntro.py<\/code> starts with the same graphics code as <code>graphIntoSteps.py<\/code>, but without the need for pressing returns.<\/p>\r\n<p class=\"import-Normal\">Added to this program is the ability to print a string value of graphics objects for debugging purposes. If some graphics object isn\u2019t visible because it is underneath something else or off the screen, temporarily adding this sort of output will help you debug your code. Let us examine each line of code in this graphics program.<\/p>\r\n\r\n<table>\r\n<tbody>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>from graphics import *<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">Zelle\u2019s graphics are not a part of the standard Python distribution. For the Python interpreter to find Zelle\u2019s module, it must be imported.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>win = GraphWin()<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">A GraphWin is a type of object that automatically displays a window when it is created. A small window, 200 by 200 pixels is created.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>pt = Point(100, 50)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">This creates a Point object and assigns it the name pt. A Point object, like each of the graphical objects that can be drawn on a GraphWin, has a method draw.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>pt.draw(win)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">Now you should see the Point if you look hard in the Graphics Window - it shows as a single, small, black pixel.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>cir = Circle(pt, 25)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">This creates a Circle object with center at the previously defined pt and with radius 25.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>cir.draw(win)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">Now you should see the Circle in the Graphics Window.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>cir.setOutline('red')<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">Uses method setOutline to color the object\u2019s border.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>cir.setFill('blue')<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">Uses method setFill to color the inside of the object.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>line = Line(pt, Point(150, 100))<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">A Line object is constructed with two Points as parameters. In this case we use the previously named Point, pt, and specify another Point directly.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>line.draw(win)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">Technically the Line object is a segment between the the two points. You should now see the line in the Graphics Window.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>rect = Rectangle(Point(20, 10), pt)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">A rectangle is also specified by two points. The points must be diagonally opposite corners.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>rect.draw(win)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">The drawn Rectangle object is restricted to have horizontal and vertical sides.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>line.move(10, 40)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">The parameters to the move method are the amount to shift the x and y coordinates of the object. The line will visibly move in the Graphics Window.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>print('cir:', cir)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print('line:', line)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print('rect:', rect)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">These three lines are used for debugging purposes. The coordinates for each object will be displayed in the Shell.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>input(\"Press return to end\")<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">This statement displays instructions (in the Shell) for the user.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\r\n<p class=\"import-Normal\"><code>win.close()<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\r\n<p class=\"import-Normal\">The Graphics Window is closed (it disappears).<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<p style=\"text-align: center\"><small><em>Table 4: Python graphIntro.py Code Explained<\/em><\/small><\/p>\r\n<p class=\"import-Normal\">Figure 24 shows the Graphics Window created by<code> graphIntroSteps.py<\/code> with the various graphics objects displayed in it. Next, in Figure 25, is the output that is displayed in the Python IDLE Shell. Once the user presses the Enter key (\u2018return\u2019) the Graphics Window disappears.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"147\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232343\/image27.png\" alt=\"image\" width=\"147\" height=\"165\" \/> Figure 24: Example Graphics Window[\/caption]\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"532\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232345\/image28.png\" alt=\"image\" width=\"532\" height=\"226\" \/> Figure 25: Python Idle Shell Output[\/caption]\r\n<h1>Graphics Windows: Coordinate Systems<\/h1>\r\n<p class=\"import-Normal\">Graphics windows have a Cartesian (x,y) coordinate system. The dimensions are initially measured in pixels. The first coordinate is the horizontal coordinate, measured from left to right, so in the default 200x200 window, 100 is about half way across the 200 pixel wide window. The second coordinate, for the vertical direction, increases going down from the top of the window by default, not up as you are likely to expect from geometry or algebra class. The coordinate 100 out of the total 200 vertically should be about 1\/2 of the way down from the top. See figure 26.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"229\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232348\/image29.png\" alt=\"image\" width=\"229\" height=\"204\" \/> Figure 26: Default Graphics Coordinate System[\/caption]\r\n\r\nMuch of the graphics programming we will attempt will be based on designing simple GUIs (Graphical User Interfaces) based on some of the programs we have already written. Graphical user interfaces (GUIs) are human-computer interfaces allowing users to interact with an app. Rarely will you find a computer application today that doesn\u2019t have some sort of graphical interface to use it. A graphical interface consists of a window which is populated by \u201cwidgets\u201d, the basic building blocks of a GUI. Widgets are the pieces of a GUI that make it usable, e.g. buttons, icons, menu items, on-screen text boxes for typing in information, etc. Basically, anything the user can see in the window is a widget.\r\n<p class=\"import-Normal\">Placing and drawing objects in a window defined by pixels (creating images on the pixel level) can get very tedious. The<code> graphics.py<\/code> module provides us with the ability to set the coordinate system of the window using the <code>setCoords<\/code> method, which we will see in the following section.<\/p>\r\n\r\n<h1>GraphWin Objects<span class=\"import-FootnoteReference\">\r\n<\/span><\/h1>\r\n<p class=\"import-Normal\">A <code>GraphWin<\/code> object represents a window on the screen where graphical images may be drawn[footnote]Based on: Zelle, John M. \"Graphics Module Reference.\" (2016).[\/footnote]. A program may define any number of <code>GraphWins<\/code>. A <code>GraphWin<\/code> understands the following methods. Recall<\/p>\r\n<p class=\"import-Normal\"><code>GraphWin(title, width, height)<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"padding-left: 30px\">Constructs a new graphics window for drawing on the screen.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 21.6pt\">The parameters are optional; the default title is \u201cGraphics Window\u201d and the default size is 200 x 200 pixels.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 21.6pt\">Example: <code>win = GraphWin(\"My App\", 500, 180)<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 21.6pt\">The following figure shows the resulting graphics window which is 500 pixels wide and 180 pixels high with a title of \u201cMy App\u201d.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"340\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232350\/image30.png\" alt=\"image\" width=\"340\" height=\"151\" \/> Figure 27: Default Graphics Window[\/caption]\r\n<p class=\"import-Normal\"><code>setBackground(color)<\/code> Sets the window background to the given color. The default background color depends on your system. See Section <em>Generating Colors<\/em> for information on specifying colors.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>win.setBackground(\"white\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>close()<\/code> Closes the on-screen window.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>win.close()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getMouse()<\/code> Pauses for the user to click a mouse in the window and returns where the mouse was clicked as a Point object.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>clickPoint = win.getMouse()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setCoords(x1, y1, x2, y2)<\/code> Sets the coordinate system of the window. The lower-left corner is (x1; y1) and the upper-right corner is (x2; y2).<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>win.setCoords(0, 0, 4.0, 4.0)<\/code><\/p>\r\n\r\n<h3>Example Program Using Coordinate Transformation<\/h3>\r\n[caption id=\"\" align=\"alignright\" width=\"200\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232352\/image31.png\" alt=\"image\" width=\"200\" height=\"211\" \/> Figure 28: Match the Colors Game[\/caption]\r\n<p class=\"import-Normal\">Suppose we wanted to create a simple game app where the user needed to match a pair of tiles with the goal of eventually pair-matching all the tiles in the grid. For example, the user might need to pair matching colored circles as seen here in Figure 28 by clicking on an empty pink square<\/p>\r\n<p class=\"import-Normal\">Drawing the objects of this GUI is certainly easier using coordinate transformation; e.g. defining the coordinate system of our GUI window to go from (0,0) in the lower left corner to (4,4) in the upper right corner).<\/p>\r\n<p class=\"import-Normal\">Examine the code below <code>(matchColorsGame.py)<\/code>.<\/p>\r\n\r\n<\/div>\r\n<div class=\"unit-3:-graphics:-designing-and-developing-graphics-programs.\">\r\n<p class=\"import-Normal\"><code>from graphics import *<\/code><\/p>\r\n<p class=\"import-Normal\"><code>win = GraphWin(\"Match the Colors\", 500, 500) #create a 500x500 window<\/code>\r\n<code># set coordinates to go from (0,0) in the lower left corner to<\/code>\r\n<code># (4,4) in the upper right.<\/code>\r\n<code>win.setCoords(0.0, 0.0, 4.0, 4.0)\u00a0\u2190<\/code>\r\n<code>win.setBackground(\"LightPink\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code># Draw the vertical lines<\/code>\r\n<code>Line(Point(1,0), Point(1,4)).draw(win)<\/code>\r\n<code>Line(Point(2,0), Point(2,4)).draw(win)<\/code>\r\n<code>Line(Point(3,0), Point(3,4)).draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><code># Draw the horizontal lines<\/code>\r\n<code>Line(Point(0,1), Point(4,1)).draw(win)<\/code>\r\n<code>Line(Point(0,2), Point(4,2)).draw(win)<\/code>\r\n<code>Line(Point(0,3), Point(4,3)).draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><code># Draw cirlcles in boxes<\/code>\r\n<code>circle1 = Circle(Point(.5,.5), .25)<\/code>\r\n<code>circle1.setFill('Red')<\/code>\r\n<code>circle1.draw(win)<\/code>\r\n<code>circle2 = Circle(Point(2.5,1.5), .25)<\/code>\r\n<code>circle2.setFill('Blue')<\/code>\r\n<code>circle2.draw(win)<\/code>\r\n<code>circle3 = Circle(Point(1.5,2.5), .25)<\/code>\r\n<code>circle3.setFill('Yellow')<\/code>\r\n<code>circle3.draw(win)<\/code>\r\n<code>circle4 = Circle(Point(3.5,2.5), .25)<\/code>\r\n<code>circle4.setFill('Blue')<\/code>\r\n<code>circle4.draw(win)<\/code>\r\n<code>circle5 = Circle(Point(.5,3.5), .25)<\/code>\r\n<code>circle5.setFill('Red')<\/code>\r\n<code>circle5.draw(win)<\/code>\r\n<code>circle6 = Circle(Point(2.5,.5), .25)<\/code>\r\n<code>circle6.setFill('Yellow')<\/code>\r\n<code>circle6.draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><code># wait for click and then quit<\/code>\r\n<code>win.getMouse()<\/code>\r\n<code>win.close()<\/code><\/p>\r\n<p class=\"import-Normal\">Our program still defines the size of the window in pixels (the shaded area in the figure below), but the placement of objects in the window uses the coordinates defined using the<code> win.setCoords<\/code> method. See Figure 29.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"270\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232355\/image32.png\" alt=\"image\" width=\"270\" height=\"243\" \/> Figure 29: Transformed Graphics Coordinate System[\/caption]\r\n<h3>Graphics Objects<\/h3>\r\n<p class=\"import-Normal\">The Graphics library provides the following classes of drawable objects: Point, Line, Circle, Oval, Rectangle, Polygon, and Text. All objects are initially created unfilled with a black outline. All graphics objects support the following generic set of methods:<\/p>\r\n<p class=\"import-Normal\"><code>setFill(color)<\/code> Sets the interior of the object to the given color.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> someObject.setFill(\"red\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setOutline(color)<\/code> Sets the outline of the object to the given color.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> someObject.setOutline(\"yellow\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setWidth(pixels)<\/code> Sets the width of the outline of the object to the desired number of pixels. (Does not work for Point.)<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>someObject.setWidth(3)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>draw(aGraphWin)<\/code> Draws the object into the given<code> GraphWin<\/code> and returns the drawn object.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>someObject.draw(someGraphWin)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>move(dx,dy)<\/code> Moves the object <code>dx<\/code> units in the <em>x<\/em> direction and <code>dy<\/code> units in the <em>y <\/em>direction. If the object is currently drawn, the image is adjusted to the new position.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>someObject.move(10, 15.5)<\/code><\/p>\r\n\r\n<h3>Point Methods<\/h3>\r\n<p class=\"import-Normal\"><code>Point(x,y)<\/code> Constructs a point having the given coordinates.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aPoint = Point(3.5, 8)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getX()<\/code> Returns the x coordinate of a point.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>xValue = aPoint.getX()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getY()<\/code> Returns the y coordinate of a point.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>yValue = aPoint.getY()<\/code><\/p>\r\n\r\n<h3>Line Methods<\/h3>\r\n<p class=\"import-Normal\"><code>Line(point1, point2)<\/code> Constructs a line segment from <code>point1<\/code> to <code>point2.<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: aLine = Line(Point(1,3), Point(7,4))<\/p>\r\n<p class=\"import-Normal\"><code>setArrow(endString)<\/code> Sets the arrowhead status of a line. Arrows may be drawn at either the first point, the last point, or both. Possible values of <code>endString<\/code> are <code>\"first\"<\/code>, <code>\"last\"<\/code>, <code>\"both\"<\/code>, and <code>\"none\"<\/code>. The default setting is <code>\"none\"<\/code>.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aLine.setArrow(\"both\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the midpoint of the line segment.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> midPoint = aLine.getCenter()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getP1()<\/code>, <code>getP2()<\/code> Returns a clone of the corresponding endpoint of the segment.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>startPoint = aLine.getP1()<\/code><\/p>\r\n\r\n<h3>Circle Methods<\/h3>\r\n<p class=\"import-Normal\"><code>Circle(centerPoint, radius)<\/code> Constructs a circle with the given center point and radius.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aCircle = Circle(Point(3,4), 10.5)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the center point of the circle.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = aCircle.getCenter()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getRadius()<\/code> Returns the radius of the circle.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>radius = aCircle.getRadius()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getP1()<\/code>, <code>getP2()<\/code> Returns a clone of the corresponding corner of the circle's bounding box. These are opposite corner points of a square that circumscribes the circle.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>cornerPoint = aCircle.getP1()<\/code><\/p>\r\n\r\n<h3>Rectangle Methods<\/h3>\r\n<p class=\"import-Normal\"><code>Rectangle(point1, point2)<\/code> Constructs a rectangle having opposite corners at <code>point1<\/code> and <code>point2.<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aRectangle = Rectangle(Point(1,3), Point(4,7))<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the center point of the rectangle.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = aRectangle.getCenter()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getP1()<\/code>,<code> getP2()<\/code> Returns a clone of the corresponding point used to construct the rectangle.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>cornerPoint = aRectangle.getP1()<\/code><\/p>\r\n\r\n<h3>Oval Methods<\/h3>\r\n<p class=\"import-Normal\"><code>Oval(point1, point2)<\/code> Constructs an oval in the bounding box determined by <code>point1<\/code> and <code>point2<\/code>.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>anOval = Oval(Point(1,2), Point(3,4))<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the point at the center of the oval.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = anOval.getCenter()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getP1(), getP2()<\/code> Returns a clone of the corresponding point used to construct the oval.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>cornerPoint = anOval.getP1()<\/code><\/p>\r\n\r\n<h3>Polygon Methods<\/h3>\r\n<p class=\"import-Normal\"><code>Polygon(point1, point2, point3, ...)<\/code> Constructs a polygon with the given points as vertices. Also accepts a single parameter that is a list of the vertices.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aPolygon = Polygon(Point(1,2), Point(3,4), Point(5,6))<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> aPolygon = Polygon([Point(1,2), Point(3,4), Point(5,6)])<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getPoints()<\/code> Returns a list containing clones of the points used to construct the polygon.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>pointList = aPolygon.getPoints()<\/code><\/p>\r\n\r\n<h1>Text Methods<\/h1>\r\n<p class=\"import-Normal\"><code>Text(anchorPoint, textString)<\/code> Constructs a text object that displays <code>textString<\/code> centered at <code>anchorPoint<\/code>. The text is displayed horizontally.<span class=\"import-FootnoteReference\">[footnote]Based on: Zelle, John M. \"Graphics Module Reference.\" (2016).[\/footnote]<\/span><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: message = <code>Text(Point(3,4), \"Hello!\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setText(string)<\/code> Sets the text of the object to string.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setText(\"Goodbye!\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getText()<\/code> Returns the current string.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>msgString = message.getText()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getAnchor()<\/code> Returns a clone of the anchor point.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = message.getAnchor()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setFace(family)<\/code> Changes the font face to the given family. Possible values are <code>\"helvetica\"<\/code>, <code>\"courier\"<\/code>, <code>\"times roman\"<\/code>, and <code>\"arial\"<\/code>.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setFace(\"arial\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setSize(point)<\/code> Changes the font size to the given point size. Sizes from 5 to 36 points are legal.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setSize(18)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setStyle(style)<\/code> Changes font to the given style. Possible values are: <code>\"normal\"<\/code>, <code>\"bold\"<\/code>, <code>\"italic\"<\/code>, and <code>\"bold italic\"<\/code>.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setStyle(\"bold\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setTextColor(color)<\/code> Sets the color of the text to color.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setTextColor(\"pink\")<\/code><\/p>\r\n\r\n<h1>Entry Objects<\/h1>\r\n<p class=\"import-Normal\">Objects of type <code>Entry<\/code> are displayed as text entry boxes that can be edited by the user of the program. <code>Entry<\/code> objects support the generic graphics methods <code>move()<\/code>, <code>draw(graphwin)<\/code>, <code>undraw()<\/code>, <code>setFill(color)<\/code>, and<code> clone()<\/code>. The Entry specific methods are given below.<span class=\"import-FootnoteReference\">[footnote]Based on: Zelle, John M. \"Graphics Module Reference.\" (2016).[\/footnote]<\/span><\/p>\r\n<p class=\"import-Normal\"><code>Entry(centerPoint, width)<\/code> Constructs an Entry having the given center point and width. The width is specified in number of characters of text that can be displayed.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox = Entry(Point(3,4), 5)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getAnchor()<\/code> Returns a clone of the point where the entry box is centered.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = inputBox.getAnchor()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getText()<\/code> Returns the string of text that is currently in the entry box.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputStr = inputBox.getText()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setText(string)<\/code> Sets the text in the entry box to the given string.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setText(\"32.0\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setFace(family)<\/code> Changes the font face to the given family. Possible values are <code>\"helvetica\"<\/code>, <code>\"courier\"<\/code>, <code>\"times roman\"<\/code>, and <code>\"arial\"<\/code>.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setFace(\"courier\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setSize(point)<\/code> Changes the font size to the given point size. Sizes from 5 to 36 points are legal.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setSize(12)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setStyle(style)<\/code> Changes font to the given style. Possible values are: <code>\"normal\"<\/code>, <code>\"bold\"<\/code>, <code>\"italic\"<\/code>, and<code> \"bold italic\"<\/code>.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setStyle(\"italic\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setTextColor(color)<\/code> Sets the color of the text to color.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setTextColor(\"green\")<\/code><\/p>\r\n\r\n<h1>Displaying Images<\/h1>\r\n<p class=\"import-Normal\">The Graphics library also provides minimal support for displaying and manipulating images in a <code>GraphWin<\/code>. Most platforms will support at least PPM and GIF images. Display is done with an Image object. Images support the generic methods <code>move(dx,dy)<\/code>, <code>draw(graphwin)<\/code>, <code>undraw()<\/code>, and <code>clone()<\/code>. Image-specific methods are given below.<span class=\"import-FootnoteReference\">[footnote]Based on: Zelle, John M. \"Graphics Module Reference.\" (2016).[\/footnote]<\/span><\/p>\r\n<p class=\"import-Normal\"><code>Image(anchorPoint, filename)<\/code> Constructs an image from contents of the given file, centered at the given anchor point. Can also be called with width and height parameters instead of <code>filename<\/code>. In this case, a blank (transparent) image is created of the given width and height (in pixels).<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>flowerImage = Image(Point(100,100), \"flower.gif\")<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>blankImage = Image(320, 240)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getAnchor()<\/code> Returns a clone of the point where the image is centered.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = flowerImage.getAnchor()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getWidth()<\/code> Returns the width of the image.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>widthInPixels = flowerImage.getWidth()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getHeight()<\/code> Returns the height of the image.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>heightInPixels = flowerImage.getHeight()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>getPixel(x, y)<\/code> Returns a list [red, green, blue] of the RGB values of the pixel at position (x,y). Each value is a number in the range 0-255 indicating the intensity of the corresponding RGB color. These numbers can be turned into a color string using the <code>color_rgb<\/code> function (see next section).<\/p>\r\n<p class=\"import-Normal\">Note that pixel position is relative to the image itself, not the window where the image may be drawn. The upper-left corner of the image is always pixel <code>(0,0)<\/code>.<\/p>\r\nThe following example, <code>displayImage.py<\/code>, illustrates code that displays a GIF image in a Graphics window The window's dimensions are determined by variables created by assigning the image\u2019s width and height with the <code>getWidth()<\/code> and <code>getHeight()\u00a0<\/code>methods. The GIF image is 300 x 300 pixels, so the window is 300 x 300. Point is set to coordinates 150 x and 150 y so the image will be centered.\r\n\r\n[caption id=\"attachment_142\" align=\"aligncenter\" width=\"420\"]<img class=\"wp-image-142\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232359\/displayImageSS.png\" alt=\"\" width=\"420\" height=\"409\" \/> Figure 30: Display an Image\u00a0<em>Parrots at Sarasota Jungle Gardens<\/em> by\u00a0Karen Blaha is licensed under under CC-BY 2.0[\/caption]\r\n\r\nImage colors can be adjusted.\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>red, green, blue = flowerImage.getPixel(32,18)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>setPixel(x, y, color)<\/code> Sets the pixel at position (x,y) to the given color. Note: This is a slow operation.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>flowerImage.setPixel(32, 18, \"blue\")<\/code><\/p>\r\n<p class=\"import-Normal\"><code>save(filename)<\/code> Saves the image to a file. The type of the resulting file (e.g., GIF or PPM) is determined by the extension on the filename.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>flowerImage.save(\"mypic.ppm\")<\/code><\/p>\r\nThe following example, <code>colortoGrayscale.py<\/code>, illustrates code that displays a GIF image in a Graphics window, changes the color to grayscale using the <code>setPixel()<\/code> method, then saves a grayscale copy of the image.\r\n\r\n[caption id=\"attachment_145\" align=\"aligncenter\" width=\"752\"]<img class=\"wp-image-145 \" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232404\/colortoGrayscaleSS.png\" alt=\"\" width=\"752\" height=\"410\" \/> Figure 31: Convert an Image to Grayscale\u00a0Parrots at Sarasota Jungle Gardens by\u00a0Karen Blaha is licensed under under CC-BY 2.0[\/caption]\r\n<h1>Generating Colors<span class=\"import-FootnoteReference\">\r\n<\/span><\/h1>\r\n<p class=\"import-Normal\">Colors are indicated by strings. Most normal colors such as \"red\", \"purple\", \"green\", \"cyan\", etc. are available. Many colors come in various shades, such as \"red1\", \"red2\",\"red3\", \"red4\", which are increasingly darker shades of red. For a full list, see the table below.[footnote]Based on: Zelle, John M. \"Graphics Module Reference.\" (2016).[\/footnote]<\/p>\r\n<p class=\"import-Normal\">The graphics module also provides a function for mixing your own colors numerically. The function <code>color_rgb(red, green, blue)<\/code> will return a string representing a color that is a mixture of the intensities of red, green and blue specified. These should be ints in the range 0-255. Thus <code>color_rgb(255, 0, 0)<\/code> is a bright red, while <code>color_rgb(130, 0, 130)<\/code> is a medium magenta.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aCircle.setFill(color_rgb(130, 0, 130))<\/code><\/p>\r\n\r\n<table>\r\n<tbody>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'AliceBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'firebrick'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'MistyRose'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'AntiqueWhite'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'ForestGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'navy'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'aquamarine'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'gold'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'navy blue'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'azure'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'gray'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'OliveDrab'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'beige'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'gray1'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'orange'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'black'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'gray2'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'OrangeRed'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'BlanchedAlmond'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'gray3'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'orchid'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'blue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'gray99'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'PaleGreen'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'BlueViolet'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'green'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'PaleTurquoise'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'brown'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'GreenYellow'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'PaleTurquoise1'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'CadetBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'honeydew'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'PaleVioletRed'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'chartreuse'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'HotPink'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'PapayaWhip'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'chocolate'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'IndianRed'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'PeachPuff'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'coral'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'ivory'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'peru'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'CornflowerBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'khaki'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'pink'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'cornsilk'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'lavender'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'plum'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'cyan'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LavenderBlush'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'PowderBlue'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'cyan1'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LawnGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'purple'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'cyan2'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LemonChiffon'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'red'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'cyan3'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'light grey'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'RoyalBlue'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'cyan4'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'light slate gray'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SaddleBrown'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'salmon'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkCyan'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightCoral'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'salmon1'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkGoldenrod'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightCyan'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'salmon2'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkGray'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightGoldenrod'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'salmon3'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'salmon4'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkGrey'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightPink'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'sandy brown'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkKhaki'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightSalmon'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SandyBrown'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkMagenta'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightSeaGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SeaGreen'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkOliveGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightSkyBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'seashell'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkOrange'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightSlateBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'sienna'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkOrchid'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightSteelBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SkyBlue'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkRed'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LightYellow'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SlateBlue'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkSalmon'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'LimeGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SpringGreen'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkSeaGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'maroon'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SpringGreen1'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkSlateBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'MediumAquamarine'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'SteelBlue'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkSlateGray'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'MediumOrchid'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'tan'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkTurquoise'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'MediumPurple'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'turquoise'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DarkViolet'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'MediumSpringGreen'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'violet'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DeepPink'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">MediumTurquoise'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'VioletRed'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DeepSkyBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'MediumVioletRed'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'yellow'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">'DimGray'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'MidnightBlue'<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">'YellowGreen'<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<small>Table 5: Graphics Library Color Names<\/small>\r\n<h1>Interactive Graphics<\/h1>\r\n<p class=\"import-Normal\">In a GUI environment, users interact with their applications by clicking on buttons, choosing items from menus, and typing information into on-screen text boxes. Event-driven programming draws interface elements (widgets) on the screen and then waits for the user to do something. An event is generated whenever a user moves the mouse, clicks the mouse, or types a key on the keyboard.<\/p>\r\n<p class=\"import-Normal\">One limitation of the<code> graphics.py<\/code> module is that it is not robust if a graphics window is closed by clicking on the standard operating system close button on the title bar. If you close a graphics window that way, you are likely to get a Python error message. On the other hand, if your program creates a graphics window and then terminates abnormally due to some other error, the graphics window may be left orphaned. In this case the close button on the title bar is important: it is the easiest method to clean up and get rid of the window!<\/p>\r\n<p class=\"import-Normal\">This lack of robustness is tied to the simplification designed into the <code>graphics<\/code> module. If the programmer wants user input, only one type can be specified at a time (either a mouse click in the graphics window via the <code>getMouse<\/code> method, or via the input keyboard Entry methods into the Shell window).<\/p>\r\n<p class=\"import-Normal\">In <code>graphIntro.py<\/code>, a prompt to end the graphics program appeared in the Shell window, requiring you to pay attention to two windows.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>input(\"Press return to end\")<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>win.close()<\/code><\/p>\r\n<p class=\"import-Normal\">In <code>matchColorsGame.py<\/code>,where all the action takes place in the graphics window, the only interaction is to click the mouse to close the graphics window. But as mentioned, clicking the standard operating system close button on the title bar will cause a Python Error. To close the graphics window without an error the user must click inside the window.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"># wait for click and then quit\r\n<code>win.getMouse()<\/code>\r\n<code>win.close()<\/code><\/p>\r\n\r\n<div class=\"textbox\"><strong>Note to Reader<\/strong>: If you write a program with a bug, and the program gets an execution error while there is a GraphWin on the screen, a dead GraphWin lingers. The best way to clean things up is to make the Shell window be the current window and select from the menu Shell \u2192 Restart Shell.<\/div>\r\n<h3>Mouse Clicks<\/h3>\r\n<p class=\"import-Normal\">As we have seen in earlier examples, we can get graphical information from the user via the <code>getMouse<\/code> method of the <code>GraphWin<\/code> class. The code <code>win.getMouse()<\/code> waits for a mouse click. In the following code, the position of the mouse click is not important.<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"># wait for click and then quit<\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>win.getMouse()<\/code><\/p>\r\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>win.close()<\/code><\/p>\r\n<p class=\"import-Normal\">When <code>getMouse<\/code> is invoked on a <code>GraphWin<\/code>, the program pauses and waits for the user to click the mouse somewhere in the window. The spot where the user clicked is returned as a <code>Point<\/code> object.<\/p>\r\n<p class=\"import-Normal\">The next example, <code>triangle.py<\/code><sup class=\"import-FootnoteReference\">[footnote]Based on code from: Harrington, Andrew N. \u201cHands-on Python Tutorial (Python 3.1 Version).\u201d Loyola University Chicago. https:\/\/anh.cs.luc.edu\/python\/hands-on\/3.1\/handsonHtml\/index.html#[\/footnote]<\/sup>, illustrates similar starting and ending code. In addition it explicitly interacts with the user. Rather than the code specifying literal coordinates for all graphical objects, the program remembers the places where the user clicks the mouse (stored in variables), and uses them as the vertices of a triangle.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"474\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232408\/image33.png\" alt=\"image\" width=\"474\" height=\"427\" \/> Figure 32: triangle.py[\/caption]\r\n\r\nLet us examine the code in this graphics program.\r\n<table>\r\n<tbody>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>from graphics import *<\/code><\/p>\r\n<p class=\"import-Normal\"><code>win = GraphWin('Draw a Triangle', 350, 350)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>win.setBackground('yellow')<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">The standard starting lines (except for the specific values chosen for the width, height, and title of the window). The background color is a property of the whole graphics window that you can set.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>message = Text(Point(170, 30), 'Click on three points')<\/code><\/p>\r\n<p class=\"import-Normal\"><code>message.setTextColor('red')<\/code><\/p>\r\n<p class=\"import-Normal\"><code>message.setStyle('italic')<\/code><\/p>\r\n<p class=\"import-Normal\"><code>message.setSize(20)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>message.draw(win)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">A Text object is created. This is the prompt for user action. These lines illustrate most of the ways the appearance of a Text object may be modified, with results like in most word processors.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>p1 = win.getMouse()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>p1.draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>p2 = win.getMouse()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>p2.draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>p3 = win.getMouse()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>p3.draw(win)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">After the prompt, the program looks for a response. The win.getMouse() method (with no parameters), waits for you to click the mouse inside win. Then the Point where the mouse was clicked is returned. In this code three mouse clicks are waited for, remembered in variables p1, p2, and p3, and the points are drawn.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>triangle = Polygon(p1,p2,p3)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>triangle.setFill('gray')<\/code><\/p>\r\n<p class=\"import-Normal\"><code>triangle.setOutline('cyan')<\/code><\/p>\r\n<p class=\"import-Normal\"><code>triangle.setWidth(4) # width of boundary line<\/code><\/p>\r\n<p class=\"import-Normal\"><code>triangle.draw(win)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">Next we see a very versatile type of graphical object, a Polygon, which may have any number of vertices specified in a list as its parameter. We see that the methods setFill and setOutline that we used earlier on a Circle, and the setWidth method we used for a Line, also apply to a Polygon, (and also to other graphics objects).<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>message.setText('Click anywhere to quit') # change text message<\/code><\/p>\r\n<p class=\"import-Normal\"><code>win.getMouse()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>win.close()<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">Besides changing the style of a Text object, the text itself may be changed as we see in the first line. The remaining code are standard ending lines.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<div class=\"textbox\">\r\n\r\nTip: Trying to figure out where to place objects in GraphWin can be time consuming and more than likely you will to need to adjust the positions of objects by trial and error until you get the positions you want. We can also print a descriptive string for each graphical type for debugging our graphics code. It only shows position, not other parts of the state of the object.\r\n\r\n<code>&gt;&gt;&gt; pt = Point(30, 50)<\/code>\r\n<code>&gt;&gt;&gt; print(pt) Point(30, 50)<\/code>\r\n<code>&gt;&gt;&gt; ln = Line(pt)<\/code>\r\n<code>Point(100, 150))<\/code>\r\n<code>&gt;&gt;&gt; print(ln)<\/code>\r\n<code>Line(Point(30, 50), Point(100, 150))<\/code>\r\n\r\n<\/div>\r\n<h3>Handling Textual Input<\/h3>\r\n<p class=\"import-Normal\">In the <code>triangle.py<\/code> example, all of the user input was provided through simple mouse clicks. The <code>graphics<\/code> module also provides a way for the user to enter text inside a textbox via the keyboard with the <code>Entry<\/code> type. This capability allows us to create primitive (but fully functional!) graphical user interfaces (GUIs). The <code>Entry<\/code> object is a partial replacement for the <code>input<\/code> function.<\/p>\r\n<p class=\"import-Normal\">Let us look at a simple example, <code>greet.py<\/code>, which is presented below:<\/p>\r\n\r\n<div class=\"textbox\">\r\n\r\n<code style=\"color: #ff0000\"># Simple example with Entry objects (textboxes).<\/code>\r\n<code style=\"color: #ff0000\"># Enter your name, click the mouse, and see greetings.<\/code>\r\n\r\n<code><code style=\"color: #ff9900\">from<\/code> graphics<code style=\"color: #ff9900\"> import *<\/code><\/code>\r\n\r\n<code>win = GraphWin(<code style=\"color: #339966\">\"Greeting\"<\/code>, 300, 300)<\/code>\r\n<code>win.setBackground(<code style=\"color: #339966\">'LightGreen'<\/code>)<\/code>\r\n<code>instructions = Text(Point(150,35),<\/code>\r\n<code><code style=\"color: #339966\">\"Enter your name.\\nThen click the mouse twice.\"<\/code>)<\/code>\r\n<code>instructions.draw(win) <code style=\"color: #ff0000\">#display instructions<\/code><\/code>\r\n\r\n<code>entry1 = Entry(Point(150, 230),10) <code style=\"color: #ff0000\">#define the textbox<\/code><\/code>\r\n<code>entry1.draw (win) <code style=\"color: #ff0000\">#draw the textbox<\/code><\/code>\r\n\r\n<code>Text(Point (60, 230),<code style=\"color: #339966\">'Name:'<\/code>).draw(win) <code style=\"color: #ff0000\"># label for the textbox<\/code><\/code>\r\n\r\n<code>win.getMouse() # To know the user is finished with the text.<\/code>\r\n\r\n<code>name = entry1.getText() #assign the text entered to the variable 'name'<\/code>\r\n\r\n<code>greeting1 = <code style=\"color: #339966\">'Hello, '<\/code><code style=\"color: #339966\">name<\/code><code style=\"color: #339966\">'!'<\/code><code style=\"color: #ff0000\"># first greeting<\/code><\/code>\r\n<code>Text(Point(110, 160), greeting1).draw(win)<\/code>\r\n\r\n<code>greeting2 = <code style=\"color: #339966\">'Bonjour, '<\/code><code style=\"color: #339966\">name<\/code><code style=\"color: #339966\">'!'<\/code><code style=\"color: #ff0000\"># second greeting<\/code><\/code>\r\n<code>Text(Point(160, 120), greeting2).draw(win)<\/code>\r\n\r\n<code>win.getMouse() <code style=\"color: #ff0000\"># To close the window<\/code><\/code>\r\n<code>win.close()<\/code>\r\n\r\n<\/div>\r\n<\/div>\r\n&nbsp;\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"145\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232410\/image34.png\" alt=\"image\" width=\"145\" height=\"159\" \/> Figure 33: greeting.py Updated Window[\/caption]\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"147\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232412\/image35.png\" alt=\"image\" width=\"147\" height=\"160\" \/> Figure 34: greeting.py Updated Window[\/caption]\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"203\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232414\/image36.png\" alt=\"image\" width=\"203\" height=\"194\" \/> Figure 35: greeting.py with Coordinate Transformation[\/caption]\r\n<p class=\"import-Normal\">When we run this program the window displays (Figure 33), which allows the user to enter in a name.<\/p>\r\n<p class=\"import-Normal\">The user then enters a name into the textbox in the window and is then instructed to \u2018click the mouse. Once the user clicks her mouse the first time, the window is updated to reflect the \u201cgreetings\u201d as seen here in the second window (Figure 33). The user is also instructed to click her mouse again, which ends the program and closes the window.<\/p>\r\n<p class=\"import-Normal\">The last two graphics program, <code>triangle.py<\/code> and <code>greeting.py<\/code>, placed and drew objects in a window defined by pixels which required needing to adjust the positions of objects by trial and error until we got the positions we wanted. This can become very tedious, very fast.<\/p>\r\n<p class=\"import-Normal\">Let us look at how we can instead use coordinate transformation to more easily place and draw the objects in the <code>greeting.py<\/code> program. First we need to decide what coordinate system we want to apply for this app. One possibility is a three-by-three grid as seen here (Figure 35) by defining the coordinate system of our GUI window to go from (0,0) in the lower left corner to (3,3) in the upper right corner.<\/p>\r\n<p class=\"import-Normal\">The code for the updated program using coordinate transformation made placing and displaying the objects easier (see figure 36). As we design and develop more complicated GUIs, defining our own coordinate system for each app is necessary.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"491\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232417\/image37.png\" alt=\"image\" width=\"491\" height=\"480\" \/> Figure 36:greetCoords.py[\/caption]\r\n<h1>Functions<\/h1>\r\n<p class=\"import-Normal\">Functions are reusable pieces of programs. They allow you to give a name to a block of statements, allowing you to run that block using the specified name anywhere in your program and any number of times. This is known as calling the function. We have already used many Python built-in functions such as <code>input<\/code>, <code>print<\/code>,<code> int<\/code>, <code>str<\/code> and <code>float<\/code>. Additionally, the Python standard library includes many other functions useful for common programming tasks. Python has a function in its standard library named <code>sqrt<\/code>. The square root function accepts one numeric (integer or floating-point) value and produces a floating-point result; for example,\u00a0<span style=\"font-size: NaNpt;color: #;text-decoration: none\">\u221a144<\/span>= 12, so when presented with 144.0, <code>sqrt<\/code> returns the value 12.0. Try typing in and saving the following program:<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"364\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232420\/image38.png\" alt=\"image\" width=\"364\" height=\"256\" \/> Figure 37: square.py<span style=\"font-size: 14pt;font-style: normal\">\u00a0<\/span>[\/caption]\r\n<p class=\"import-Normal\">In the Python statement <code>math.sqrt(num)<\/code>, the function <code>sqrt<\/code> is \u201ccalled\u201d. The function <code>sqrt<\/code> requires a single \u201cparameter\u201d which in this example is the number (or value) that the user types in. The function accepts the parameter as the function\u2019s \u201cargument\u201d then \u201creturns\u201d the result which is assigned to the variable root.<\/p>\r\n\r\n<div class=\"textbox\"><code><code style=\"color: #0000ff\">Enter number:<\/code> 144<\/code>\r\n<code style=\"color: #3366ff\">Square root of 144.0 = 12.0<\/code>\r\n<code>&gt;&gt;&gt;<\/code><\/div>\r\nThe results of running this program is shown below:\r\n<p class=\"import-Normal\">The function <code>sqrt<\/code> is like a black box; \u201ccallers\u201d do not need to know the details of the code inside the function in order to use it (figure 38).<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"325\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232422\/image39.png\" alt=\"image\" width=\"325\" height=\"55\" \/> Figure 38: Conceptual view of the square root function[\/caption]\r\n<p class=\"import-Normal\">If the calling code attempts to pass a parameter to a function that is incompatible with the argument type expected by that function, the interpreter issues an error. Examine the results of trying this in the Python interactive Shell:<\/p>\r\n\r\n<div class=\"textbox\"><code>&gt;&gt;&gt; <code style=\"color: #ff9900\">import<\/code> math\r\n&gt;&gt;&gt; math.sqrt(144)<\/code>\r\n<code style=\"color: #0000ff\">12.0<\/code>\r\n<code>&gt;&gt;&gt; math.sqrt(<code style=\"color: #339966\">\"144\"<\/code>)<\/code>\r\n<code style=\"color: #ff0000\">Traceback (most recent call last): <\/code>\r\n<code style=\"color: #ff0000\">File \"&lt;pyshell#2&gt;\", line 1, in &lt;module&gt; <\/code>\r\n<code style=\"color: #ff0000\">\u00a0 \u00a0 <\/code>\r\n<code style=\"color: #ff0000\"><code style=\"color: #ff0000\">math.sqrt(\"144\")TypeError: must be real number, not str<\/code><code>&gt;&gt;&gt;<\/code><\/code><\/div>\r\n<p class=\"import-Normal\">The <code>sqrt<\/code> function can process only numbers: integers and floating-point numbers. Even though we know we could convert the string parameter <code>'16'<\/code> to the integer <code>16<\/code> (with the <code>int<\/code> function) or to the floating-point value <code>16.0<\/code> (with the float function), the <code>sqrt<\/code> function does not automatically do this for us.<\/p>\r\n<p class=\"import-Normal\">Some functions take more than one parameter; for example, <code>print<\/code> can accept multiple parameters separated by commas.<\/p>\r\n<p class=\"import-Normal\">From the caller\u2019s perspective a function has three important parts:<\/p>\r\n\r\n<ul>\r\n \t<li><strong>Name<\/strong>. Every function has a name that identifies the code to be executed. Function names follow the same rules as variable names; a function name is another example of an identifier.<\/li>\r\n \t<li><strong>Parameters<\/strong>. A function must be called with a certain number of parameters, and each parameter must be the correct type. Some functions like <code>print<\/code> permit callers to pass any number of arguments, but most functions, like <code>sqrt<\/code>, specify an exact number. If a caller attempts to call a function with too many or too few parameters, the interpreter will issue an error message and refuse to run the program (see examples below).<\/li>\r\n<\/ul>\r\n<div class=\"textbox\"><code>&gt;&gt;&gt;<code style=\"color: #ff9900\"> import<\/code> math\r\n&gt;&gt;&gt; math.sqrt(12.5)\r\n<code style=\"color: #333399\">3.5355339059327378<\/code>\r\n&gt;&gt;&gt; math.sqrt()\r\n<code style=\"color: #ff0000\">Traceback (most recent call last): <\/code>\r\n<code style=\"color: #ff0000\">    File \"&lt;pyshell#5&gt;\", line 1, in &lt;module&gt; <\/code>\r\n<code style=\"color: #ff0000\">        math.sqrt()<\/code>\r\n<code style=\"color: #ff0000\">TypeError: sqrt() takes exactly one argument (0 given)<\/code>\r\n&gt;&gt;&gt; math.sqrt(12,4.3)\r\n<code style=\"color: #ff0000\">Traceback (most recent call last): <\/code>\r\n<code style=\"color: #ff0000\">    File \"&lt;pyshell#6&gt;\", line 1, in &lt;module&gt;<\/code>\r\n<code style=\"color: #ff0000\">        math.sqrt(12,4.3)<\/code>\r\n<code style=\"color: #ff0000\">TypeError: sqrt() takes exactly one argument (2 given)<\/code>\r\n&gt;&gt;&gt;<\/code><\/div>\r\n<p style=\"padding-left: 30px\">Similarly, if the parameters the caller passes are not compatible with the types specified for the function, the interpreter reports appropriate error messages.<\/p>\r\n\r\n<ul>\r\n \t<li><strong>Result type<\/strong>. A function returns a value to its caller. Generally a function will compute a result and return the value of the result to the caller. The caller\u2019s use of this result must be compatible with the function\u2019s specified result type. A function\u2019s result type and its parameter types can be completely unrelated (see example below).<\/li>\r\n<\/ul>\r\n<div class=\"textbox\"><code>&gt;&gt;&gt; <code style=\"color: #ff9900\">import<\/code> math<\/code>\r\n<code>&gt;&gt;&gt; <code style=\"color: #333399\">type<\/code>(math.sqrt(27))\r\n<code><code style=\"color: #333399\">&lt;class 'float'&gt;<\/code><\/code>\r\n<code>&gt;&gt;&gt;<\/code><\/code><\/div>\r\n<p class=\"import-Normal\">Some functions do not accept any parameters; for example, the function to generate a pseudo-random floating-point number, random, requires no arguments (see below). The <code>random<\/code> function is part of the random module. The random function returns a floating-point value, but the caller does not pass the function any information to do its task.<\/p>\r\n\r\n<div class=\"textbox\"><code>&gt;&gt;&gt; <code style=\"color: #ff9900\">import<\/code> random<\/code>\r\n<code>&gt;&gt;&gt; random.random()<\/code>\r\n<code><code> style=\"color: #3366ff;\"&gt;0.6299660872157301<\/code><\/code>\r\n<code>&gt;&gt;&gt;<\/code><\/div>\r\n<h3>Defining Functions<\/h3>\r\n<p class=\"import-Normal\">As programs become longer and more complex, programmers must structure their programs in such a way as to effectively manage their complexity. We can write our own functions to divide our code into more manageable pieces. A modularized program is a program where each task within the program is in its own function. Besides their code organization aspects and ease of debugging, functions allow us to bundle functionality into reusable parts. Once a function is created, we can use (call) these functions in numerous places within a program. If the function\u2019s purpose is general enough and we write the function properly, we can reuse the function in other programs as well.<\/p>\r\n<p class=\"import-Normal\">Functions are defined using the <code>def<\/code> keyword. After this keyword comes an identifier name for the function, followed by a pair of parentheses which may (or may not) enclose some names of variables, and by the final colon that ends the line. Function names should be descriptive of the task carried out by the function (and often includes a single verb indicating the single task the function is performing). Next follows the block of statements that are part of this function. An example, <code>function1.py<\/code>, will show that this is actually very simple:<\/p>\r\n\r\n<div class=\"textbox\"><code><code style=\"color: #ff0000\"># program to define a function and call the function<\/code><\/code>\r\n<code><code style=\"color: #ff9900\">def<\/code> <code style=\"color: #0000ff\">say_hello<\/code>():<\/code>\r\n<code><code style=\"color: #ff0000\"># block belonging to the function<\/code><\/code>\r\n<code><code style=\"color: #333399\">print<\/code>(<code style=\"color: #339966\">'hello world'<\/code>)<\/code>\r\n<code><code style=\"color: #ff0000\"># End of function<\/code><\/code>\r\n<code>say_hello() <code style=\"color: #ff0000\"># call the function<\/code><\/code>\r\n<code>say_hello() <code style=\"color: #ff0000\"># call the function again<\/code><\/code><\/div>\r\n<p class=\"import-Normal\">This program,<code> function1.py<\/code>, produces the following output in the interactive Shell:<\/p>\r\n\r\n<div class=\"textbox\">\r\n<p class=\"import-Normal\"><code>&gt;&gt;&gt;<\/code>\r\n<code>RESTART:<\/code>\r\n<code>C:\/Users\/lh166266.UALBANY\/Dropbox\/OER Textbook\/TEXTBOOK OER\/Code\/function1.py<\/code>\r\n<code><code style=\"color: #000080\">hello world<\/code><\/code>\r\n<code><code style=\"color: #000080\">hello world<\/code><\/code>\r\n<code>&gt;&gt;&gt;<\/code><\/p>\r\n\r\n<\/div>\r\n<p class=\"import-Normal\">Let us examine how this works.<\/p>\r\n\r\n<table>\r\n<tbody>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>def say_hello():<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">We define a function called say_hello().This function takes no parameters and hence there are no variables declared in the parentheses. Parameters to functions are just input to the function so that we can pass in different values to it and get back corresponding results.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>print('hello world')<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">This is the single line of code of the defined function. It is the only thing this function does.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>say_hello()<\/code><\/p>\r\n<p class=\"import-Normal\"><code>say_hello()<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">This is the call to the function. Notice that we can call the same function twice which means we do not have to write the same code again.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h3>Function Parameters<\/h3>\r\n<p class=\"import-Normal\">A function can take parameters, which are values you supply to the function so that the function can do something using those values. These parameters are just like variables except that the values of these variables are defined when we call the function and are already assigned values when the function runs.<\/p>\r\n<p class=\"import-Normal\">Parameters are specified within the pair of parentheses in the function definition, separated by commas. When we call the function, we supply the values in the same way. Note the terminology used - the names given in the function definition are called <strong>arguments<\/strong> whereas the values you supply in the function call are called <strong>parameters<\/strong>.<\/p>\r\n<p class=\"import-Normal\">Let us look at another program named <code>function2.py<\/code>.<\/p>\r\n\r\n<div class=\"textbox\">\r\n<p class=\"import-Normal\"><code><code style=\"color: #ff0000\"># program to define a function with parameters and call the function<\/code><\/code>\r\n<code><code style=\"color: #ff9900\">def<\/code> <code style=\"color: #000080\">print_max<\/code>(a, b):<\/code>\r\n<code>\u00a0\u00a0\u00a0 if a &gt; b:<\/code>\r\n<code><code style=\"color: #333399;margin-left: 16pt\">\u00a0\u00a0\u00a0 print<\/code>(a, <code style=\"color: #008000\">'is maximum'<\/code>)<\/code>\r\n<code>\u00a0\u00a0\u00a0 elif a == b:<\/code>\r\n<code><code style=\"color: #333399;margin-left: 16pt\">\u00a0\u00a0\u00a0 print<\/code>(a, <code style=\"color: #008000\">'is equal to',<\/code> b)<\/code>\r\n<code>\u00a0\u00a0\u00a0 else:<\/code>\r\n<code><code style=\"color: #333399;margin-left: 16pt\">\u00a0\u00a0\u00a0 print<\/code>(b, <code style=\"color: #008000\">'is maximum'<\/code>)<\/code><\/p>\r\n<code><code style=\"color: #ff0000\"># directly pass literal values<\/code><\/code>\r\n<code>print_max(3, 4)<\/code>\r\n<code><code style=\"color: #ff0000\">#define 2 variables<\/code><\/code>\r\n<code>num1 = 5<\/code>\r\n<code>num2 = 7<\/code>\r\n\r\n<code><code style=\"color: #ff0000\"># pass variables as arguments<\/code><\/code>\r\n<code>print_max(num1, num2)<\/code>\r\n\r\n<\/div>\r\n<p class=\"import-Normal\">This program, <code>function2.py<\/code>, produces the following output in the interactive Shell:<\/p>\r\n\r\n<div class=\"textbox\"><code>&gt;&gt;&gt;<\/code>\r\n<code>RESTART:<\/code>\r\n<code>C:\/Users\/lh166266.UALBANY\/Dropbox\/OER Textbook\/TEXTBOOK OER\/Code\/function2.py<\/code>\r\n<code><code style=\"color: #000080\">4 is maximum<\/code><\/code>\r\n<code><code style=\"color: #000080\">7 is maximum<\/code><\/code>\r\n<code>&gt;&gt;&gt;<\/code><\/div>\r\n<p class=\"import-Normal\">Let us examine how the program function2.py works.<\/p>\r\n\r\n<table>\r\n<tbody>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>def print_max(a, b):<\/code><\/p>\r\n<p class=\"import-Normal\"><code>if a &gt; b:<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print(a, 'is maximum')<\/code><\/p>\r\n<p class=\"import-Normal\"><code>elif a == b:<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print(a, 'is equal to', b)<\/code><\/p>\r\n<p class=\"import-Normal\"><code>else:<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print(b, 'is maximum')<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">We define a function called <code>print_max()<\/code> that uses two arguments called <code>a<\/code> and <code>b<\/code> .<\/p>\r\n<p class=\"import-Normal\">We find out the greater number using a simple <code>if..else<\/code> statement and then print the bigger number.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>print_max(3, 4)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">The first time we call the function <code>print_max<\/code> , we directly supply the numbers as parameters.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>num1 = 5<\/code><\/p>\r\n<p class=\"import-Normal\"><code>num2 = 7<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print_max(num1, num2)<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">In the second case, we call the function with variables as parameters.<\/p>\r\n<p class=\"import-Normal\">The statement <code>print_max(num1, num2)<\/code> causes the value of argument <code>num1<\/code> to be assigned to parameter<code> a<\/code> and the value of argument <code>num2<\/code> to be assigned to parameter <code>b<\/code> . The <code>print_max function<\/code> works the same way in both cases.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><\/td>\r\n<td><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h3><a id=\"_Toc519230969\"><\/a>The return Statement<\/h3>\r\n<p class=\"import-Normal\">The return statement is used to return from a function i.e. break out of the function. We can optionally return a value from the function as well.<\/p>\r\n<p class=\"import-Normal\">Let us look at another program named <code>function3.py<\/code> that uses the return statement.<\/p>\r\n\r\n<div class=\"textbox\">\r\n<p class=\"import-Normal\"><code style=\"color: #ff0000\"># program to define a function with parameters and a return statement<\/code>\r\n<code style=\"color: #ff9900\">def<\/code> <code style=\"color: #0000ff\">maximum<\/code>(x, y):\r\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0 if<\/code> x &gt; y:\r\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/code> x\r\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0 elif<\/code> x == y:\r\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/code> <code style=\"color: #339966\">'The numbers are equal'<\/code>\r\n<code style=\"color: #ff9900\">\u00a0\u00a0 else<\/code>:\r\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/code> y<\/p>\r\n<code style=\"color: #ff0000\"># test case 1: x &lt; y<\/code>\r\n<code style=\"color: #333399\">print<\/code><code>(maximum(2, 3))<\/code>\r\n\r\n<code style=\"color: #ff0000\"># test case 2: x = y<\/code>\r\n<code style=\"color: #333399\">print<\/code><code>(maximum(2, 2))<\/code>\r\n\r\n<code style=\"color: #ff0000\"># test case 3: x &gt; y<\/code>\r\n<code style=\"color: #333399\">print<\/code><code>(maximum(2, 1)<\/code>\r\n\r\n<\/div>\r\n<p class=\"import-Normal\">This program,<code> function3.py<\/code>, produces the following output in the interactive Shell:<\/p>\r\n\r\n<div class=\"textbox\">\r\n<p class=\"import-Normal\"><code>&gt;&gt;&gt;<\/code>\r\n<code>RESTART:<\/code>\r\n<code>C:\/Users\/lh166266.UALBANY\/Dropbox\/OER Textbook\/TEXTBOOK OER\/Code\/function3.py<\/code>\r\n<code><code style=\"color: #000080\">3<\/code><\/code>\r\n<code><code style=\"color: #000080\">The numbers are equal<\/code><\/code>\r\n<code><code style=\"color: #000080\">2<\/code>\r\n<code>&gt;&gt;&gt;<\/code><\/code><\/p>\r\n\r\n<\/div>\r\n<p class=\"import-Normal\">Let us examine how the program<code> function3.py<\/code> works.<\/p>\r\n\r\n<table>\r\n<tbody>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>def maximum(x, y):<\/code><\/p>\r\n<p class=\"import-Normal\">\u00a0 \u00a0<code> if x &gt; y:<\/code><\/p>\r\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 <code>return x<\/code><\/p>\r\n<p class=\"import-Normal\">\u00a0 \u00a0\u00a0<code>elif x == y:<\/code><\/p>\r\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 <code>return 'The numbers are equal'<\/code><\/p>\r\n<p class=\"import-Normal\">\u00a0 \u00a0 <code>else:<\/code><\/p>\r\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 <code>return y<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">We define a function called <code>maximum()<\/code> that uses two arguments called <code>x<\/code> and <code>y<\/code> .<\/p>\r\n<p class=\"import-Normal\">It uses a simple<code> if..else<\/code> statement to find the greater value and then returns that value.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code># test case 1: x &lt; y<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print(maximum(2, 3))<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">The first time we call the function <code>maximum<\/code>, we are testing for <code>x<\/code> less than y.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code># test case 2: x = y<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print(maximum(2, 2))<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">The second time we call the function <code>maximum<\/code>, we are testing for <code>x<\/code> equal to y.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code># test case 3: x &gt; y<\/code><\/p>\r\n<p class=\"import-Normal\"><code>print(maximum(2, 1))<\/code><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">The third time we call the function <code>maximum<\/code>, we are testing for <code>x<\/code> greater than y.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<p class=\"import-Normal\">Note that a <code>return<\/code> statement without a value is equivalent to <code>return<\/code> <code>None<\/code>. <code>None<\/code> is a special type in Python that represents nothingness. For example, it is used to indicate that a variable has no value if it has a value of <code>None<\/code>.<\/p>\r\n<p class=\"import-Normal\">Every function implicitly contains a <code>return None<\/code> statement at the end unless you have written your own return statement.<\/p>\r\n\r\n<h3><a id=\"_Toc519230970\"><\/a>Practice<\/h3>\r\n<p class=\"import-Normal\">Let us examine the following program which calculates the distance between two points. We use variables <code>x1<\/code> and <code>y1<\/code> to represent the (x,y) position of the first point and variables <code>x2<\/code> and <code>y2<\/code> to represent the (x,y) position of the second point. The formula for finding the distance between two points requires the math library since we need to use the square root function.<\/p>\r\n\r\n<div class=\"textbox\">\r\n\r\n<code># Calculates the distance between two points<\/code>\r\n\r\n<code>import math<\/code>\r\n\r\n<code>print(\"This program calculates the distance between two points.\")print() #print a blank line<\/code>\r\n\r\n<code>x1 = float(input(\"Enter the x for the first point: \"))<\/code>\r\n<code>y1 = float(input(\"Enter the y for the first point: \"))<\/code>\r\n<code>print()<\/code>\r\n<code>x2 = float(input(\"Enter the x for the second point: \"))<\/code>\r\n<code>y2 = float(input(\"Enter the y for the second point: \"))<\/code>\r\n\r\n<code>distance = math.sqrt((x2-x1)**2 + (y2-y1)**2)<\/code>\r\n\r\n<code>print()<\/code>\r\n<code>print(\"The distance between the points is\", distance)<\/code>\r\n\r\n<\/div>\r\n<p class=\"import-Normal\">Now, let us examine the same program rewritten to include a function to determine the distance between any two points (x1,y1) and (x2, y2).<\/p>\r\n\r\n<div class=\"textbox\">\r\n<p class=\"import-Normal\"><code># Calculates the distance between two points using a function<\/code><\/p>\r\n<code>import math<\/code>\r\n\r\n<code>#define the function<\/code>\r\n<code>def distance(point1x,point1y, point2x,point2y):<\/code>\r\n<code>\u00a0\u00a0\u00a0 dist = math.sqrt((point2x-point1x)**2 + (point2y-point1y)**2)<\/code>\r\n<code>\u00a0\u00a0\u00a0 return dist<\/code>\r\n\r\n<code># main part of the program<\/code>\r\n<code>print(\"This program calculates the distance between two points.\")<\/code>\r\n<code>print()<\/code>\r\n\r\n<code>x1 = float(input(\"Enter the x for the first point: \"))<\/code>\r\n<code>y1 = float(input(\"Enter the y for the first point: \"))<\/code>\r\n<code>print()<\/code>\r\n<code>x2 = float(input(\"Enter the x for the second point: \"))<\/code>\r\n<code>y2 = float(input(\"Enter the y for the second point: \"))<\/code>\r\n\r\n<code>print(\"The distance between the points is\",<\/code>\r\n<code>distance(x1,y1,x2,y2))<\/code>\r\n\r\n<\/div>\r\n<p class=\"import-Normal\">Notice that we define the function before we write the \u201cmain\u201d part of the program. This is a standard practice when modularizing a program using functions.<\/p>\r\n<p class=\"import-Normal\">The results of executing this program with point <code>1<\/code> being <code>(3,4)<\/code> and point <code>2<\/code> <code>(12,13)<\/code> looks like the following in the Python shell:<\/p>\r\n\r\n<div class=\"aligncenter wp-caption\"><img class=\"aligncenter wp-caption wp-image-132\" style=\"width: 421px\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232425\/image40-1.png\" alt=\"\" width=\"421\" height=\"265\" \/><\/div>\r\n<p class=\"import-Normal\">Recall the <code>triangle.py<\/code> program we worked with earlier in this unit. Let us expand on this program to include additional textual output. The input for our revised <code>triangle.py<\/code> program, named<code> triangleGUIfunctions.py<\/code><sup class=\"import-FootnoteReference\">[footnote]Based on Zelle, John M. Python programming: an introduction to computer science. 3rd ed., Franklin, Beedle &amp; Associates, Inc., 2017, pp. 189-190.[\/footnote]<\/sup>, remains the same; the user clicks on three different points in the Graphics window. The output for our revised program still includes the graphic representing the triangle and, additionally, the perimeter of the graphic triangle as textual output. We use the <em>distance-between-two-points<\/em> function we just wrote!<\/p>\r\n\r\n<div class=\"textbox\">\r\n<p class=\"import-Normal\"><code>import math<\/code>\r\n<code>from graphics import *<\/code><\/p>\r\n<code>#define the distance function with two arguments<\/code>\r\n<code>def distance(p1, p2):<\/code>\r\n<code>\u00a0\u00a0\u00a0 dist = math.sqrt((p2.getX() - p1.getX())**2 +(p2.getY()<\/code><code>- p1.getY())**2)<\/code>\r\n<code>\u00a0\u00a0\u00a0 return dist<\/code>\r\n\r\n<code>#main part of the program<\/code>\r\n<code>win = GraphWin(\"Draw a Triangle\",500,500)<\/code>\r\n<code>win.setCoords(0.0, 0.0, 10.0, 10.0)<\/code>\r\n<code>message1 = Text(Point(5, 1), \"Click on three points\")<\/code>\r\n<code>message1.draw(win)<\/code>\r\n\r\n<code># Get and draw three vertices of triangle<\/code>\r\n<code>p1 = win.getMouse()<\/code>\r\n<code>p1.draw(win)<\/code>\r\n<code>p2 = win.getMouse()<\/code>\r\n<code>p2.draw(win)<\/code>\r\n<code>p3 = win.getMouse()<\/code>\r\n<code>p3.draw(win)<\/code>\r\n\r\n<code># Use Polygon object to draw the triangle<\/code>\r\n<code>triangle = Polygon(p1,p2,p3)<\/code>\r\n<code>triangle.setFill(\"yellow\")<\/code>\r\n<code>triangle.setOutline(\"cyan\")<\/code>\r\n<code>triangle.draw(win)<\/code>\r\n\r\n<code># Calculate the perimeter of the triangle<\/code>\r\n<code># Call the distance function 3 times to find the length of each side of the triangle<\/code>\r\n<code>d1 = distance(p1,p2)<\/code>\r\n<code>d2 = distance(p2,p3)<\/code>\r\n<code>d3 = distance(p3,p1)<\/code>\r\n<code>msg = \"perimeter:\" + str(d1 d2 d3)<\/code>\r\n<code>message1.setText(msg)<\/code>\r\n\r\n<code># Wait for another click to exit<\/code>\r\n<code>win.getMouse()<\/code>\r\n\r\n<\/div>\r\n<p class=\"import-Normal\">Let us examine the code of <code>triangleGUIfunctions.py<\/code> more closely and see how it works:<\/p>\r\n\r\n<table>\r\n<tbody>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>def distance(p1, p2):<\/code>\r\n<code>dist = math.sqrt((p2.getX() -<\/code>\r\n<code>p1.getX()) **2 + (p2.getY() -<\/code>\r\n<code>p1.getY())**2)<\/code>\r\n<code>return dist<\/code><\/p>\r\n<p class=\"import-Normal\"><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">We use our distance function modified to use only two arguments called <code>p1<\/code> and <code>p2<\/code>, representing the two vertices of the triangle we want to find the length of.<\/p>\r\n<p class=\"import-Normal\">We use the Point methods <code>getX()<\/code> and <code>getY()<\/code> to extract the individual <code>x<\/code> and <code>y<\/code> values for each point.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code>win = GraphWin(\"Draw a Triangle\",500,500)<\/code>\r\n<code>win.setCoords(0.0, 0.0, 10.0, 10.0)<\/code>\r\n<code>message1 = Text(Point(5, 1), \"Click on three points\")<\/code>\r\n<code>message1.draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><code># Get and draw three vertices of triangle<\/code>\r\n<code>p1 = win.getMouse()<\/code>\r\n<code>p1.draw(win)<\/code>\r\n<code>p2 = win.getMouse()<\/code>\r\n<code>p2.draw(win)<\/code>\r\n<code>p3 = win.getMouse()<\/code>\r\n<code>p3.draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><code># Use Polygon object to draw the triangle<\/code>\r\n<code>triangle = Polygon(p1,p2,p3)<\/code>\r\n<code>triangle.setFill(\"yellow\")<\/code>\r\n<code>triangle.setOutline(\"cyan\")<\/code>\r\n<code>triangle.draw(win)<\/code><\/p>\r\n<p class=\"import-Normal\"><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">This is the same code we used in <code>triangle.py<\/code> to accept the three points and then draw the triangle.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr class=\"TableGrid-R\">\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\"><code># Calculate the perimeter of the triangle<\/code>\r\n<code># Call the distance function 3 times to find the length of each side of the triangle<\/code>\r\n<code>d1 = distance(p1,p2)<\/code>\r\n<code>d2 = distance(p2,p3)<\/code>\r\n<code>d3 = distance(p3,p1)<\/code>\r\n<code>msg = \"perimeter:\" + str(d1 + d2 +\u00a0 d3)<\/code>\r\n<code>message1.setText(msg)<\/code><\/p>\r\n<p class=\"import-Normal\"><code># Wait for another click to exit<\/code>\r\n<code>win.getMouse()<\/code><\/p>\r\n<p class=\"import-Normal\"><\/p>\r\n<\/td>\r\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\r\n<p class=\"import-Normal\">To determine the length of each side of the triangle we call the distance function three times. Adding the lengths of each side of the triangle gives us the perimeter.<br style=\"clear: both\" \/>We print this value <code>(msg)<\/code> in a text a text box in the Graphics window.<\/p>\r\n<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><\/td>\r\n<td><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<p class=\"import-Normal\">The output from running <code>triangleGUIfunctions.py<\/code> is seen here in figure 40.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"aligncenter\" width=\"238\"]<img class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232428\/image41.png\" alt=\"image\" width=\"238\" height=\"252\" \/> Figure 40: triangleGUIfunctions.py Graphics window output[\/caption]\r\n\r\n<hr \/>\r\n\r\n<h1>Unit Summary<\/h1>\r\n<ul>\r\n \t<li>Apply the fundamental concepts of computer graphics in a computer program.<\/li>\r\n \t<li>Create objects in programs and use methods to perform graphical computations.<\/li>\r\n \t<li>Write simple interactive graphics programs using objects available in the graphics module.<\/li>\r\n \t<li>Read and write programs that define functions and use function calls and parameter passing in Python.<\/li>\r\n<\/ul>\r\n<p class=\"import-Normal\">We have seen many aspects of functions but note that we still haven't covered all aspects of them. However, we have already covered much of what you will see and use in a beginning programming course.<\/p>\r\n\r\n<h1>Practice Problems<\/h1>\r\n<ol>\r\n \t<li>Make a program scene.py creating a scene with the graphics methods. You are likely to need to adjust the positions of objects by trial and error until you get the positions you want. Make sure you have graphics.py in the same directory as your program.<\/li>\r\n \t<li>Elaborate the scene program above so it becomes changeScene.py, and changes one or more times when you click the mouse (and use win.getMouse()). You may use the position of the mouse click to affect the result, or it may just indicate you are ready to go on to the next view.<\/li>\r\n \t<li>Is the following a legal Python program?\r\n<code>def proc(x):<\/code>\r\n<code>return x + 2<\/code>\r\n<code>def proc(n):<\/code>\r\n<code>return 2*n + 1<\/code>\r\n<code>def main():<\/code>\r\n<code>x = proc(5)<\/code>\r\n<code>main()<\/code><\/li>\r\n \t<li>Is the following a legal Python program?\r\n<code>def proc(x):<\/code>\r\n<code>return x + 2<\/code>\r\n<code>def main():<\/code>\r\n<code>x = proc(5)<\/code>\r\n<code>y = proc(4)<\/code>\r\n<code>main()<\/code><\/li>\r\n \t<li>Is the following a legal Python program?\r\n<code>def proc(x):<\/code>\r\n<code>return 2*x<\/code>\r\n<code>def main():<\/code>\r\n<code>print(proc(5, 4))<\/code>\r\n<code>main()<\/code><\/li>\r\n \t<li>The programmer was expecting the following program to print 200. What does it print instead? Why does it print what it does?\r\n<code>def proc(x):<\/code>\r\n<code>x = 2*x*x<\/code>\r\n<code>def main():<\/code>\r\n<code>num = 10<\/code>\r\n<code>proc(num)<\/code><\/li>\r\n \t<li>Complete the following distance function that computes the distance between two geometric points (x1;y1) and (x2;y2):\r\n<code>def distance(x1, y1, x2, y2)<\/code>:\r\n...Test it with several points to convince yourself that is correct.<\/li>\r\n \t<li>A number, a, is a power of b if it is divisible by b and a\/b is a power of b. Write a function called <code>ispower<\/code> that takes parameters a and b and returns True if a is a power of b. Note: you will have to think about the base case.<\/li>\r\n<\/ol>","rendered":"<div class=\"unit-3:-graphics:-designing-and-developing-graphics-programs.\">\n<h2>Learning Objectives<\/h2>\n<ul>\n<li>Explain what we mean by object-oriented programming.<\/li>\n<li>Apply the fundamental concepts of computer graphics in a computer program.<\/li>\n<li>Create objects in programs and use methods to perform graphical computations.<\/li>\n<li>Write simple interactive graphics programs using objects available in the graphics module.<\/li>\n<li>Read and write programs that define functions and use function calls and parameter passing in Python.<\/li>\n<\/ul>\n<h1>Object Oriented Programming<span class=\"import-FootnoteReference\"><br \/>\n<\/span><\/h1>\n<p>Python is a multi-paradigm programming language, meaning it supports different programming approaches. In general, there are four main programming paradigms, logical, imperative, functional and object-oriented, with object-oriented being the most recent. Object-Oriented Programming&#8217;s (OOP) approach to solving computational problems is by creating objects, which may contain data, in the form of fields (attributes), and code, in the form of procedures (methods).<\/p>\n<p>Object-Oriented Programming allows us to define, create and manipulate objects. Another feature of objects is that an object&#8217;s procedures can access and often modify the data fields of the object with which they are associated. In OOP, computer programs are designed by making them out of objects that interact with one another.<\/p>\n<p>There is significant diversity of OOP languages, but the most popular ones, including Python, are class-based, meaning that objects are instances of classes, which determine their data type.<\/p>\n<p>It can be shown that anything solvable using one of these paradigms can be solved using the others; however, certain types of computational problems lend themselves more naturally to specific paradigms.<\/p>\n<h3>Using Objects<\/h3>\n<p>We have been using string objects\u2014instances of class <code>str<\/code>\u2014for some time. Objects bundle data and functions together, and the data that comprise a string consist of the sequence of characters that make up the string. Strings are objects, and strings \u201cknow how\u201d to produce an uppercase version of themselves. For example, examine the following Python statements:<\/p>\n<table style=\"border-collapse: collapse;width: 50%\">\n<tbody>\n<tr>\n<td style=\"width: 100%\"><code>str = 'Hello!'<\/code><\/p>\n<p><code>str.upper()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Here <code>upper<\/code> is a method associated with strings. This means <code>upper<\/code> is a function that is bound to the string before the dot. This function is bound both logically, and as we see in the new notation, also syntactically. One way to think about it is that each type of data knows operations (methods) that can be applied to it. The expression <code>str.upper()<\/code> calls the method upper that is bound to the string <code>str<\/code> and returns a new uppercase string result based on the variable <code>str<\/code>.<\/p>\n<p>Strings are immutable, so no string method can change the original string, it can only return a new string. Confirm this by entering each line individually in the Python IDLE Shell to see the original <code>str<\/code> is unchanged:<\/p>\n<table style=\"border-collapse: collapse;width: 50%\">\n<tbody>\n<tr>\n<td style=\"width: 100%\">&gt;&gt;&gt; <code>str = \"hello\"<\/code><\/p>\n<p>&gt;&gt;&gt; <code>str<\/code><\/p>\n<p><code>'hello'<\/code><\/p>\n<p>&gt;&gt;&gt; <code>str2 = str.upper()<\/code><\/p>\n<p>&gt;&gt;&gt; <code>str2<\/code><\/p>\n<p><code>'HELLO'<\/code><\/p>\n<p>&gt;&gt;&gt; <code>str<\/code><\/p>\n<p><code>'hello'<\/code><\/p>\n<p>&gt;&gt;&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>We are using the new object syntax:<\/p>\n<p><code>object.method( )<\/code><\/p>\n<p>meaning that the method associated with the object\u2019s type is applied to the object. This is just a special syntax for a function call with an object.<\/p>\n<p>Another string method is <code>lower<\/code>, analogous to upper, but producing a lowercase result.<\/p>\n<p>Many methods also take additional parameters between the parentheses, using the more general syntax:<\/p>\n<p><code>object.method(parameters)<\/code><\/p>\n<p>One such method is <code>count()<\/code>:<\/p>\n<p>Syntax for count: <code>str.count(sub)<\/code><\/p>\n<p>The method <code>count()<\/code> returns the number of repetitions of a string <code>sub<\/code> that appear as substrings inside the string <code>str<\/code>. Try this in the Python Shell:<\/p>\n<table style=\"border-collapse: collapse;width: 50%\">\n<tbody>\n<tr>\n<td style=\"width: 100%\">&gt;&gt;&gt; <code>tale = 'This is the best of times. '<\/code><\/p>\n<p>&gt;&gt;&gt; <code>tale<\/code><\/p>\n<p><code>'This is the best of times. '<\/code><\/p>\n<p>&gt;&gt;&gt; <code>tale.count('i')<\/code><\/p>\n<p>3<\/p>\n<p>&gt;&gt;&gt; <code>tale.count('is')<\/code><\/p>\n<p>2<\/p>\n<p>&gt;&gt;&gt; <code>tale.count('That')<\/code><\/p>\n<p>0<\/p>\n<p>&gt;&gt;&gt; <code>tale.count(' ')<\/code><\/p>\n<p>6<\/p>\n<p>&gt;&gt;&gt;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>There is a blank space between the words in the string <code>'This is the best of times. '<\/code> above and an extra space at the end of the string. Blanks are characters like any other, except we can\u2019t see them.<\/p>\n<p>Just as the parameter can be replaced by a literal value or any expression, the object to which a method is bound with the dot may also be given by a literal value, or a variable name, or any expression that evaluates to the right kind of object in its place. This is true for any method call.<\/p>\n<p>Technically the dot between the object and the method name is an operator, and operators have different levels of precedence. It is important to realize that this dot operator has the highest possible precedence. Read and see the difference parentheses make in the expressions (try this too!):<\/p>\n<table style=\"border-collapse: collapse;width: 50%\">\n<tbody>\n<tr>\n<td style=\"width: 100%\">&gt;&gt;&gt; <code>'hello ' + 'there'.upper()<\/code><\/p>\n<p><code>'hello THERE'<\/code><\/p>\n<p>&gt;&gt;&gt; <code>('hello ' + 'there').upper()<\/code><\/p>\n<p><code>'HELLO THERE'<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Python lets you see all the methods that are bound to an object (and any object of its type) with the built-in function <code>dir<\/code>. To see all string methods, supply the <code>dir<\/code> function with any string. For example, try in the Python IDLE Shell:<\/p>\n<p><code>dir('')<\/code><\/p>\n<p>Many of the names in the list start and end with two underscores, like <code>__add__<\/code>. These are all associated with methods and pieces of data used internally by the Python interpreter. You can ignore them for now. The remaining entries in the list are all user-level methods for strings. You should see <code>lower<\/code> and <code>upper<\/code> among them. Some of the methods are much more commonly used than others.<\/p>\n<div id=\"attachment_278\" style=\"width: 465px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-278\" class=\"wp-image-278\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232337\/Picture1.png\" alt=\"\" width=\"455\" height=\"239\" \/><\/p>\n<p id=\"caption-attachment-278\" class=\"wp-caption-text\">Figure 22: List of String Methods<\/p>\n<\/div>\n<p>Object notation:<\/p>\n<p><code>object.method(parameters)<\/code><\/p>\n<p>has been illustrated so far with just the object type <code>str<\/code>, but it applies to all types including integers and floating-point numbers.<\/p>\n<p>In summary (Figure 23), objects are simply variables that are some defined data type (e.g. the variable &#8220;age&#8221; is an &#8220;integer&#8221; type). Objects have data associated with them (e.g. the variable &#8220;age&#8221; is assigned the value of 15 in the Python statement <code>age = 15<\/code>). To perform an operation (or procedure) on an object, we send the object a message. The set of messages an object responds to are called the methods of the object (e.g. the Python statement <code>print(age)<\/code>)<\/p>\n<ul>\n<li>Methods are like functions that live inside the object.<\/li>\n<li>Methods are invoked using dot-notation:<br \/>\n<code>&lt;object&gt;.&lt;method-name&gt;(&lt;param1&gt;, &lt;param2&gt;, \u2026)<\/code><\/li>\n<\/ul>\n<div class=\"unit-3:-graphics:-designing-and-developing-graphics-programs.\">\n<div style=\"width: 481px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232341\/image25.png\" alt=\"image\" width=\"471\" height=\"186\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 23: &#8220;Object Oriented Programming Python Code\u201d by\u00a0 Miles J. Pool is\u00a0<span id=\"0.36263490351822636\" class=\"highlight\">license<\/span>d under CC-BY 4.0<\/p>\n<\/div>\n<h1>Simple Graphics Programming<\/h1>\n<p>Graphics make programming more fun for many people. To fully introduce graphics would involve many ideas that would be a distraction now. This section introduces a simplified object oriented graphics library developed by John Zelle for use with his Python Programming book. The graphics library was designed to make it easy for novice programmers to experiment with computer graphics in an object oriented fashion.<\/p>\n<p>There are two kinds of objects in the library. The <code>GraphWin<\/code> class implements a window where drawing can be done, and various graphics objects (like circles and squares) are provided that can be drawn into a <code>GraphWin<\/code>.<\/p>\n<p>In order to use this module and build graphical programs you will need a copy of <code>graphics.py<\/code>. You can download this from <a href=\"http:\/\/mcsp.wartburg.edu\/zelle\/python\/graphics.py\">http:\/\/mcsp.wartburg.edu\/zelle\/python\/graphics.py<\/a> . You will want to place this file (<code>graphics.py<\/code>) in the <span style=\"text-decoration: underline\">same folder<\/span> you use for all your Python programs (the files with the <code>.py<\/code> extension).<\/p>\n<div class=\"textbox\"><strong>Note to Reader:<\/strong> You will just be a user of the <code>graphics.py<\/code> code, so you do not need to understand the inner workings! It uses all sorts of features of Python that are way beyond the scope of this book. There is no particular need to open <code>graphics.py<\/code> in the Python IDLE editor.<\/div>\n<p class=\"import-Normal\">Once the module is downloaded (therefore \u2018installed\u2019), we can import it just like a library that is built into Python like math:<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>import graphics<\/code><\/p>\n<p class=\"import-Normal\">If typing this line in the Python IDLE Shell gives you no output, then you have installed the graphics module correctly! If there is an error message, then Python could not find the <code>graphics.py<\/code> file.<\/p>\n<p class=\"import-Normal\">We will begin with a simple example program, <code>graphIntroSteps.py<\/code><sup class=\"import-FootnoteReference\"><a class=\"footnote\" title=\"Written by: Harrington, Andrew N. \u201cHands-on Python Tutorial (Python 3.1 Version).\u201d Loyola University Chicago. https:\/\/anh.cs.luc.edu\/python\/hands-on\/3.1\/handsonHtml\/index.html#\" id=\"return-footnote-72-1\" href=\"#footnote-72-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a><\/sup>, which you can download from here:<\/p>\n<p class=\"import-Normal\"><a href=\"http:\/\/www.pas.rochester.edu\/~rsarkis\/csc161\/_static\/idle\/examples\/graphIntroSteps.py\"><span class=\"import-Hyperlink\">www.pas.rochester.edu\/~rsarkis\/csc161\/_static\/idle\/examples\/graphIntroSteps.py<\/span><\/a><\/p>\n<p class=\"import-Normal\">Copy this .py file into the same folder that you copied the graphics.py file to and run it. Each time you press return, look at the screen and read the explanation for the next line(s).<\/p>\n<p class=\"import-Normal\">Look around on your screen, and possibly underneath other windows: There should be a new window labeled \u201cGraphics Window\u201d, created by the second line. Bring it to the top, and preferably drag it around to make it visible beside your Shell window. A <code>GraphWin<\/code> is a type of object from Zelle\u2019s graphics package that automatically displays a window when it is created. The assignment statement remembers the window object as win for future reference. (This will be our standard name for our graphics window object.) A small window, 200 by 200 pixels is created. A pixel is the smallest little square that can be displayed on your screen. Modern screens usually have more than 1000 pixels across the whole screen. <span class=\"import-st\">A <\/span><em class=\"import-Emphasis\">pixel<\/em><span class=\"import-st\"> is the basic unit of programmable color on a computer display or in a computer image.<\/span><\/p>\n<p class=\"import-Normal\">The example program <code>graphIntro.py<\/code> starts with the same graphics code as <code>graphIntoSteps.py<\/code>, but without the need for pressing returns.<\/p>\n<p class=\"import-Normal\">Added to this program is the ability to print a string value of graphics objects for debugging purposes. If some graphics object isn\u2019t visible because it is underneath something else or off the screen, temporarily adding this sort of output will help you debug your code. Let us examine each line of code in this graphics program.<\/p>\n<table>\n<tbody>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>from graphics import *<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">Zelle\u2019s graphics are not a part of the standard Python distribution. For the Python interpreter to find Zelle\u2019s module, it must be imported.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>win = GraphWin()<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">A GraphWin is a type of object that automatically displays a window when it is created. A small window, 200 by 200 pixels is created.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>pt = Point(100, 50)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">This creates a Point object and assigns it the name pt. A Point object, like each of the graphical objects that can be drawn on a GraphWin, has a method draw.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>pt.draw(win)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">Now you should see the Point if you look hard in the Graphics Window &#8211; it shows as a single, small, black pixel.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>cir = Circle(pt, 25)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">This creates a Circle object with center at the previously defined pt and with radius 25.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>cir.draw(win)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">Now you should see the Circle in the Graphics Window.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>cir.setOutline('red')<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">Uses method setOutline to color the object\u2019s border.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>cir.setFill('blue')<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">Uses method setFill to color the inside of the object.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>line = Line(pt, Point(150, 100))<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">A Line object is constructed with two Points as parameters. In this case we use the previously named Point, pt, and specify another Point directly.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>line.draw(win)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">Technically the Line object is a segment between the the two points. You should now see the line in the Graphics Window.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>rect = Rectangle(Point(20, 10), pt)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">A rectangle is also specified by two points. The points must be diagonally opposite corners.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>rect.draw(win)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">The drawn Rectangle object is restricted to have horizontal and vertical sides.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>line.move(10, 40)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">The parameters to the move method are the amount to shift the x and y coordinates of the object. The line will visibly move in the Graphics Window.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>print('cir:', cir)<\/code><\/p>\n<p class=\"import-Normal\"><code>print('line:', line)<\/code><\/p>\n<p class=\"import-Normal\"><code>print('rect:', rect)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">These three lines are used for debugging purposes. The coordinates for each object will be displayed in the Shell.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>input(\"Press return to end\")<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">This statement displays instructions (in the Shell) for the user.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 193px\">\n<p class=\"import-Normal\"><code>win.close()<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt;border: 0.5pt solid windowtext;width: 802px\">\n<p class=\"import-Normal\">The Graphics Window is closed (it disappears).<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: center\"><small><em>Table 4: Python graphIntro.py Code Explained<\/em><\/small><\/p>\n<p class=\"import-Normal\">Figure 24 shows the Graphics Window created by<code> graphIntroSteps.py<\/code> with the various graphics objects displayed in it. Next, in Figure 25, is the output that is displayed in the Python IDLE Shell. Once the user presses the Enter key (\u2018return\u2019) the Graphics Window disappears.<\/p>\n<div style=\"width: 157px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232343\/image27.png\" alt=\"image\" width=\"147\" height=\"165\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 24: Example Graphics Window<\/p>\n<\/div>\n<div style=\"width: 542px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232345\/image28.png\" alt=\"image\" width=\"532\" height=\"226\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 25: Python Idle Shell Output<\/p>\n<\/div>\n<h1>Graphics Windows: Coordinate Systems<\/h1>\n<p class=\"import-Normal\">Graphics windows have a Cartesian (x,y) coordinate system. The dimensions are initially measured in pixels. The first coordinate is the horizontal coordinate, measured from left to right, so in the default 200&#215;200 window, 100 is about half way across the 200 pixel wide window. The second coordinate, for the vertical direction, increases going down from the top of the window by default, not up as you are likely to expect from geometry or algebra class. The coordinate 100 out of the total 200 vertically should be about 1\/2 of the way down from the top. See figure 26.<\/p>\n<div style=\"width: 239px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232348\/image29.png\" alt=\"image\" width=\"229\" height=\"204\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 26: Default Graphics Coordinate System<\/p>\n<\/div>\n<p>Much of the graphics programming we will attempt will be based on designing simple GUIs (Graphical User Interfaces) based on some of the programs we have already written. Graphical user interfaces (GUIs) are human-computer interfaces allowing users to interact with an app. Rarely will you find a computer application today that doesn\u2019t have some sort of graphical interface to use it. A graphical interface consists of a window which is populated by \u201cwidgets\u201d, the basic building blocks of a GUI. Widgets are the pieces of a GUI that make it usable, e.g. buttons, icons, menu items, on-screen text boxes for typing in information, etc. Basically, anything the user can see in the window is a widget.<\/p>\n<p class=\"import-Normal\">Placing and drawing objects in a window defined by pixels (creating images on the pixel level) can get very tedious. The<code> graphics.py<\/code> module provides us with the ability to set the coordinate system of the window using the <code>setCoords<\/code> method, which we will see in the following section.<\/p>\n<h1>GraphWin Objects<span class=\"import-FootnoteReference\"><br \/>\n<\/span><\/h1>\n<p class=\"import-Normal\">A <code>GraphWin<\/code> object represents a window on the screen where graphical images may be drawn<a class=\"footnote\" title=\"Based on: Zelle, John M. &quot;Graphics Module Reference.&quot; (2016).\" id=\"return-footnote-72-2\" href=\"#footnote-72-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a>. A program may define any number of <code>GraphWins<\/code>. A <code>GraphWin<\/code> understands the following methods. Recall<\/p>\n<p class=\"import-Normal\"><code>GraphWin(title, width, height)<\/code><\/p>\n<p class=\"import-Normal\" style=\"padding-left: 30px\">Constructs a new graphics window for drawing on the screen.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 21.6pt\">The parameters are optional; the default title is \u201cGraphics Window\u201d and the default size is 200 x 200 pixels.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 21.6pt\">Example: <code>win = GraphWin(\"My App\", 500, 180)<\/code><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 21.6pt\">The following figure shows the resulting graphics window which is 500 pixels wide and 180 pixels high with a title of \u201cMy App\u201d.<\/p>\n<div style=\"width: 350px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232350\/image30.png\" alt=\"image\" width=\"340\" height=\"151\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 27: Default Graphics Window<\/p>\n<\/div>\n<p class=\"import-Normal\"><code>setBackground(color)<\/code> Sets the window background to the given color. The default background color depends on your system. See Section <em>Generating Colors<\/em> for information on specifying colors.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>win.setBackground(\"white\")<\/code><\/p>\n<p class=\"import-Normal\"><code>close()<\/code> Closes the on-screen window.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>win.close()<\/code><\/p>\n<p class=\"import-Normal\"><code>getMouse()<\/code> Pauses for the user to click a mouse in the window and returns where the mouse was clicked as a Point object.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>clickPoint = win.getMouse()<\/code><\/p>\n<p class=\"import-Normal\"><code>setCoords(x1, y1, x2, y2)<\/code> Sets the coordinate system of the window. The lower-left corner is (x1; y1) and the upper-right corner is (x2; y2).<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>win.setCoords(0, 0, 4.0, 4.0)<\/code><\/p>\n<h3>Example Program Using Coordinate Transformation<\/h3>\n<div style=\"width: 210px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232352\/image31.png\" alt=\"image\" width=\"200\" height=\"211\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 28: Match the Colors Game<\/p>\n<\/div>\n<p class=\"import-Normal\">Suppose we wanted to create a simple game app where the user needed to match a pair of tiles with the goal of eventually pair-matching all the tiles in the grid. For example, the user might need to pair matching colored circles as seen here in Figure 28 by clicking on an empty pink square<\/p>\n<p class=\"import-Normal\">Drawing the objects of this GUI is certainly easier using coordinate transformation; e.g. defining the coordinate system of our GUI window to go from (0,0) in the lower left corner to (4,4) in the upper right corner).<\/p>\n<p class=\"import-Normal\">Examine the code below <code>(matchColorsGame.py)<\/code>.<\/p>\n<\/div>\n<div class=\"unit-3:-graphics:-designing-and-developing-graphics-programs.\">\n<p class=\"import-Normal\"><code>from graphics import *<\/code><\/p>\n<p class=\"import-Normal\"><code>win = GraphWin(\"Match the Colors\", 500, 500) #create a 500x500 window<\/code><br \/>\n<code># set coordinates to go from (0,0) in the lower left corner to<\/code><br \/>\n<code># (4,4) in the upper right.<\/code><br \/>\n<code>win.setCoords(0.0, 0.0, 4.0, 4.0)\u00a0\u2190<\/code><br \/>\n<code>win.setBackground(\"LightPink\")<\/code><\/p>\n<p class=\"import-Normal\"><code># Draw the vertical lines<\/code><br \/>\n<code>Line(Point(1,0), Point(1,4)).draw(win)<\/code><br \/>\n<code>Line(Point(2,0), Point(2,4)).draw(win)<\/code><br \/>\n<code>Line(Point(3,0), Point(3,4)).draw(win)<\/code><\/p>\n<p class=\"import-Normal\"><code># Draw the horizontal lines<\/code><br \/>\n<code>Line(Point(0,1), Point(4,1)).draw(win)<\/code><br \/>\n<code>Line(Point(0,2), Point(4,2)).draw(win)<\/code><br \/>\n<code>Line(Point(0,3), Point(4,3)).draw(win)<\/code><\/p>\n<p class=\"import-Normal\"><code># Draw cirlcles in boxes<\/code><br \/>\n<code>circle1 = Circle(Point(.5,.5), .25)<\/code><br \/>\n<code>circle1.setFill('Red')<\/code><br \/>\n<code>circle1.draw(win)<\/code><br \/>\n<code>circle2 = Circle(Point(2.5,1.5), .25)<\/code><br \/>\n<code>circle2.setFill('Blue')<\/code><br \/>\n<code>circle2.draw(win)<\/code><br \/>\n<code>circle3 = Circle(Point(1.5,2.5), .25)<\/code><br \/>\n<code>circle3.setFill('Yellow')<\/code><br \/>\n<code>circle3.draw(win)<\/code><br \/>\n<code>circle4 = Circle(Point(3.5,2.5), .25)<\/code><br \/>\n<code>circle4.setFill('Blue')<\/code><br \/>\n<code>circle4.draw(win)<\/code><br \/>\n<code>circle5 = Circle(Point(.5,3.5), .25)<\/code><br \/>\n<code>circle5.setFill('Red')<\/code><br \/>\n<code>circle5.draw(win)<\/code><br \/>\n<code>circle6 = Circle(Point(2.5,.5), .25)<\/code><br \/>\n<code>circle6.setFill('Yellow')<\/code><br \/>\n<code>circle6.draw(win)<\/code><\/p>\n<p class=\"import-Normal\"><code># wait for click and then quit<\/code><br \/>\n<code>win.getMouse()<\/code><br \/>\n<code>win.close()<\/code><\/p>\n<p class=\"import-Normal\">Our program still defines the size of the window in pixels (the shaded area in the figure below), but the placement of objects in the window uses the coordinates defined using the<code> win.setCoords<\/code> method. See Figure 29.<\/p>\n<div style=\"width: 280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232355\/image32.png\" alt=\"image\" width=\"270\" height=\"243\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 29: Transformed Graphics Coordinate System<\/p>\n<\/div>\n<h3>Graphics Objects<\/h3>\n<p class=\"import-Normal\">The Graphics library provides the following classes of drawable objects: Point, Line, Circle, Oval, Rectangle, Polygon, and Text. All objects are initially created unfilled with a black outline. All graphics objects support the following generic set of methods:<\/p>\n<p class=\"import-Normal\"><code>setFill(color)<\/code> Sets the interior of the object to the given color.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> someObject.setFill(\"red\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setOutline(color)<\/code> Sets the outline of the object to the given color.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> someObject.setOutline(\"yellow\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setWidth(pixels)<\/code> Sets the width of the outline of the object to the desired number of pixels. (Does not work for Point.)<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>someObject.setWidth(3)<\/code><\/p>\n<p class=\"import-Normal\"><code>draw(aGraphWin)<\/code> Draws the object into the given<code> GraphWin<\/code> and returns the drawn object.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>someObject.draw(someGraphWin)<\/code><\/p>\n<p class=\"import-Normal\"><code>move(dx,dy)<\/code> Moves the object <code>dx<\/code> units in the <em>x<\/em> direction and <code>dy<\/code> units in the <em>y <\/em>direction. If the object is currently drawn, the image is adjusted to the new position.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>someObject.move(10, 15.5)<\/code><\/p>\n<h3>Point Methods<\/h3>\n<p class=\"import-Normal\"><code>Point(x,y)<\/code> Constructs a point having the given coordinates.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aPoint = Point(3.5, 8)<\/code><\/p>\n<p class=\"import-Normal\"><code>getX()<\/code> Returns the x coordinate of a point.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>xValue = aPoint.getX()<\/code><\/p>\n<p class=\"import-Normal\"><code>getY()<\/code> Returns the y coordinate of a point.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>yValue = aPoint.getY()<\/code><\/p>\n<h3>Line Methods<\/h3>\n<p class=\"import-Normal\"><code>Line(point1, point2)<\/code> Constructs a line segment from <code>point1<\/code> to <code>point2.<\/code><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: aLine = Line(Point(1,3), Point(7,4))<\/p>\n<p class=\"import-Normal\"><code>setArrow(endString)<\/code> Sets the arrowhead status of a line. Arrows may be drawn at either the first point, the last point, or both. Possible values of <code>endString<\/code> are <code>\"first\"<\/code>, <code>\"last\"<\/code>, <code>\"both\"<\/code>, and <code>\"none\"<\/code>. The default setting is <code>\"none\"<\/code>.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aLine.setArrow(\"both\")<\/code><\/p>\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the midpoint of the line segment.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> midPoint = aLine.getCenter()<\/code><\/p>\n<p class=\"import-Normal\"><code>getP1()<\/code>, <code>getP2()<\/code> Returns a clone of the corresponding endpoint of the segment.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>startPoint = aLine.getP1()<\/code><\/p>\n<h3>Circle Methods<\/h3>\n<p class=\"import-Normal\"><code>Circle(centerPoint, radius)<\/code> Constructs a circle with the given center point and radius.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aCircle = Circle(Point(3,4), 10.5)<\/code><\/p>\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the center point of the circle.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = aCircle.getCenter()<\/code><\/p>\n<p class=\"import-Normal\"><code>getRadius()<\/code> Returns the radius of the circle.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>radius = aCircle.getRadius()<\/code><\/p>\n<p class=\"import-Normal\"><code>getP1()<\/code>, <code>getP2()<\/code> Returns a clone of the corresponding corner of the circle&#8217;s bounding box. These are opposite corner points of a square that circumscribes the circle.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>cornerPoint = aCircle.getP1()<\/code><\/p>\n<h3>Rectangle Methods<\/h3>\n<p class=\"import-Normal\"><code>Rectangle(point1, point2)<\/code> Constructs a rectangle having opposite corners at <code>point1<\/code> and <code>point2.<\/code><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aRectangle = Rectangle(Point(1,3), Point(4,7))<\/code><\/p>\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the center point of the rectangle.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = aRectangle.getCenter()<\/code><\/p>\n<p class=\"import-Normal\"><code>getP1()<\/code>,<code> getP2()<\/code> Returns a clone of the corresponding point used to construct the rectangle.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>cornerPoint = aRectangle.getP1()<\/code><\/p>\n<h3>Oval Methods<\/h3>\n<p class=\"import-Normal\"><code>Oval(point1, point2)<\/code> Constructs an oval in the bounding box determined by <code>point1<\/code> and <code>point2<\/code>.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>anOval = Oval(Point(1,2), Point(3,4))<\/code><\/p>\n<p class=\"import-Normal\"><code>getCenter()<\/code> Returns a clone of the point at the center of the oval.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = anOval.getCenter()<\/code><\/p>\n<p class=\"import-Normal\"><code>getP1(), getP2()<\/code> Returns a clone of the corresponding point used to construct the oval.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>cornerPoint = anOval.getP1()<\/code><\/p>\n<h3>Polygon Methods<\/h3>\n<p class=\"import-Normal\"><code>Polygon(point1, point2, point3, ...)<\/code> Constructs a polygon with the given points as vertices. Also accepts a single parameter that is a list of the vertices.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aPolygon = Polygon(Point(1,2), Point(3,4), Point(5,6))<\/code><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example:<code> aPolygon = Polygon([Point(1,2), Point(3,4), Point(5,6)])<\/code><\/p>\n<p class=\"import-Normal\"><code>getPoints()<\/code> Returns a list containing clones of the points used to construct the polygon.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>pointList = aPolygon.getPoints()<\/code><\/p>\n<h1>Text Methods<\/h1>\n<p class=\"import-Normal\"><code>Text(anchorPoint, textString)<\/code> Constructs a text object that displays <code>textString<\/code> centered at <code>anchorPoint<\/code>. The text is displayed horizontally.<span class=\"import-FootnoteReference\"><a class=\"footnote\" title=\"Based on: Zelle, John M. &quot;Graphics Module Reference.&quot; (2016).\" id=\"return-footnote-72-3\" href=\"#footnote-72-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a><\/span><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: message = <code>Text(Point(3,4), \"Hello!\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setText(string)<\/code> Sets the text of the object to string.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setText(\"Goodbye!\")<\/code><\/p>\n<p class=\"import-Normal\"><code>getText()<\/code> Returns the current string.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>msgString = message.getText()<\/code><\/p>\n<p class=\"import-Normal\"><code>getAnchor()<\/code> Returns a clone of the anchor point.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = message.getAnchor()<\/code><\/p>\n<p class=\"import-Normal\"><code>setFace(family)<\/code> Changes the font face to the given family. Possible values are <code>\"helvetica\"<\/code>, <code>\"courier\"<\/code>, <code>\"times roman\"<\/code>, and <code>\"arial\"<\/code>.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setFace(\"arial\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setSize(point)<\/code> Changes the font size to the given point size. Sizes from 5 to 36 points are legal.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setSize(18)<\/code><\/p>\n<p class=\"import-Normal\"><code>setStyle(style)<\/code> Changes font to the given style. Possible values are: <code>\"normal\"<\/code>, <code>\"bold\"<\/code>, <code>\"italic\"<\/code>, and <code>\"bold italic\"<\/code>.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setStyle(\"bold\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setTextColor(color)<\/code> Sets the color of the text to color.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>message.setTextColor(\"pink\")<\/code><\/p>\n<h1>Entry Objects<\/h1>\n<p class=\"import-Normal\">Objects of type <code>Entry<\/code> are displayed as text entry boxes that can be edited by the user of the program. <code>Entry<\/code> objects support the generic graphics methods <code>move()<\/code>, <code>draw(graphwin)<\/code>, <code>undraw()<\/code>, <code>setFill(color)<\/code>, and<code> clone()<\/code>. The Entry specific methods are given below.<span class=\"import-FootnoteReference\"><a class=\"footnote\" title=\"Based on: Zelle, John M. &quot;Graphics Module Reference.&quot; (2016).\" id=\"return-footnote-72-4\" href=\"#footnote-72-4\" aria-label=\"Footnote 4\"><sup class=\"footnote\">[4]<\/sup><\/a><\/span><\/p>\n<p class=\"import-Normal\"><code>Entry(centerPoint, width)<\/code> Constructs an Entry having the given center point and width. The width is specified in number of characters of text that can be displayed.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox = Entry(Point(3,4), 5)<\/code><\/p>\n<p class=\"import-Normal\"><code>getAnchor()<\/code> Returns a clone of the point where the entry box is centered.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = inputBox.getAnchor()<\/code><\/p>\n<p class=\"import-Normal\"><code>getText()<\/code> Returns the string of text that is currently in the entry box.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputStr = inputBox.getText()<\/code><\/p>\n<p class=\"import-Normal\"><code>setText(string)<\/code> Sets the text in the entry box to the given string.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setText(\"32.0\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setFace(family)<\/code> Changes the font face to the given family. Possible values are <code>\"helvetica\"<\/code>, <code>\"courier\"<\/code>, <code>\"times roman\"<\/code>, and <code>\"arial\"<\/code>.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setFace(\"courier\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setSize(point)<\/code> Changes the font size to the given point size. Sizes from 5 to 36 points are legal.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setSize(12)<\/code><\/p>\n<p class=\"import-Normal\"><code>setStyle(style)<\/code> Changes font to the given style. Possible values are: <code>\"normal\"<\/code>, <code>\"bold\"<\/code>, <code>\"italic\"<\/code>, and<code> \"bold italic\"<\/code>.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setStyle(\"italic\")<\/code><\/p>\n<p class=\"import-Normal\"><code>setTextColor(color)<\/code> Sets the color of the text to color.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>inputBox.setTextColor(\"green\")<\/code><\/p>\n<h1>Displaying Images<\/h1>\n<p class=\"import-Normal\">The Graphics library also provides minimal support for displaying and manipulating images in a <code>GraphWin<\/code>. Most platforms will support at least PPM and GIF images. Display is done with an Image object. Images support the generic methods <code>move(dx,dy)<\/code>, <code>draw(graphwin)<\/code>, <code>undraw()<\/code>, and <code>clone()<\/code>. Image-specific methods are given below.<span class=\"import-FootnoteReference\"><a class=\"footnote\" title=\"Based on: Zelle, John M. &quot;Graphics Module Reference.&quot; (2016).\" id=\"return-footnote-72-5\" href=\"#footnote-72-5\" aria-label=\"Footnote 5\"><sup class=\"footnote\">[5]<\/sup><\/a><\/span><\/p>\n<p class=\"import-Normal\"><code>Image(anchorPoint, filename)<\/code> Constructs an image from contents of the given file, centered at the given anchor point. Can also be called with width and height parameters instead of <code>filename<\/code>. In this case, a blank (transparent) image is created of the given width and height (in pixels).<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>flowerImage = Image(Point(100,100), \"flower.gif\")<\/code><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>blankImage = Image(320, 240)<\/code><\/p>\n<p class=\"import-Normal\"><code>getAnchor()<\/code> Returns a clone of the point where the image is centered.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>centerPoint = flowerImage.getAnchor()<\/code><\/p>\n<p class=\"import-Normal\"><code>getWidth()<\/code> Returns the width of the image.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>widthInPixels = flowerImage.getWidth()<\/code><\/p>\n<p class=\"import-Normal\"><code>getHeight()<\/code> Returns the height of the image.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>heightInPixels = flowerImage.getHeight()<\/code><\/p>\n<p class=\"import-Normal\"><code>getPixel(x, y)<\/code> Returns a list [red, green, blue] of the RGB values of the pixel at position (x,y). Each value is a number in the range 0-255 indicating the intensity of the corresponding RGB color. These numbers can be turned into a color string using the <code>color_rgb<\/code> function (see next section).<\/p>\n<p class=\"import-Normal\">Note that pixel position is relative to the image itself, not the window where the image may be drawn. The upper-left corner of the image is always pixel <code>(0,0)<\/code>.<\/p>\n<p>The following example, <code>displayImage.py<\/code>, illustrates code that displays a GIF image in a Graphics window The window&#8217;s dimensions are determined by variables created by assigning the image\u2019s width and height with the <code>getWidth()<\/code> and <code>getHeight()\u00a0<\/code>methods. The GIF image is 300 x 300 pixels, so the window is 300 x 300. Point is set to coordinates 150 x and 150 y so the image will be centered.<\/p>\n<div id=\"attachment_142\" style=\"width: 430px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-142\" class=\"wp-image-142\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232359\/displayImageSS.png\" alt=\"\" width=\"420\" height=\"409\" \/><\/p>\n<p id=\"caption-attachment-142\" class=\"wp-caption-text\">Figure 30: Display an Image\u00a0<em>Parrots at Sarasota Jungle Gardens<\/em> by\u00a0Karen Blaha is licensed under under CC-BY 2.0<\/p>\n<\/div>\n<p>Image colors can be adjusted.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>red, green, blue = flowerImage.getPixel(32,18)<\/code><\/p>\n<p class=\"import-Normal\"><code>setPixel(x, y, color)<\/code> Sets the pixel at position (x,y) to the given color. Note: This is a slow operation.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>flowerImage.setPixel(32, 18, \"blue\")<\/code><\/p>\n<p class=\"import-Normal\"><code>save(filename)<\/code> Saves the image to a file. The type of the resulting file (e.g., GIF or PPM) is determined by the extension on the filename.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>flowerImage.save(\"mypic.ppm\")<\/code><\/p>\n<p>The following example, <code>colortoGrayscale.py<\/code>, illustrates code that displays a GIF image in a Graphics window, changes the color to grayscale using the <code>setPixel()<\/code> method, then saves a grayscale copy of the image.<\/p>\n<div id=\"attachment_145\" style=\"width: 762px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-145\" class=\"wp-image-145\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232404\/colortoGrayscaleSS.png\" alt=\"\" width=\"752\" height=\"410\" \/><\/p>\n<p id=\"caption-attachment-145\" class=\"wp-caption-text\">Figure 31: Convert an Image to Grayscale\u00a0Parrots at Sarasota Jungle Gardens by\u00a0Karen Blaha is licensed under under CC-BY 2.0<\/p>\n<\/div>\n<h1>Generating Colors<span class=\"import-FootnoteReference\"><br \/>\n<\/span><\/h1>\n<p class=\"import-Normal\">Colors are indicated by strings. Most normal colors such as &#8220;red&#8221;, &#8220;purple&#8221;, &#8220;green&#8221;, &#8220;cyan&#8221;, etc. are available. Many colors come in various shades, such as &#8220;red1&#8221;, &#8220;red2&#8243;,&#8221;red3&#8221;, &#8220;red4&#8221;, which are increasingly darker shades of red. For a full list, see the table below.<a class=\"footnote\" title=\"Based on: Zelle, John M. &quot;Graphics Module Reference.&quot; (2016).\" id=\"return-footnote-72-6\" href=\"#footnote-72-6\" aria-label=\"Footnote 6\"><sup class=\"footnote\">[6]<\/sup><\/a><\/p>\n<p class=\"import-Normal\">The graphics module also provides a function for mixing your own colors numerically. The function <code>color_rgb(red, green, blue)<\/code> will return a string representing a color that is a mixture of the intensities of red, green and blue specified. These should be ints in the range 0-255. Thus <code>color_rgb(255, 0, 0)<\/code> is a bright red, while <code>color_rgb(130, 0, 130)<\/code> is a medium magenta.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\">Example: <code>aCircle.setFill(color_rgb(130, 0, 130))<\/code><\/p>\n<table>\n<tbody>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;AliceBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;firebrick&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;MistyRose&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;AntiqueWhite&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;ForestGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;navy&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;aquamarine&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;gold&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;navy blue&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;azure&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;gray&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;OliveDrab&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;beige&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;gray1&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;orange&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;black&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;gray2&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;OrangeRed&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;BlanchedAlmond&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;gray3&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;orchid&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;blue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;gray99&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;PaleGreen&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;BlueViolet&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;green&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;PaleTurquoise&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;brown&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;GreenYellow&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;PaleTurquoise1&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;CadetBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;honeydew&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;PaleVioletRed&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;chartreuse&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;HotPink&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;PapayaWhip&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;chocolate&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;IndianRed&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;PeachPuff&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;coral&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;ivory&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;peru&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;CornflowerBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;khaki&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;pink&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;cornsilk&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;lavender&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;plum&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;cyan&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LavenderBlush&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;PowderBlue&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;cyan1&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LawnGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;purple&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;cyan2&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LemonChiffon&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;red&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;cyan3&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;light grey&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;RoyalBlue&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;cyan4&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;light slate gray&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SaddleBrown&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;salmon&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkCyan&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightCoral&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;salmon1&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkGoldenrod&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightCyan&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;salmon2&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkGray&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightGoldenrod&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;salmon3&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;salmon4&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkGrey&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightPink&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;sandy brown&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkKhaki&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightSalmon&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SandyBrown&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkMagenta&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightSeaGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SeaGreen&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkOliveGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightSkyBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;seashell&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkOrange&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightSlateBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;sienna&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkOrchid&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightSteelBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SkyBlue&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkRed&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LightYellow&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SlateBlue&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkSalmon&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;LimeGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SpringGreen&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkSeaGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;maroon&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SpringGreen1&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkSlateBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;MediumAquamarine&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;SteelBlue&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkSlateGray&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;MediumOrchid&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;tan&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkTurquoise&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;MediumPurple&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;turquoise&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DarkViolet&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;MediumSpringGreen&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;violet&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DeepPink&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">MediumTurquoise&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;VioletRed&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DeepSkyBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;MediumVioletRed&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;yellow&#8217;<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"margin-left: 18pt\">&#8216;DimGray&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;MidnightBlue&#8217;<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">&#8216;YellowGreen&#8217;<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><small>Table 5: Graphics Library Color Names<\/small><\/p>\n<h1>Interactive Graphics<\/h1>\n<p class=\"import-Normal\">In a GUI environment, users interact with their applications by clicking on buttons, choosing items from menus, and typing information into on-screen text boxes. Event-driven programming draws interface elements (widgets) on the screen and then waits for the user to do something. An event is generated whenever a user moves the mouse, clicks the mouse, or types a key on the keyboard.<\/p>\n<p class=\"import-Normal\">One limitation of the<code> graphics.py<\/code> module is that it is not robust if a graphics window is closed by clicking on the standard operating system close button on the title bar. If you close a graphics window that way, you are likely to get a Python error message. On the other hand, if your program creates a graphics window and then terminates abnormally due to some other error, the graphics window may be left orphaned. In this case the close button on the title bar is important: it is the easiest method to clean up and get rid of the window!<\/p>\n<p class=\"import-Normal\">This lack of robustness is tied to the simplification designed into the <code>graphics<\/code> module. If the programmer wants user input, only one type can be specified at a time (either a mouse click in the graphics window via the <code>getMouse<\/code> method, or via the input keyboard Entry methods into the Shell window).<\/p>\n<p class=\"import-Normal\">In <code>graphIntro.py<\/code>, a prompt to end the graphics program appeared in the Shell window, requiring you to pay attention to two windows.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>input(\"Press return to end\")<\/code><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>win.close()<\/code><\/p>\n<p class=\"import-Normal\">In <code>matchColorsGame.py<\/code>,where all the action takes place in the graphics window, the only interaction is to click the mouse to close the graphics window. But as mentioned, clicking the standard operating system close button on the title bar will cause a Python Error. To close the graphics window without an error the user must click inside the window.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"># wait for click and then quit<br \/>\n<code>win.getMouse()<\/code><br \/>\n<code>win.close()<\/code><\/p>\n<div class=\"textbox\"><strong>Note to Reader<\/strong>: If you write a program with a bug, and the program gets an execution error while there is a GraphWin on the screen, a dead GraphWin lingers. The best way to clean things up is to make the Shell window be the current window and select from the menu Shell \u2192 Restart Shell.<\/div>\n<h3>Mouse Clicks<\/h3>\n<p class=\"import-Normal\">As we have seen in earlier examples, we can get graphical information from the user via the <code>getMouse<\/code> method of the <code>GraphWin<\/code> class. The code <code>win.getMouse()<\/code> waits for a mouse click. In the following code, the position of the mouse click is not important.<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"># wait for click and then quit<\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>win.getMouse()<\/code><\/p>\n<p class=\"import-Normal\" style=\"margin-left: 36pt\"><code>win.close()<\/code><\/p>\n<p class=\"import-Normal\">When <code>getMouse<\/code> is invoked on a <code>GraphWin<\/code>, the program pauses and waits for the user to click the mouse somewhere in the window. The spot where the user clicked is returned as a <code>Point<\/code> object.<\/p>\n<p class=\"import-Normal\">The next example, <code>triangle.py<\/code><sup class=\"import-FootnoteReference\"><a class=\"footnote\" title=\"Based on code from: Harrington, Andrew N. \u201cHands-on Python Tutorial (Python 3.1 Version).\u201d Loyola University Chicago. https:\/\/anh.cs.luc.edu\/python\/hands-on\/3.1\/handsonHtml\/index.html#\" id=\"return-footnote-72-7\" href=\"#footnote-72-7\" aria-label=\"Footnote 7\"><sup class=\"footnote\">[7]<\/sup><\/a><\/sup>, illustrates similar starting and ending code. In addition it explicitly interacts with the user. Rather than the code specifying literal coordinates for all graphical objects, the program remembers the places where the user clicks the mouse (stored in variables), and uses them as the vertices of a triangle.<\/p>\n<div style=\"width: 484px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232408\/image33.png\" alt=\"image\" width=\"474\" height=\"427\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 32: triangle.py<\/p>\n<\/div>\n<p>Let us examine the code in this graphics program.<\/p>\n<table>\n<tbody>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>from graphics import *<\/code><\/p>\n<p class=\"import-Normal\"><code>win = GraphWin('Draw a Triangle', 350, 350)<\/code><\/p>\n<p class=\"import-Normal\"><code>win.setBackground('yellow')<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">The standard starting lines (except for the specific values chosen for the width, height, and title of the window). The background color is a property of the whole graphics window that you can set.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>message = Text(Point(170, 30), 'Click on three points')<\/code><\/p>\n<p class=\"import-Normal\"><code>message.setTextColor('red')<\/code><\/p>\n<p class=\"import-Normal\"><code>message.setStyle('italic')<\/code><\/p>\n<p class=\"import-Normal\"><code>message.setSize(20)<\/code><\/p>\n<p class=\"import-Normal\"><code>message.draw(win)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">A Text object is created. This is the prompt for user action. These lines illustrate most of the ways the appearance of a Text object may be modified, with results like in most word processors.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>p1 = win.getMouse()<\/code><\/p>\n<p class=\"import-Normal\"><code>p1.draw(win)<\/code><\/p>\n<p class=\"import-Normal\"><code>p2 = win.getMouse()<\/code><\/p>\n<p class=\"import-Normal\"><code>p2.draw(win)<\/code><\/p>\n<p class=\"import-Normal\"><code>p3 = win.getMouse()<\/code><\/p>\n<p class=\"import-Normal\"><code>p3.draw(win)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">After the prompt, the program looks for a response. The win.getMouse() method (with no parameters), waits for you to click the mouse inside win. Then the Point where the mouse was clicked is returned. In this code three mouse clicks are waited for, remembered in variables p1, p2, and p3, and the points are drawn.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>triangle = Polygon(p1,p2,p3)<\/code><\/p>\n<p class=\"import-Normal\"><code>triangle.setFill('gray')<\/code><\/p>\n<p class=\"import-Normal\"><code>triangle.setOutline('cyan')<\/code><\/p>\n<p class=\"import-Normal\"><code>triangle.setWidth(4) # width of boundary line<\/code><\/p>\n<p class=\"import-Normal\"><code>triangle.draw(win)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">Next we see a very versatile type of graphical object, a Polygon, which may have any number of vertices specified in a list as its parameter. We see that the methods setFill and setOutline that we used earlier on a Circle, and the setWidth method we used for a Line, also apply to a Polygon, (and also to other graphics objects).<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>message.setText('Click anywhere to quit') # change text message<\/code><\/p>\n<p class=\"import-Normal\"><code>win.getMouse()<\/code><\/p>\n<p class=\"import-Normal\"><code>win.close()<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">Besides changing the style of a Text object, the text itself may be changed as we see in the first line. The remaining code are standard ending lines.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"textbox\">\n<p>Tip: Trying to figure out where to place objects in GraphWin can be time consuming and more than likely you will to need to adjust the positions of objects by trial and error until you get the positions you want. We can also print a descriptive string for each graphical type for debugging our graphics code. It only shows position, not other parts of the state of the object.<\/p>\n<p><code>&gt;&gt;&gt; pt = Point(30, 50)<\/code><br \/>\n<code>&gt;&gt;&gt; print(pt) Point(30, 50)<\/code><br \/>\n<code>&gt;&gt;&gt; ln = Line(pt)<\/code><br \/>\n<code>Point(100, 150))<\/code><br \/>\n<code>&gt;&gt;&gt; print(ln)<\/code><br \/>\n<code>Line(Point(30, 50), Point(100, 150))<\/code><\/p>\n<\/div>\n<h3>Handling Textual Input<\/h3>\n<p class=\"import-Normal\">In the <code>triangle.py<\/code> example, all of the user input was provided through simple mouse clicks. The <code>graphics<\/code> module also provides a way for the user to enter text inside a textbox via the keyboard with the <code>Entry<\/code> type. This capability allows us to create primitive (but fully functional!) graphical user interfaces (GUIs). The <code>Entry<\/code> object is a partial replacement for the <code>input<\/code> function.<\/p>\n<p class=\"import-Normal\">Let us look at a simple example, <code>greet.py<\/code>, which is presented below:<\/p>\n<div class=\"textbox\">\n<p><code style=\"color: #ff0000\"># Simple example with Entry objects (textboxes).<\/code><br \/>\n<code style=\"color: #ff0000\"># Enter your name, click the mouse, and see greetings.<\/code><\/p>\n<p><code><code style=\"color: #ff9900\">from<\/code> graphics<code style=\"color: #ff9900\"> import *<\/code><\/code><\/p>\n<p><code>win = GraphWin(<code style=\"color: #339966\">\"Greeting\"<\/code>, 300, 300)<\/code><br \/>\n<code>win.setBackground(<code style=\"color: #339966\">'LightGreen'<\/code>)<\/code><br \/>\n<code>instructions = Text(Point(150,35),<\/code><br \/>\n<code><code style=\"color: #339966\">\"Enter your name.\\nThen click the mouse twice.\"<\/code>)<\/code><br \/>\n<code>instructions.draw(win) <code style=\"color: #ff0000\">#display instructions<\/code><\/code><\/p>\n<p><code>entry1 = Entry(Point(150, 230),10) <code style=\"color: #ff0000\">#define the textbox<\/code><\/code><br \/>\n<code>entry1.draw (win) <code style=\"color: #ff0000\">#draw the textbox<\/code><\/code><\/p>\n<p><code>Text(Point (60, 230),<code style=\"color: #339966\">'Name:'<\/code>).draw(win) <code style=\"color: #ff0000\"># label for the textbox<\/code><\/code><\/p>\n<p><code>win.getMouse() # To know the user is finished with the text.<\/code><\/p>\n<p><code>name = entry1.getText() #assign the text entered to the variable 'name'<\/code><\/p>\n<p><code>greeting1 = <code style=\"color: #339966\">'Hello, '<\/code><code style=\"color: #339966\">name<\/code><code style=\"color: #339966\">'!'<\/code><code style=\"color: #ff0000\"># first greeting<\/code><\/code><br \/>\n<code>Text(Point(110, 160), greeting1).draw(win)<\/code><\/p>\n<p><code>greeting2 = <code style=\"color: #339966\">'Bonjour, '<\/code><code style=\"color: #339966\">name<\/code><code style=\"color: #339966\">'!'<\/code><code style=\"color: #ff0000\"># second greeting<\/code><\/code><br \/>\n<code>Text(Point(160, 120), greeting2).draw(win)<\/code><\/p>\n<p><code>win.getMouse() <code style=\"color: #ff0000\"># To close the window<\/code><\/code><br \/>\n<code>win.close()<\/code><\/p>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div style=\"width: 155px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232410\/image34.png\" alt=\"image\" width=\"145\" height=\"159\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 33: greeting.py Updated Window<\/p>\n<\/div>\n<div style=\"width: 157px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232412\/image35.png\" alt=\"image\" width=\"147\" height=\"160\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 34: greeting.py Updated Window<\/p>\n<\/div>\n<div style=\"width: 213px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232414\/image36.png\" alt=\"image\" width=\"203\" height=\"194\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 35: greeting.py with Coordinate Transformation<\/p>\n<\/div>\n<p class=\"import-Normal\">When we run this program the window displays (Figure 33), which allows the user to enter in a name.<\/p>\n<p class=\"import-Normal\">The user then enters a name into the textbox in the window and is then instructed to \u2018click the mouse. Once the user clicks her mouse the first time, the window is updated to reflect the \u201cgreetings\u201d as seen here in the second window (Figure 33). The user is also instructed to click her mouse again, which ends the program and closes the window.<\/p>\n<p class=\"import-Normal\">The last two graphics program, <code>triangle.py<\/code> and <code>greeting.py<\/code>, placed and drew objects in a window defined by pixels which required needing to adjust the positions of objects by trial and error until we got the positions we wanted. This can become very tedious, very fast.<\/p>\n<p class=\"import-Normal\">Let us look at how we can instead use coordinate transformation to more easily place and draw the objects in the <code>greeting.py<\/code> program. First we need to decide what coordinate system we want to apply for this app. One possibility is a three-by-three grid as seen here (Figure 35) by defining the coordinate system of our GUI window to go from (0,0) in the lower left corner to (3,3) in the upper right corner.<\/p>\n<p class=\"import-Normal\">The code for the updated program using coordinate transformation made placing and displaying the objects easier (see figure 36). As we design and develop more complicated GUIs, defining our own coordinate system for each app is necessary.<\/p>\n<div style=\"width: 501px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232417\/image37.png\" alt=\"image\" width=\"491\" height=\"480\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 36:greetCoords.py<\/p>\n<\/div>\n<h1>Functions<\/h1>\n<p class=\"import-Normal\">Functions are reusable pieces of programs. They allow you to give a name to a block of statements, allowing you to run that block using the specified name anywhere in your program and any number of times. This is known as calling the function. We have already used many Python built-in functions such as <code>input<\/code>, <code>print<\/code>,<code> int<\/code>, <code>str<\/code> and <code>float<\/code>. Additionally, the Python standard library includes many other functions useful for common programming tasks. Python has a function in its standard library named <code>sqrt<\/code>. The square root function accepts one numeric (integer or floating-point) value and produces a floating-point result; for example,\u00a0<span style=\"font-size: NaNpt;color: #;text-decoration: none\">\u221a144<\/span>= 12, so when presented with 144.0, <code>sqrt<\/code> returns the value 12.0. Try typing in and saving the following program:<\/p>\n<div style=\"width: 374px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232420\/image38.png\" alt=\"image\" width=\"364\" height=\"256\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 37: square.py<span style=\"font-size: 14pt;font-style: normal\">\u00a0<\/span><\/p>\n<\/div>\n<p class=\"import-Normal\">In the Python statement <code>math.sqrt(num)<\/code>, the function <code>sqrt<\/code> is \u201ccalled\u201d. The function <code>sqrt<\/code> requires a single \u201cparameter\u201d which in this example is the number (or value) that the user types in. The function accepts the parameter as the function\u2019s \u201cargument\u201d then \u201creturns\u201d the result which is assigned to the variable root.<\/p>\n<div class=\"textbox\"><code><code style=\"color: #0000ff\">Enter number:<\/code> 144<\/code><br \/>\n<code style=\"color: #3366ff\">Square root of 144.0 = 12.0<\/code><br \/>\n<code>&gt;&gt;&gt;<\/code><\/div>\n<p>The results of running this program is shown below:<\/p>\n<p class=\"import-Normal\">The function <code>sqrt<\/code> is like a black box; \u201ccallers\u201d do not need to know the details of the code inside the function in order to use it (figure 38).<\/p>\n<div style=\"width: 335px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232422\/image39.png\" alt=\"image\" width=\"325\" height=\"55\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 38: Conceptual view of the square root function<\/p>\n<\/div>\n<p class=\"import-Normal\">If the calling code attempts to pass a parameter to a function that is incompatible with the argument type expected by that function, the interpreter issues an error. Examine the results of trying this in the Python interactive Shell:<\/p>\n<div class=\"textbox\"><code>&gt;&gt;&gt; <code style=\"color: #ff9900\">import<\/code> math<br \/>\n&gt;&gt;&gt; math.sqrt(144)<\/code><br \/>\n<code style=\"color: #0000ff\">12.0<\/code><br \/>\n<code>&gt;&gt;&gt; math.sqrt(<code style=\"color: #339966\">\"144\"<\/code>)<\/code><br \/>\n<code style=\"color: #ff0000\">Traceback (most recent call last): <\/code><br \/>\n<code style=\"color: #ff0000\">File \"&lt;pyshell#2&gt;\", line 1, in &lt;module&gt; <\/code><br \/>\n<code style=\"color: #ff0000\">\u00a0 \u00a0 <\/code><br \/>\n<code style=\"color: #ff0000\"><code style=\"color: #ff0000\">math.sqrt(\"144\")TypeError: must be real number, not str<\/code><code>&gt;&gt;&gt;<\/code><\/code><\/div>\n<p class=\"import-Normal\">The <code>sqrt<\/code> function can process only numbers: integers and floating-point numbers. Even though we know we could convert the string parameter <code>'16'<\/code> to the integer <code>16<\/code> (with the <code>int<\/code> function) or to the floating-point value <code>16.0<\/code> (with the float function), the <code>sqrt<\/code> function does not automatically do this for us.<\/p>\n<p class=\"import-Normal\">Some functions take more than one parameter; for example, <code>print<\/code> can accept multiple parameters separated by commas.<\/p>\n<p class=\"import-Normal\">From the caller\u2019s perspective a function has three important parts:<\/p>\n<ul>\n<li><strong>Name<\/strong>. Every function has a name that identifies the code to be executed. Function names follow the same rules as variable names; a function name is another example of an identifier.<\/li>\n<li><strong>Parameters<\/strong>. A function must be called with a certain number of parameters, and each parameter must be the correct type. Some functions like <code>print<\/code> permit callers to pass any number of arguments, but most functions, like <code>sqrt<\/code>, specify an exact number. If a caller attempts to call a function with too many or too few parameters, the interpreter will issue an error message and refuse to run the program (see examples below).<\/li>\n<\/ul>\n<div class=\"textbox\"><code>&gt;&gt;&gt;<code style=\"color: #ff9900\"> import<\/code> math<br \/>\n&gt;&gt;&gt; math.sqrt(12.5)<br \/>\n<code style=\"color: #333399\">3.5355339059327378<\/code><br \/>\n&gt;&gt;&gt; math.sqrt()<br \/>\n<code style=\"color: #ff0000\">Traceback (most recent call last): <\/code><br \/>\n<code style=\"color: #ff0000\">    File \"&lt;pyshell#5&gt;\", line 1, in &lt;module&gt; <\/code><br \/>\n<code style=\"color: #ff0000\">        math.sqrt()<\/code><br \/>\n<code style=\"color: #ff0000\">TypeError: sqrt() takes exactly one argument (0 given)<\/code><br \/>\n&gt;&gt;&gt; math.sqrt(12,4.3)<br \/>\n<code style=\"color: #ff0000\">Traceback (most recent call last): <\/code><br \/>\n<code style=\"color: #ff0000\">    File \"&lt;pyshell#6&gt;\", line 1, in &lt;module&gt;<\/code><br \/>\n<code style=\"color: #ff0000\">        math.sqrt(12,4.3)<\/code><br \/>\n<code style=\"color: #ff0000\">TypeError: sqrt() takes exactly one argument (2 given)<\/code><br \/>\n&gt;&gt;&gt;<\/code><\/div>\n<p style=\"padding-left: 30px\">Similarly, if the parameters the caller passes are not compatible with the types specified for the function, the interpreter reports appropriate error messages.<\/p>\n<ul>\n<li><strong>Result type<\/strong>. A function returns a value to its caller. Generally a function will compute a result and return the value of the result to the caller. The caller\u2019s use of this result must be compatible with the function\u2019s specified result type. A function\u2019s result type and its parameter types can be completely unrelated (see example below).<\/li>\n<\/ul>\n<div class=\"textbox\"><code>&gt;&gt;&gt; <code style=\"color: #ff9900\">import<\/code> math<\/code><br \/>\n<code>&gt;&gt;&gt; <code style=\"color: #333399\">type<\/code>(math.sqrt(27))<br \/>\n<code><code style=\"color: #333399\">&lt;class 'float'&gt;<\/code><\/code><br \/>\n<code>&gt;&gt;&gt;<\/code><\/code><\/div>\n<p class=\"import-Normal\">Some functions do not accept any parameters; for example, the function to generate a pseudo-random floating-point number, random, requires no arguments (see below). The <code>random<\/code> function is part of the random module. The random function returns a floating-point value, but the caller does not pass the function any information to do its task.<\/p>\n<div class=\"textbox\"><code>&gt;&gt;&gt; <code style=\"color: #ff9900\">import<\/code> random<\/code><br \/>\n<code>&gt;&gt;&gt; random.random()<\/code><br \/>\n<code><code> style=\"color: #3366ff;\"&gt;0.6299660872157301<\/code><\/code><br \/>\n<code>&gt;&gt;&gt;<\/code><\/div>\n<h3>Defining Functions<\/h3>\n<p class=\"import-Normal\">As programs become longer and more complex, programmers must structure their programs in such a way as to effectively manage their complexity. We can write our own functions to divide our code into more manageable pieces. A modularized program is a program where each task within the program is in its own function. Besides their code organization aspects and ease of debugging, functions allow us to bundle functionality into reusable parts. Once a function is created, we can use (call) these functions in numerous places within a program. If the function\u2019s purpose is general enough and we write the function properly, we can reuse the function in other programs as well.<\/p>\n<p class=\"import-Normal\">Functions are defined using the <code>def<\/code> keyword. After this keyword comes an identifier name for the function, followed by a pair of parentheses which may (or may not) enclose some names of variables, and by the final colon that ends the line. Function names should be descriptive of the task carried out by the function (and often includes a single verb indicating the single task the function is performing). Next follows the block of statements that are part of this function. An example, <code>function1.py<\/code>, will show that this is actually very simple:<\/p>\n<div class=\"textbox\"><code><code style=\"color: #ff0000\"># program to define a function and call the function<\/code><\/code><br \/>\n<code><code style=\"color: #ff9900\">def<\/code> <code style=\"color: #0000ff\">say_hello<\/code>():<\/code><br \/>\n<code><code style=\"color: #ff0000\"># block belonging to the function<\/code><\/code><br \/>\n<code><code style=\"color: #333399\">print<\/code>(<code style=\"color: #339966\">'hello world'<\/code>)<\/code><br \/>\n<code><code style=\"color: #ff0000\"># End of function<\/code><\/code><br \/>\n<code>say_hello() <code style=\"color: #ff0000\"># call the function<\/code><\/code><br \/>\n<code>say_hello() <code style=\"color: #ff0000\"># call the function again<\/code><\/code><\/div>\n<p class=\"import-Normal\">This program,<code> function1.py<\/code>, produces the following output in the interactive Shell:<\/p>\n<div class=\"textbox\">\n<p class=\"import-Normal\"><code>&gt;&gt;&gt;<\/code><br \/>\n<code>RESTART:<\/code><br \/>\n<code>C:\/Users\/lh166266.UALBANY\/Dropbox\/OER Textbook\/TEXTBOOK OER\/Code\/function1.py<\/code><br \/>\n<code><code style=\"color: #000080\">hello world<\/code><\/code><br \/>\n<code><code style=\"color: #000080\">hello world<\/code><\/code><br \/>\n<code>&gt;&gt;&gt;<\/code><\/p>\n<\/div>\n<p class=\"import-Normal\">Let us examine how this works.<\/p>\n<table>\n<tbody>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>def say_hello():<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">We define a function called say_hello().This function takes no parameters and hence there are no variables declared in the parentheses. Parameters to functions are just input to the function so that we can pass in different values to it and get back corresponding results.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>print('hello world')<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">This is the single line of code of the defined function. It is the only thing this function does.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>say_hello()<\/code><\/p>\n<p class=\"import-Normal\"><code>say_hello()<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">This is the call to the function. Notice that we can call the same function twice which means we do not have to write the same code again.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Function Parameters<\/h3>\n<p class=\"import-Normal\">A function can take parameters, which are values you supply to the function so that the function can do something using those values. These parameters are just like variables except that the values of these variables are defined when we call the function and are already assigned values when the function runs.<\/p>\n<p class=\"import-Normal\">Parameters are specified within the pair of parentheses in the function definition, separated by commas. When we call the function, we supply the values in the same way. Note the terminology used &#8211; the names given in the function definition are called <strong>arguments<\/strong> whereas the values you supply in the function call are called <strong>parameters<\/strong>.<\/p>\n<p class=\"import-Normal\">Let us look at another program named <code>function2.py<\/code>.<\/p>\n<div class=\"textbox\">\n<p class=\"import-Normal\"><code><code style=\"color: #ff0000\"># program to define a function with parameters and call the function<\/code><\/code><br \/>\n<code><code style=\"color: #ff9900\">def<\/code> <code style=\"color: #000080\">print_max<\/code>(a, b):<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 if a &gt; b:<\/code><br \/>\n<code><code style=\"color: #333399;margin-left: 16pt\">\u00a0\u00a0\u00a0 print<\/code>(a, <code style=\"color: #008000\">'is maximum'<\/code>)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 elif a == b:<\/code><br \/>\n<code><code style=\"color: #333399;margin-left: 16pt\">\u00a0\u00a0\u00a0 print<\/code>(a, <code style=\"color: #008000\">'is equal to',<\/code> b)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 else:<\/code><br \/>\n<code><code style=\"color: #333399;margin-left: 16pt\">\u00a0\u00a0\u00a0 print<\/code>(b, <code style=\"color: #008000\">'is maximum'<\/code>)<\/code><\/p>\n<p><code><code style=\"color: #ff0000\"># directly pass literal values<\/code><\/code><br \/>\n<code>print_max(3, 4)<\/code><br \/>\n<code><code style=\"color: #ff0000\">#define 2 variables<\/code><\/code><br \/>\n<code>num1 = 5<\/code><br \/>\n<code>num2 = 7<\/code><\/p>\n<p><code><code style=\"color: #ff0000\"># pass variables as arguments<\/code><\/code><br \/>\n<code>print_max(num1, num2)<\/code><\/p>\n<\/div>\n<p class=\"import-Normal\">This program, <code>function2.py<\/code>, produces the following output in the interactive Shell:<\/p>\n<div class=\"textbox\"><code>&gt;&gt;&gt;<\/code><br \/>\n<code>RESTART:<\/code><br \/>\n<code>C:\/Users\/lh166266.UALBANY\/Dropbox\/OER Textbook\/TEXTBOOK OER\/Code\/function2.py<\/code><br \/>\n<code><code style=\"color: #000080\">4 is maximum<\/code><\/code><br \/>\n<code><code style=\"color: #000080\">7 is maximum<\/code><\/code><br \/>\n<code>&gt;&gt;&gt;<\/code><\/div>\n<p class=\"import-Normal\">Let us examine how the program function2.py works.<\/p>\n<table>\n<tbody>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>def print_max(a, b):<\/code><\/p>\n<p class=\"import-Normal\"><code>if a &gt; b:<\/code><\/p>\n<p class=\"import-Normal\"><code>print(a, 'is maximum')<\/code><\/p>\n<p class=\"import-Normal\"><code>elif a == b:<\/code><\/p>\n<p class=\"import-Normal\"><code>print(a, 'is equal to', b)<\/code><\/p>\n<p class=\"import-Normal\"><code>else:<\/code><\/p>\n<p class=\"import-Normal\"><code>print(b, 'is maximum')<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">We define a function called <code>print_max()<\/code> that uses two arguments called <code>a<\/code> and <code>b<\/code> .<\/p>\n<p class=\"import-Normal\">We find out the greater number using a simple <code>if..else<\/code> statement and then print the bigger number.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>print_max(3, 4)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">The first time we call the function <code>print_max<\/code> , we directly supply the numbers as parameters.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>num1 = 5<\/code><\/p>\n<p class=\"import-Normal\"><code>num2 = 7<\/code><\/p>\n<p class=\"import-Normal\"><code>print_max(num1, num2)<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">In the second case, we call the function with variables as parameters.<\/p>\n<p class=\"import-Normal\">The statement <code>print_max(num1, num2)<\/code> causes the value of argument <code>num1<\/code> to be assigned to parameter<code> a<\/code> and the value of argument <code>num2<\/code> to be assigned to parameter <code>b<\/code> . The <code>print_max function<\/code> works the same way in both cases.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><a id=\"_Toc519230969\"><\/a>The return Statement<\/h3>\n<p class=\"import-Normal\">The return statement is used to return from a function i.e. break out of the function. We can optionally return a value from the function as well.<\/p>\n<p class=\"import-Normal\">Let us look at another program named <code>function3.py<\/code> that uses the return statement.<\/p>\n<div class=\"textbox\">\n<p class=\"import-Normal\"><code style=\"color: #ff0000\"># program to define a function with parameters and a return statement<\/code><br \/>\n<code style=\"color: #ff9900\">def<\/code> <code style=\"color: #0000ff\">maximum<\/code>(x, y):<br \/>\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0 if<\/code> x &gt; y:<br \/>\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/code> x<br \/>\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0 elif<\/code> x == y:<br \/>\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/code> <code style=\"color: #339966\">'The numbers are equal'<\/code><br \/>\n<code style=\"color: #ff9900\">\u00a0\u00a0 else<\/code>:<br \/>\n<code style=\"color: #ff9900\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/code> y<\/p>\n<p><code style=\"color: #ff0000\"># test case 1: x &lt; y<\/code><br \/>\n<code style=\"color: #333399\">print<\/code><code>(maximum(2, 3))<\/code><\/p>\n<p><code style=\"color: #ff0000\"># test case 2: x = y<\/code><br \/>\n<code style=\"color: #333399\">print<\/code><code>(maximum(2, 2))<\/code><\/p>\n<p><code style=\"color: #ff0000\"># test case 3: x &gt; y<\/code><br \/>\n<code style=\"color: #333399\">print<\/code><code>(maximum(2, 1)<\/code><\/p>\n<\/div>\n<p class=\"import-Normal\">This program,<code> function3.py<\/code>, produces the following output in the interactive Shell:<\/p>\n<div class=\"textbox\">\n<p class=\"import-Normal\"><code>&gt;&gt;&gt;<\/code><br \/>\n<code>RESTART:<\/code><br \/>\n<code>C:\/Users\/lh166266.UALBANY\/Dropbox\/OER Textbook\/TEXTBOOK OER\/Code\/function3.py<\/code><br \/>\n<code><code style=\"color: #000080\">3<\/code><\/code><br \/>\n<code><code style=\"color: #000080\">The numbers are equal<\/code><\/code><br \/>\n<code><code style=\"color: #000080\">2<\/code><br \/>\n<code>&gt;&gt;&gt;<\/code><\/code><\/p>\n<\/div>\n<p class=\"import-Normal\">Let us examine how the program<code> function3.py<\/code> works.<\/p>\n<table>\n<tbody>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>def maximum(x, y):<\/code><\/p>\n<p class=\"import-Normal\">\u00a0 \u00a0<code> if x &gt; y:<\/code><\/p>\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 <code>return x<\/code><\/p>\n<p class=\"import-Normal\">\u00a0 \u00a0\u00a0<code>elif x == y:<\/code><\/p>\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 <code>return 'The numbers are equal'<\/code><\/p>\n<p class=\"import-Normal\">\u00a0 \u00a0 <code>else:<\/code><\/p>\n<p class=\"import-Normal\">\u00a0 \u00a0 \u00a0 \u00a0 <code>return y<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">We define a function called <code>maximum()<\/code> that uses two arguments called <code>x<\/code> and <code>y<\/code> .<\/p>\n<p class=\"import-Normal\">It uses a simple<code> if..else<\/code> statement to find the greater value and then returns that value.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code># test case 1: x &lt; y<\/code><\/p>\n<p class=\"import-Normal\"><code>print(maximum(2, 3))<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">The first time we call the function <code>maximum<\/code>, we are testing for <code>x<\/code> less than y.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code># test case 2: x = y<\/code><\/p>\n<p class=\"import-Normal\"><code>print(maximum(2, 2))<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">The second time we call the function <code>maximum<\/code>, we are testing for <code>x<\/code> equal to y.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code># test case 3: x &gt; y<\/code><\/p>\n<p class=\"import-Normal\"><code>print(maximum(2, 1))<\/code><\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">The third time we call the function <code>maximum<\/code>, we are testing for <code>x<\/code> greater than y.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"import-Normal\">Note that a <code>return<\/code> statement without a value is equivalent to <code>return<\/code> <code>None<\/code>. <code>None<\/code> is a special type in Python that represents nothingness. For example, it is used to indicate that a variable has no value if it has a value of <code>None<\/code>.<\/p>\n<p class=\"import-Normal\">Every function implicitly contains a <code>return None<\/code> statement at the end unless you have written your own return statement.<\/p>\n<h3><a id=\"_Toc519230970\"><\/a>Practice<\/h3>\n<p class=\"import-Normal\">Let us examine the following program which calculates the distance between two points. We use variables <code>x1<\/code> and <code>y1<\/code> to represent the (x,y) position of the first point and variables <code>x2<\/code> and <code>y2<\/code> to represent the (x,y) position of the second point. The formula for finding the distance between two points requires the math library since we need to use the square root function.<\/p>\n<div class=\"textbox\">\n<p><code># Calculates the distance between two points<\/code><\/p>\n<p><code>import math<\/code><\/p>\n<p><code>print(\"This program calculates the distance between two points.\")print() #print a blank line<\/code><\/p>\n<p><code>x1 = float(input(\"Enter the x for the first point: \"))<\/code><br \/>\n<code>y1 = float(input(\"Enter the y for the first point: \"))<\/code><br \/>\n<code>print()<\/code><br \/>\n<code>x2 = float(input(\"Enter the x for the second point: \"))<\/code><br \/>\n<code>y2 = float(input(\"Enter the y for the second point: \"))<\/code><\/p>\n<p><code>distance = math.sqrt((x2-x1)**2 + (y2-y1)**2)<\/code><\/p>\n<p><code>print()<\/code><br \/>\n<code>print(\"The distance between the points is\", distance)<\/code><\/p>\n<\/div>\n<p class=\"import-Normal\">Now, let us examine the same program rewritten to include a function to determine the distance between any two points (x1,y1) and (x2, y2).<\/p>\n<div class=\"textbox\">\n<p class=\"import-Normal\"><code># Calculates the distance between two points using a function<\/code><\/p>\n<p><code>import math<\/code><\/p>\n<p><code>#define the function<\/code><br \/>\n<code>def distance(point1x,point1y, point2x,point2y):<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 dist = math.sqrt((point2x-point1x)**2 + (point2y-point1y)**2)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 return dist<\/code><\/p>\n<p><code># main part of the program<\/code><br \/>\n<code>print(\"This program calculates the distance between two points.\")<\/code><br \/>\n<code>print()<\/code><\/p>\n<p><code>x1 = float(input(\"Enter the x for the first point: \"))<\/code><br \/>\n<code>y1 = float(input(\"Enter the y for the first point: \"))<\/code><br \/>\n<code>print()<\/code><br \/>\n<code>x2 = float(input(\"Enter the x for the second point: \"))<\/code><br \/>\n<code>y2 = float(input(\"Enter the y for the second point: \"))<\/code><\/p>\n<p><code>print(\"The distance between the points is\",<\/code><br \/>\n<code>distance(x1,y1,x2,y2))<\/code><\/p>\n<\/div>\n<p class=\"import-Normal\">Notice that we define the function before we write the \u201cmain\u201d part of the program. This is a standard practice when modularizing a program using functions.<\/p>\n<p class=\"import-Normal\">The results of executing this program with point <code>1<\/code> being <code>(3,4)<\/code> and point <code>2<\/code> <code>(12,13)<\/code> looks like the following in the Python shell:<\/p>\n<div class=\"aligncenter wp-caption\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-caption wp-image-132\" style=\"width: 421px\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232425\/image40-1.png\" alt=\"\" width=\"421\" height=\"265\" \/><\/div>\n<p class=\"import-Normal\">Recall the <code>triangle.py<\/code> program we worked with earlier in this unit. Let us expand on this program to include additional textual output. The input for our revised <code>triangle.py<\/code> program, named<code> triangleGUIfunctions.py<\/code><sup class=\"import-FootnoteReference\"><a class=\"footnote\" title=\"Based on Zelle, John M. Python programming: an introduction to computer science. 3rd ed., Franklin, Beedle &amp; Associates, Inc., 2017, pp. 189-190.\" id=\"return-footnote-72-8\" href=\"#footnote-72-8\" aria-label=\"Footnote 8\"><sup class=\"footnote\">[8]<\/sup><\/a><\/sup>, remains the same; the user clicks on three different points in the Graphics window. The output for our revised program still includes the graphic representing the triangle and, additionally, the perimeter of the graphic triangle as textual output. We use the <em>distance-between-two-points<\/em> function we just wrote!<\/p>\n<div class=\"textbox\">\n<p class=\"import-Normal\"><code>import math<\/code><br \/>\n<code>from graphics import *<\/code><\/p>\n<p><code>#define the distance function with two arguments<\/code><br \/>\n<code>def distance(p1, p2):<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 dist = math.sqrt((p2.getX() - p1.getX())**2 +(p2.getY()<\/code><code>- p1.getY())**2)<\/code><br \/>\n<code>\u00a0\u00a0\u00a0 return dist<\/code><\/p>\n<p><code>#main part of the program<\/code><br \/>\n<code>win = GraphWin(\"Draw a Triangle\",500,500)<\/code><br \/>\n<code>win.setCoords(0.0, 0.0, 10.0, 10.0)<\/code><br \/>\n<code>message1 = Text(Point(5, 1), \"Click on three points\")<\/code><br \/>\n<code>message1.draw(win)<\/code><\/p>\n<p><code># Get and draw three vertices of triangle<\/code><br \/>\n<code>p1 = win.getMouse()<\/code><br \/>\n<code>p1.draw(win)<\/code><br \/>\n<code>p2 = win.getMouse()<\/code><br \/>\n<code>p2.draw(win)<\/code><br \/>\n<code>p3 = win.getMouse()<\/code><br \/>\n<code>p3.draw(win)<\/code><\/p>\n<p><code># Use Polygon object to draw the triangle<\/code><br \/>\n<code>triangle = Polygon(p1,p2,p3)<\/code><br \/>\n<code>triangle.setFill(\"yellow\")<\/code><br \/>\n<code>triangle.setOutline(\"cyan\")<\/code><br \/>\n<code>triangle.draw(win)<\/code><\/p>\n<p><code># Calculate the perimeter of the triangle<\/code><br \/>\n<code># Call the distance function 3 times to find the length of each side of the triangle<\/code><br \/>\n<code>d1 = distance(p1,p2)<\/code><br \/>\n<code>d2 = distance(p2,p3)<\/code><br \/>\n<code>d3 = distance(p3,p1)<\/code><br \/>\n<code>msg = \"perimeter:\" + str(d1 d2 d3)<\/code><br \/>\n<code>message1.setText(msg)<\/code><\/p>\n<p><code># Wait for another click to exit<\/code><br \/>\n<code>win.getMouse()<\/code><\/p>\n<\/div>\n<p class=\"import-Normal\">Let us examine the code of <code>triangleGUIfunctions.py<\/code> more closely and see how it works:<\/p>\n<table>\n<tbody>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Python Statement<\/p>\n<\/td>\n<td class=\"TableGrid-C\" style=\"vertical-align: middle;padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\" style=\"text-align: center\">Explanation<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>def distance(p1, p2):<\/code><br \/>\n<code>dist = math.sqrt((p2.getX() -<\/code><br \/>\n<code>p1.getX()) **2 + (p2.getY() -<\/code><br \/>\n<code>p1.getY())**2)<\/code><br \/>\n<code>return dist<\/code><\/p>\n<p class=\"import-Normal\">\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">We use our distance function modified to use only two arguments called <code>p1<\/code> and <code>p2<\/code>, representing the two vertices of the triangle we want to find the length of.<\/p>\n<p class=\"import-Normal\">We use the Point methods <code>getX()<\/code> and <code>getY()<\/code> to extract the individual <code>x<\/code> and <code>y<\/code> values for each point.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code>win = GraphWin(\"Draw a Triangle\",500,500)<\/code><br \/>\n<code>win.setCoords(0.0, 0.0, 10.0, 10.0)<\/code><br \/>\n<code>message1 = Text(Point(5, 1), \"Click on three points\")<\/code><br \/>\n<code>message1.draw(win)<\/code><\/p>\n<p class=\"import-Normal\"><code># Get and draw three vertices of triangle<\/code><br \/>\n<code>p1 = win.getMouse()<\/code><br \/>\n<code>p1.draw(win)<\/code><br \/>\n<code>p2 = win.getMouse()<\/code><br \/>\n<code>p2.draw(win)<\/code><br \/>\n<code>p3 = win.getMouse()<\/code><br \/>\n<code>p3.draw(win)<\/code><\/p>\n<p class=\"import-Normal\"><code># Use Polygon object to draw the triangle<\/code><br \/>\n<code>triangle = Polygon(p1,p2,p3)<\/code><br \/>\n<code>triangle.setFill(\"yellow\")<\/code><br \/>\n<code>triangle.setOutline(\"cyan\")<\/code><br \/>\n<code>triangle.draw(win)<\/code><\/p>\n<p class=\"import-Normal\">\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">This is the same code we used in <code>triangle.py<\/code> to accept the three points and then draw the triangle.<\/p>\n<\/td>\n<\/tr>\n<tr class=\"TableGrid-R\">\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\"><code># Calculate the perimeter of the triangle<\/code><br \/>\n<code># Call the distance function 3 times to find the length of each side of the triangle<\/code><br \/>\n<code>d1 = distance(p1,p2)<\/code><br \/>\n<code>d2 = distance(p2,p3)<\/code><br \/>\n<code>d3 = distance(p3,p1)<\/code><br \/>\n<code>msg = \"perimeter:\" + str(d1 + d2 +\u00a0 d3)<\/code><br \/>\n<code>message1.setText(msg)<\/code><\/p>\n<p class=\"import-Normal\"><code># Wait for another click to exit<\/code><br \/>\n<code>win.getMouse()<\/code><\/p>\n<p class=\"import-Normal\">\n<\/td>\n<td class=\"TableGrid-C\" style=\"padding: 0pt 5.4pt 0pt 5.4pt;border: solid windowtext 0.5pt\">\n<p class=\"import-Normal\">To determine the length of each side of the triangle we call the distance function three times. Adding the lengths of each side of the triangle gives us the perimeter.<br style=\"clear: both\" \/>We print this value <code>(msg)<\/code> in a text a text box in the Graphics window.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"import-Normal\">The output from running <code>triangleGUIfunctions.py<\/code> is seen here in figure 40.<\/p>\n<div style=\"width: 248px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/3976\/2019\/01\/15232428\/image41.png\" alt=\"image\" width=\"238\" height=\"252\" \/><\/p>\n<p class=\"wp-caption-text\">Figure 40: triangleGUIfunctions.py Graphics window output<\/p>\n<\/div>\n<hr \/>\n<h1>Unit Summary<\/h1>\n<ul>\n<li>Apply the fundamental concepts of computer graphics in a computer program.<\/li>\n<li>Create objects in programs and use methods to perform graphical computations.<\/li>\n<li>Write simple interactive graphics programs using objects available in the graphics module.<\/li>\n<li>Read and write programs that define functions and use function calls and parameter passing in Python.<\/li>\n<\/ul>\n<p class=\"import-Normal\">We have seen many aspects of functions but note that we still haven&#8217;t covered all aspects of them. However, we have already covered much of what you will see and use in a beginning programming course.<\/p>\n<h1>Practice Problems<\/h1>\n<ol>\n<li>Make a program scene.py creating a scene with the graphics methods. You are likely to need to adjust the positions of objects by trial and error until you get the positions you want. Make sure you have graphics.py in the same directory as your program.<\/li>\n<li>Elaborate the scene program above so it becomes changeScene.py, and changes one or more times when you click the mouse (and use win.getMouse()). You may use the position of the mouse click to affect the result, or it may just indicate you are ready to go on to the next view.<\/li>\n<li>Is the following a legal Python program?<br \/>\n<code>def proc(x):<\/code><br \/>\n<code>return x + 2<\/code><br \/>\n<code>def proc(n):<\/code><br \/>\n<code>return 2*n + 1<\/code><br \/>\n<code>def main():<\/code><br \/>\n<code>x = proc(5)<\/code><br \/>\n<code>main()<\/code><\/li>\n<li>Is the following a legal Python program?<br \/>\n<code>def proc(x):<\/code><br \/>\n<code>return x + 2<\/code><br \/>\n<code>def main():<\/code><br \/>\n<code>x = proc(5)<\/code><br \/>\n<code>y = proc(4)<\/code><br \/>\n<code>main()<\/code><\/li>\n<li>Is the following a legal Python program?<br \/>\n<code>def proc(x):<\/code><br \/>\n<code>return 2*x<\/code><br \/>\n<code>def main():<\/code><br \/>\n<code>print(proc(5, 4))<\/code><br \/>\n<code>main()<\/code><\/li>\n<li>The programmer was expecting the following program to print 200. What does it print instead? Why does it print what it does?<br \/>\n<code>def proc(x):<\/code><br \/>\n<code>x = 2*x*x<\/code><br \/>\n<code>def main():<\/code><br \/>\n<code>num = 10<\/code><br \/>\n<code>proc(num)<\/code><\/li>\n<li>Complete the following distance function that computes the distance between two geometric points (x1;y1) and (x2;y2):<br \/>\n<code>def distance(x1, y1, x2, y2)<\/code>:<br \/>\n&#8230;Test it with several points to convince yourself that is correct.<\/li>\n<li>A number, a, is a power of b if it is divisible by b and a\/b is a power of b. Write a function called <code>ispower<\/code> that takes parameters a and b and returns True if a is a power of b. Note: you will have to think about the base case.<\/li>\n<\/ol>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-72-1\">Written by: Harrington, Andrew N. \u201cHands-on Python Tutorial (Python 3.1 Version).\u201d Loyola University Chicago. https:\/\/anh.cs.luc.edu\/python\/hands-on\/3.1\/handsonHtml\/index.html# <a href=\"#return-footnote-72-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-72-2\">Based on: Zelle, John M. \"Graphics Module Reference.\" (2016). <a href=\"#return-footnote-72-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-72-3\">Based on: Zelle, John M. \"Graphics Module Reference.\" (2016). <a href=\"#return-footnote-72-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><li id=\"footnote-72-4\">Based on: Zelle, John M. \"Graphics Module Reference.\" (2016). <a href=\"#return-footnote-72-4\" class=\"return-footnote\" aria-label=\"Return to footnote 4\">&crarr;<\/a><\/li><li id=\"footnote-72-5\">Based on: Zelle, John M. \"Graphics Module Reference.\" (2016). <a href=\"#return-footnote-72-5\" class=\"return-footnote\" aria-label=\"Return to footnote 5\">&crarr;<\/a><\/li><li id=\"footnote-72-6\">Based on: Zelle, John M. \"Graphics Module Reference.\" (2016). <a href=\"#return-footnote-72-6\" class=\"return-footnote\" aria-label=\"Return to footnote 6\">&crarr;<\/a><\/li><li id=\"footnote-72-7\">Based on code from: Harrington, Andrew N. \u201cHands-on Python Tutorial (Python 3.1 Version).\u201d Loyola University Chicago. https:\/\/anh.cs.luc.edu\/python\/hands-on\/3.1\/handsonHtml\/index.html# <a href=\"#return-footnote-72-7\" class=\"return-footnote\" aria-label=\"Return to footnote 7\">&crarr;<\/a><\/li><li id=\"footnote-72-8\">Based on Zelle, John M. Python programming: an introduction to computer science. 3rd ed., Franklin, Beedle &amp; Associates, Inc., 2017, pp. 189-190. <a href=\"#return-footnote-72-8\" class=\"return-footnote\" aria-label=\"Return to footnote 8\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":23485,"menu_order":1,"template":"","meta":{"_candela_citation":"[]","CANDELA_OUTCOMES_GUID":"","pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[48],"contributor":[],"license":[],"class_list":["post-72","chapter","type-chapter","status-publish","hentry","chapter-type-numberless"],"part":3,"_links":{"self":[{"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/pressbooks\/v2\/chapters\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/wp\/v2\/users\/23485"}],"version-history":[{"count":1,"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/pressbooks\/v2\/chapters\/72\/revisions"}],"predecessor-version":[{"id":100,"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/pressbooks\/v2\/chapters\/72\/revisions\/100"}],"part":[{"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/pressbooks\/v2\/chapters\/72\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/pressbooks\/v2\/chapter-type?post=72"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/wp\/v2\/contributor?post=72"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-albany-programmingforproblemsolving-v2\/wp-json\/wp\/v2\/license?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}