Pattern emergenti dal design dell'interazione

"It is unfortunate that the teaching of design often concentrates almost exclusively on the visual aspect of things -- worse still, without its reformulation as propositional knowledge."

Jorge Frascara, in Design Issues 23(4), 2007

La Programmazione nel Design dell'Interazione Un oggetto interattivo contiene almeno alcune delle seguenti componenti: sensori, attuatori, microprocessore, collegamento telematico. Queste componenti, per poter essere di supporto ad una qualsiasi forma di interazione, devono essere programmate. Il design dell'interazione, quando arriva alla costruzione di prototipi che consentano di esperire l'interazione in maniera diretta e veridica, non può prescindere dalla formulazione di programmi informatici. Questi sono una combinazione di algoritmi e strutture dati, cioè di metodi per organizzare e manipolare in maniera efficiente ed efficace le informazioni. In realtà, strumenti di programmazione efficienti si possono usare in tutte le attività che normalmente precedono o costituiscono il design di un prodotto interattivo: Basic design Sketching Prototyping

Basic Design Nella progettazione di oggetti interattivi, in special modo se basati su interazione multisensoriale continua, ci sono molti gradi di libertà e lo spazio di progettazione risulta vastissimo. Una strategia per affrontarlo è quella di pensare costruttivamente in termini di fenomeni elementari. Cioè, dovremmo cercare le interaction gestalt, astraendole dalle interazioni effettivamente effettuate. Questo processo è facilitato dalla pratica pedagogica del basic design, nella quale gli studenti affinano le proprie abilità compositive mediante la ricerca di soluzioni a problemi ben posti, e per condivisione e discussione dei risultati. Il basic design non è orientato al prodotto, e si svolge per esercitazioni che esplorano le direzioni: Esperienza sensoriale diretta; Oggettivizzazione dell'esperienza a livello intellettuale; Realizzazione per sintesi di fenomeni. The body of basics (C. Chiappini, 2007): "L'obiettivo dell'esercitazione è quello di ricavare un percorso interattivo attraverso delle immagini di azioni del vostro corpo". Risultati. Multi-stage yet continuos coupling (Rocchesso e Polotti, 2008): "L'obiettivo dell'esercitazione è quello di progettare il feedback multisensoriale per una connessione a vite (come quella della moka) in modo che il raggiungimento del giusto punto di chiusura sia facile, continuo, ed espressivo".

Sketching Lo sketching è una attività archetipica del processo di design. Il fatto che lo sketching tradizionalmente usato in architettura e nel design di prodotto non sia più adeguato pone la questione su cosa significhi fare sketching nel design dell'interazione (

Sketching User Experiences -- Bill Buxton; Morgan Kaufmann, 2007

, Buxton's web site). Tra le sue caratteristiche importanti, troviamo: Velocità Collezionabilità Bassa risoluzione Evocazione al posto di ri-produzione Gli sketch servono a facilitare una miglior comprensione del problema e, quindi, a generare nuove idee. Così come nel brainstorming, la quantità è più importante della qualità. È normale, nelle fasi iniziali di un design, produrre molti sketch e confrontarli per giustapposizione. Se ci sono pattern importanti, questi dovrebbero emergere a prima vista. Una collezione di sketch abilita il confronto dialogico, come nel basic design. Sugli sketch non si fa valutazione. Attraverso gli sketch si cercano soluzioni.

Prototyping Spesso, lo sketching viene visto come prototipazione a bassa fedeltà. Tuttavia, mentre gli sketch hanno uno scopo principalmente generativo, i prototipi sono prodotti a fine di valutazione. Sketch vs. Prototype (Bill Buxton) SKETCH PROTOTYPE evocative didactic suggest describe explore refine question answer propose test provoke resolve tentative specific non committal depiction

Le tre attività di basic design, sketching, e prototyping sono diverse e non c'è tra esse una relazione d'ordine. Nelle esercitazioni di basic design, si può procedere per produzione rapida di molti esemplari di soluzione (come nello sketching) e raffinarne alcuni per sottoporli a valutazione (come nel prototyping). Nel design dell'interazione, è importante avere materiali, strumenti, e tecniche adeguate a tutte e tre le attività descritte. Processing è un linguaggio e un ambiente di sviluppo adeguato per buona parte di questi scopi. È interessante notare come i programmi Processing vengano chiamati sketch, a enfatizzare la velocità con cui si possono ottenere bozzetti interattivi, utili a esplorare un vasto ventaglio di soluzioni.

