260 likes | 369 Views
CS177: Programming in Multimedia Objects. Recitation Topic: Graphics Library. Objectives. To be familiar with the various graphic objects available in the graphics library. To understand the fundamental concepts of computer graphics, especially the role of coordinate systems
E N D
CS177:Programming in Multimedia Objects Recitation Topic: Graphics Library Python Programming, 2/e
Objectives • To be familiar with the various graphic objects available in the graphics library. • To understand the fundamental concepts of computer graphics, especially the role of coordinate systems • To be able to write simple graphics programs using the graphics library. Python Programming, 2/e
Simple Graphics Programming • This chapter uses the graphics.py library supplied with the supplemental materials. • Two location choices for graphics.py • In Python’s Lib directory with other libraries • In the same folder as your graphics program Python Programming, 2/e
Simple Graphics Programming • Since this is a library, we need to import the graphics commands>>> import graphics • A graphics window is a place on the screen where the graphics will appear.>>> win = graphics.GraphWin() • This command creates a new window titled “Graphics Window.” Python Programming, 2/e
Simple Graphics Programming • Windows can be closed/destroyed by issuing the command>>> win.close() Python Programming, 2/e
Simple Graphics Programming • It’s tedious to use the graphics. notation to access the graphics library routines. • from graphics import *The “from” statement allows you to load specific functions from a library module. “*” will load all the functions, or you can list specific ones. Python Programming, 2/e
Simple Graphics Programming • Doing the import this way eliminates the need to preface graphics commands with graphics.>>> from graphics import *>>> win = GraphWin() Python Programming, 2/e
Simple Graphics Programming • A graphics window is a collection of points called pixels (picture elements). • The default GraphWin is 200 pixels tall by 200 pixels wide (40,000 pixels total). • One way to get pictures into the window is one pixel at a time, which would be tedious. The graphics routine has a number of predefined routines to draw geometric shapes. Python Programming, 2/e
Point • The simplest object is the Point. Like points in geometry, point locations are represented with a coordinate system (x, y), where x is the horizontal location of the point and y is the vertical location. • The origin (0,0) in a graphics window is the upper left corner. • X values increase from right to left, y values from top to bottom. • Lower right corner is (199, 199) Python Programming, 2/e
Point Example >>> p = Point(50, 60) >>> p.getX() 50 >>> p.getY() 60 >>> win = GraphWin() >>> p.draw(win) >>> p2 = Point(140, 100) >>> p2.draw(win) Python Programming, 2/e
Circles • Given a 2-Dimensional plane, what two things do you need to draw a circle? Python Programming, 2/e
Circles • Like circles in geometry, circles in graphics library are represented by the center of the circle which is a Point and the radius of the circle Python Programming, 2/e
Circle Example >>> center = Point(100, 100) >>> win = GraphWin() >>> cir = Circle(center, 40) >>> cir.draw(win) Python Programming, 2/e
Rectangle • Rectangles are the graphics object in graphics module which take the two points as parameters • These two points are the two ends of the diagonals of the rectangle Python Programming, 2/e
Rectangle Example >>> p1 = Point(100, 100) >>> p2 = Point(150,150) >>> win = GraphWin() >>> rect = Rectangle(p1,p2) >>> rect.draw(win) Python Programming, 2/e
How can you draw a square? • We have a problem here. There is no method in graphics library to draw a square. Can you suggest a way? Python Programming, 2/e
Lines • We can interpret lines as a series of points connecting the origin point to the destination point in one direction in a single dimension. • Lines in graphics library are represented in the same way and Line() takes two points as parameters and draws a line between those two points. Python Programming, 2/e
Line Example >>> p1 = Point(100, 100) >>> p2 = Point(150,150) >>> win = GraphWin() >>> line = Line(p1,p2) >>> line.draw(win) Python Programming, 2/e
Ovals • Ovals in graphics library are drawn inside a rectangle specified by two points in the window. • Oval takes two points as its parameter and constructs an oval in the bounding box determined by those two points. Python Programming, 2/e
Oval Example >>> p1 = Point(50, 100) >>> p2 = Point(150,150) >>> win = GraphWin() >>> oval = Oval(p1,p2) >>> oval.draw(win) Python Programming, 2/e
Polygons • Polygons are the figures that has a closed path consisting of lines joining the given set of points • Polygon() takes variable number of points as arguments and creates a polygon joining those set of points • Eg. Polygon(point1, point2, point3, …) Python Programming, 2/e
Polygon Example >>> p1 = Point(50, 100) >>> p2 = Point(100,150) >>> p3 = Point(75, 50) >>> win = GraphWin() >>> polygon = Polygon(p1,p2) >>> polygon.draw(win) Python Programming, 2/e
Generic methods supported by every Graphics object • setFill(color) : Fills the interior of object with specified color • setOutline(color): Sets the outline of object to the given colot • setWidth(pixels): Sets the width of the outline to specified pixels. • draw(graphWin): Draws the object to the given window • undraw(): Undraws the graphics object from a graphics window • move(dx,dy): Moves the graphics object dx units in x direction and dy units in y direction • clone(): returns the duplicate of that graphics object. The clones are always in undrawn state. You need to call draw() on those objects to draw them on window. Python Programming, 2/e
Getting it all together from graphics import * def main(): win = GraphWin() drawFace(win) drawEyes(win) drawNose(win) drawLips(win) drawTeeth(win) def drawFace(win): centerOfFace = Point(100, 100) face = Circle(centerOfFace, 50) centerOfLeftEye = Point(80,75) face.draw(win) def drawEyes(win): centerOfLeftEye = Point(80,75) leftEye = Circle(centerOfLeftEye, 10) centerOfRightEye = Point(120,75) rightEye = Circle(centerOfRightEye, 10) leftEye.draw(win) rightEye.draw(win) Python Programming, 2/e
Getting it all together (Cont.) defdrawNose(win): noseEdge1 = Point(100, 90) noseEdge2 = Point(90, 110) noseEdge3 = Point(110,110) nose = Polygon(noseEdge1, noseEdge2, noseEdge3) nose.draw(win) defdrawLips(win): lipsEdge1 = Point(80,125) lipsEdge2 = Point(120, 125) lips = Line(lipsEdge1, lipsEdge2) lips.draw(win) defdrawTeeth(win): toothPoint1 = Point(90,125) toothPoint2 = Point(95, 130) toothPoint3 = Point(110, 125) toothPoint4 = Point(115, 130) tooth1 = Rectangle(toothPoint1, toothPoint2) tooth2 = Rectangle (toothPoint3, toothPoint4) tooth1.draw(win) tooth2.draw(win) main() Python Programming, 2/e