1 of 43

CS 110 �Graphics

Benjamin Dicken

2 of 43

Announcements

  • Reminder to follow the style guidelines!
  • Reminder: The pattern: Read → Prep Problem → Video → Repeat

3 of 43

Graphics in Python

  • GUI: Graphical User Interface
  • TKinter is a module for creating GUIs and graphics that is probably already installed on your system
  • For this class, you don’t have to use TKinter directly
    • Instead, use graphics.py which uses TKinter

4 of 43

Homework: graphics.py

  • Download graphics.py
  • Place graphics.py in the same directory as the program you want to write
    • For some: the mu_code directory
  • Write an import statement to allow you to use the code within:

​

from graphics import graphics

​

For today, whiteboard

​

5 of 43

from graphics import graphics��def main():� # What shall we put here?� pass��main()

​

6 of 43

Making graphics

  • When using graphics.py, you can create a canvas, and then draw shapes and text on the canvas.
  • What is a canvas?

7 of 43

Left/Right is the X axis

Up/Down is the Y axis

8 of 43

A particular position on the canvas is specified by by an X position and a Y position (coordinates)

9 of 43

This particular program canvas is 600 pixels wide and 400 pixels tall

10 of 43

X=0, Y=0

X=300, Y=0

X=0, Y=200

11 of 43

X=???, Y=???

X=???, Y=???

X=???, Y=???

Activity

12 of 43

X=100, Y=100

X=???, Y=???

X=???, Y=???

13 of 43

X=100, Y=100

X=320, Y=200

​

X=???, Y=???

14 of 43

X=100, Y=100

X=320, Y=200

​

X=500, Y=370

15 of 43

Creating a canvas

Use the code below:

​

gui = graphics(width, height, 'title')

​

The gui variable is of type graphics.graphics (we can just refer to it as a graphics type). This is a graphics object.

​

We can call methods (functions) using this object.

16 of 43

Draw the canvas

from graphics import graphics��def main():� gui = graphics(700, 300, 'Three Squares')��main()

​

Activity

17 of 43

The canvas . . .

from graphics import graphics��def main():� gui = graphics(700, 300, 'Three Squares')��main()

​

18 of 43

Draw a rectangle

gui.rectangle(x, y, w, h, fill)

19 of 43

What will this display?

  • Label the colors with text

​

from graphics import graphics��def main():� gui = graphics(700, 300, 'Three Squares')� gui.rectangle( 25, 50, 200, 200, 'black')� gui.rectangle(250, 50, 200, 200, 'purple')� gui.rectangle(475, 50, 200, 200, 'orange')��main()

​

​

​

Recall: gui.rectangle(x, y, w, h, fill)

Activity

20 of 43

What will this display?

  • Label the colors with text

​

from graphics import graphics��def main():� gui = graphics(700, 300, 'Three Squares')� gui.rectangle( 25, 50, 200, 200, 'black')� gui.rectangle(250, 50, 200, 200, 'purple')� gui.rectangle(475, 50, 200, 200, 'orange')��main()

​

​

​

​

21 of 43

What will this display?

  • Label the colors with text

​

from graphics import graphics

​

def main():

gui = graphics(700, 300, 'Three Squares')

gui.rectangle( 25, 25, 500, 100, 'green')

gui.rectangle(150, 0, 50, 300, 'red')

gui.rectangle(500, 0, 200, 300, 'blue')

gui.rectangle(300, 100, 50, 50, 'orange')

​

main()

Recall: gui.rectangle(x, y, w, h, fill)

Activity

22 of 43

What will this display?

  • Label the colors with text

​

from graphics import graphics

​

def main():

gui = graphics(700, 300, 'Three Squares')

gui.rectangle( 25, 25, 500, 100, 'green')

gui.rectangle(150, 0, 50, 300, 'red')

gui.rectangle(500, 0, 200, 300, 'blue')

gui.rectangle(300, 100, 50, 50, 'orange')

​

main()

23 of 43

What will this display?

  • Label the colors with text

​

def main():� gui = graphics(700, 300, 'Lines')� i = 10� while i < 700:� gui.rectangle(i, 50, 20, 200, 'blue')� i += 70��main()

​

​

Recall: gui.rectangle(x, y, w, h, fill)

Activity

24 of 43

What will this display?

  • Label the colors with text

​

def main():� gui = graphics(700, 300, 'Lines')� i = 10� while i < 700:� gui.rectangle(i, 50, 20, 200, 'blue')� i += 70��main()

​

25 of 43

What else can be displayed?

gui.ellipse(x, y, w, h, fill)

26 of 43

What else can be displayed?

gui.line(x1, y1, x2, y2, fill, width)

27 of 43

What else can be displayed?

