Transcript Chapter03-Graphics - Computer Science Department

Python Programming:
An Introduction to
Computer Science
Chapter 3
Objects and Graphics
1
Object Oriented Programming



The ‘classic’ point of view of a programmer was
that the program instructions were the active
part, the data just sat there and was manipulated.
A new paradigm became popular in the 80’s: OOP
The idea is that programs should be considered as
interactions of objects. An object was a structure
that “knew things” (i.e. had data values) and “did
things” (i.e. had operations to do on the data)
(There’s quite a bit more to the paradigm than
that, but that will do for now.)
2
OOP (cont)



Modern computer programs are built using an
object-oriented approach.
Most applications you’re familiar with have
Graphical User Interfaces (GUI) that provide
windows, icons, buttons and menus. These
were provided as classes to the programmer
– they did NOT have to write everything from
scratch to make an interface.
This is why people like OOP – the details can
be ignored, the objects do things for you!
3
Graphics Library



A commonly used graphics library for Python is
named Tkinter. This is not a simple package to use!
The author of this book (Zelle) wrote a library “on top
of” Tkinter, to make it easier to use. It’s called
graphics.py
First check to see if you have it already
 C:\Python32\Lib\site-packages\graphics.py

If you don’t, go to Zelle’s site and get it

Graphics Module Reference:
4
Graphics Library


This chapter uses the graphics.py
library supplied with the supplemental
materials.
Two locations you can put the file


In Python’s Lib\site-packages directory
with other libraries
In the same folder as your graphics
program
Python Programming, 2/e
5
Objects in Graphics




The graphics library is set up as a collection of
object templates
Point, Circle, Rectangle, Line and so on
These templates are called “classes”. They are the
“pattern” for what a particular object should be.
Example: a Point class would have data about the
position of the point (x, y) and functions that
could do things with that information
6
Objects in Graphics


You call a function called a “constructor” to make
a new object from the class. Constructor
methods are almost always the same name as the
name of the class. (Objects are also called
“instances”.)
Once you have an object constructed, it has a
name. You can give the object commands by
calling the methods (functions) that it knows
about.
7
Objects in Graphics

Example:

p = Point(200, 300) # p is now an object from class Point

p.draw(win)

p.move(0, 5)

Note the syntax: “dot notation”. The statement or
expression starts with the object name, followed
by a dot, then the name of the method and its
arguments, if any.
8
Setup for using graphics
• You have to import the graphics library
• You can use either “import graphics” or
“from graphics import *” or “from graphics
import GraphWin, Point, Circle”
• If you use “import graphics” you then refer
to all the functions from the library as “win =
graphics.GraphWin()”
• If you use one of the other imports, you can
omit the “graphics.”
GraphWin Objects
• A GraphWin object represents a
window on the screen where graphical
images may be drawn. A program may
define any number of GraphWins.
Creating a Graphics Window to draw on
• Typically the first thing done
• win = GraphWin()
• This is a call to a constructor to make a GraphWin
object. It has no arguments but it still needs the
parentheses to make Python see it as a function call
• The object that is returned from the constructor is
stored in the variable win
Creating a Graphics Window to draw on
•
GraphWin(title, width, height): Constructs a
new graphics window for drawing on the screen.
The parameters are optional, the default title is
``Graphics Window'‘ and the default size is 200 x
200.
•
There are optional arguments: first argument is the
title of the window (in the title bar), the 2nd and 3rd
arguments are the width and height in pixels (a pixel
is the smallest location on the screen which can be
turned ‘on’ or ‘off’)
Coordinate system
• The graphic window uses a coordinate
system
• It uses two numbers, x and y, to refer to a
location on the window
• The origin of the system by default, is the
upper left corner of the graphics window.
Note that this makes the y coordinates
behave differently than you are used to in
algebra.
Coordinate system
• Y coordinates start at 0 at the TOP of
the window and increase as the
location moves DOWN the window.
• X coordinates behave normally, 0 at
the left and increases as you move
right on the window.
• Yes, there is a way to change this if
you want.
What methods you can use?
• Suppose right now you have created a
graphic window.
• win = GraphWin()
• What method can you use?
Coordinate system
setCoords(xll, yll, xur, yur): Sets the
coordinate system of the window. The
lower-left corner is (xll, yll) and the
upper-right corner is (xur, yur). All
subsequent drawing will be done with
respect to the altered coordinate
system
e.g. win.setCoords(0, 0, 20,20)
Ending a graphics program
• Please do these things! If you forget
them, you can eventually lock up your
IDE and sometimes even your
operating system!
• At the end of the graphics part of the
program, you want two lines
• win.getMouse()
• win.close()
Ending a graphics program
• This assumes you have a graphics
window called win.
• It waits for the user to click somewhere
in the window, then closes the window.
Ending a graphics program
getMouse():
• Pauses for the user to click a mouse in
the window and returns where the
mouse was clicked as a Point object.
close():
• Closes the on-screen window.
• Again: win.getMouse(), win.close()
Point Class
• Point(x,y) : Constructs a point having
the given coordinates.
• The two methods that can be used by
the instance of Point class
• getX()Returns the x coordinate of a
point.
• getY()Returns the y coordinate of a
point.
Line class
• What is needed to specify a line? The
easiest way is with 2 points
• line1 = Line(Point(100, 25), Point(17,
92))
• This creates an object called line1,
which is actually a line segment
drawn from one point to the other
point given
Line class
• When you are ready to display the line
on the graphics window, you use the
statement
• line.draw(win)
• This assumes that win is a GraphWin
which has already been set up
Circle class
• What information does the computer need to
draw a circle? A center point and a radius
(distance from center to edge of circle)
• my_eye = Circle(Point(100, 150), 25)
• This creates an object called my_eye which
is a circle. It has two arguments; first one is
a Point object, second one is a number (can
be integer or float)
Circle class
• This does NOT make the circle appear
on the graphics window, you have to
call the draw method
my_eye.draw(win)
• You can do other things with the Circle
object before you draw it, like setFill
(to change color), setWidth (to make
the line thicker), etc.
Rectangle class
• What is needed to specify a rectangle?
There are several ways, but the easiest
is to give two Points. One is
considered the upper left corner and
the other is the lower right corner.
Which one is which? Does not matter,
the library figures it out.
Rectangle class
• rect = Rectangle(Point(100, 300),
Point(300, 250))
• This will draw a rectangle that is 200
pixels wide and 50 pixels tall
•
(300-100) wide, (300-250) tall
• Just like the Circle class, this can be
colorized, drawn on the graphics
window, etc.
Polygon class
• A polygon is a generic shape. Its sides
can be any length at any angle. How
would you specify a shape like that?
By giving all the points where the sides
connect to each other.
Polygon class
• poly = Polygon(Point(100, 300),
Point(300, 25), Point(70, 92))
• This will draw a triangle. It draws a
line segment from the first point to the
second, from the second to the third
and so on, and then a line segment
from the last point to the first.
• Obviously the order of the points in
the arguments matters!
Colors
• The colors available in this library are
the ones available in the Tkinter
library. There is a list of the color
names with their colors here
http://wiki.tcl.tk/37701
• These can be used with setFill() to
color the inside of a shape
• And with setOutline() to color the line
which draws the shape