Master markdownBack to Top
footer: ©Carol Willing, 2018. https://speakerdeck.com/willingc/interactivity-in-computer-science
slidenumbers: true
build-lists: true
theme: Next, 2
Interactivity
in Computer Science
EPIC Workshop
July 2018
:wave: Hi :wave:
I’m Carol
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.
Why Computer Science?
Help people
Why Interactive?
- Creative
- Expressive
- Fun
My Goals for this workshop
- Hands-on
- Explore JavaScript and Python
- Inspire to do more
- Share
What do we need today?
- Computer (or Smartphone or Tablet)
- Browser (Chrome)
- Web
- You
:alarm_clock: Schedule :alarm_clock:
| 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 |
http://bit.ly/epic2018cs
Project 1
:smile: People & Teams :smile:
^ Pacing: 1:10 pm
Who uses computer science?
Task
Choose someone who you would:
- want on your team
- like to meet
- like to ask a question
Luz Rivas
California 39th District, Assembly
DIY Girls, Founder
Jesus Medrano
Uber Eats, Software Engineer
Omoju Miller
GitHub, Data Scientist
“On learning AI: The myth of innate ability in tech.”
Limor Fried
Ladyada
Adafruit, Founder and CEO
Electrical Engineer
Ana Ruvalcaba
Project Jupyter, Operations Manager
Bryan Liles
Heptio, Engineer
You
Project 1
People & teams
- Teamwork is important
- Find a role model
- Ask questions
:smile: Completed :smile:
Project 2
Computer Science Careers
:school: :construction: :airplane: :office:
^ Pacing: 1:20 pm
Coding
is one of many CS careers.
If you like …
Organizing, Planning Events
- Community Manager
- Operations Manager
- Project Manager
- Business Owner
If you like …
Art
- Designer
- Computer Human Interaction Engineer
- Animator
- Web developer
If you like …
Math
- Data Scientist
- Research Engineer
If you like …
Writing
- Product Manager
- Documentarian
- Game Developer
- Web Content Engineer
If you like …
Music
- Sound Engineer
- Special effects
- Computer Generated Musician
Task
What interests you?
Explore coding and the many other Computer Science careers.
Lifelong learning is important in Computer Science.
Project 2
Computer Science careers
- Find your interests
- Learn which career you may like
- Understand many careers in CS beyond coding
:smile: Completed :smile:
Project 3
Design at Google
:video_game: :musical_score: :musical_keyboard: :art:
^ Pacing: 1:30 pm
Google Doodles
See the Google Doodles page.
Step 1: Try the Doodles
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?
:bulb: UX = User Experience :bulb:
Step 3: Sketch a new doodle
- Sketch
- What would be interactive?
- Theme/Subject of doodle
- Share with someone
Extra: Developer tools
Inspect doodle web page with Chrome Developer tools.
- View :arrow_right: Developer :arrow_right: View source
- View :arrow_right: Developer :arrow_right: JavaScript Console
- View :arrow_right: Developer :arrow_right: Developer tools
:eyes: JavaScript documentation from Mozilla :eyes:
Project 3
Design at Google
Skills used:
- Product research
- User Interface and UX
- Computer Human Interactions
:art: Completed :art:
Project 4
Get started with JavaScript
p5.js
https://p5js.org/
Learn about p5.js
https://hello.p5js.org/
Explore
Reference | Referencia
Try the editor
https://alpha.editor.p5js.org/
Interact
- Move mouse over image
- Change | Run | Change | Run
Project 4
Get started with JavaScript
- Use a new language
- Help with Reference
- Try the editor
- Run an example
:sparkles: Completed :sparkles:
Project 5
Drawing
Modern websites
In general:
- HTML :arrow_right: Structure
- CSS :arrow_right: Style
- JavaScript (
.js) :arrow_right: interactivity
:bulb: codepen.io to test code :bulb:
sketch.js is a JavaScript file
[.code: auto(42), line-height(2.0)]
sketch.js
function setup() {
// put setup code here
}
function draw() {
// put drawing code here
}
index.html
[.code: auto(42), line-height(2.0)]
<!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>
Canvas
The canvas coordinates are different than in math class.
- top left (0,0)
- bottom right (width-1, height-1)
[.code: auto(42), line-height(2.0)]
createCanvas(300, 100); // Canvas width is 300 pixels, height is 100 pixels
For example:
- top left (0,0)
- bottom right (299, 99)
Draw an ellipse and circle
ellipse(centerPixelsFromLeft, centerPixelsFromTop, width, height);
Example
[.code: auto(42), line-height(2.0)]
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
}
Draw more shapes
[.code: auto(42), line-height(2.0)]
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);
}
Explore
- Change values
- Add a shape
- Run examples
Project 5
Drawing
- Learn about HTML, CSS, JS files
- Understand canvas
- Code a shape
- Code multiple shapes
:cake: Completed :cake:
Project 6
Interactivity
Interactivity 1
Color
Red (r)
Green (g)
Blue (b)
A color is a mix of red, green, blue.
Color value: 0 to 255
Interactivity 2
Sliders and Widgets
Project 6
Interactivity
- Use widgets
- Control using mouse clicks
:ocean: Completed :ocean:
Project 7
Python, Jupyter, & Binder
Python
Press the yellow button.
Use Python as an interactive calculator.
Jupyter and Binder
Project 7
Python, Jupyter, & Binder
- Interactivity in the Real World
- Python programming language
- Project Jupyter - interactive notebooks
- Binder - sharing notebooks
:snake: Completed :snake:
What’s next?
Try new applications
AI and Machine Learning Examples
Tutorials
School classes
- College ready curriculum
- Ask questions
- Remember, you can :smile:
Great job!
:tada: Your accomplishments :tada:
| 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 |
Thank you
willingc AT gmail DOT com
Attributions
Photos:
Videos: