22
Tuesday Week 2: Interaction Design 1 Theory and Practice of Tangible User Interfaces Sensor 2: Photocells and Force Sensors Analog input and Processing week 04

Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

1

Theory and Practice of Tangible User Interfaces

Sensor 2: Photocells and Force SensorsAnalog input and Processing

week 04

Page 2: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

2

Theory and Practice of Tangible User Interfaces

Force Sensitive Resistor

Photocell

PhotocellForce Sensitive Resistor

Page 3: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

3

Theory and Practice of Tangible User Interfaces

Potentiometers•

Variable resistor (a type of “resistive sensor”)

Pot for short

When you need a “ranged”

input

Measures rotational position (knob for volume, light dimmer, etc.)

pot resistor

Page 4: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

4

Theory and Practice of Tangible User Interfaces

Voltage DividerPotentiometer is a type of voltage divider.

Illustration adapted from Tod

Kurt’s Spooky Projects with Arduino

Page 5: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

5

Theory and Practice of Tangible User Interfaces

turned anti-clockwise

turned clockwise

somewhere in the middle

Potentiometers•

It’s like a faucet (if current is analog to water flow)

Like any other resistor, but you can vary the amount of resistance

Generally used for making a varying voltage (remember, Arduino measures voltage differences, not resistance differences)

Illustration adapted from Tod

Kurt’s Spooky Projects with Arduino

Page 6: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

6

Theory and Practice of Tangible User Interfaces

Photocells (aka photoresistor)

Brighter light == lower resistance

Photocell

Page 7: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

7

Theory and Practice of Tangible User Interfaces

Force Sensitive ResistorsMore pressure == lower resistance

Page 8: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

8

Theory and Practice of Tangible User Interfaces

Force Sensitive ResistorsExperiment with different pressure objects, sponge, plates, etc.

Page 9: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

9

Theory and Practice of Tangible User Interfaces

Working with ProcessingArduino as an interface board

Page 10: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

10

Theory and Practice of Tangible User Interfaces

Arduino to Computer

USB to serial chip

Arduino microcontroller

Page 11: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

11

Theory and Practice of Tangible User Interfaces

Arduino to Computer

Arduino microcontroller

USB to serial chip

USB to serial driver

Arduino programmer

Processing sketch

Java program

Laptop Arduino board

USBRX

TX

Program of your choice!

RX

TX

or

or

or

Illustration adapted from Tod

Kurt’s Spooky Projects with Arduino

Page 12: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

12

Theory and Practice of Tangible User Interfaces

ProcessingOpen source programming language and environment for images, animation, and interactions.

Page 13: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

13

Theory and Practice of Tangible User Interfaces

Processing

Page 14: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

14

Theory and Practice of Tangible User Interfaces

Processing and SerialProcessing has a “Serial”

library to talk to Arduino.

1. load library2. set portname3. open port4. read/write port

adapted from Tod

Kurt’s Spooky Projects with Arduino

Page 15: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

15

Theory and Practice of Tangible User Interfaces

In Class Exercise

Page 16: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

16

Theory and Practice of Tangible User Interfaces

Photocell and LEDSinglePotControlsBrightness.txtSinglePotControlsBlinking.txt

Page 17: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

17

Theory and Practice of Tangible User Interfaces

FSR and LEDSinglePotControlsBrightness.txtSinglePotControlsBlinking.txt

Page 18: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

18

Theory and Practice of Tangible User Interfaces

ProcessingDownload and install Processing from processing.org

Page 19: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

19

Theory and Practice of Tangible User Interfaces

Processing and Arduinoarduino_ball_paint

Every time a number is received via the serial port, it draws a ball that size.

Project adapted from Tod

Kurt’s Spooky Projects with Arduino

Page 20: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

20

Theory and Practice of Tangible User Interfaces

HomeworkProgramming

Create an interesting visualization on your computer that could be influenced by the input from the sensors you have (pot, photocell, FSR, or combination of them). You can use Processing (or any other language you like) in writing the program. Post your results on the course website.

Mechanical

Create a mechanical construction for your FSR that distributes or focuses physical force that is applied. Think about everyday objects (toothpaste tube, entrance mat, paintbrush, pipette, etc.) and how you measure the pressure or force applied to them.

Page 21: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

21

Theory and Practice of Tangible User Interfaces

Supplement ReadingsForce sensitive resistors: Chapter 11 of Physical Computing

Voltage divider: Chapter 6, pp. 102-108 of Physical Computing

Page 22: Tuesday Week 2: Interaction Design Theory and Practice of …courses.ischool.berkeley.edu/i290-13/f07/system/files/... · 2008-05-24 · Tuesday Week 2: Interaction Design 3 Theory

Tuesday Week 2: Interaction Design

22

Theory and Practice of Tangible User Interfaces

Thanks!