SlideShare une entreprise Scribd logo
1  sur  77
Télécharger pour lire hors ligne
Interactivity
in Computer Science
EPIC Workshop
July 2018
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 1
!
Hi
I'm Carol
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 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
Why Computer
Science?
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 4
Help people
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 5
Why Interactive?
• Creative
• Expressive
• Fun
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 6
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
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
⏰
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
Project 1
!
People & Teams
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 10
Who uses computer
science?
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 11
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
Luz Rivas
California 39th District,
Assembly
DIY Girls, Founder
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 13
Jesus Medrano
Uber Eats, Software
Engineer
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 14
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
Limor Fried
Ladyada
Adafruit, Founder
and CEO
Electrical Engineer
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 16
Ana Ruvalcaba
Project Jupyter,
Operations
Manager
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 17
Bryan Liles
Heptio, Engineer
Cognitive Bias Talk
GitHub - Bryan Liles
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 18
You
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 19
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
Project 2
Computer Science
Careers
! "
✈
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 21
Coding
is one of many CS careers.
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 22
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
If you like ...
Art
• Designer
• Computer Human Interaction Engineer
• Animator
• Web developer
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 24
If you like ...
Math
• Data Scientist
• Research Engineer
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 25
If you like ...
Writing
• Product Manager
• Documentarian
• Game Developer
• Web Content Engineer
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 26
If you like ...
Music
• Sound Engineer
• Special effects
• Computer Generated Musician
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 27
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
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
Project 3
Design at Google
! "
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 30
Google Doodles
See the Google Doodles page.
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 31
Step 1: Try the Doodles
Fischinger doodle
Hip Hop
Snake Game
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 32
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
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
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
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
Project 4
Get started with
JavaScript
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 37
p5.js
https://p5js.org/
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 38
Learn about p5.js
https://hello.p5js.org/
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 39
Explore
Reference | Referencia
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 40
Try the editor
https://alpha.editor.p5js.org/
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 41
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 42
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 43
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 44
Interact
• Move mouse over image
• Change | Run | Change | Run
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 45
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
Project 5
Drawing
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 47
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
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
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
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
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
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 53
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
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 55
Explore
• Change values
• Add a shape
• Run examples
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 56
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
Project 6
Interactivity
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 58
Interactivity 1
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 59
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
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 61
Interactivity 2
Sliders and Widgets
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 62
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 63
Project 6
Interactivity
• Use widgets
• Control using mouse clicks
!
Completed
!
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 64
Project 7
Python, Jupyter, &
Binder
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 65
Python
https://python.org
Press the yellow button.
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 66
Use Python as an interactive calculator.
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 67
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
https://try.jupyter.org
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 69
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
What's next?
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 71
Try new applications
AI and Machine Learning Examples
AI Duet
Sound-Maker
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 72
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
School classes
• College ready curriculum
• Ask questions
• Remember, you can
!
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 74
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
Thank you
willingc AT gmail DOT com
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 76
Attributions
Photos:
Videos:
©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science 77

Contenu connexe

Similaire à Interactive Computing in Computer Science

Maciej Marek (Philip Morris International) - The Tools of The Trade
Maciej Marek (Philip Morris International) - The Tools of The TradeMaciej Marek (Philip Morris International) - The Tools of The Trade
Maciej Marek (Philip Morris International) - The Tools of The TradeCodiax
 
Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Ken Tabor
 
Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Nordic APIs
 
Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Julian Macagno
 
Road to NODES - Blazing Fast Ingest with Apache Arrow
Road to NODES - Blazing Fast Ingest with Apache ArrowRoad to NODES - Blazing Fast Ingest with Apache Arrow
Road to NODES - Blazing Fast Ingest with Apache ArrowNeo4j
 
Changing the world with the web
Changing the world with the webChanging the world with the web
Changing the world with the webSally Lait
 
Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021
Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021
Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021Plastindustrien
 