gui.triangle(x1, y1, x2, y2, x3, y3, fill)

28 of 43

What else can be displayed?

gui.rectangle(x, y, w, h, fill)

​

gui.ellipse(x, y, w, h, fill)

​

gui.line(x1, y1, x2, y2, fill, width)

​

gui.triangle(x1, y1, x2, y2, x3, y3, fill)

29 of 43

What will this display?

  • Label the colors with text

�gui = graphics(500, 500, 'Lines')�i = 100�while i < 450:� if i % 100 == 0:� gui.ellipse(i, i, 75, 75, 'blue')� else:� gui.line(i, 0, i, 500, 'green', 10)� i += 50

​

​

​

​

Recall:

gui.ellipse(x, y, w, h, fill)

gui.line(x1, y1, x2, y2, fill, width)

​

Activity

30 of 43

What will this display?

  • Label the colors with text

�gui = graphics(500, 500, 'Lines')�i = 100�while i < 450:� if i % 100 == 0:� gui.ellipse(i, i, 75, 75, 'blue')� else:� gui.line(i, 0, i, 500, 'green', 10)� i += 50

​

​

​

​

31 of 43

http://www.science.smith.edu/dftwiki/index.php/Color_Charts_for_TKinter

32 of 43

33 of 43

Make your program display a canvas like the one shown

Activity

34 of 43

Make your program display a canvas like the one shown

def main():� gui = graphics(700, 300, 'Graphics')� # What goes here?

​

Activity

35 of 43

Make your program display a canvas like the one shown

def main():

gui = graphics(700, 300, 'Graphics')

i = 0

while i < 700:

offset = i * 50

if i % 2 == 0:

gui.line(offset, 50, offset, 250, 'blue', 25)

else:

gui.line(offset, 50, offset, 250, 'red', 25)

i += 1

​

​

36 of 43

What should change to update the canvas?

def main():

gui = graphics(700, 300, 'Graphics')

i = 0

while i < 700:

offset = i * 50

if i % 2 == 0:

gui.line(offset, 50, offset, 250, 'blue', 25)

else:

gui.line(offset, 50, offset, 250, 'red', 25)

i += 1

​

​

​

Activity

37 of 43

def main():

gui = graphics(700, 300, 'Graphics')

i = -2

while i < 700:

offset = i * 50

if i % 2 == 0:

gui.line(offset, 50, offset+100, 250, 'blue', 25)

else:

gui.line(offset, 50, offset+100, 250, 'red', 25)

i += 1

​

​

​

​

38 of 43

A Face

from graphics import graphics��def main():� gui = graphics(500, 500, 'Graphics')� gui.ellipse(250, 250, 400, 400, 'dodger blue')� gui.ellipse(150, 200, 50, 50, 'green')� gui.ellipse(350, 200, 50, 50, 'green')� gui.rectangle(150, 325, 200, 50, 'pale green')�

�main()

39 of 43

Give the face a nose

from graphics import graphics

​

def main():� gui = graphics(500, 500, 'Graphics')� gui.ellipse(250, 250, 400, 400, 'dodger blue')� gui.ellipse(150, 200, 50, 50, 'green')� gui.ellipse(350, 200, 50, 50, 'green')� gui.rectangle(150, 325, 200, 50, 'pale green')� # What would go here?

​

main()

​

Activity

40 of 43

Draw This

​

​

def main():� gui = graphics(500, 500, 'Graphics')� gui.ellipse(250, 250, 400, 400, 'dodger blue')� gui.ellipse(150, 200, 50, 50, 'green')� gui.ellipse(350, 200, 50, 50, 'green')� gui.rectangle(150, 325, 200, 50, 'pale green')

gui.triangle(250, 175, 200, 300, 300, 300, 'wheat3')

41 of 43

Draw This

Activity

42 of 43

Draw This

def main():� gui = graphics(500, 500, 'Face')� gui.ellipse(250, 250, 400, 400, 'dodger blue')� gui.ellipse(150, 200, 50, 50, 'green')� gui.ellipse(350, 200, 50, 50, 'green')� gui.rectangle(150, 325, 200, 50, 'pale green')

gui.triangle(250, 175, 200, 300, 300, 300, 'wheat3')� # What would go here?

​

Activity

43 of 43

Draw This

def main():� gui = graphics(500, 500, 'Face')� gui.ellipse(250, 250, 400, 400, 'dodger blue')� gui.ellipse(150, 200, 50, 50, 'green')� gui.ellipse(350, 200, 50, 50, 'green')� gui.rectangle(150, 325, 200, 50, 'pale green')

gui.triangle(250, 175, 200, 300, 300, 300, 'wheat3')� i = 100� while i < 400:� gui.line(i, 25, i, 125, 'orange')� i += 10

​