1. Computer Science 112 Fundamentals of Programming II Graphics Programming

2. Bitmapped Display Think of the monitor screen as a rectangular grid that is divided up into tiny square pieces Each square piece is called a picture element or pixel Each pixel can be painted –black or white (monochrome) –Several shades of gray (grayscale) –Several (perhaps millions of) colors The values of the colors are represented as bits in a structure called a bitmap

3. Representing Colors: Monochrome Black and white: 0 = black, 1 = white, so just a single bit 8, 16, 128, or 256 shades of gray: 3, 4, 7, or 8 bits (why?) In general, N bits allows 2 N distinct color values

4. Representing Colors: RGB The RGB system composes each color from red, green, and blue components Each component is an integer in the range 0..255 0 means the total absence of a color component 255 means the highest saturation of a color component 256 * 256 * 256 = 16,777,216 distinct color values

5. Representing Colors: RGB Think of each color value as a triple of integers of the form (,, ) RGB TripleColor (0, 0, 0)Black (255, 0, 0)Red (0, 255, 0)Green (0, 0, 255)Blue (127, 127, 127)Medium Gray (255, 255, 255)White

6. Python Color Values Some common colors are “black”, “red”, etc. Or a string of the form “xRRGGBB”, where RR is the red value in hexadecimal, etc. Example: “xffffff” is white, “xff0000” is red, etc.

7. Screen Coordinates The origin (0, 0) is in the upper left corner of the screen, and y values increase towards the bottom border Each pixel has an (x, y) position in the grid

8. The Canvas Widget A canvas is a rectangular area in which one can draw images or shapes, and detect mouse events The method addCanvas –creates a new object of type EasyCanvas –adds it to the window’s grid at the given row and column –returns the canvas –optional arguments include background, width, and height

9. class CanvasDemo(EasyFrame): """Draws filled ovals on a canvas.""" def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Canvas Demo") self.canvas = self.addCanvas(row = 0, column = 0, width = 300, height = 150, background = "black") self.ovalButton = self.addButton(text = "Draw oval", row = 1, column = 0, command = self.drawOval)

10. class CanvasDemo(EasyFrame): """Draws filled ovals on a canvas."""... def drawOval(self): """Draws a filled oval at a random position.""" x = random.randint(0, 300) y = random.randint(0, 150) self.canvas.drawOval(x, y, x + 25, y + 25, fill = "red")

11. Drawing Shapes on a Canvas Each method returns a number that identifies the shape object in the canvas

12. Other Manipulations of Shapes Each method uses the number identifying a given shape on the canvas

13. class CanvasDemo(EasyFrame): """Draws filled ovals on a canvas.""" def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Canvas Demo") self.canvas = self.addCanvas(row = 0, column = 0, columnspan = 2, width = 300, height = 150, background = "black") self.clearButton = self.addButton(text = "Clear", row = 1, column = 1, command = self.clear)

14. class CanvasDemo(EasyFrame): """Draws filled ovals on a canvas.""" def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Canvas Demo") # Must now track all ovals drawn self.ovals = list() self.canvas = self.addCanvas(row = 0, column = 0, columnspan = 2, width = 300, height = 150, background = "black") self.clearButton = self.addButton(text = "Clear", row = 1, column = 1, command = self.clear)

15. class CanvasDemo(EasyFrame): """Draws filled ovals on a canvas.""" def drawOval(self): """Draws a filled oval at a random position.""" x = random.randint(0, 300) y = random.randint(0, 150) oval = self.canvas.drawOval(x, y, x + 25, y + 25, fill = "red") self.ovals.append(oval) def clear(self): """Erases the ovals from the canvas.""" for oval in self.ovals: self.canvas.delete(oval) self.ovals = list()

16. Choosing a New Color The function tkinter.colorchooser.askcolor() pops up a color chooser Returns a tuple of two elements, which are both None if Cancel was chosen The second element is the chosen color, otherwise

17. import tkinter.colorchooser class CanvasDemo(EasyFrame): """Draws filled ovals on a canvas.""" def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Canvas Demo") self.ovals = list() self.color = "red" self.colorButton = self.addButton(text = "Color", row = 1, column = 2, command = self.chooseColor)... def drawOval(self): """Draws a filled oval at a random position.""" x = random.randint(0, 300) y = random.randint(0, 150) oval = self.canvas.drawOval(x, y, x + 25, y + 25, fill = self.color) self.ovals.append(oval) def chooseColor(self): """Allows the user to change the color.""" colorTuple = tkinter.colorchooser.askcolor() if colorTuple[0]: self.color = colorTuple[1]

18. Defining a Special-Purpose Canvas You define a new canvas class, as a subclass of EasyCanvas, when –there is a lot going on in the canvas –you want to detect and respond to mouse events in the canvas The method addCanvas allows an optional canvas argument You create an instance of the special-purpose canvas first, then add it to the window with addCanvas

19. Mouse Events and Methods When a mouse event occurs in a canvas, Python runs one of these methods (which does nothing by default) You override the definition to do something The event parameter contains x and y fields that represent the current mouse coordinates in the canvas

20. from breezypythongui import EasyFrame, EasyCanvas class MouseDemo(EasyFrame): """Draws coordinates of mouse presses on a canvas.""" def __init__(self): """Sets up the window and widgets.""" EasyFrame.__init__(self, title = "Mouse Demo") shapeCanvas = ShapeCanvas(parent = self) self.addCanvas(canvas = shapeCanvas, row = 0, column = 0, width = 300, height = 150) A canvas subclass needs to know about its parent window

21. from breezypythongui import EasyFrame, EasyCanvas... class ShapeCanvas(EasyCanvas): """Displays the coordinates of the point where the mouse is pressed.""" def __init__(self, parent): """Background is gray.""" EasyCanvas.__init__(self, parent, background = "gray") def mousePressed(self, event): """Draws the coordinates of the mouse press.""" coordString = "(" + str(event.x) + "," + str(event.y) + ")" self.drawText(coordString, event.x, event.y) A canvas subclass needs to know about its parent window

22. Tictactoe

23. Prototype: Display Positions Classes: TicTacToeApp (main window) TTTSquare (9 canvases) Behavior: Displays a square position in response to a mouse press

24. from breezypythongui import EasyFrame from tttsquare1 import TTTSquare class TicTacToeApp(EasyFrame): """Displays a tictactoe board in the window.""" def __init__(self): """Sets up the window and the squares.""" EasyFrame.__init__(self, title = "TicTacToe") color = "black" number = 0 for row in range(3): for column in range(3): square = TTTSquare(parent = self, width = 50, height = 50, background = color, number = number) self.addCanvas(square, row = row, column = column) number += 1 if color == "black": # Alternate square colors color = "white" else: color = "black") The Main Window Class

25. from breezypythongui import EasyCanvas class TTTSquare(EasyCanvas): """Represents a tictactoe square.""" def __init__(self, parent, width, height, background, number): """Sets up the tictactoe square.""" EasyCanvas.__init__(self, parent, width = width, height = height, background = background) self.number = number self.width = width self.height = height def mousePressed(self, event): """Draws the square's number in its center.""" self.drawText(str(self.number), self.width // 2, self.height // 2, fill = "red") The Canvas Class

26. Completing the GUI Apps The GUI is responsible for showing the state of the data and providing controls for the user to manipulate The data model is responsible for representing and processing the application’s data (the logic of a calculator or a tictactoe game)

27. For Wednesday The Model/View/Controller Pattern Designing a Data Model