Last task: Emotional charged digital dialogues

Last task: Emotional charged digital dialogues

Menneskeliggjøring av datamaskinene.. Har vanskelig for å sette direkte menneskelige virkemidler som følelser og måter vi kommuniserer på, inn i det digitale. I en samtale med et annet menneske forholder vi oss gjerne til et ansikt, øyekontakt er sentralt. Uttrykk i et ansikt og kroppsspråket generelt, sier mye om holdningen til personen, forstålse av samtalen, refleksjoner , interessen og deltagelse i den. Punkter jeg derimot gjerne kan se mer av i den digitale dialogen, er forståelse og muliggjøre for rådgiving og referanser til interesseområdene hos brukeren. Gjerne anbefale liknende områder å utforske. Ev. kunne komme med noen få tips som kanskje faller litt på utsiden av det omtalte interessområdet, men som kan være med på å åpne øyene for et nytt område. (Inspirasjon?)

Flyer:

Exhibition Project - Affect AHO during December

Exhibition Project - Affect AHO during December

Designing an installation, decorating the building in some way the affect and engage the people at AHO during December. The theme for the project is presence (nærvær).

Information Architecture

Analyse av digital service: matematikk.org.

Dokumentarfilm vs. fiksjonsfilm.

Digital learning tool:

Information architecture.
Netlife Research: usability specialists.

Gjøre informasjon lettere tilgjenglig når og hvor det trengs. Strukturere slik at delene passer sammen og oppfører seg.













Foretningsmål -mot- brukermål. Brukere og deres mål.
Hvor brukeren ønsker å komme seg, snarvei i forhold til en ny bruker?

Ta tak i alle de fem fasene, som en bakgrunn for nettstedet, så gå nærmere inn på strukturen?

Jobbe med innholdet: Identifisere innholdselementer, hvem som er ansvarlig. Kortsortere.

Strukturplanet: Organisering av prinsippene, informasjons strukturering, sitemaps and site flows.
Lage sitemap, oversikt over hvor du kan komme deg videre?
Hieraarkisk kart - ser ikke navigasjon mellom de forskjellige stedene.
Eksempel på flyt i en handling, for å evaluere om det kan være en lettere flyt?

Navigasjon.
Hvor er jeg på siden?
Hvor kan jeg bevege meg videre?
Hvordan kommer jeg meg dit jeg faktisk vil?
Lette flyten.

Analysere:
Strategi, brukere, innhold.

Hva er navigasjon?
Bruker bevegelsen fra side til side.
"Nøkkelhull effekten": ser bare inn på en liten del av nettstedet.

Information architecture.
The structure plane, interaction design and information architecture.

Structuring the user experience.

Organization.
Grouping.
Ordering.
Presentation of content:
Library science.
Journalism.
Technical communication.

Defining patterns.
Sequences in options presented to the user.

Interaction design:
Options in performing and completing tasks.

Information architecture:
Options in conveying information to a user.

Understanding people, the way they work, the way they think
-kontakte faktiske brukere eller forestille seg?

Organizational and navigational schemes.
Allow the user to move through site content efficiently.
The design systems that enable users to find information easily.
(Educate, inform, persuade users.)

Hvordan gripe ann oppgaven?
Map of steps, visuelle, konkrete eksempler fra siden, eller abstrakte?

Information Architecture.

Organise information and functionality into hierarchies. Accessible and enjoyable. Abstract and separate form from content.

Analyse a digital service or product based on contemporary theory of evaluation on its information architecture qualitie.

EPG/Mediacenter.
Software for image handling.
Mobile phones.
Websites for shopping.
Learning tools..

Gest lecture:
Ulla Maaria Mutanen talking about Play, Craft and Digital Life.

www.thinglink.org
www.hobbyprincess.com

Bokpresentasjon til nedlastning her:
Interaction design beyond human-computer interaction.

Siste utkast:

