1. CPSC 217 T03 Week II Part #1: SimpleGraphics.py Hubert (Sathaporn) Hu

2. Apology about Last Week! Exercise #1 actually CANNOT be done in a single done. Sorry about that.  This is only applicable to students in T03.

3. News I have swapped my shift with another TA.  So if you are in T03, your Wednesday TA will be different one.  If you are in T04, I am your TA today. If you’re in T03, Exercise #1 has been marked! I do not know anything if you are in T04

4. Today’s Tutorial More Terminal tips SimpleGraphics.py  The coordinate system  Setting background color  Drawing line and shapes  Texting  Setting outline  Colouring stuffs

5. TIPS! 1.You don’t need to cd all the time to reach a desired file. If you already know the path of the file, just enter it as an argument. python3 Documents\prog.py – relative path python C:\prog.py – absolute path 2.If you want to reuse the previous command in terminal, press up arrow key. 3.Want to experiment something in Python? Simply call python3 without any file. You will be greeted with an interactive shell.  Unfortunately, the interactive shell doesn’t work with SimpleGraphics.py though…

6. SimpleGraphics.py This is the library that you will need to use to complete Exercise #2 and Assignment #1. To use the library, download it from the class website and put it in the same directory with your program. Then call: from SimpleGraphics import *

7. SimpleGraphics.py To draw something with SimpleGraphics, you need to know the coordinate. The library uses the coordinate system similar to 2D Cartesian plane. The exception is that unlike 2D Cartesian plane, the Y-axis is inverted. Please also beware that you only have 800 x 600 pixels to work with. (0,0) x y

8. SimpleGraphics.py So when you draw an object at coordinate of (100, 50), it means the object is 100 pixels right to the origin and is 50 pixels down from the origin. (0,0) 100 50

9. SimpleGraphics.py After you get used to the twisted and inverted world of SimpleGraphics.py, you now want to get started. White background is boring, we want to change it! Use these commands: background(str_color_name) background(red, green, blue)

10. SimpleGraphics.py To draw lines, use these commands: line(x1, y1, x2, y2) – Make a line. If you add more points, you can also make lines with angles.  line(x1, y1, x2, y2, x3, y3, …) If you want to draw an arc, please consult tutorial.pdf.

11. SimpleGraphics.py To draw other shapes, use other commands: rect(x, y, width, height) – Make a rectangle ellipse(x, y, width, height) – Make an ellipse/circle polygon(x1, y1, x2, y2, …) – Make a polygon There are other shapes in tutorial.pdf

12. SimpleGraphics.py To draw a text, set a font before setting the text. To set the font:  setFont(font_name, size, style) font_name: a string that represents the name of the font. For example, “Arial”. size: a string that contains the size number. For example, “18” style: a string that indicates how the text is rendered. Options include “bold”, “italic”, “bold italic.”  Note that the second and the third arguments are optional.

13. SimpleGraphics.py To set the text:  text(x, y, text) x: a number that represents x-coordinate y: a number that represents y-coordinate text: the text to be drawn itself

14. SimpleGraphics.py If you find the colours boring, then you can change it with these functions:  Changing the outline (or border) colour. setOutline(str_color_name) setOutline(red, green, blue)  Filling a shape with a colour. setFill(str_color_name) setFill(red, green, blue)

15. SimpleGraphics.py Colouring must be done the object is drawn. Also, when you call a colouring function, all the objects that are created after the function call will have the same colouring. # These objects will be purple! setOutline(“purple”) setFill(“purple”) line(0, 0, 100, 100) ellipse(60, 100, 40, 40) polygon(50, 50, 100, 100, 200, 200, 50, 50)

16. One Last Thing The remainder of the class is to be used for completing Assignment #1 and Exercise #2. However, before that, you should also think about the first part of Assignment #1. It asks you to receive the user’s input and then uses the input to set an object’s position. If you don’t know how to do this, please don’t hesitate to ask me.