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.

Avatar for Carol Willing

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
  2. 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
  3. Why Interactive? • Creative • Expressive • Fun ©Carol Willing,

    2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 6
  4. 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
  5. 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
  6. ⏰ 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
  7. 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
  8. Luz Rivas California 39th District, Assembly DIY Girls, Founder ©Carol

    Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 13
  9. 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
  10. Limor Fried Ladyada Adafruit, Founder and CEO Electrical Engineer ©Carol

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

    Liles ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 18
  12. 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
  13. Project 2 Computer Science Careers ! " ✈ ©Carol Willing,

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

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

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

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

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

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

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

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

    Game ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 32
  25. 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
  26. 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
  27. 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
  28. 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
  29. Interact • Move mouse over image • Change | Run

    | Change | Run ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 45
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. Explore • Change values • Add a shape • Run

    examples ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 56
  38. 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
  39. 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
  40. Project 6 Interactivity • Use widgets • Control using mouse

    clicks ! Completed ! ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 64
  41. 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
  42. Try new applications AI and Machine Learning Examples AI Duet

    Sound-Maker ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 72
  43. School classes • College ready curriculum • Ask questions •

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

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