Presentasjonen finner du i sin helhet her.
Et forsøk på å animere nivå1..
En prototyp på hvordan spillet fungerer finner du her.

Spillets layout, du er denne hvite ellipsen, og beveger deg gjennom kroppen til kvinnen du kan se på venstre side, du ser nærbilde av miljøet du befinner deg i.

Du kan spise de rød partiklene, de gir deg poeng etter størrelsen sin, ved å bevege deg over de klistrer de seg fast og du "fordøyes" de sakte men sikkert da de beveger seg inn til midten av deg.

De sorte objektene er farlige for deg, om du kommer for nære vil de trekkes mot deg, og er du ikke påpasselig vil den gjøre deg mindre om det opp står en kollisjon, og selv vokse seg større.

Du kan kun spise røde partikler som er på samme størrelse som deg, eller mindre, så om du er "skadet" etter en kollisjon med det sorte objektet, kan du altså ikke sanke like mange poeng. Samtidig har du muligheten til å vokse tilbake størrelsen din, om du er god nok til å spise mange nok røde partikler på en viss tid.

Du vokser altså av å spise disse rød partiklene, slik at jo større du blir kan du samtidig samle flere poeng, som det blir vanskeligere å bevege seg i miljøet uten å komme nær de sorte, fordi du opptar størr plass.

På kvinnen indikere bevegende partikler hvor i kroppen du befinner deg, disse krabber oppover som du skifter nivå, og opptrer i mengde i forhold til hvor mange partikler som befinner seg på skjermen, og minker i det du spiser de.

Fredag 6. oktober.

You tube.
Lengden på videoklippene, 4-8min?, som gjør at vi "tålerer" mer av de - kvaliteten, humoren.. Private access to other peoples life, mer ekte enn reality-tv? Hvorfor ser vi tv? To escape from this world, to learn from other people.

Hvorfor benytte seg av You Tube?
For å promotere seg selv. Extension of your way of working. Hvordan distribuere ideen din?

Utsnitt:
Vær vågal.
Detaljer.
Lyd skaper stemning:
Bare tenk hva musikk gjør med deg:
Opprettholder en følelse, får deg i en ønsket stemning.
Ideen er viktig:
kommer lengre med en god ide, enn kun en god animasjon (teknikk) der selve ideen er dårlig..

Priorities:

Response from eating:
Dras, fordøyes sakte, inn til midten.
Spiseprosessen: Du må holde deg over partiklene for å få de til å feste seg til deg. (ev. klikke?)

Layout:
Bakgrunnsoppsett: Fargevariasjon i nivå, ev. grå skala. Sort/hvitt eller farget filter over bilde? Et slør som skifter farge etter som du beveger deg i nivåer.
Dotter som beveger seg oppover kroppen, som når du beveger deg oppover i nivåer - også vise/indikere mengden dotter du har spist ev. er til stede i skjermen?
Flat bakgrunn: overlat skin på person - som hud.

Levels are indicated by highlighted/marked area on the human body - from the toes to the head.

The background picture will change from level to level, sliding.

Hvordan vise hvilket nivå spilleren befinner seg på?

Spill layout:

Layout:

Intro:
Navn på spill.
Start-opp.

Levels:
Hvordan ser personen ut?
Hva skjer med personen/skjermen i overgangen?
Hvordan ser bakgrunnen ut?

Spillutvikling:
Spising.
Danger.
Speed.
Sound.

Bygge videre på viruset fra forrige oppgave.

Reserch:
Spille spill for inspirasjon!

Uttesting av div. coputer spill - gamle og nye.
Noterer gode, ev. dårlige sider, ved et spill.

Hva liker du å spille?
Hva er et bra spill?
Hva er bra med et spill?
Individuelt!

Hva slags spill?

Bevegelse horisontalt eller vertikalt?
Forutsigbarhet med variabler av overraskelser.
Økning i vanskelighetsgrad.
Belønning i forskjellige nivåre, ev straffes?

