Angry Spomge Sustention

UPPER POOL DESIGN STUDIO – SEMESTER ONE 2011

The Expressive Interface

Jiazhen Chen (KEN) S3191677

STUDIO TITLE: ThE ExprESSIvE InTErfacE

Semester 1, 2011TUTOr: frank feltham

STUDEnT naME: Jiazhen chen (KEn)STUDEnT nUMBEr:

S3191677

pOrTfOLIO

contents

Design aim 5

context 6

how to use 7

Symbol 8

Explodede view 10

assem 11

circuit diagram 12

Emotion reaserch 13-15

arduino & processing 16-19

Material exploration 20

working process 21-23

Development 24-29actity Diagram 9

copyright permission 30

Learning contract & revised Learning contract 31

paths of investigation 32




S3191677

pOrTfOLIO




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, peo-ple will fists their clenched and punch the table (or someone). It inspired me using a squeez-ing 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 feedfor-ward. also I built an activity diagram to describe the inherent, augment and functional informa-tion 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 so-cial 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 chat-ting. Therefore in this project I design an interaction device using physical emotions to support online chatting.




S3191677

pOrTfOLIO

context

Express your Interface

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 us-ers themself.

Nature of the users: enjoy on-line chatting; not good at expressing emotions with text; need release their emotions




S3191677

pOrTfOLIO

how to use

hold squeezing punch




S3191677

pOrTfOLIO

Symbol

To control l volumeTo control sizeTo control fill color

To control back-ground color

punch me




S3191677

pOrTfOLIO

actity Diagraminherent ffwd, system wait

visual and sonic change

inherent ffwd, (visual)inherent feedback (haptic)functional feedback (digital)

prepare

inherent ffwd,

functional feedback (physical)

Stop

inherent ffwd, (visual)inherent feedback (haptic)functional feedback (digital)

inherent ffwd, (visual)inherent feedback (physical)functional feedback (digital)

visual and sonic change LOOp 2

system loading

sound volume chang

release connection:sound off,image become back)

Sleep

image 2 on

Stop

inherent ffwd, (visual )inherent feedback (physical)functional feedback (digital)

inherent ffwd, (visual )inherent feedback (physical)functional feedback (digital)


(visual:ellipsoid,rubber foam,finger grooves)

(visual:ellipsoid,rubber foam,finger grooves.)

image 1 chang

sound volume change

sound volume off

two image 1 on

visual and sonic change

sound volume change

two image 1 change

Synthesis


sound volume change

image change

sound volume off

image 1 on

restart

hold

turn on switch

squeezing

hold

punch

hold

squeezing

press ‘space’ key




S3191677

pOrTfOLIO

finger grooves rubber foam case

force Sensitive resistor x 4

protection board

reinforce layer

rubber foam case

Explodede view




S3191677

pOrTfOLIO

assem




S3191677

pOrTfOLIO

circuit diagram

pc

10K

10K

10K

10K

10K

force Sensitive resistor - Small x 5

5MM cLr LED SWITch

56r

use switch to control the whole system




S3191677

pOrTfOLIO

anger is a powerful emotion. Anger is an emotion re-lated 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.

emotion range of angeraggravated-> irritated->angry->irate-> bitter-> enraged-> hys-terical

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

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

enraged “you’ve gone and broken Great Aunt Myrtle teapot- I told you not to touch it!”

Physical movement: punch the table

Emotion reaserch




S3191677

pOrTfOLIO

emotion reaserch




S3191677

pOrTfOLIO

50 images of emotions




S3191677

pOrTfOLIO

arduino & processingUpload these 3 code below first

open Arduino > open > Firmata > standarFirmataopen Arduino > open > Analog > AnalogInOutSerialopen 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;

int maxCircles = 70; // maximum amount of circles on the screenint numPoints = 50; // number of voronoi points / segmentsint minSpeed = 2; // minimum speed of a voronoi segmentint 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();

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 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(); } }

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 == ‘ ‘) { reset(); }}

Main sketch




S3191677

pOrTfOLIO

arduino & processingclass

import ddf.minim.*;import ddf.minim.signals.*;import processing.serial.*;import cc.arduino.*;Arduino arduino;

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;

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 if (!broken) { moveVerlet(); displayVerlet(); checkBreak(); // if the circle is broken } else { moveBreak(); displayBreak(); } }

// set position based on the particle in the physics system

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); }

// 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(); } }}

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, radi-us*2)); addPolygons(); addSpeeds(); }




S3191677

pOrTfOLIO

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’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)); } } }

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));}

class

arduino & processing




S3191677

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




S3191677

pOrTfOLIO

Material exploration

rubber foam high densityelasticity: very highhard to sand and cut

“shino wipe out pad”elasticity high, but will lose elasticty after using few timeseasy to sand and cut

foam matelasticity: low

rubber ballelasticity: nromalfeel hard when touching




S3191677

pOrTfOLIO

working process




S3191677

pOrTfOLIO

mock up

mark I

mark II mark III mark IV mark v (FINAL)




S3191677

pOrTfOLIO

crc

crc, (class, responsibility, collaboration) cards form part of a suite of prototyping methods used in softwareand hardware development.




S3191677

pOrTfOLIO

form development




S3191677

pOrTfOLIO

form development




S3191677

pOrTfOLIO

form development




S3191677

pOrTfOLIO

form development




S3191677

pOrTfOLIO

form development




S3191677

pOrTfOLIO

digital outcome development




S3191677

copyright permission

(insert completed copyright permission)




S3191677

Learning contract & revised Learning contract




S3191677

paths of investigation

(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)

Documents

Angry Spomge Sustention