Tweet
Tweet

Slide 1

Slide 1 text

Interactivity in Computer Science EPIC Workshop July 2018 ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 1

Slide 2

Slide 2 text

! Hi I'm Carol ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 2

Slide 3

Slide 3 text

Carol Willing Research Software Engineer, Cal Poly SLO Project Jupyter, Steering Council Python Software Foundation Fellow Python Core Developer Open Source Hardware and Software Every day, I am a beginner at something. Learn. Build. Share. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 3

Slide 4

Slide 4 text

Why Computer Science? ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 4

Slide 5

Slide 5 text

Help people ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 5

Slide 6

Slide 6 text

Why Interactive? • Creative • Expressive • Fun ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 6

Slide 7

Slide 7 text

My Goals for this workshop • Hands-on • Explore JavaScript and Python • Inspire to do more • Share ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 7

Slide 8

Slide 8 text

What do we need today? • Computer (or Smartphone or Tablet) • Browser (Chrome) • Web • You ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 8

Slide 9

Slide 9 text

⏰ Schedule ⏰ Time Project 1:10 pm People 1:20 pm Careers 1:30 pm Design at Google 1:45pm JavaScript: p5.js 2:30 pm Python: Jupyter and mybinder.org 2:45 pm Next steps ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 9

Slide 10

Slide 10 text

Project 1 ! People & Teams ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 10

Slide 11

Slide 11 text

Who uses computer science? ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 11

Slide 12

Slide 12 text

Task Choose someone who you would: • want on your team • like to meet • like to ask a question ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 12

Slide 13

Slide 13 text

Luz Rivas California 39th District, Assembly DIY Girls, Founder ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 13

Slide 14

Slide 14 text

Jesus Medrano Uber Eats, Software Engineer ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 14

Slide 15

Slide 15 text

Omoju Miller GitHub, Data Scientist About Omoju “On learning AI: The myth of innate ability in tech.” ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 15

Slide 16

Slide 16 text

Limor Fried Ladyada Adafruit, Founder and CEO Electrical Engineer ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 16

Slide 17

Slide 17 text

Ana Ruvalcaba Project Jupyter, Operations Manager ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 17

Slide 18

Slide 18 text

Bryan Liles Heptio, Engineer Cognitive Bias Talk GitHub - Bryan Liles ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 18

Slide 19

Slide 19 text

You ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 19

Slide 20

Slide 20 text

Project 1 People & teams • Teamwork is important • Find a role model • Ask questions ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 20

Slide 21

Slide 21 text

Project 2 Computer Science Careers ! " ✈ ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 21

Slide 22

Slide 22 text

Coding is one of many CS careers. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 22

Slide 23

Slide 23 text

If you like ... Organizing, Planning Events • Community Manager • Operations Manager • Project Manager • Business Owner ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 23

Slide 24

Slide 24 text

If you like ... Art • Designer • Computer Human Interaction Engineer • Animator • Web developer ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 24

Slide 25

Slide 25 text

If you like ... Math • Data Scientist • Research Engineer ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 25

Slide 26

Slide 26 text

If you like ... Writing • Product Manager • Documentarian • Game Developer • Web Content Engineer ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 26

Slide 27

Slide 27 text

If you like ... Music • Sound Engineer • Special effects • Computer Generated Musician ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 27

Slide 28

Slide 28 text

Task What interests you? Explore coding and the many other Computer Science careers. Lifelong learning is important in Computer Science. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 28

Slide 29

Slide 29 text

Project 2 Computer Science careers • Find your interests • Learn which career you may like • Understand many careers in CS beyond coding ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 29

Slide 30

Slide 30 text

Project 3 Design at Google ! " ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 30

Slide 31

Slide 31 text

Google Doodles See the Google Doodles page. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 31

Slide 32

Slide 32 text

Step 1: Try the Doodles Fischinger doodle Hip Hop Snake Game ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 32

Slide 33

Slide 33 text

Step 2: Design/UX Review Choose a Google Doodle. - What things were interactive? - How did it start? - How did it end? - What do you like best? - What would you change? ! UX = User Experience ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 33

Slide 34

Slide 34 text

Step 3: Sketch a new doodle • Sketch • What would be interactive? • Theme/Subject of doodle • Share with someone ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 34

Slide 35

Slide 35 text

Extra: Developer tools Inspect doodle web page with Chrome Developer tools. • View ➡ Developer ➡ View source • View ➡ Developer ➡ JavaScript Console • View ➡ Developer ➡ Developer tools Google Web documentation ! JavaScript documentation from Mozilla ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 35

Slide 36

Slide 36 text

Project 3 Design at Google Skills used: - Product research - User Interface and UX - Computer Human Interactions ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 36

Slide 37

Slide 37 text

Project 4 Get started with JavaScript ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 37