Et spill for jenter!
Der du ikke mister "livet", eller må starte på nytt, men i stede blir mindre og svakere, samtidig som du har muligheten til å bygge deg opp igjen.

Order out of chaos - rydde opp, lage system.

Hva slags spill?

Why do I play a game?

For entertainment.
Not to serious, should be great fun and a laugh.
No brainactivity?

What will make a game good?

Experience something your not usually exposed to - see the world from a different point of view (ex: a older person). A feeling you had as a child, that you would like to explore over again (happy: glad for å se familien etter en lengere periode borte fra dem, scared / spenning: som når du venter på å bli funnet når du leker gjemsel, gru-glede: tiden opp mot julaften der du nesten ikke kunne vente, ikke fikk du sove om kvelden før den store dagen - tankene bare spant rundt det som var i nærheten av å skje).

(retro) computer game design.








Game design is the process of designing the content, background and rules of a game. In this task we are to focus on gameplay in video games. Gameplay is what the player does during the game, governed by the interactions of one or more game mechanics. Gameplay is at the heart of the design process and is usually extensively tested and refined. Gameplay is interactive and usually challenges the player in some manner. In this task we focus on special challenges rather than mental challenges. And we want to be more inspired by the mechanics of retro games rather than the social aspects of massive multiplayer games online.

"Spill er en form for lek med klart definerte regler og mål."

Why do people play games?
To learn.
Nose thumbing.
Exploration.
Prove oneself.
Social lubrication.
Exercise.
Need for aknowledgement.

Interactiv toy.

Inspirert av influensaviruset, laget vi virus som fester seg til en klump. Klumpen beveges rundt ved hjelp av musen, virusene dras mot klumpen og "kleber" seg fast, man kan riste de av seg om man beveger seg fort nok. Når virusene er festet til klumpen, "suger de livskfaft" fra den, så mens klumpen blir mindre, vokser virusene seg store. Når de ikke lenger er festet til hverandre, kommer klumpen om sider til seg selv og virusene blir mindre igjen.


// KLISTREKLUMP
Dot d[] = new Dot[80];
PImage b;

float klumpsize;


void setup() {
size(600,600);

smooth();
noStroke();
noCursor();
framerate(50);

b = loadImage("virus4svhv.jpg");



klumpsize = 60;


for(int i=0; i<1)klumpsize=2; x =" random(width);" y =" random(height);" angle =" random(360);" speed =" 0.3;" dotsize =" random(12,20);" stuck =" false;" ramme =" 100;" x="width+ramme;">width+ramme) x=-ramme;
if(y<-ramme) y=height+ramme; if(y>height+ramme) y=-ramme;


// remove them if mouse moves fast
if(stuck && (abs(mouseX-pmouseX)>100 || abs(mouseY-pmouseY)>50)) {
stuck=false;
angle = degrees(mouseDirection())-90;
if(abs(mouseX-pmouseX)0.3) speed -= 0.01;

if(stuck) {
x = x + (mouseX-pmouseX);
y = y + (mouseY-pmouseY);
dotsize += 0.05;
klumpsize -=0.0015;

}
else {
if(dist(x,y,mouseX, mouseY)klumpsize-10) {
// AVSTANDEN MELLOM DOT OG KLUMP AVGJØR FART MOT KLUMP
x = x + (mouseX-x)/155;
y = y + (mouseY-y)/155;

}
else {
// CALCULATE POSITION
x = x + cos(radians(angle))*speed;
y = y + sin(radians(angle))*speed;


// CALCULATE ANGLE & ANGLE CHANGE
angle=angle+angleDir;
angleDir=angleDir+random(-0.3,0.3); // CHANGE
if(angleDir<-3) angleDir=-3; // MIN CHANGE else if(angleDir>3) angleDir=3; // MAX CHANGE


// FLIP DIRECTION EVER 50.FRAME
if(frameCount%50==0) angleDir=-angleDir;


}
// if close, make it stick
if(dist(x,y,mouseX, mouseY)<42>30)
stuck = true;

}

if(stuck == false && klumpsize<60>20) {
dotsize -= 0.06;
klumpsize +=0.003;
}


fill(255,0,0,180);
strokeWeight(10);
stroke(255,0,0,90);
ellipse(x,y,dotsize,dotsize);
}
}

