Graphics Chris Piech and Mehran Sahami CS106A, Stanford University

Piech + Sahami, CS106A, Stanford University Roadmap Karel Python Core Day 1!

Diagnostic Graphics Images

Functions

Internet Object Orientation Life after Data CS106A

Piech + Sahami, CS106A, Stanford University Learn by Doing

Assignment 2 35 30 25 20 15 10

Number of Students of Number 5 0 0 2 4 6 8 10 12 14 16 18 20 22 24 Time Spent (hours)

Piech + Sahami, CS106A, Stanford University Learning to Program on the Internet

Task Almost a hundred thousand unique solutions Piech + Sahami, CS106A, Stanford University US K-12 Students

= 500,000 learners Piech + Sahami, CS106A, Stanford University Code.org Students

= 500,000 learners Piech + Sahami, CS106A, Stanford University Autonomously Generating Hints by Inferring Problem Solving Policies - Piech, Sahami et al. Piech + Sahami, CS106A, Stanford University Each edge is what a teacher suggested

Pink dots are students.

Each node is a unique partial solution Solution

Autonomously Generating Hints by Inferring Problem Solving Policies - Piech, Sahami et al. Piech + Sahami, CS106A, Stanford University Autonomously Generating Hints by Inferring Problem Solving Policies - Piech, Sahami et al. Piech + Sahami, CS106A, Stanford University Desirable Path Algorithm

Poisson Common Path Path Cost

Submission count of partial solution

Partial Predicted next solutions in partial solution Paths to solution the path

Piech + Sahami, CS106A, Stanford University Deep Learning Algorithms

1 2

Program

0.9 1.0 Neural Network Poisson Common Path 0.8 0.8 0.6

Recall 0.4 0.7 Edit DistanceAST

BenchmarkAUC 0.2

0.6 0.0 0.0 0.2 0.4 0.6 0.8 1.0 Precision BKT BKT* DKT Marginal Piech + Sahami, CS106A, Stanford University Deep Learning on Trajectories

Research in collaboration with Lisa Wang

Piech + Sahami, CS106A, Stanford University Predicts Future Success

100 100

90 y = 3.0x + 61.2 90 y = 3.8x + 58.1 R² = 0.98 R² = 0.97 80 80

70 70 Problem B Problem A 60 60

Probability Finish Next Problem Next Finish Probability 50 50 Probability Finish Problem After B After Problem Finish Probability

40 40 -2 0 2 4 6 8 10 12 -2 0 2 4 6 8 10 12 Predicted Student Ability Predicted Student Ability

Piech + Sahami, CS106A, Stanford University Predicts Future

0.8

0.7

0.6

0.5

0.4

Recall on Prediction of Future of on Prediction Recall 0.3

Baseline

Deep Learning Logistic Regression Piech + Sahami, CS106A, Stanford University Highly Rates Grit

1. Two compound errors 2. Solves first error 3. Starts reasonable attempt

4. Completes attempt 5. Backtracks 6. Finds solution

Piech + Sahami, CS106A, Stanford University Review

Piech + Sahami, CS106A, Stanford University Piech + Sahami, CS106A, Stanford University Piech + Sahami, CS106A, Stanford University https://stackoverflow.com/questions/1061093/howPiech + Sahami, CS106A, Stanford -Universityis-a-sepia-tone-created Sepia Example

def main(): image_name = input('enter an image name: ') image = SimpleImage('images/' + image_name) for pixel in image: sepia_pixel(pixel) image.show()

def sepia_pixel(pixel): R = pixel.red G = pixel.green B = pixel.blue pixel.red = 0.393 * R + 0.769 * G + 0.189 * B pixel.green = 0.349 * R + 0.686 * G + 0.168 * B pixel.blue = 0.272 * R + 0.534 * G + 0.131 * B

Piech + Sahami, CS106A, Stanford University Sepia Example

def main(): image_name = input('enter an image name: ') image = SimpleImage('images/' + image_name) for y in range(image.height): for x in range(image.width): pixel = image.get_pixel(x, y) sepia_pixel(pixel) image.show() def sepia_pixel(pixel): R = pixel.red G = pixel.green B = pixel.blue pixel.red = 0.393 * R + 0.769 * G + 0.189 * B pixel.green = 0.349 * R + 0.686 * G + 0.168 * B pixel.blue = 0.272 * R + 0.534 * G + 0.131 * B

Piech + Sahami, CS106A, Stanford University Sepia Example

def main(): image_name = input('enter an image name: ') image = SimpleImage('images/' + image_name) for y in range(image.height): for x in range(image.width): pixel = image.get_pixel(x, y) sepia_pixel(pixel) image.show() def sepia_pixel(pixel): R = pixel.red G = pixel.green B = pixel.blue pixel.red = 0.393 * R + 0.769 * G + 0.189 * B pixel.green = 0.349 * R + 0.686 * G + 0.168 * B pixel.blue = 0.272 * R + 0.534 * G + 0.131 * B

Piech + Sahami, CS106A, Stanford University Sepia Example

def main(): image_name = input('enter an image name: ') image = SimpleImage('images/' + image_name) for y in range(600): for x in range(800): print(x, y)

Piech + Sahami, CS106A, Stanford University Mike Krieger Kevin Systrom

Piech + Sahami, CS106A, Stanford University End Review

Piech + Sahami, CS106A, Stanford University Today’s Goal 1. How do I draw shapes?

Piech + Sahami, CS106A, Stanford University Graphics Programs

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect

800 pixels wide

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect

200 pixels tall

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect 20, 20

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect

100, 100

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect Aside: Named Arguments This argument is named as filled. It allows functions to have arguments which you can This is blue ignore if you want a default value.

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100) canvas.mainloop()

Hello Rect Aside: Named Arguments This argument is named as filled. It allows functions to have arguments which you can This is white ignore if you want a default value.

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect Aside: Named Arguments This argument is named as filled. It allows functions to have arguments which you can This is blue ignore if you want a default value.

Piech + Sahami, CS106A, Stanford University Draw a Rectangle

the following main method displays a blue square

def main(): canvas = make_canvas(800, 200, 'Hello Rect') canvas.create_rectangle(20, 20, 100, 100, fill="blue") canvas.mainloop()

Hello Rect

Piech + Sahami, CS106A, Stanford University TK Natural Graphics

Piech + Sahami, CS106A, Stanford University Graphics Coordinates 0,0

40,20 CANVAS_HEIGHT 120,40

40,120

CANVAS_WIDTH

Piech + Sahami, CS106A, Stanford University Rectangles, Ovals, Text

Piech + Sahami, CS106A, Stanford University ● canvas.create_line()

● canvas.create_oval()

● canvas.create_text()

Piech + Sahami, CS106A, Stanford University ● canvas.create_line(x1, y1, x2, y2)

● canvas.create_oval()

● canvas.create_text()

Piech + Sahami, CS106A, Stanford University ● canvas.create_line(x1, y1, x2, y2)

● canvas.create_oval() The first point of the ● canvas.create_text() line is (x1, y1)

Piech + Sahami, CS106A, Stanford University ● canvas.create_line(x1, y1, x2, y2)

● canvas.create_oval()

● canvas.create_text() The second point of the line is (x2, y2)

Piech + Sahami, CS106A, Stanford University ● canvas.create_line(x1, y1, x2, y2)

● canvas.create_oval() (x1, y1) (x2, y2) ● canvas.create_text()

Piech + Sahami, CS106A, Stanford University ● canvas.create_line()

● canvas.create_oval(x1, y1, x2, y2)

● canvas.create_text()

Piech + Sahami, CS106A, Stanford University ● canvas.create_line()

● canvas.create_oval(x1, y1, x2, y2)

● canvas.create_text() (x1, y1)

(x2, y2)

Piech + Sahami, CS106A, Stanford University ● canvas.create_line()

● canvas.create_oval()

● canvas.create_text(x, y, text=’hi’)

hi

Piech + Sahami, CS106A, Stanford University ● canvas.create_line()

● canvas.create_oval()

● canvas.create_text(x, y, text=’hi’, anchor='w')

(x, y) hi

Piech + Sahami, CS106A, Stanford University Pedagogy

Piech + Sahami, CS106A, Stanford University Goal

Piech + Sahami, CS106A, Stanford University Milestone 1

Piech + Sahami, CS106A, Stanford University Milestone 2

Piech + Sahami, CS106A, Stanford University Milestone 3

Piech + Sahami, CS106A, Stanford University Piech + Sahami, CS106A, Stanford University Piech + Sahami, CS106A, Stanford University Teaser for next week…

Piech + Sahami, CS106A, Stanford University Hold up! def draw_square(canvas, row, col):

If you get a copy when you pass a parameter. Does this copy the canvas??!!

Large variables are stored using something like a URL. The URL gets copied

Piech + Sahami, CS106A, Stanford University How do you share google docs?

Antelope Canyon Article

Key:

https://docs.google.com/document/d/1eBtnEilI3KHe fFS-kSAOpXqeSXpbfTTMlmOgj6I9dvk/Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap main

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap main memory.com/42 canvas

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap 42 main

canvas 42

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap 42 main

canvas 42

draw_square canvas

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap 42 main

canvas 42

draw_square

canvas 42

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap 42 main

canvas 42

draw_square

canvas 42

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap 42 main

canvas 42

draw_square

canvas 42

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap 42 main

canvas 42

draw_square

canvas 42

Piech + Sahami, CS106A, Stanford University def main(): canvas = make_canvas(…) draw_square(canvas)

def draw_square(canvas): canvas.create_rectangle(20, 20, 100, 100)

stack heap 42 main

canvas 42

Piech + Sahami, CS106A, Stanford University Large variable types are stored as memory addresses

(which are like memory URLs)

Piech + Sahami, CS106A, Stanford University