xiaojuan cai computational thinking 1 lecture 5 objects and graphics xiaojuan cai （蔡小娟）...

Xiaojuan Cai Computational Thinking 1

Lecture 5

Objects and Graphics

Xiaojuan Cai（蔡小娟）

[email protected]

Fall, 2015

mailto:[email protected]


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.


Roadmap

• Object-oriented approach

• Graphics programming

• Graphics objects

• graphics.py

• Example: future value

• Interactive graphics


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.


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.


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, ….


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())


Everything is object• Each course might be an object containing data:

• Instructor

• Student roster

• …

• And operations:

• Add/delete a student

• …


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


Roadmap




• graphics.py




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

http://mcsp.wartburg.edu/zelle/python/

http://mcsp.wartburg.edu/zelle/python/


Simple test

>>> import graphics

>>> win = graphics.GraphWin()

>>> win.close()

>>> from graphics import *

>>> win = GraphWin()


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, …


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()


Line

• Create a new line: l =

Line(p1,p2)


• l.getP1(), l.getP2()

• l.setArrow(string)

• l.getCenter()


Circle

• Create a new circle: c =

Circle(p1,r)


• c.getCenter(), c.getRadius()

• c.getP1(), c.getP2()


Rectangle

• Create a new rectangle:

rec = Rectangle(p1,p2)


• rec.getCenter(),rec.getP1(),

recc.getP2()


Oval

• Create a new oval: o =

Oval(p1,p2)


• o.getCenter(), c.getP1(),

c.getP2()


Polygon

• Create a new polygon:

p = Polygon(p1,p2,…), or

p = Polygon(pointsList)


• p.getPoints()


Text

• Create a new text:

t = Text(center,text)


• t.settext(newtext),t.gettext()

, t.setcolor(c)


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)


Objects: creation

• Create an object from a class:

<objname> =

<classname>(<param1>,<param2,…>)

• Send message to objects:

<objname>.<methodname>(<param1>,

<param2>,…)


Draw a circle


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


Review: variables

>>>x = 3>>>type(x)>>>x = 'hi'>>>type(x)>>>x = Point(3,3)>>>type(x)

x 3

ih

Point(3,3)


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


Roadmap




• graphics.py




Future valuePrint an introduction

Input principal and apr

Repeat 10 times:

principal = principal * (1 + apr)

Output the principal

Graphing future values


Design the graphic view


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.


Roadmap




• graphics.py




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.


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())


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())


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 1 lecture 5 objects and graphics xiaojuan cai （蔡小娟）...

Documents