float mouseDirection() {
return atan2(mouseX-pmouseX, mouseY-pmouseY);
}

void mousePressed(){


setup();
}




Drawing machine.



















http://www.box.net/public/87espqp9me

An organic generative design pattern that the user can effect.

Plasser snefnugg.

Snøkrystall komposisjon.

Snøkrystaller i statisk komposisjon.

Det er tre forskjellige str på stjernene, mer komplekse de som er store og dermed færre detaljer på de som er små.

Alle må gjerne ha litt gjennomsiktighet - da ser de mer 3dimesjonale ut - jeg syns at jo mindre de blir desto mer gjennomsiktighet kan de ha - itilegg går det ann å ha en variasjon i transparenten innen for de forskjellige str - slik du ser jeg har gjort - lagt i flere lag, det blir mer dybde i bildet.

Create one snow-crystal out of basic geometrical shapes.

jente

gutt


size(600,600);
noStroke();

//sol
fill(247,206,33);
ellipse(300,350,325,325);

fill(248,210,55);
ellipse(300,350,300,300);


//dråper
for(int counter=0; counter<500; counter++) {
fill(255, random(50,100));
ellipse(random(width),random(height),random(10,20),random(10,20));
}


warm-cold


size(600,600);
smooth();

//sol
fill(247,206,33);
ellipse(300,350,325,325);

fill(248,210,55);
ellipse(300,350,300,300);

