Leporello Interattivo

Leporello interattivo

Matteo Loglio

Interaction design Cross Media Lab SUPSI 2012-13

Studente Nadia Vaerini Docenti Serena Cangiano Davide Fornari Matteo Loglio Licenza Credits interattivi

by Nadia Vaerini is licensed under a Creative Commons Attribution Share Alike

Leporello interattivo

Interaction design Cross Media Lab SUPSI 2012-13

Descrizione del progetto

L’installazione è stata realizzata per la messa in scena dello spettacolo teatrale “The Rape of Lucretia” tenutosi al Palazzo dei Congressi di Lugano il 5 maggio 2013. L’opera nasce grazie a una collaborazione SUPSI fra il Conservatorio della Svizzera italiana, la Scuola Teatro Dimitri e il corso di laurea in Comunicazione visiva del Dipartimento ambiente costruzioni e design. La postazione del Leporello interattivo consente all’utente di visualizzare dei contenuti supplementari che riguardano la realizzazione dello spettacolo e i relativi docenti.

Interfaccia e modalità d’interazione Il progetto comprende un computer e un Tinkerkit con diversi sensori, il tutto ricoperto da una struttura fisica in legno progettata appositamente.

L’interfaccia è un piano obliquo, un’infografica che raccoglie tutti i nomi delle persone che hanno partecipato alla realizzazione dello spettacolo “The Rape of Lucretia”. I nominativi sono incisi nel legno e sono suddivisi in quattro categorie: direzione artistica; esecuzione musicale Ensemble 900 del Conservatorio della Svizzera italiana; esecuzione teatrale degli studenti Bachelor of Arts in Theater della Scuola Teatro Dimitri; animazioni, video, progetto grafico e installazioni interattive degli studenti Bachelor of Arts in Comunicazione visiva. Solo alcuni di questi nominativi sono interattivi come ad esempio Francesco Bossaglia, l’assistente del direttore d’orchestra, che è inciso su un bottone di legno. Se quest’ultimo viene premuto dall’utente, il LED corrispondente si illumina e il video dell’intervista viene visualizzato sullo schermo di fronte. Le interviste ad Arturo Tamayo, Daniel Bausch, Franco Cavani e Roberto Valtancoli sono selezionabili attraverso un potenziometro di rotazione, mentre le interviste a Nicla Borioli Pozzorini e agli studenti dell’atelier di grafica possono essere scelte attraverso un potenziometro lineare. Ogni audiovideo ha una durata media di 1:30 minuti.

Tecnologia Il progetto è gestito dai software di Arduino e la versione demo di VDMX che controllano i sensori (potenziometro lineare, potenziometro di rotazione e bottone), gli attuatori (LED) e gli output audiovideo del Tinkerkit attraverso l’utilizzo di un codice.

Le interviste sono state realizzate dagli studenti che hanno frequentato il corso di video-backstage. Il mio 4

compito è stato quello di selezionarne delle parti e di aggiungere i nominativi di ogni intervistato con After Effect. Per quanto riguarda la parte fisica, tutte le componenti sono state disegnate in Illustrator per poi essere convertite in un file .dxf grazie al programma Inkscape, e ritagliate e incise dalla Lasercutter grazie al programma Lasercut. In seguito i pezzi di legno sono stati assemblati con delle viti.

Esperienza d’uso Il funzionamento del Leporello interattivo è intuitivo e semplice. L’utente è protagonista perché può scegliere quali funzioni azionare e non sono necessarie delle istruzioni in quanto l’affordance è immediata e funzionale.

Ricerca e contesto di sviluppo La postazione del Leporello interattivo permette di avere delle informazioni ulteriori riguardanti lo spettacolo, quindi potrebbe essere utilizzato in altri contesti simili per poter dare delle informazioni ulteriori.

Riferimenti Hirsch & Mann, Turing and interaction at the Science Museum in London http://www.hirschandmann.com/2012/turing-at-thescience-museum-london/ Waldek Wegrzyn, Electrolibrary Paper book as interface http://www.creativeapplications.net/objects/electrolibrary-by-waldek-wegrzyn-paper-book-as-interface/

Interaction design – SUPSI 2012-13

Documentazione fotografica

Installazione interattiva in azione

Interfaccia dell’installazione interattiva

5

Dettaglio dell’interfaccia – Potenziometro di rotazione

Dettaglio dell’interfaccia – Potenziometro lineare

6

Dettaglio dell’interfaccia – Bottone

Interaction design – SUPSI 2012-13

Potenziometro di rotazione in azione

Potenziometro lineare in azione

Bottone premuto

7

Prototipo dell’interfaccia su cartone