[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化
[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化
[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化オラクルエンジニア通信
 
Personalization: Content Strategy at its Finest - Content Strategy New Englan...
Personalization: Content Strategy at its Finest - Content Strategy New Englan...Personalization: Content Strategy at its Finest - Content Strategy New Englan...
Personalization: Content Strategy at its Finest - Content Strategy New Englan...AvenueCX
 
Product Backlog Refinement with Structured Conversations - Big Apple Scrum Day
Product Backlog Refinement with Structured Conversations - Big Apple Scrum DayProduct Backlog Refinement with Structured Conversations - Big Apple Scrum Day
Product Backlog Refinement with Structured Conversations - Big Apple Scrum DayEBG Consulting, Inc.
 
Road to NODES Workshop Series - Intro to Neo4j
Road to NODES Workshop Series - Intro to Neo4jRoad to NODES Workshop Series - Intro to Neo4j
Road to NODES Workshop Series - Intro to Neo4jNeo4j
 
The revolution will be collaborative
The revolution will be collaborativeThe revolution will be collaborative
The revolution will be collaborativeRonan Berder
 
Design, Innovate, Digitize. Building Skills to Solve Future Problems
Design, Innovate, Digitize. Building Skills to Solve Future ProblemsDesign, Innovate, Digitize. Building Skills to Solve Future Problems
Design, Innovate, Digitize. Building Skills to Solve Future ProblemsCisco DevNet
 
Understanding the Past; Being Honest about the Present; Planning for the Future
Understanding the Past; Being Honest about the Present; Planning for the FutureUnderstanding the Past; Being Honest about the Present; Planning for the Future
Understanding the Past; Being Honest about the Present; Planning for the Futurelisbk
 
Inspire Hackathon - Integration of Research Projects Sustainability with Cit...
Inspire Hackathon -  Integration of Research Projects Sustainability with Cit...Inspire Hackathon -  Integration of Research Projects Sustainability with Cit...
Inspire Hackathon - Integration of Research Projects Sustainability with Cit...plan4all
 
IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...
IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...
IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...Dr. Haxel Consult
 
Digital Trends in CCSS & PBL.Pt2
Digital Trends in CCSS & PBL.Pt2Digital Trends in CCSS & PBL.Pt2
Digital Trends in CCSS & PBL.Pt2Martin Cisneros
 
Design & planning (v. 2018-2019)
Design & planning (v. 2018-2019)Design & planning (v. 2018-2019)
Design & planning (v. 2018-2019)Frieda Brioschi
 
Now What? Creating Innovative LODLAM Sites and Apps
Now What? Creating Innovative LODLAM Sites and AppsNow What? Creating Innovative LODLAM Sites and Apps
Now What? Creating Innovative LODLAM Sites and AppsDesign for Context
 

Similaire à Interactive Computing in Computer Science (20)

Maciej Marek (Philip Morris International) - The Tools of The Trade
Maciej Marek (Philip Morris International) - The Tools of The TradeMaciej Marek (Philip Morris International) - The Tools of The Trade
Maciej Marek (Philip Morris International) - The Tools of The Trade
 
Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Making the Difficult, Simple(r)
Making the Difficult, Simple(r)
 
Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Making the Difficult, Simple(r)
Making the Difficult, Simple(r)
 
Making the Difficult, Simple(r)
Making the Difficult, Simple(r)Making the Difficult, Simple(r)
Making the Difficult, Simple(r)
 
Road to NODES - Blazing Fast Ingest with Apache Arrow
Road to NODES - Blazing Fast Ingest with Apache ArrowRoad to NODES - Blazing Fast Ingest with Apache Arrow
Road to NODES - Blazing Fast Ingest with Apache Arrow
 
Changing the world with the web
Changing the world with the webChanging the world with the web
Changing the world with the web
 
Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021
Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021
Mouldflo - Anjum Parwaiz - Plastic Engineering Day 2021
 
Geospatial Data for Augmented Reality - Crispin Hoult
Geospatial Data for Augmented Reality - Crispin HoultGeospatial Data for Augmented Reality - Crispin Hoult
Geospatial Data for Augmented Reality - Crispin Hoult
 
[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化
[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化
[Oracle Innovation Summit Tokyo 2018] インダストリアルIoTの今、そしてこれからの進化
 
Personalization: Content Strategy at its Finest - Content Strategy New Englan...
Personalization: Content Strategy at its Finest - Content Strategy New Englan...Personalization: Content Strategy at its Finest - Content Strategy New Englan...
Personalization: Content Strategy at its Finest - Content Strategy New Englan...
 
Product Backlog Refinement with Structured Conversations - Big Apple Scrum Day
Product Backlog Refinement with Structured Conversations - Big Apple Scrum DayProduct Backlog Refinement with Structured Conversations - Big Apple Scrum Day
Product Backlog Refinement with Structured Conversations - Big Apple Scrum Day
 
Road to NODES Workshop Series - Intro to Neo4j
Road to NODES Workshop Series - Intro to Neo4jRoad to NODES Workshop Series - Intro to Neo4j
Road to NODES Workshop Series - Intro to Neo4j
 
The revolution will be collaborative
The revolution will be collaborativeThe revolution will be collaborative
The revolution will be collaborative
 
Design, Innovate, Digitize. Building Skills to Solve Future Problems
Design, Innovate, Digitize. Building Skills to Solve Future ProblemsDesign, Innovate, Digitize. Building Skills to Solve Future Problems
Design, Innovate, Digitize. Building Skills to Solve Future Problems
 
Understanding the Past; Being Honest about the Present; Planning for the Future
Understanding the Past; Being Honest about the Present; Planning for the FutureUnderstanding the Past; Being Honest about the Present; Planning for the Future
Understanding the Past; Being Honest about the Present; Planning for the Future
 
Inspire Hackathon - Integration of Research Projects Sustainability with Cit...
Inspire Hackathon -  Integration of Research Projects Sustainability with Cit...Inspire Hackathon -  Integration of Research Projects Sustainability with Cit...
Inspire Hackathon - Integration of Research Projects Sustainability with Cit...
 
IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...
IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...
IC-SDV 2019: What’s it all about? Or … How I fell at the last fence - Kathy B...
 
Digital Trends in CCSS & PBL.Pt2
Digital Trends in CCSS & PBL.Pt2Digital Trends in CCSS & PBL.Pt2
Digital Trends in CCSS & PBL.Pt2
 
Design & planning (v. 2018-2019)
Design & planning (v. 2018-2019)Design & planning (v. 2018-2019)
Design & planning (v. 2018-2019)
 
Now What? Creating Innovative LODLAM Sites and Apps
Now What? Creating Innovative LODLAM Sites and AppsNow What? Creating Innovative LODLAM Sites and Apps
Now What? Creating Innovative LODLAM Sites and Apps
 

Plus de Carol Willing

Machine Learning and Jupyter
Machine Learning and JupyterMachine Learning and Jupyter
Machine Learning and JupyterCarol Willing
 
STEAM Workshops with Binder and JupyterHub
STEAM Workshops with Binder and JupyterHubSTEAM Workshops with Binder and JupyterHub
STEAM Workshops with Binder and JupyterHubCarol Willing
 
Learning Python: Tips from Cognitive Science, Jupyter, and Community
Learning Python: Tips from Cognitive Science, Jupyter, and CommunityLearning Python: Tips from Cognitive Science, Jupyter, and Community
Learning Python: Tips from Cognitive Science, Jupyter, and CommunityCarol Willing
 
JupyterHub + kubernetes
JupyterHub + kubernetesJupyterHub + kubernetes
JupyterHub + kubernetesCarol Willing
 
JupyterHub tutorial at JupyterCon
JupyterHub tutorial at JupyterConJupyterHub tutorial at JupyterCon
JupyterHub tutorial at JupyterConCarol Willing
 
Python and Jupyter: Your Gateway for Learning
Python and Jupyter: Your Gateway for LearningPython and Jupyter: Your Gateway for Learning
Python and Jupyter: Your Gateway for LearningCarol Willing
 
Jupyter: A Gateway for Scientific Collaboration and Education
Jupyter: A Gateway for Scientific Collaboration and EducationJupyter: A Gateway for Scientific Collaboration and Education
Jupyter: A Gateway for Scientific Collaboration and EducationCarol Willing
 
JupyterHub: Learning at Scale
JupyterHub: Learning at ScaleJupyterHub: Learning at Scale
JupyterHub: Learning at ScaleCarol Willing
 
Data, decision making, and being human
Data, decision making, and being humanData, decision making, and being human
Data, decision making, and being humanCarol Willing
 
JupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" OverviewJupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" OverviewCarol Willing
 
JupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" OverviewJupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" OverviewCarol Willing
 
JupyterHub for Interactive Data Science Collaboration
JupyterHub for Interactive Data Science CollaborationJupyterHub for Interactive Data Science Collaboration
JupyterHub for Interactive Data Science CollaborationCarol Willing
 
JupyterHub, User Groups, and You
JupyterHub, User Groups, and YouJupyterHub, User Groups, and You
JupyterHub, User Groups, and YouCarol Willing
 
Python - The People's Programming Language
Python - The People's Programming LanguagePython - The People's Programming Language
Python - The People's Programming LanguageCarol Willing
 
2014 06 16_wearables_sdmakers
2014 06 16_wearables_sdmakers2014 06 16_wearables_sdmakers
2014 06 16_wearables_sdmakersCarol Willing
 
2014 01 23_pyladies_san diego python user group
2014 01 23_pyladies_san diego python user group2014 01 23_pyladies_san diego python user group
2014 01 23_pyladies_san diego python user groupCarol Willing
 

Plus de Carol Willing (20)

Machine Learning and Jupyter
Machine Learning and JupyterMachine Learning and Jupyter
Machine Learning and Jupyter
 
STEAM Workshops with Binder and JupyterHub
STEAM Workshops with Binder and JupyterHubSTEAM Workshops with Binder and JupyterHub
STEAM Workshops with Binder and JupyterHub
 
Learning Python: Tips from Cognitive Science, Jupyter, and Community
Learning Python: Tips from Cognitive Science, Jupyter, and CommunityLearning Python: Tips from Cognitive Science, Jupyter, and Community
Learning Python: Tips from Cognitive Science, Jupyter, and Community
 
Jupyter and Music
Jupyter and MusicJupyter and Music
Jupyter and Music
 
JupyterHub + kubernetes
JupyterHub + kubernetesJupyterHub + kubernetes
JupyterHub + kubernetes
 
JupyterHub tutorial at JupyterCon
JupyterHub tutorial at JupyterConJupyterHub tutorial at JupyterCon
JupyterHub tutorial at JupyterCon
 
Python and Jupyter: Your Gateway for Learning
Python and Jupyter: Your Gateway for LearningPython and Jupyter: Your Gateway for Learning
Python and Jupyter: Your Gateway for Learning
 
Jupyter: A Gateway for Scientific Collaboration and Education
Jupyter: A Gateway for Scientific Collaboration and EducationJupyter: A Gateway for Scientific Collaboration and Education
Jupyter: A Gateway for Scientific Collaboration and Education
 
JupyterHub: Learning at Scale
JupyterHub: Learning at ScaleJupyterHub: Learning at Scale
JupyterHub: Learning at Scale
 
Journey to Jupyter
Journey to JupyterJourney to Jupyter
Journey to Jupyter
 
Data, decision making, and being human
Data, decision making, and being humanData, decision making, and being human
Data, decision making, and being human
 
JupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" OverviewJupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" Overview
 
JupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" OverviewJupyterHub - A "Thing Explainer" Overview
JupyterHub - A "Thing Explainer" Overview
 
JupyterHub for Interactive Data Science Collaboration
JupyterHub for Interactive Data Science CollaborationJupyterHub for Interactive Data Science Collaboration
JupyterHub for Interactive Data Science Collaboration
 
JupyterHub, User Groups, and You
JupyterHub, User Groups, and YouJupyterHub, User Groups, and You
JupyterHub, User Groups, and You
 
Yes, you can git!
Yes, you can git!Yes, you can git!
Yes, you can git!
 
Python - The People's Programming Language
Python - The People's Programming LanguagePython - The People's Programming Language
Python - The People's Programming Language
 
Finding your groove
Finding your grooveFinding your groove
Finding your groove
 
2014 06 16_wearables_sdmakers
2014 06 16_wearables_sdmakers2014 06 16_wearables_sdmakers
2014 06 16_wearables_sdmakers
 
2014 01 23_pyladies_san diego python user group
2014 01 23_pyladies_san diego python user group2014 01 23_pyladies_san diego python user group
2014 01 23_pyladies_san diego python user group
 

Dernier

Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxVishalSingh1417
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Shubhangi Sonawane
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Role Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxRole Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxNikitaBankoti2
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 

Dernier (20)

Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Role Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptxRole Of Transgenic Animal In Target Validation-1.pptx
Role Of Transgenic Animal In Target Validation-1.pptx
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 

Interactive Computing in Computer Science

  • 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
  • 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