Lecture 5 Objects and Graphics Xiaojuan Cai cxjsjtu

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. Computational Thinking Xiaojuan Cai 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: • print. Home. Address • 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 print. Home. Address message (student. print. Home. Address()) 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. Graph. Win() >>> win. close() >>> from graphics import * >>> win = Graph. Win() 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. get. X(), p. get. Y(), • p. draw(win), p. undrawn • p. move(dx, dy), p. setfill(c), p. set. Outline(c) • p. clone() Xiaojuan Cai Computational Thinking 14

Line • Create a new line: l = Line(p 1, p 2) • Operations include: • l. get. P 1(), l. get. P 2() • l. set. Arrow(string) • l. get. Center() Xiaojuan Cai Computational Thinking 15

Circle • Create a new circle: c = Circle(p 1, r) • Operations include: • c. get. Center(), c. get. Radius() • c. get. P 1(), c. get. P 2() Xiaojuan Cai Computational Thinking 16

Rectangle • Create a new rectangle: rec = Rectangle(p 1, p 2) • Operations include: • rec. get. Center(), rec. get. P 1(), recc. get. P 2() Xiaojuan Cai Computational Thinking 17

Oval • Create a new oval: o = Oval(p 1, p 2) • Operations include: • o. get. Center(), c. get. P 1(), c. get. P 2() Xiaojuan Cai Computational Thinking 18

Polygon • Create a new polygon: p = Polygon(p 1, p 2, …), or p = Polygon(points. List) • Operations include: • p. get. Points() 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 = Graph. Win('Shapes') >>> center = Point(100, 100) >>> circ = Circle(center, 30) >>> circ. set. Fill('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>(<param 1>, <param 2, …> ) • Send message to objects: <objname>. <methodname>(<param 1>, <param 2>, …) Xiaojuan Cai Computational Thinking 22

Draw a circle Xiaojuan Cai Computational Thinking 23

Make a copy left. Eye • Wrong code right. Eye left. Eye = Circle(Point(80, 50), 5) right. Eye = left. Eye right. Eye. move(20, 0) left. Eye • Correct code right. Eye left. Eye = Circle(Point(80, 50), 5) right. Eye = Circle(Point(100, 50), 5) • Better code left. Eye = Circle(Point(80, 50), 5) right. Eye = left. Eye. clone() right. Eye. move(20, 0) Xiaojuan Cai Computational Thinking 24

Review: variables >>>x = 3 >>>type(x) >>>x = 'hi' >>>type(x) >>>x = Point(3, 3) >>>type(x) Xiaojuan Cai x 3 h i Point(3, 3 ) Computational Thinking 25

Review: alias >>>x = 3 >>>y = x >>>x = 'hi' x h i 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

set. Coords(xll, yll, xur, yur) • The lower-left corner (xll, yll), the upperright corner (xur, yur). • All the subsequent drawing will be done w. r. t. the altered coords except for plot. Pixel • 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 • Graph. Win class has get. Mouse 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 = Graph. Win("Click Me!") p = win. get. Mouse() print "You clicked (%d, %d)" % (p. get. X(), p. get. Y()) Xiaojuan Cai Computational Thinking 33

Handling Textual Input • There’s also an Entry object that can get keyboard input. • It understands set. Text and get. Text, with one difference that the input can be edited. input = Entry(Point(2, 3), 5) input. set. Text("0. 0") celsius = eval(input. get. Text()) 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: Graph. Win, Point, Line, Circle, Oval, Rectangle, Polygon, Text, Entry, … • Alias can cause unexpected results. Use clone instead. Xiaojuan Cai Computational Thinking 35