Lecture 5
Objects and Graphics
Xiaojuan Cai（蔡小娟）
cxj@sjtu.edu.cn
Fall, 2015
Xiaojuan Cai
Computational Thinking
1
Objective
• To understand the concept of objects.
• To be familiar with the various objects available in
the graphics library.
• To understand the fundamental concepts of
computer graphics.
• To be able to write simple interactive graphics
programs using the graphics library.
Xiaojuan Cai
Computational Thinking
2
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai
Computational Thinking
3
OO methodology
• data type = data + operations.
• The traditional programming view:
• data is passive – it’s manipulated and
combined with active operations.
• The object-oriented approach:
• data is active – it carries out operations.
Xiaojuan Cai
Computational Thinking
4
Basic idea of OO
• Object-oriented: software systems are
interaction of objects.
• Objects know stuff (contain data) and they can
do stuff (have operations).
• Computation (interaction): sending message to
objects.
• Pure OO: everything is Object.
Xiaojuan Cai
Computational Thinking
5
Example: student
• The student object would contain data like:
• Name, ID number, Courses taken, Home Address,
GPA, …
• The student object would response to these
messages:
• printHomeAddress
• Print GPA, ….
Xiaojuan Cai
Computational Thinking
6
Example: student
• Print the home address of all the students.
• Traditional:
for every student
check the data,
find out the home address and print it
• OO:
for every student
send printHomeAddress message
(student.printHomeAddress())
Xiaojuan Cai
Computational Thinking
7
Everything is object
• Each course might be an object containing data:
• Instructor
• Student roster
•…
• And operations:
• Add/delete a student
•…
Xiaojuan Cai
Computational Thinking
8
Basic concepts of OO
• Class: the template of objects, defining
• the types of data an object can have
• and operations it can do.
• Object: the instance of some class
• Objects of the same class can have different data,
• E.g., Student A and B have different ID numbers.
• Message = operation = methods
Xiaojuan Cai
Computational Thinking
9
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai
Computational Thinking
10
Graphics programming
• Graphical User Interfaces (GUI) provide windows, icons,
buttons and menus.
• Graphics libraries:
• Python standard libray: Tkinter
• Zelle’s graphics.py (beginner-friendly)
• Put graphics.py in the lib folder, or in the same folder
with your graphics programs.
http://mcsp.wartburg.edu/zelle/python/,
put it in your site-package
Xiaojuan Cai
Computational Thinking
11
Simple test
>>> import graphics
>>> win = graphics.GraphWin()
>>> win.close()
>>> from graphics import *
>>> win = GraphWin()
Xiaojuan Cai
Computational Thinking
12
Graphics window
• A graphics window is a collection of
pixels.
• Default size: 200 pixels * 200 pixels.
• Predefined geometric shapes: point, line,
circle, oval, rectangle, polygon, text,
button, …
Xiaojuan Cai
Computational Thinking
13
Point
• Point = 1 pixel
• Create a new point: p = Point(x,y)
• Operations include:
• p.getX(), p.getY(),
• p.draw(win), p.undrawn
• p.move(dx,dy), p.setfill(c), p.setOutline(c)
• p.clone()
Xiaojuan Cai
Computational Thinking
14
Line
• Create a new line: l = Line(p1,p2)
• Operations include:
• l.getP1(), l.getP2()
• l.setArrow(string)
• l.getCenter()
Xiaojuan Cai
Computational Thinking
15
Circle
• Create a new circle: c = Circle(p1,r)
• Operations include:
• c.getCenter(), c.getRadius()
• c.getP1(), c.getP2()
Xiaojuan Cai
Computational Thinking
16
Rectangle
• Create a new rectangle:
rec = Rectangle(p1,p2)
• Operations include:
• rec.getCenter(),rec.getP1(),
recc.getP2()
Xiaojuan Cai
Computational Thinking
17
Oval
• Create a new oval: o = Oval(p1,p2)
• Operations include:
• o.getCenter(), c.getP1(),
c.getP2()
Xiaojuan Cai
Computational Thinking
18
Polygon
• Create a new polygon:
p = Polygon(p1,p2,…), or
p = Polygon(pointsList)
• Operations include:
• p.getPoints()
Xiaojuan Cai
Computational Thinking
19
Text
• Create a new text:
t = Text(center,text)
• Operations include:
• t.settext(newtext),t.gettext(),
t.setcolor(c)
Xiaojuan Cai
Computational Thinking
20
Sample codes
>>> win = GraphWin('Shapes')
>>> center = Point(100, 100)
>>> circ = Circle(center, 30)
>>> circ.setFill('red')
>>> circ.draw(win)
>>> label = Text(center, "Red Circle")
>>> label.draw(win)
>>> rect = Rectangle(Point(30, 30), Point(70, 70))
>>> rect.draw(win)
>>> line = Line(Point(20, 30), Point(180, 165))
>>> line.draw(win)
>>> oval = Oval(Point(20, 150), Point(180, 199))
>>> oval.draw(win)
Xiaojuan Cai
Computational Thinking
21
Objects: creation
• Create an object from a class:
<objname> =
<classname>(<param1>,<param2,…>)
• Send message to objects:
<objname>.<methodname>(<param1>
,<param2>,…)
Xiaojuan Cai
Computational Thinking
22
Draw a circle
Xiaojuan Cai
Computational Thinking
23
Make a copy
leftEye
• Wrong code
rightEye
leftEye = Circle(Point(80,50),5)
rightEye = leftEye
rightEye.move(20,0)
leftEye
• Correct code
rightEye
leftEye = Circle(Point(80,50),5)
rightEye = Circle(Point(100,50),5)
• Better code
leftEye = Circle(Point(80,50),5)
rightEye = leftEye.clone()
rightEye.move(20,0)
Xiaojuan Cai
Computational Thinking
24
Review: variables
>>>x = 3
x
>>>type(x)
>>>x = 'hi'
>>>type(x)
>>>x = Point(3,3)
>>>type(x)
Xiaojuan Cai
Computational Thinking
3
h i
Point(3,3)
25
Review: alias
>>>x = 3
>>>y = x
>>>x = 'hi'
x
hi
y
3
>>>x = 3
>>>y = x
>>>x = x + 1
x
y
4
3
>>>x = [1,2,3]
>>>y = x
>>>x[2] = 4
Xiaojuan Cai
x
y
Computational Thinking
4
1 2 3
26
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai
Computational Thinking
27
Future value
Print an introduction
Input principal and apr
Repeat 10 times:
principal = principal * (1 + apr)
Output the principal
Graphing future values
Xiaojuan Cai
Computational Thinking
28
Design the graphic view
Xiaojuan Cai
Computational Thinking
29
setCoords(xll,yll,xur,yur)
• The lower-left corner (xll,yll), the upper-
right corner (xur,yur).
• All the subsequent drawing will be done w.r.t.
the altered coords except for plotPixel
• Advantages:
• Easy to program
• Adjust automatically if you change the size of canvas.
Xiaojuan Cai
Computational Thinking
30
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai
Computational Thinking
31
GUI
• Users interact with applications by
• Clicking a button,
• choosing items from menus, and
• typing information into text boxes.
• Event-driven programming draws interface
elements and then waits for events.
Xiaojuan Cai
Computational Thinking
32
Getting Mouse Clicks
• GraphWin class has getMouse method, which once
invoked, will cause the program pauses and wait for
the mouse clicks.
• And it will return the point where the user clicked.
win = GraphWin("Click Me!")
p = win.getMouse()
print "You clicked (%d, %d)" %
(p.getX(), p.getY())
Xiaojuan Cai
Computational Thinking
33
Handling Textual Input
• There’s also an Entry object that can get
keyboard input.
• It understands setText and getText,
with one difference that the input can be
edited.
input = Entry(Point(2,3), 5)
input.setText("0.0")
celsius = eval(input.getText())
Xiaojuan Cai
Computational Thinking
34
Conclusion
• An object is a computational entity that
combines data and operations.
• Every object is an instance of some class.
• The graphics module provides a number of
classes: GraphWin, Point, Line,
Circle, Oval, Rectangle, Polygon,
Text, Entry, …
• Alias can cause unexpected results. Use
clone instead.
Xiaojuan Cai
Computational Thinking
35