UPPER POOL DESIGN STUDIO – SEMESTER ONE 2011
The Expressive Interface
Jiazhen Chen (KEN) S3191677
contents Design Aim
5
Context
6 7
Symbol
8
Explodede view
Emotion reaserch
TUTOR:
20
working process
21-23
Development
24-29
10
Circuit diagram
The Expressive Interface Semester 1, 2011 Frank Feltham
16-19
9
Assem
STUDIO TITLE:
Material exploration
How to use
Actity Diagram
Arduino & Processing
11 12 13-15 STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
Copyright permission
30
Learning Contract & Revised Learning Contract
31
Paths of investigation
32
PORTFOLIO
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Design Aim In this studio, I force on using Arduino and Processing to transfer a physical emotion into both digital visual and sonic outcomes to support online chatting. In part 1, I need to research and explore the relationship between movement and one emotion (angry). I found normally, people will fists their clenched and punch the table (or someone). It inspired me using a squeezing and punching movement as my physical emotions. In order to explore the quality of those movements, I tried many different materials such as sponge, springs and rubber foam. At last, I decided use rubber foam with an ellipsoid form, because it offers strong inherent feedforward. Also I built an activity diagram to describe the inherent, augment and functional information clearly. In part 2, I was starting to learn how to build my system with Arduino, Processing and sensors. It is quite hard but interesting to get into the programming world. For inherent, augment and functional information level, I considered to using symbols, colors, shapes and sonic to represent it.
the context of use and the particular nature of the users Our life is changing. Our relationships online and in real life are shifting as we become more public with our private lives. Online chatting software becomes an important part in our social networking. (e.g.: Facebook, iChat, msn).online chatting gets people closer and bring a big convenience to our living style, but it also comes up one problem that is words is hard to express your emotions and It could make some mistaking meanings and make people angry, even the others don’t know and hit you deeper. According to the research by Dr. Ray Birdwhistelle, emotion expressions include two parts, 65% nonverbal expression and 35% language expression. It is thus clear obvious that importance of physical emotions in chatting. Therefore in this project I design an interaction device using physical emotions to support online chatting.
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Context
Context of use: When the users feel angry during online chatting, they can use this device to show their emotion on the others’ screen. Warning the others; a little punishment to the others and release users themself.
Nature of the users: enjoy online chatting; not good at expressing emotions with text; need release their emotions
Express your Interface
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
How to use
hold
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
squeezing
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
punch
PORTFOLIO
Symbol
punch me
STUDIO TITLE: TUTOR:
To control background color
The Expressive Interface Semester 1, 2011 Frank Feltham
To control fill color
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
To control size
PORTFOLIO
To control l volume
Actity Diagram
Sleep inherent ffwd,
system wait
(visual:ellipsoid, rubber foam,finger grooves)
hold
prepare inherent ffwd, (visual:ellipsoid, rubber foam,finger grooves.)
system loading
functional feedback (physical) turn on switch
visual and sonic change inherent ffwd, sound volume (visual) chang inherent feedback image 1 chang (haptic) functional feedback (digital) squeezing
Stop inherent ffwd, release connection: (visual) inherent feedback sound off,image become back) (haptic) functional feedback (digital) hold
visual and sonic change LOOp 2 inherent ffwd, sound volume (visual) change inherent feedback (physical) image 2 on functional feedback (digital) punch
Stop inherent ffwd, sound volume off (visual ) inherent feedback two image 1 on (physical) functional feedback (digital) hold
visual and sonic change inherent ffwd, sound volume (visual ) change inherent feedback (physical) two image 1 functional feedback change (digital) squeezing Synthesis
inherent ffwd, sound volume (visual) change inherent feedback (physical) image change functional feedback (digital)
Restart
inherent ffwd, sound volume off (visual) inherent feedback (physical) functional feedback image 1 on (digital) press ‘space’ key
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Explodede view finger grooves rubber foam case
force Sensitive resistor x 4
protection board
reinforce layer
rubber foam case
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Assem
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Circuit diagram 56r
pc 5MM cLr LED
SWITch
use switch to control the whole system
force Sensitive resistor - Small x 5
10K
10K
10K
10K
10K
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Emotion reaserch
anger is a powerful emotion. Anger is an emotion related to one’s psychological interpretation of having been offended, wronged or denied and a tendency to undo that by retaliation.(wiki 2010.) Normally people will clench their fist or punch the table, these actions not only are warning effect, but also release stress.
Angry(a strong feeling of displeasure and belligerence aroused by a wrong; wrath; ire “ i’m angry because i got yelled at for something my sister did.” Physical movement: fists clenched
emotion range of anger aggravated-> irritated->angry->irate-> bitter-> enraged-> hysterical enraged “you’ve gone and broken Great Aunt Myrtle teapot- I told you not to touch it!” Physical movement: punch the table
aggravated “would you PLEASE stop bugging me every five minuties-i’m trying to get my homework done Physical movement: tight facial, akimbo, crosses his arms
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
emotion reaserch
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
50 images of emotions
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Arduino & Processing
Upload these 3 code below first open Arduino > open > Firmata > standarFirmata open Arduino > open > Analog > AnalogInOutSerial open Processing > libraries > arduino > examples > arduinoinput
import toxi.geom.*; import toxi.geom.mesh2d.*; import toxi.physics2d.*; import toxi.physics2d.behaviors.*; import toxi.util.datatypes.*; import toxi.processing.*; import ddf.minim.*; import ddf.minim.signals.*; import processing.serial.*;
import cc.arduino.*; Minim minim; AudioOutput out; SineWave sine; ArrayList <BreakCircle> circles = new ArrayList <BreakCircle> (); VerletPhysics2D physics; ToxiclibsSupport gfx; FloatRange radius; Vec2D origin, m;
minim = new Minim(this); // get a line out from Minim, default bufferSize is 1024, default sample rate is 44100, bit depth is 16 out = minim.getLineOut(Minim.STEREO); // create a sine wave Oscillator, set to 440 Hz, at 0.5 amplitude, sample rate from line out sine = new SineWave(440, 1000, out.sampleRate()); // set the portamento speed on the oscillator to 200 milliseconds sine.portamento(200); // add the oscillator to the line out out.addSignal(sine); } void draw() { removeAddCircles(); int p = 5;{ background(255,255-arduino.analogRead(p)/3,255-arduino.analogRead(p)/3); }
int maxCircles = 70; // maximum amount of circles on the screen int numPoints = 50; // number of voronoi points / segments int minSpeed = 2; // minimum speed of a voronoi segment int maxSpeed = 14; // maximum speed of a voronoi segment void setup() { size(1280,720); arduino = new Arduino(this, Arduino.list()[0], 57600); smooth(); noStroke(); gfx = new ToxiclibsSupport(this); physics = new VerletPhysics2D(); physics.setDrag(0.05f ); physics.setWorldBounds(new Rect(0,0,width,height)); radius = new BiasedFloatRange(30, 100, 30, 0.6f ); origin = new Vec2D(width/2,height/2); reset();
STUDIO TITLE: TUTOR:
void removeAddCircles() { for (int i=circles.size()-1; i>=0; i--) { // if a circle is invisible, remove it... if (circles.get(i).transparency < 0) { circles.remove(i); // and add two new circles (if there are less than maxCircles) if (circles.size() < maxCircles) { circles.add(new BreakCircle(origin,radius.pickRandom())); circles.add(new BreakCircle(origin,radius.pickRandom())); } } } } void keyPressed() { if (key == â&#x20AC;&#x2DC; â&#x20AC;&#x2DC;) { reset(); } }
int z = 2;{ float freq = map(arduino.analogRead(z)*3, 0, height, arduino.analogRead(z)*3, 60); sine.setFreq(freq); }
physics.update(); m = new Vec2D(640,360); for (BreakCircle bc : circles) { bc.run(); } }
The Expressive Interface Semester 1, 2011 Frank Feltham
Main sketch
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
arduino & processing
class import ddf.minim.*; import ddf.minim.signals.*; import processing.serial.*; import cc.arduino.*; Arduino arduino;
void moveVerlet() { pos = vp; } // display circle void displayVerlet() { int i = 4; fill(arduino.analogRead(i) /2.55, arduino.analogRead(i)-555, arduino.analogRead(i)-555); smooth(); int s= 3; gfx.circle(pos,30+arduino.analogRead(s)*1.5); }
class BreakCircle { ArrayList <Polygon2D> polygons = new ArrayList <Polygon2D> (); Voronoi voronoi; FloatRange xpos, ypos; PolygonClipper2D clip; float[] moveSpeeds; Vec2D pos, impact; float radius; int transparency; int start; VerletParticle2D vp; AttractionBehavior abh; boolean broken;
// if the mouse is pressed on a circle, it will be broken void checkBreak() { int a = 1;{ if (arduino.analogRead(a) > 800) { // remove particle + behavior in the physics system physics.removeParticle(vp); physics.removeBehavior(abh); // point of impact is set to mouseX,mouseY impact = m; initiateBreak();
BreakCircle(Vec2D pos, float radius) { this.pos = pos; this.radius = radius; vp = new VerletParticle2D(pos); abh = new AttractionBehavior(vp, radius*2.5 + max(0,50-radius), -1.2f, 0.01f ); physics.addParticle(vp); physics.addBehavior(abh); }
}
void run() { // for regular (not broken) circles
void initiateBreak() { broken = true; transparency = 255; start = frameCount; // create a voronoi shape voronoi = new Voronoi(); // set biased float ranges based on circle position, radius and point of impact xpos = new BiasedFloatRange(pos.x-radius, pos.x+radius, impact.x, 0.333f ); ypos = new BiasedFloatRange(pos.y-radius, pos.y+radius, impact.y, 0.5f ); // set clipping based on circle position and radius clip = new SutherlandHodgemanClipper(new Rect(pos.x-radius, pos.y-radius, radius*2, radius*2)); addPolygons(); addSpeeds(); }
}
if (!broken) { moveVerlet(); displayVerlet(); checkBreak(); // if the circle is broken } else { moveBreak(); displayBreak(); }
// set position based on the particle in the physics system
STUDIO TITLE: TUTOR:
}
}
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
arduino & processing class void addPolygons() { // add random points (biased towards point of impact) to the voronoi for (int i=0; i<numPoints; i++) { voronoi.addPoint(new Vec2D(xpos.pickRandom(), ypos.pickRandom())); } // generate polygons from voronoi segments for (Polygon2D poly : voronoi.getRegions()) { // clip them based on the rectangular clipping poly = clip.clipPolygon(poly); for (Vec2D v : poly.vertices) { // if a point is outside the circle if (!v.isInCircle(pos,radius)) { // scale itâ&#x20AC;&#x2122;s distance from the center to the radius clipPoint(v); } } polygons.add(new Polygon2D(poly.vertices)); } } void addSpeeds() { // generate random speeds for all polygons moveSpeeds = new float[polygons.size()]; for (int i=0; i<moveSpeeds.length; i++) { moveSpeeds[i] = random(minSpeed,maxSpeed); } } // move polygons away from the point of impact at their respective speeds void moveBreak() { for (int i=0; i<polygons.size(); i++) { Polygon2D poly = polygons.get(i); Vec2D centroid = poly.getCentroid(); Vec2D targetDir = centroid.sub(impact).normalize(); targetDir.scaleSelf(moveSpeeds[i]); for (Vec2D v : poly.vertices) { v.set(v.addSelf(targetDir)); } } }
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
void displayBreak() { // after 12 frames, start decreasing the transparency if (frameCount-start > 12) { transparency -= 7; } fill(255,transparency); for (Polygon2D poly : polygons) { gfx.polygon2D(poly); } }
}
void clipPoint(Vec2D v) { v.subSelf(pos); v.normalize(); v.scaleSelf(radius); v.addSelf(pos); }
void reset() { // remove all physics elements for (BreakCircle bc : circles) { physics.removeParticle(bc.vp); physics.removeBehavior(bc.abh); } // remove all circles circles.clear(); // add one circle of radius 200 at the origin circles.add(new BreakCircle(origin,200)); }
PORTFOLIO
arduino & processing
original sketch from http://amnonp5.wordpress.com/2011/04/23/working-with-toxiclibs/ Posted by Amnon on April 23, 2011; Processing > libraries > arduino > examples > arduinoinput; Processing >Examples > Library > Minim > Sine Wave Signal
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Material exploration
foam mat elasticity: low
rubber ball elasticity: nromal feel hard when touching
“shino wipe out pad” elasticity high, but will lose elasticty after using few times easy to sand and cut
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
rubber foam high density elasticity: very high hard to sand and cut
PORTFOLIO
working process
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
mock up
mark II
mark III
mark IV
mark v (FINAL)
mark I
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
CRC CRC, (class, responsibility, collaboration) cards form part of a suite of prototyping methods used in software and hardware development.
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
Form development
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
form development
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
form development
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
form development
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
form development
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
digital outcome development
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
PORTFOLIO
(insert completed copyright permission)
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
Copyright permission
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
Learning Contract & Revised Learning Contract
(insert evidence of the paths of investigation you have undertaken during the studio tutorial. This is to include paths of investigation that you ceased to develop, as well as the major paths of investigation that brought about culmination in your project work)
STUDIO TITLE: TUTOR:
The Expressive Interface Semester 1, 2011 Frank Feltham
STUDENT NAME:
Jiazhen Chen (KEN)
STUDENT NUMBER:
S3191677
Paths of investigation