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

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide


  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  21. Project 2
    Computer Science
    Careers
    ! "

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  50. index.html





    body {padding: 0; margin: 0;}








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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide