xiaojuan cai computational thinking 1 lecture 5 objects and graphics xiaojuan cai (蔡小娟)...
Post on 20-Jan-2016
214 Views
Preview:
TRANSCRIPT
Xiaojuan Cai Computational Thinking 1
Lecture 5
Objects and Graphics
Xiaojuan Cai(蔡小娟)
cxj@sjtu.edu.cn
Fall, 2015
Xiaojuan Cai Computational Thinking 2
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 3
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai Computational Thinking 4
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 5
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 6
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 7
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 8
Everything is object• Each course might be an object containing data:
• Instructor
• Student roster
• …
• And operations:
• Add/delete a student
• …
Xiaojuan Cai Computational Thinking 9
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 10
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai Computational Thinking 11
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 12
Simple test
>>> import graphics
>>> win = graphics.GraphWin()
>>> win.close()
>>> from graphics import *
>>> win = GraphWin()
Xiaojuan Cai Computational Thinking 13
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 14
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 15
Line
• Create a new line: l =
Line(p1,p2)
• Operations include:
• l.getP1(), l.getP2()
• l.setArrow(string)
• l.getCenter()
Xiaojuan Cai Computational Thinking 16
Circle
• Create a new circle: c =
Circle(p1,r)
• Operations include:
• c.getCenter(), c.getRadius()
• c.getP1(), c.getP2()
Xiaojuan Cai Computational Thinking 17
Rectangle
• Create a new rectangle:
rec = Rectangle(p1,p2)
• Operations include:
• rec.getCenter(),rec.getP1(),
recc.getP2()
Xiaojuan Cai Computational Thinking 18
Oval
• Create a new oval: o =
Oval(p1,p2)
• Operations include:
• o.getCenter(), c.getP1(),
c.getP2()
Xiaojuan Cai Computational Thinking 19
Polygon
• Create a new polygon:
p = Polygon(p1,p2,…), or
p = Polygon(pointsList)
• Operations include:
• p.getPoints()
Xiaojuan Cai Computational Thinking 20
Text
• Create a new text:
t = Text(center,text)
• Operations include:
• t.settext(newtext),t.gettext()
, t.setcolor(c)
Xiaojuan Cai Computational Thinking 21
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 22
Objects: creation
• Create an object from a class:
<objname> =
<classname>(<param1>,<param2,…>)
• Send message to objects:
<objname>.<methodname>(<param1>,
<param2>,…)
Xiaojuan Cai Computational Thinking 23
Draw a circle
Xiaojuan Cai Computational Thinking 24
Make a copy•Wrong codeleftEye = Circle(Point(80,50),5)rightEye = leftEyerightEye.move(20,0)
•Correct codeleftEye = Circle(Point(80,50),5)rightEye = Circle(Point(100,50),5)
•Better codeleftEye = Circle(Point(80,50),5)rightEye = leftEye.clone()rightEye.move(20,0)
leftEye
rightEye
leftEye
rightEye
Xiaojuan Cai Computational Thinking 25
Review: variables
>>>x = 3>>>type(x)>>>x = 'hi'>>>type(x)>>>x = Point(3,3)>>>type(x)
x 3
ih
Point(3,3)
Xiaojuan Cai Computational Thinking 26
Review: alias
3y
>>>x = 3>>>y = x>>>x = 'hi'
x ih
>>>x = 3>>>y = x>>>x = x + 1
x
3y
4
>>>x = [1,2,3]>>>y = x>>>x[2] = 4
x
1y
4
2 3
Xiaojuan Cai Computational Thinking 27
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai Computational Thinking 28
Future valuePrint an introduction
Input principal and apr
Repeat 10 times:
principal = principal * (1 + apr)
Output the principal
Graphing future values
Xiaojuan Cai Computational Thinking 29
Design the graphic view
Xiaojuan Cai Computational Thinking 30
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 31
Roadmap
• Object-oriented approach
• Graphics programming
• Graphics objects
• graphics.py
• Example: future value
• Interactive graphics
Xiaojuan Cai Computational Thinking 32
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 33
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 34
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 35
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.
top related