week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · wednesday...
TRANSCRIPT
![Page 1: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/1.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
1
Digital Input and OutputRGB LEDs fade with PWM
week
03
![Page 2: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/2.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
2
Digital vs. Analog
Digital signal
Difference between two possible states
“whether or not”
Is the cat on the mat or not?
Analog signal
continuous range of possible states
“how much” or “stronger” “faster” “brighter”
How heavy is the cat that’s on the mat?
![Page 3: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/3.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
3
Digital vs. Analog
Binary vs. continuous signals
• Binary / Digital = “whether or not”
• Continuous / Analog signal = “how much” or “faster,” “brighter,” etc.
![Page 4: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/4.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
4
Microcontrollers
Output Transducersactuators (e.g., motors, buzzers)
Input Transducerssensors (e.g., switches, levers, sliders, etc.)
Arduino
Illustration adapted and modified from O’Sullivan and Igoe
![Page 5: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/5.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
5
Microcontrollers
Output Transducersactuators (e.g., motors, buzzers)
Input Transducerssensors (e.g., switches, levers, sliders, etc.)
Arduino
Illustration adapted and modified from O’Sullivan and Igoe
Arduino (microcontroller) takes voltage (5V) and converts it to the language of 0 or 1 that computer can understand.
![Page 6: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/6.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
6
Digital vs. Analog
Internally, all microprocessors compute binary: 0 or 1 (0V or 5V)
In general, most microprocessors output only binary (0V or 5V)
Specifically, Arduino output pins can only be LOW (0V) or HIGH (5V)
![Page 7: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/7.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
7
Digital Output
Blinking LED
![Page 8: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/8.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
8
Digital vs. Analog
Two states (binary signal) vs. multiple states (continuous signal)
Digital Input and Output
Analog Input (next week!)
![Page 9: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/9.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
9
Can We Do Analog Out?
LED with 23% brightness?
100% brightness 23% brightness
![Page 10: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/10.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
10
Pulse Width Modulation (PWM)
Most microprocessors can only output binary: LOW (0V) or HIGH (5V)
So you fake it with PWM, Pulse Width Modulation
It gives you an illusion of analog values, in between LOW and HIGH
![Page 11: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/11.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
11
PWM100% brightness
0% brightness
![Page 12: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/12.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
12
PWM100% brightness
0% brightness
50% brightness
= 2 milliseconds
= 2 milliseconds
= 2 milliseconds
![Page 13: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/13.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
13
PWM= 2 milliseconds
= 2 milliseconds
= 2 milliseconds
![Page 14: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/14.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
14
PWM
75% brightness
25% brightness
50% brightness
= 2 milliseconds
= 2 milliseconds
= 2 milliseconds
![Page 15: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/15.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
15
Pulse Width Modulation (PWM)
Your Arduino board has built in PWM circuits, on pins 3, 5, 6, 9, 10, and 11
![Page 16: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/16.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
16
Pulse Width Modulation (PWM)
Your Arduino board has built in PWM circuits, on pins 3, 5, 6, 9, 10, and 11
![Page 17: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/17.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
17
analogWrite(pin, value)
The duty cycle: between 0 and 255
analogWrite(11, 191)
analogWrite(11, 127)
analogWrite(11, 64)
75% brightness
50% brightness
25% brightness
![Page 18: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/18.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
18
In Class ExerciseMake a color mixer with RGB LEDs
Exercise with digital input and output, and PWM
![Page 19: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/19.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
19
Color Mixer with RGB LEDs
Make any colors with Red, Green, and Blue LEDs, except black
![Page 20: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/20.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
20
1. LED Blink2. LED Fade3. Circuit with 3 LEDs 4. RGB LED Fade5. Serial RGB LED
In Class Exercise
![Page 21: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/21.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
21
Blinking LED (c.f. homework)
Resistorred, red, brown, gold
LED
![Page 22: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/22.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
22
1. LED Blink2. LED Fade3. Circuit with 3 LEDs 4. RGB LED Fade5. Serial RGB LED
In Class Exercise
![Page 23: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/23.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
23
LED Fade
Resistorred, red, brown, gold
LED
![Page 24: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/24.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
24
1. LED Blink2. LED Fade3. Circuit with 3 LEDs 4. RGB LED Fade5. Serial RGB LED
In Class Exercise
![Page 25: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/25.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
25
Circuit with 3 LEDs
Plug three LEDs, red, green, and blue and make different colors
![Page 26: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/26.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
26
1. LED Blink2. LED Fade3. Circuit with 3 LEDs 4. RGB LED Fade5. Serial RGB LED
In Class Exercise
![Page 27: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/27.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
27
RGB LED Fade
Slow color fading and mixing
![Page 28: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/28.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
28
Diffuser
Experiment with different materials.
![Page 29: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/29.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
29
1. LED Blink2. LED Fade3. Circuit with 3 LEDs 4. RGB LED Fade5. Serial RGB LED
In Class Exercise
![Page 30: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/30.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
30
Serial RGB
Tell it to mix 50 red, 100 green, and 20 blue... Etc.
g50
![Page 31: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/31.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
31
Arduino Board
• USB to serial
![Page 32: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/32.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
32
Serial Monitor
![Page 33: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/33.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
33
Serial Communication
Serial.begin() e.g., Serial.begin(9600)
Serial.print() e.g., Serial.print(colorVal)
Serial.read()
![Page 34: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/34.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
34
Serial RGB
Tell it to mix 50 red, 100 green, and 20 blue... etc.
g50
![Page 35: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/35.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
35
![Page 36: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/36.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
36
![Page 37: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/37.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
37
![Page 38: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/38.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
38
![Page 39: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/39.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
39
1. LED Blink2. LED Fade3. Circuit with 3 LEDs 4. RGB LED Fade5. Serial RGB LED
In Class Exercise
![Page 40: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/40.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
40
Homework (due next Tuesday, Feb 8)
Part I: Design a good diffuser for your RGB LEDs e.g., ping pong ball, styrofoam, mylar, cottons, icecream cone?
Part II: Modify the Serial RGB code for new keyboard input:
• Basic: Control the RGB values with multiple key presses (e.g., instead of typing “r127” to set the Red LED to 50% brightness, count how many times the characters “r” “g” “b” were pressed. E.g., press “r” 5 times to get it to 50%, 8 times for 80%, 10 times for 100%, 11 times to go back to 0%, etc.)
• Advanced: Find new ways of controlling the colors of LEDs using the keyboard
Post both parts on the course website (photo, descriptions, code)
![Page 41: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/41.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
41
Supplement Readings
More on PWM and LED fading: Chapter 6 (p. 112-114) of O’Sullivan and Igoe
More on microcontroller in general: Chapter 4 (p.49-63)
![Page 42: week 03 - courses.ischool.berkeley.educourses.ischool.berkeley.edu/i262/s13/sites/... · Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces](https://reader030.vdocument.in/reader030/viewer/2022041018/5ecd024c36a47132e852a263/html5/thumbnails/42.jpg)
Wednesday Week 3: Digital Input and Output Theory and Practice of Tangible User Interfaces
42
Next Wednesday: Analog Input
Two states (binary signal) vs. multiple states (continuous signal)
Digital Input and Output
Analog Input (next week!)