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 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 Benchmark AUC 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 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,