//dråper
for(int x=35; x

hard

size(600,600);
smooth();
noStroke();
for(int counter=0; counter<500;>

soft

size(600,600);
smooth();
noStroke();
for(int counter=0; counter<500;>

passive-dynamic

void draw() {
size (600,600);
background(200);

if(mousePressed) {

fill(177,207,174);
rect(150,360,10,120);
fill(161,190,158);
rect(200,330,10,150);
fill(115,139,114);
rect(250,260,10,220);
fill(192,225,191);
rect(300,390,10,90);
fill(129,153,128);
rect(350,290,10,190);
fill(19,173,147);
rect(400,340,10,140);
fill(103,126,103);
rect(450,230,10,250);
}
else {

fill(192,225,191);
rect(150,400,10,80);
rect(200,400,10,80);
rect(250,400,10,80);
rect(300,400,10,80);
rect(350,400,10,80);
rect(400,400,10,80);
rect(450,400,10,80);

}
}


heavy-light med bevegelse


int size = 8;
int legth = 50;

int aSize; // Height of the shape
float aPos; // Position of shape
float aSpeed; // Speed of the shape
int aDirection = 1; // Left or Right

float bPos;
float bSpeed;
int bDirection = 1;

float cPos;
float cSpeed;
int cDirection = 1;

float dPos;
float dSpeed;
int dDirection = 1;


void setup()
{
size(600, 600);
framerate(60);
aPos = bPos = cPos = dPos = width/2;
}

void draw()
{
background(50);

if(mousePressed) {
background(200);
rect(100,100,450,450);
fill(150);
aSpeed = squared(aPos/float(width-size)) * 6.0;
aPos = aPos + ((aSpeed*8.0+0.75) * aDirection );
if (aPos > width-size || aPos < adirection =" aDirection" dspeed =" quadHump(dPos/float(width-size))" dpos =" dPos"> width-size || dPos < ddirection =" dDirection" sa =" (sa" sa =" sa*sa*sa*sa" sa =" (sa" sa =" sa*sa;"> 1) {
sa = 1;
}
return 1-sa;
}

float squared(float sa) {
sa = sa*sa;
return sa;
}


heavy-light


void setup()
{
size(600,600);
}

void draw() {
background(200);

if(mousePressed) {

// PLACE LIGHT GRAPHICS HERE

background(200);
rect(100,100,450,450);
fill(150);
rect(width/3,30,150,300);
fill(200);

}
else {

// PLACE HEAVY GRAPHICS HERE
background(75);
rect(100,100,450,450);
fill(25);
rect(width/3,500,300,150);
fill(75);
}
}


Idemyldring.


void setup() {
size(400,400);
smooth();
noStroke();
}

void draw() {
background(200);

for(int x=10; x

Make two original wall-patterns for a childeren-room using geometrical shapes and color.

A masculine boys room: gutt, robot, blå.

A feminine girls room: jente, blomster, rød.

Use geometrical shapes and play with color effects like contrast, complementary colors, chroma and saturation to express warm&cold, harmony&anarchy.

Warm and cold: blå og rød

Harmony and anarchy:

Draw two grayscale compositions made out of squares that express the feelings hard and soft.

Hard: spisse kanter

Soft: avrundede kanter

Play with the illusion of gravity or rhythm and draw 7 long rectangles in two compositions that express passive and dynamic.

Passive: ser statisk ut, vannrett, selvstendige.

Dynamic: ser ut til å være i bevegels, loddrett, inngår i hverandre.

Draw two compositions with two rectangles that together express heavy og light.

Heavy: Sort, opakt, fet, stor, tung (som langt ned i vinduet)

Light: hvit, transparent, liten, lett (langt opp).

6 september.

//til å begynne med, bare hele nummer
int position;
//tar med alle desimaler
float position2;

color myblue = color(0,0,255);

//nærmere beskrivelse av posisjonene må komme senere
position=17;

//position refererer til posisjonen bestemt over, x så y, vidden så høyden
rect(position, 50, 50, 50);

Påminnelser:

//lager ny posjtion
position=5;

//width=vidden på størrelsen av vinduet
//hight/4 betyr en fjerdedel av høyden

//fint for mange gjentagelser på en gang-kopierer det nedover
for(int i=0; i<5; i++)

//draw gjentas om og om igjen

//antall rammer som tegnes på nytt i sekundet
framerate(5);

-- er oppe i venstre hjørnet, ++ er nede i høyre hjørne

Processing.

Fasinerende at en gjeng med koder kan danne et bilde. Jeg dro nytte av å bruke koder fra learning/processing.org, der jeg forandret størrelser og posisjon på figurer, retning og hastighet på bevegelser.

Den første øvelsen tok utgangspunkt i tre sirkler, der fargen er en random rødnyanse, etter som hvor du beveger musen, samtidig så beveges den tredje sirkelen i takt med musen og den første sirkelen aktiveres med et klikk.


float fargenyanse;

void setup()
{
size(600,600);
smooth();
fargenyanse = random(255);
fill(mouseY,0,0);
}

void draw()
{

strokeWeight(2);
fill(mouseY,0,0,25);
if(mousePressed)
ellipse(150,150,200,200);
ellipse(300,150,200,200);
ellipse(150+mouseX,150+mouseY+random(20),200,200);
}



Oppgave 4.

Visual abstraction.

First week of processing: learn to take control over basic functions, geometrical shapes and color.

Processing.

Only type code!
Rektangel 10pix ned 10 inn, 50 bredt og 50 høyt:
rect(10,10,50,50);

Almost every line have to end with ;

For each line, trykk "play" for å se at du har fått til det du vil.

size spesifiserer størrelsen på vinduet
fill forteller om fargen

Rød og brun farge på bokstavene betyr at processing forstår hva ordet betyr.

Hvorfor programering?

Bruke som interaktiv verktøy på skjerm - kan fint bruke flash, til og med powerpoint for å vise til poenget.

;sier at instruksjonen er slutt og en ny begynner

//Før en linje betyr at linjen ikke gir en kommando til hva som skal skje men bare er til informasjone for den som leser det.

Visuell løsning.

Fysisk løsning.

Prosess.