Slide 38

Slide 38 text

p5.js https://p5js.org/ ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 38

Slide 39

Slide 39 text

Learn about p5.js https://hello.p5js.org/ ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 39

Slide 40

Slide 40 text

Explore Reference | Referencia ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 40

Slide 41

Slide 41 text

Try the editor https://alpha.editor.p5js.org/ ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 41

Slide 42

Slide 42 text

©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 42

Slide 43

Slide 43 text

©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 43

Slide 44

Slide 44 text

©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 44

Slide 45

Slide 45 text

Interact • Move mouse over image • Change | Run | Change | Run ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 45

Slide 46

Slide 46 text

Project 4 Get started with JavaScript • Use a new language • Help with Reference • Try the editor • Run an example ✨ Completed ✨ ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 46

Slide 47

Slide 47 text

Project 5 Drawing ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 47

Slide 48

Slide 48 text

Modern websites In general: • HTML ➡ Structure • CSS ➡ Style • JavaScript (.js) ➡ interactivity ! codepen.io to test code ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 48

Slide 49

Slide 49 text

sketch.js is a JavaScript file sketch.js function setup() { // put setup code here } function draw() { // put drawing code here } ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 49

Slide 50

Slide 50 text

index.html body {padding: 0; margin: 0;} ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 50

Slide 51

Slide 51 text

Canvas The canvas coordinates are different than in math class. - top left (0,0) - bottom right (width-1, height-1) createCanvas(300, 100); // Canvas width is 300 pixels, height is 100 pixels For example: - top left (0,0) - bottom right (299, 99) ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 51

Slide 52

Slide 52 text

Draw an ellipse and circle ellipse(centerPixelsFromLeft, centerPixelsFromTop, width, height); Example function setup() { createCanvas(400, 400); } function draw() { ellipse(150, 90, 20, 20); // Draw a circle (width=height) ellipse(200, 200, 80, 10); // Draw an ellipse } ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 52

Slide 53

Slide 53 text

©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 53

Slide 54

Slide 54 text

Draw more shapes function setup() { createCanvas(400, 400); } function draw() { ellipse(150, 90, 20, 20); // Draw a circle (width=height) ellipse(200, 200, 80, 10); // Draw an ellipse line(0, 0, 50, 50); rectangle(300, 200, 50, 30); rectangle(50, 70, 30, 30); } ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 54

Slide 55

Slide 55 text

©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 55

Slide 56

Slide 56 text

Explore • Change values • Add a shape • Run examples ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 56

Slide 57

Slide 57 text

Project 5 Drawing • Learn about HTML, CSS, JS files • Understand canvas • Code a shape • Code multiple shapes ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 57

Slide 58

Slide 58 text

Project 6 Interactivity ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 58

Slide 59

Slide 59 text

Interactivity 1 ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 59

Slide 60

Slide 60 text

Color Red (r) Green (g) Blue (b) A color is a mix of red, green, blue. Color value: 0 to 255 ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 60

Slide 61

Slide 61 text

©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 61

Slide 62

Slide 62 text

Interactivity 2 Sliders and Widgets ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 62

Slide 63

Slide 63 text

©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 63

Slide 64

Slide 64 text

Project 6 Interactivity • Use widgets • Control using mouse clicks ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 64

Slide 65

Slide 65 text

Project 7 Python, Jupyter, & Binder ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 65

Slide 66

Slide 66 text

Python https://python.org Press the yellow button. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 66

Slide 67

Slide 67 text

Use Python as an interactive calculator. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 67

Slide 68

Slide 68 text

Jupyter and Binder https://jupyter.org https://try.jupyter.org https://mybinder.org ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 68

Slide 69

Slide 69 text

https://try.jupyter.org ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 69

Slide 70

Slide 70 text

Project 7 Python, Jupyter, & Binder • Interactivity in the Real World • Python programming language • Project Jupyter - interactive notebooks • Binder - sharing notebooks ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 70

Slide 71

Slide 71 text

What's next? ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 71

Slide 72

Slide 72 text

Try new applications AI and Machine Learning Examples AI Duet Sound-Maker ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 72

Slide 73

Slide 73 text

Tutorials https://hello.p5js.org/ https://hello.processing.org https://learn.adafruit.com ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 73

Slide 74

Slide 74 text

School classes • College ready curriculum • Ask questions • Remember, you can ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 74

Slide 75

Slide 75 text

Great job! ! Your accomplishments ! Number Project 1 People 2 Careers 3 Design at Google Javascript: p5.js 4 Getting started 5 Draw 6 Interactivity 7 Python: Jupyter and mybinder.org 8 Next steps ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 75

Slide 76

Slide 76 text

Thank you willingc AT gmail DOT com ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 76

Slide 77

Slide 77 text

Attributions Photos: Videos: ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 77