Issuu on Google+

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


Angry Spomge Sustention