Emergenza dall'Esperienza Nel Laboratorio di Prototipazione di Artefatti Interattivi, gli studenti di Gillian Crampton Smith e Philip Tabor hanno sviluppato alcuni prototipi di oggetti interattivi. Nel corso della realizzazione dei progetti si sono evidenziati alcuni problemi di programmazione, per i quali sono state trovate soluzioni ad hoc. Molti di questi problemi si ritrovano in molti ambiti diversi, e vale la pena di analizzarli per studiare delle soluzioni efficaci e di applicabilità generale. Progetti del 2007: Aequilibrium Object Oriented Programming (the fish class) Ray tracing: distance, direction, reflection (of the fish) Oscillations (of fish tails) Flyer Cafe Using a library API (reacTIVision) Stack (of geometric transformations) Object Oriented Programming (not used yet) Secret Garden Using a library API (BlobDetection) Filtering (temporal smoothing) Thresholding, hysteresis, and adaptation Timers That Sinking Feeling Multithreading (not used yet) Oscillations (waves) Timers Tree of Life Mapping (distance to pixels) Timers Using a library API (Sonia, Video) Thresholding and hysteresis Venice 360 Using a library API (Sonia) Thresholding and hysteresis Buffers (audio) WAV Oscillations (visual wave) Matrices (of LEDs) Timers (in visual programming) Multiplexing/demultiplexing (in visual programming) Progetti del 2008: Si presentano pattern di programmazione simili a quelli dell'anno precedente. In alcuni casi si registra la necessità di fare comunicare tra loro applicazioni diverse (client-server).

