Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Interactivity in Computer Science

Interactivity in Computer Science

EPIC Workshop presented at Cal Poly San Luis Obispo. Topics included: people in CS, careers in CS, Google Doodles and Design, JavaScript: p5.js, Python: Jupyter and Binder, Next steps.

Carol Willing
PRO

July 10, 2018
Tweet

More Decks by Carol Willing

Other Decks in Education

Transcript

  1. Interactivity in Computer Science EPIC Workshop July 2018 ©Carol Willing,

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

  3. 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
  4. Why Computer Science? ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 4

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

  6. Why Interactive? • Creative • Expressive • Fun ©Carol Willing,

    2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 6
  7. 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
  8. 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
  9. ⏰ 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
  10. Project 1 ! People & Teams ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science

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

  12. 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
  13. Luz Rivas California 39th District, Assembly DIY Girls, Founder ©Carol

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

    14
  15. 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
  16. Limor Fried Ladyada Adafruit, Founder and CEO Electrical Engineer ©Carol

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

    17
  18. Bryan Liles Heptio, Engineer Cognitive Bias Talk GitHub - Bryan

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

  20. 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
  21. Project 2 Computer Science Careers ! " ✈ ©Carol Willing,

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

    https://speakerdeck.com/willingc/interactivity-in-computer-science 22
  23. 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
  24. If you like ... Art • Designer • Computer Human

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

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

    • Game Developer • Web Content Engineer ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 26
  27. If you like ... Music • Sound Engineer • Special

    effects • Computer Generated Musician ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 27
  28. 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
  29. 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
  30. Project 3 Design at Google ! " ©Carol Willing, 2018.

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

    https://speakerdeck.com/willingc/interactivity-in-computer-science 31
  32. Step 1: Try the Doodles Fischinger doodle Hip Hop Snake

    Game ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 32
  33. 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
  34. 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
  35. 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
  36. 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
  37. Project 4 Get started with JavaScript ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science

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

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

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

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

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

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

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

  45. Interact • Move mouse over image • Change | Run

    | Change | Run ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 45
  46. 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
  47. Project 5 Drawing ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 47

  48. 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
  49. 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
  50. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" width=device-width,

    initial-scale=1.0, maximum-scale=1.0, user-scalable=0> <style> body {padding: 0; margin: 0;} </style> <script src="../p5.min.js"></script> <script src="../addons/p5.dom.min.js"></script> <script src="../addons/p5.sound.min.js"></script> <script src="sketch.js"></script> </head> <body> </body> </html> ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 50
  51. 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
  52. 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
  53. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 53

  54. 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
  55. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 55

  56. Explore • Change values • Add a shape • Run

    examples ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 56
  57. 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
  58. Project 6 Interactivity ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 58

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

  60. 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
  61. ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 61

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

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

  64. Project 6 Interactivity • Use widgets • Control using mouse

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

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

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

    67
  68. 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
  69. https://try.jupyter.org ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 69

  70. 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
  71. What's next? ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 71

  72. Try new applications AI and Machine Learning Examples AI Duet

    Sound-Maker ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 72
  73. 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

  74. School classes • College ready curriculum • Ask questions •

    Remember, you can ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 74
  75. 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
  76. Thank you willingc AT gmail DOT com ©Carol Willing, 2018.

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