Prototipo dell’interfaccia e rispettivo posizionamento dei sensori e dei LED

8

Interaction design – SUPSI 2012-13

Prototipo dell’interfaccia in legno

Saldature per collegare i LED al TinkerKit

Parti in legno dei bottoni

9

Primo modellino del Leporello interattivo in carta

Secondo modellino del Leporello interattivo in carta con struttura interna

10

Interaction design – SUPSI 2012-13

Materiale

Software

Arduino

VDMX5 (demo)

LED 5mm colorati ×7

iMac 22'' ×1

Bottone ×1

Cavo USB ×1

Componenti

Potenziometro lineare ×1

Potenziometro di rotazione ×1

Cavo 3Pin ×10 Arduino Leonardo ×1 Shield model Tinkerkit sensor ×1

11

Codice Arduino

#include <Boards.h> //include TinkerKit library #include <TinkerKit.h> TKPotentiometer rpot(I0); TKPotentiometer lpot(I1); TKButton button1(I2); TKLed led0(O0); // Pin 11 on the Arduino is O0 on the shield.

TKLed led1(O1); // Pin 10 on the Arduino is O1 on the shield.

TKLed led2(O2); // Pin 9 on the Arduino is O2 on the shield.

TKLed led3(O3); // Pin 6 on the Arduino is O3 on the shield.

TKLed led4(O4); // Pin 5 on the Arduino is O4 on the shield.

TKLed led5(7); TKLed led6(4); int button1val; int button1Pval; int rpotPval; int lpotPval; int sensoreAttivo; boolean one = false; int potArea; void setup() { Serial.begin(9600); Keyboard.begin(); } //-----------------------------------------------------------------------------void loop() { button1val=button1.get(); int rpotval = rpot.get(); //ottenere i valori del sensore //Serial.println(rpotval); int lpotval = lpot.get(); //ottenere i valori del sensore //Serial.println(lpotval); if(abs(rpotval-rpotPval) > 1 ){ //se muoviamo il potenziometro abs è il valore assoluto sensoreAttivo = 0; //allora è attivo il sensore 0 one = true; } if(abs(lpotval-lpotPval) > 1 ){ //se muoviamo il potenziometro sensoreAttivo = 1; //allora è attivo il sensore 0 one = true; } if(button1val == HIGH && button1Pval == LOW){ sensoreAttivo = 2; } //-----------------------------------------------------------------------------switch(sensoreAttivo){ case 0: 12

Interaction design – SUPSI 2012-13

// potenziometro rotary // i 4 video del potenziometro di rotazione if(rpotval <210){ ledoff(); led3.on(); led3.brightness(1023); if(potArea != 1){ //Serial.println(“video1”); videoOn(‘a’); } potArea = 1; } if(rpotval >210 && rpotval<540){ ledoff(); led2.on(); led2.brightness(1023); if(potArea != 2){ //Serial.println(“video2”); videoOn(‘b’); } //video 2 potArea = 2; } if(rpotval >540 && rpotval<900){ ledoff(); led1.on(); led1.brightness(1023); if(potArea != 3){ //Serial.println(“video3”); videoOn(‘c’); } //video 3 potArea = 3; } if(rpotval >900){ ledoff(); led0.on(); //dled0.brightness(1023); if(potArea != 4){ //Serial.println(“video4”); videoOn(‘d’); } //video 4 potArea = 4; } break; //-----------------------------------------------------------------------------case 1: // potenziometro lineare if(lpotval <50){ ledoff(); led5.on(); if(potArea != 5){ 13

//Serial.println(“video5”); videoOn(‘e’); } //video 5 potArea = 5; } if(lpotval >900){ ledoff(); led4.on(); if(potArea != 6){ //Serial.println(“video6”); videoOn(‘f’); } //video 6 potArea = 6; } break; //-----------------------------------------------------------------------------case 2: // bottone1 ledoff(); led6.on(); if(button1val == HIGH && button1Pval == LOW){ videoOn(‘g’); //Serial.println(“video7”); } break; } //-----------------------------------------------------------------------------// i 2 video del potenziometro lineare button1Pval=button1val; rpotPval = rpotval; lpotPval = lpotval; //Serial.println(sensoreAttivo); } //-----------------------------------------------------------------------------void ledoff(){ led0.off(); led1.off(); led2.off(); led3.off(); led4.off(); led5.off(); led6.off(); } //-----------------------------------------------------------------------------void videoOn(char tasto){ //passiamo alla funzione il tasto della tastiera come carattere Keyboard.press(tasto); delay(50); //millisecondi tempo che tengo schiacciato lo spazio Keyboard.releaseAll(); } 14