graphics 1 - stanford universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019....
TRANSCRIPT
![Page 1: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/1.jpg)
Graphics 1.0CS106AP Lecture 17
![Page 2: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/2.jpg)
RoadmapProgramming Basics
The Console Images
Data structures
MidtermGraphics
Object-Oriented Programming
Everyday Python
Life after CS106AP!
Day 1!
![Page 3: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/3.jpg)
Images
The Console
Data structures
Everyday Python
Midterm
Programming Basics
Roadmap
Life after CS106AP!
Day 1!
Graphics
Object-Oriented Programming
Graphics 1.0
Event-driven programming
Graphics 2.0
![Page 4: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/4.jpg)
Images
The Console
Data structures
Everyday Python
Midterm
Programming Basics
Roadmap
Life after CS106AP!
Day 1!
Graphics
Object-Oriented Programming
Graphics 1.0
Event-driven programming
Graphics 2.0
![Page 5: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/5.jpg)
Today’s questions
How can we benefit from others’ code and allow others to use our code?
How can we create graphical programs?
![Page 6: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/6.jpg)
Today’s topics
1. Review
2. Modules
3. Graphics (the Tkinter module)
4. What’s next?
![Page 7: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/7.jpg)
Congrats on finishing the midterm!
![Page 8: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/8.jpg)
Congrats on finishing the midterm!
You’ve learned so much!
![Page 9: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/9.jpg)
You’ve learned so much!
● Karel● Control flow
○ Conditionals: if, if-else, if-elif-else statements
○ Loops: while, for-each, for-range
● Functions and decomposition● Variables and constants● Basic data types (integers,
floats, booleans)
● Strings● Console programs● Images● Parsing● File reading● Data structures
○ Lists○ Dictionaries○ Nested data structures
● Style best practices
![Page 10: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/10.jpg)
Review
![Page 11: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/11.jpg)
Accessing and manipulating nested data structures
1. What is the outermost data structure? → list/dictionary○ Access its element as normal
[1.5 Store the element in a variable (optional)]
2. What is the innermost data structure?○ Work with the element/element variable like you would with that
data structure type!
![Page 12: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/12.jpg)
Accessing and manipulating nested data structures
contact = phone_book[‘Kylie’]contact[‘phone’] = 6500123445# This is the same as # phone_book[‘Kylie’][‘phone’] = 6500123445
![Page 13: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/13.jpg)
A note on mutability/immutability
Mutable data structures are modified if you use a variable to modify the data structure object itself...but not if you reassign that variable to a new data structure object!
![Page 14: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/14.jpg)
A note on mutability/immutability
Mutable data structures are modified if you use a variable to modify the data structure object itself...but not if you reassign that variable to a new data structure object!
This means that if you pass a data structure into a function, modifying the data structure within the function
modifies the original data structure!
![Page 15: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/15.jpg)
Three final functions for parsing
● f.readlines() # files
● lst.reverse() # lists
● d.get() # dictionaries
![Page 16: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/16.jpg)
Data structures in real life
1. What questions do we want to answer with the data?
2. Based on what we want to do, what data structures should we use to store it?
![Page 17: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/17.jpg)
Assignment 4: BabyNames
![Page 18: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/18.jpg)
How can we benefit from others’ code and allow others
to use our code?
![Page 19: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/19.jpg)
How can we benefit from others’ code and allow others
to use our code?Modules!
![Page 20: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/20.jpg)
modules.py files containing working code for reuse
across programs; sometimes also called “libraries”
Definition
![Page 21: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/21.jpg)
modulesFiles should “have short, all-lowercase names. Underscores can be used in the module name if it improves readability.”
Style note
Description from PEP 8
![Page 22: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/22.jpg)
modulesFiles should “have short, all-lowercase names. Underscores can be used in the module name if it improves readability.”
Style note
e.g. simpleimage.pyDescription from PEP 8
![Page 23: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/23.jpg)
packageA directory of Python module(s)
Definition
![Page 24: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/24.jpg)
Using modules
1. Import the module
import module
![Page 25: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/25.jpg)
Using modules
1. Import the module
import module
2. Use the predefined functions!
module.function()
![Page 26: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/26.jpg)
Using modules
1. Import the module
import module
2. Use the predefined functions!
module.function()
We call this building your code “on top of” the module.
![Page 27: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/27.jpg)
Modules you’ve already used!
● karel
● math
● simpleimage
● sys
● random
![Page 28: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/28.jpg)
How can we create graphical programs?
![Page 29: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/29.jpg)
How can we create graphical programs?
GUI libraries (modules)!
![Page 30: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/30.jpg)
Graphical User Interface (GUI)Visual elements that you interact with within
applications (windows, buttons, scroll bars, etc.)
Definition
![Page 31: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/31.jpg)
No GUI! All text-based (Old computers used to only
have a command line!)
![Page 32: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/32.jpg)
GUI libraries
● Windows, Mac OS, Linux each have their own GUI systems
![Page 33: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/33.jpg)
GUI libraries
● Windows, Mac OS, Linux each have their own GUI systems
● GUI libraries are modules that support the GUI (i.e. their functions allow you to interact with your computer’s GUI system)
![Page 34: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/34.jpg)
GUI libraries
● Windows, Mac OS, Linux each have their own GUI systems
● GUI libraries are modules that support the GUI (i.e. their functions allow you to interact with your computer’s GUI system)
● tkinter is Python’s standard GUI package○ Many other GUI libraries are built on top of tkinter!
(more on this later this week)
![Page 35: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/35.jpg)
GUI libraries
● Windows, Mac OS, Linux each have their own GUI systems
● GUI libraries are modules that support the GUI (i.e. their functions allow you to interact with your computer’s GUI system)
● tkinter is Python’s standard GUI package○ Many other GUI libraries are built on top of tkinter!
(more on this later this week)
![Page 36: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/36.jpg)
tkinter
![Page 37: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/37.jpg)
How Tkinter works
● import tkinter
![Page 38: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/38.jpg)
How Tkinter works
● import tkinter
● Everything gets drawn on a canvas○ In today’s examples and Assignment 4, we’ll provide the code for
creating the canvas. x
y
(0,0)
![Page 39: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/39.jpg)
How Tkinter works
● import tkinter
● Everything gets drawn on a canvas○ In today’s examples and Assignment 4, we’ll provide the code for
creating the canvas.
● When dealing with x, y coordinates on the canvas, Tk converts floats to integers internally to address pixels
![Page 40: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/40.jpg)
How Tkinter works
● import tkinter
● Everything gets drawn on a canvas○ In today’s examples and Assignment 4, we’ll provide the code for
creating the canvas.
● When dealing with x, y coordinates on the canvas, Tk converts floats to integers internally to address pixels
A quick note about Python floats… [demo]
![Page 41: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/41.jpg)
How Tkinter works
● import tkinter
● Everything gets drawn on a canvas○ In today’s examples and Assignment 4, we’ll provide the code for
creating the canvas.
● When dealing with x, y coordinates on the canvas, Tk converts floats to integers internally to address pixels○ Note: Python floats aren’t exact!
![Page 42: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/42.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text()
![Page 43: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/43.jpg)
Tkinter canvas functions
● canvas.create_line(x1, y1, x2, y2)
● canvas.create_oval()
● canvas.create_text()
![Page 44: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/44.jpg)
Tkinter canvas functions
● canvas.create_line(x1, y1, x2, y2)
● canvas.create_oval()
● canvas.create_text()
The first point of the line is (x1, y1)
![Page 45: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/45.jpg)
Tkinter canvas functions
● canvas.create_line(x1, y1, x2, y2)
● canvas.create_oval()
● canvas.create_text() The second point of the line is (x2, y2)
![Page 46: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/46.jpg)
Tkinter canvas functions
● canvas.create_line(x1, y1, x2, y2)
● canvas.create_oval()
● canvas.create_text()
(x1, y1) (x2, y2)
![Page 47: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/47.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval(x1, y1, x2, y2)
● canvas.create_text()
![Page 48: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/48.jpg)
● canvas.create_line()
● canvas.create_oval(x1, y1, x2, y2)
● canvas.create_text()
Tkinter canvas functions
(x2, y2)
(x1, y1)
![Page 49: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/49.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’)
hi
![Page 50: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/50.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’)
hi (x, y)
![Page 51: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/51.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.NW)
hi(x, y)
![Page 52: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/52.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
hi(x, y)
![Page 53: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/53.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
hi(x, y)
The anchor argument determines where (x,y) is.
It defaults to tkinter.CENTER.
![Page 54: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/54.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
hi(x, y)
It can be any of [tkinter.]N, S, E, W, NW, SW, NE, SW, or
CENTER.
![Page 55: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/55.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
It can be any of [tkinter.]N, S, E, W, NW, SW, NE, SW, or
CENTER.
Where do these come from?
![Page 56: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/56.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
It can be any of [tkinter.]N, S, E, W, NW, SW, NE, SW, or
CENTER.
They are constants inside the tkinter module!
![Page 57: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/57.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
![Page 58: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/58.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
Why do these have names?
![Page 59: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/59.jpg)
Tkinter canvas functions
● canvas.create_line()
● canvas.create_oval()
● canvas.create_text(x, y, text=’hi’, anchor=tkinter.S)
kwargs!
![Page 60: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/60.jpg)
Keyword arguments
![Page 61: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/61.jpg)
keyword arguments (kwargs)Arguments whose names matter but whose
positions do not
Definition
![Page 62: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/62.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
![Page 63: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/63.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
positional argumentsUnnamed arguments whose order matter
Definition
![Page 64: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/64.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
![Page 65: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/65.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer
![Page 66: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/66.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer○ What if you didn’t name the arguments for create_text()?
![Page 67: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/67.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer○ What if you didn’t name the arguments for create_text()?
canvas.create_text(50, 100, ‘hi’, tkinter.NW, tkinter.left, 20)
![Page 68: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/68.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer○ What if you didn’t name the arguments for create_text()?
canvas.create_text(50, 100, ‘hi’, tkinter.NW, tkinter.left, 20)
There are even more possible args!
![Page 69: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/69.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer
● Enable default values for parameters (make arguments optional)
![Page 70: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/70.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer
● Enable default values for parameters (make arguments optional)
print(‘Kylie’, ‘Nick’, ‘Sonja’, sep=‘, ’, end=‘’)
![Page 71: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/71.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer
● Enable default values for parameters (make arguments optional)
print(‘Kylie’, ‘Nick’, ‘Sonja’, sep=‘, ’, end=‘’)
These are optional!
![Page 72: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/72.jpg)
Keyword (named) arguments: kwargs
● Come after the unnamed positional arguments whose order matter
● Name matters, but order doesn’t matter
● Help make function calls clearer
● Enable default values for parameters (make arguments optional)
![Page 73: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/73.jpg)
Proportional math:draw_pyramid()
![Page 74: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/74.jpg)
draw_pyramid()
[demo]
![Page 75: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/75.jpg)
You Try It!What line of code would you add to draw_pyramid() to draw n lines from the top edge to the lower left corner?
![Page 76: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/76.jpg)
![Page 77: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/77.jpg)
Proportional math:draw_nest()
![Page 78: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/78.jpg)
![Page 79: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/79.jpg)
Assignment 4: BabyNames[demo]
![Page 80: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/80.jpg)
Interactors
![Page 81: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/81.jpg)
Interactors
![Page 82: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/82.jpg)
Interactors
● The text fields that allow the user to interact with the GUI are called interactors○ In particular, the text field allows the user to input information
● There are different types of interactors: text fields, buttons, etc.
● For Assignment 4, we handle the interactors for you○ You’ll create them yourself in future assignments
![Page 83: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/83.jpg)
Bluescreen results!
![Page 84: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/84.jpg)
Most Artistic
![Page 85: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/85.jpg)
Most Artistic
![Page 86: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/86.jpg)
Most Artistic
![Page 87: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/87.jpg)
Most Humorous
![Page 88: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/88.jpg)
Most Humorous
![Page 89: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/89.jpg)
Best Picture of You Hanging out with Someone Famous
![Page 90: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/90.jpg)
Best Picture of You Hanging out with Someone Famous
![Page 91: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/91.jpg)
Best Use of Background
![Page 92: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/92.jpg)
Best Use of Background
![Page 93: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/93.jpg)
People’s Choice
![Page 94: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/94.jpg)
People’s Choice
![Page 95: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/95.jpg)
What’s next?
![Page 96: Graphics 1 - Stanford Universityweb.stanford.edu/class/archive/cs/cs106ap/cs106ap.1198/... · 2019. 7. 23. · GUI libraries Windows, Mac OS, Linux each have their own GUI systems](https://reader036.vdocuments.net/reader036/viewer/2022062604/5fc4f28a977a260f0830bf96/html5/thumbnails/96.jpg)
Images
The Console
Data structures
Everyday Python
Midterm
Programming Basics
Roadmap
Life after CS106AP!
Day 1!
Graphics
Object-Oriented Programming
Graphics 1.0
Event-driven programming
Graphics 2.0