Pattern Nel design degli artefatti interattivi, così come in altre aree della progettazione, si può procedere alla risoluzione di un problema mediante identificazione di pattern, cioè di configurazioni che ricorrono sovente, e per le quali esistono soluzioni di efficacia consolidata. Un pattern si può descrivere mediante alcuni campi, tra i quali: Esempio (es., un sensore rileva la posizione di una persona in un corridoio, un'immagine sulla parete segue la persona come un'ombra) Problema (es., il sensore produce numeri che dipendono nonlinearmente dalla distanza in metri. Lo spazio dell'immagine sulla parete è misurabile in pixel. Come traduco in pixel i numeri prodotti dal sensore?) Vincoli (es., la traduzione deve essere efficiente e precisa in tutti i punti) Principio (es., è un mapping non lineare uno-a-uno) Soluzione (es., Se ho mille pixel, posso riempire un array di mille celle con i valori misurati dal sensore, eventualmente interpolando a partire da poche misure. Tuttavia, a me serve la mappa inversa, che dal sensore va ai pixel. Cioè, dovrei trovare l'indice di una cella dell'array dato il suo contenuto. Una maniera per rendere efficiente l'accesso per contenuto è di organizzare una struttura dati che si chiama hash. Oppure, usando l'array ordinato proveniente dalle misure, posso effettuare una ricerca per bisezione.)

Riferimenti Al mondo ci sono più testi di programmazione che esemplari di Panda gigante. Molti di questi sono buoni e utili, e pochi tra i buoni e gli utili sono liberamente accessibili. In particolare, segnalo per la sua chiarezza e compattezza il free book

How to Think Like a Computer Scientist: Java Version -- Allen B. Downey; Green Tea Press 2003

. E' anche accessibile nei suoi contenuti

Data Structures and Algorithms with Object-Oriented Design Patterns in Java -- Bruno R. Preiss, John Wiley and Sons 1999

. Tra i vari linguaggi ai quali fanno riferimento i manuali di programmazione, certamente Java è quello più indicato per gli utilizzatori di Processing, visto che Processing è costruito su Java, e di questo mette a disposizione l'intero repertorio di classi. Gli autori di Processing hanno scritto il libro

Processing: A Programming Handbook for Visual Designers and Artists -- Casey Reas and Ben Fry, MIT Press 2007

. Un buon testo di introduzione alla programmazione in Processing è

Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction -- Daniel Shiffman, Morgan Kaufmann, 2008

There is a crowd of autonomous communicating creatures in a room, like in a cocktail party. Each has some kind of visual display, such as a light bulb. You want to select one individual in the crowd and make that selection known to everybody by coordinating individual light modulations. One possibility is a propagating wavefront, like in Mexican waves at the stadium. A Processing sketch to test this phenomenon can be written in less than fifteen minutes. Click over the window produced by the following code:


   
int NOBJ = 100;
int WINSIZE = 100;
int[] objects_x = new int[NOBJ];
int[] objects_y = new int[NOBJ];
int[] distance = new int[NOBJ];
int counter = 0;

void setup() {
 size(WINSIZE, WINSIZE); 
 for (int i=0; i<NOBJ; i++) { 
   objects_x[i] = int(random(0, WINSIZE-1));
   objects_y[i] = int(random(0, WINSIZE-1));   
 }  
}

void mouseReleased() {
 for (int i=0; i<NOBJ; i++) {  
   distance[i] = int(sqrt(sq(objects_x[i] - mouseX) + sq(objects_y[i] - mouseY)));
 }
 counter = 0;
}

void draw() {
  background(200);
  counter = counter+1;
  for (int i=0; i<NOBJ; i++) {  
    if (distance[i] == counter){
      strokeWeight(4);
      point(objects_x[i], objects_y[i]);
    }
    else {
      strokeWeight(2);
      point(objects_x[i], objects_y[i]);
    }
  }
}

Modify the sketch of problem to implement an imploding wavefront, and compare the two simulations to see which is the most effective for highlighting one individual in the crowd. Click over the window produced by the following code:


   
int NOBJ = 100;
int WINSIZE = 100;
int[] objects_x = new int[NOBJ];
int[] objects_y = new int[NOBJ];
int[] distance = new int[NOBJ];
int counter = 0;

void setup() {
 size(WINSIZE, WINSIZE); 
 for (int i=0; i<NOBJ; i++) { 
   objects_x[i] = int(random(0, WINSIZE-1));
   objects_y[i] = int(random(0, WINSIZE-1));   
 }  
}

void mouseReleased() {
 for (int i=0; i<NOBJ; i++) {  
   distance[i] = int(sqrt(sq(objects_x[i] - mouseX) + sq(objects_y[i] - mouseY)));
 }
 counter = WINSIZE - 1;
}

void draw() {
  background(200);
  counter = counter - 1;
  for (int i=0; i<NOBJ; i++) {  //ciclo for 
    if (distance[i] == counter){
      strokeWeight(4);
      point(objects_x[i], objects_y[i]);
    }
    else {
      strokeWeight(2);
      point(objects_x[i], objects_y[i]);
    }
  }
}

A crowd in a room is not static. Add a sort of random walk to the sketch of problem , and you will notice that the wavefront becomes barely visible. You will need to play with color to making it noticeable again. Click over the window produced by the following code:


   
int NOBJ = 100;
int WINSIZE = 100;
int[] objects_x = new int[NOBJ];
int[] objects_y = new int[NOBJ];
int[] distance = new int[NOBJ];
int counter = 0;
float randomConstant = 1.1;

void setup() {
 size(WINSIZE, WINSIZE); 
 for (int i=0; i<NOBJ; i++) { 
   objects_x[i] = int(random(0, WINSIZE-1));
   objects_y[i] = int(random(0, WINSIZE-1));   
 }  
 frameRate(WINSIZE/2);
}

void mouseReleased() {
 for (int i=0; i<NOBJ; i++) {  
   distance[i] = int(sqrt(sq(objects_x[i] - mouseX) + sq(objects_y[i] - mouseY)));
 }
 counter = WINSIZE - 1;
}

void draw() {
  background(200);
  counter = counter - 1;
  for (int i=0; i<NOBJ; i++) { 
    objects_x[i] =constrain(objects_x[i]+int(random(-randomConstant,randomConstant)), 
       0, WINSIZE-1);	    
    objects_y[i] =constrain(objects_y[i]+int(random(-randomConstant,randomConstant)), 
       0, WINSIZE-1);	    
    if (distance[i] == counter){
      strokeWeight(8);
      stroke(255,0,0);
      point(objects_x[i], objects_y[i]);
    }
    else {
      strokeWeight(2);
      stroke(120,120,0);
      point(objects_x[i], objects_y[i]);
    }
  }
}