Interactivity in Computer Science

C8eedb2bca5728f0f73294b5b5a0222e?s=47 Carol Willing
July 10, 2018
Education
1
140

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.

C8eedb2bca5728f0f73294b5b5a0222e?s=128

Carol Willing

July 10, 2018
Tweet

Want more?

C8eedb2bca5728f0f73294b5b5a0222e?s=48 willingc
0
14
C8eedb2bca5728f0f73294b5b5a0222e?s=48 willingc
0
47
C8eedb2bca5728f0f73294b5b5a0222e?s=48 willingc
1
12
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
2
140
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
71
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
68
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
140
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
4
150
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
420
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

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

    2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 1
  2. 2.

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

  3. 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. 4.

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

  5. 5.

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

  6. 6.

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

    2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 6
  7. 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. 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. 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. 10.

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

    10
  11. 11.

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

  12. 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. 13.

    Luz Rivas California 39th District, Assembly DIY Girls, Founder ©Carol

    Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 13
  14. 14.

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

    14
  15. 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. 16.

    Limor Fried Ladyada Adafruit, Founder and CEO Electrical Engineer ©Carol

    Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 16
  17. 17.

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

    17
  18. 18.

    Bryan Liles Heptio, Engineer Cognitive Bias Talk GitHub - Bryan

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

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

  20. 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. 21.

    Project 2 Computer Science Careers ! " ✈ ©Carol Willing,

    2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 21
  22. 22.

    Coding is one of many CS careers. ©Carol Willing, 2018.

    https://speakerdeck.com/willingc/interactivity-in-computer-science 22
  23. 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. 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. 25.

    If you like ... Math • Data Scientist • Research

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

    Project 3 Design at Google ! " ©Carol Willing, 2018.

    https://speakerdeck.com/willingc/interactivity-in-computer-science 30
  31. 31.

    Google Doodles See the Google Doodles page. ©Carol Willing, 2018.

    https://speakerdeck.com/willingc/interactivity-in-computer-science 31
  32. 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. 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. 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. 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. 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. 37.

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

    37
  38. 38.

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

  39. 39.

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

  40. 40.

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

  41. 41.

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

  42. 42.

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

  43. 43.

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

  44. 44.

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

  45. 45.

    Interact • Move mouse over image • Change | Run

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

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

  48. 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. 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. 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. 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. 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. 53.

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

  54. 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. 55.

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

  56. 56.

    Explore • Change values • Add a shape • Run

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

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

  59. 59.

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

  60. 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. 61.

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

  62. 62.

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

  63. 63.

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

  64. 64.

    Project 6 Interactivity • Use widgets • Control using mouse

    clicks ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 64
  65. 65.

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

    65
  66. 66.

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

    66
  67. 67.

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

    67
  68. 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. 69.

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

  70. 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. 71.

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

  72. 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. 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. 74.

    School classes • College ready curriculum • Ask questions •

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

    Thank you willingc AT gmail DOT com ©Carol Willing, 2018.

    https://speakerdeck.com/willingc/interactivity-in-computer-science 76
  77. 77.

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