# CMU 15-110: Principles of Computing Graphics in Tkinter

Note: Tkinter only runs in standard Python (which you can install from here). Thus, these examples will not run in a web browser.

1. Getting Started
For help getting IDLE working, watch this . If you need more help, or if you want to install another editor such as pyzo (which we recommend but do not require) or sublime (which we do not recommend for 110 -- too complicated for now) or eclipse (please don't!), please go to OH where the course staff and faculty are more than happy to assist.

2. Create an Empty Canvas
from tkinter import * def draw(canvas, width, height): pass # replace with your drawing code! def runDrawing(width, height): root = Tk() canvas = Canvas(root, width=width, height=height) canvas.pack() draw(canvas, width, height) root.mainloop() print('bye!') runDrawing(400, 200)
Result:

3. Draw a Rectangle with create_rectangle(left, top, right, bottom)
# Note: in this and all future examples, we only show the draw function. # To run these examples, you need to include all the code from the # first example above, and *replace* the draw function as appropriate. # create_rectangle(left, top, right, bottom) draws a rectangle # starting at (left, top) up to but excluding (right, bottom) def draw(canvas, width, height): canvas.create_rectangle(0,0,150,150, fill='yellow')
Result:

4. Draw Multiple Rectangles
# The colors 'white', 'black', 'red', 'green', 'blue', # 'cyan', 'yellow', and 'magenta' will always be available. # Other names may work, depending on your local installation. def draw(canvas, width, height): canvas.create_rectangle( 0, 0, 150, 150, fill='yellow') canvas.create_rectangle(100, 50, 250, 100, fill='orange', width=5) canvas.create_rectangle( 50, 100, 150, 200, fill='green', outline='red', width=3) canvas.create_rectangle(125, 25, 175, 190, fill='magenta', width=0) canvas.create_rectangle( 50, 60, 300, 90, fill='', outline='blue')
Result:

5. Draw Centered Rectangles
def draw(canvas, width, height): # First, fill the entire canvas with a cyan (light blue) rectangle canvas.create_rectangle(0, 0, width, height, fill='cyan') # Approach #1: Add margin to top/left, subtract margin from bottom/right: margin = 20 canvas.create_rectangle(margin, margin, width-margin, height-margin, fill='darkGreen') # Approach #2: add/subtract from center (cx, cy) cx = width/2 cy = height/2 rectWidth = 100 rectHeight = 50 canvas.create_rectangle(cx - rectWidth/2, cy - rectHeight/2, cx + rectWidth/2, cy + rectHeight/2, fill='orange')
Result:

6. Draw Custom Colors
def rgbString(red, green, blue): return '#%02x%02x%02x' % (red, green, blue) def draw(canvas, width, height): pistachio = rgbString(147, 197, 114) maroon = rgbString(176, 48, 96) canvas.create_rectangle(0, 0, width/2, height/2, fill=pistachio) canvas.create_rectangle(width/2, height/2, width, height, fill=maroon)
Result:

7. Draw Ovals, Polygons, Lines, Arcs, and Text
def draw(canvas, width, height): canvas.create_oval(100, 50, 300, 150, fill='yellow') canvas.create_polygon(100,30,200,50,300,30,200,10, fill='green') canvas.create_line(100, 50, 300, 150, fill='red', width=5) canvas.create_text(200, 100, text='Amazing!', fill='magenta', font='Helvetica 26 bold underline') canvas.create_text(200, 100, text='Carpe Diem!', anchor=SW, fill='darkBlue', font='Times 28 bold italic') # Arcs are drawn inside oval bounds, from the start angle (in degrees) # and running counterclockwise for the extent angle (also in degrees). canvas.create_arc(10, 60, 90, 140, start=45, extent= 90, fill='yellow') canvas.create_arc(10, 60, 90, 140, start=45, extent=-90, fill='cyan') canvas.create_arc(10, 150, 200, 190, start= 0, extent=180, fill='orange')
Result: