EPIC workshop at Cal Poly SLO. July 2018. Introduces students to CS people, careers, design at Google, p5.js, Jupyter, Binder, and Python.

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