Bedrijf
FISHEYE
INTERACTIEF BOEK studenten
docent
Q. DE CORTE & K. DE MEESTER
J. SALDIEN
vak
MENS-COMPUTER INTERACTIE
datum
JANUARI 2013
Dossier Quinten De Corte & Klaas De Meester
Inhoudsopgave Opdrachtstelling
1
Verwachtingen
1
Betrokken partijen
1
Aanpak
2
Planning
2
Gebruik aangeleerde technieken
2
Inspiratie
3
Idee-generatie
5
#1: Print en projectie
5
#2: Pagina herkennen
5
#3: Draaihoek pagina herkennen
5
#4: Interactiviteit
6
Idee-selectie
7
#1: Print en projectie
7
#2: Pagina herkennen
7
#3: Draaihoek pagina herkennen
7
#4: Interactiviteit
7
Inleiding concept
8
Verwachte interactie
Werking interface Algemene werking
8
9 9
Opbouw componenten
10
Logica van de interactie
10
Conclusie
11
Moeilijkheden
11
Advies voor toekomstige projecten
11
Advies voor toekomstige studenten
11
Opdrachtstelling Verwachtingen De opdracht bestond uit het onderzoeken van de mogelijkheden voor het creëren van een interactief portfolio, in de vorm van een boek (bestaande uit geprinte papieren bladzijden van 150 x 100 cm), dat op een standaard geplaatst wordt. Dit boek zou gebruikt kunnen worden op beurzen om de bezoekers op een unieke manier kennis te laten maken met het bedrijf. Het interactief boek zou een mix moeten worden van verschillende soorten media en allerhande technieken; traditionele media (de geprinte papieren bladzijden), virtuele tekst en/of animaties, video mapping, gemotoriseerde pagina’s, ... Aan ons om te onderzoeken wat de mogelijkheden waren!
Betrokken partijen De opdracht gaat uit van het bedrijf Fisheye, een Gents creatief mediabedrijf met internationale klanten die hulp nodig hadden bij conceptontwikkeling, projectbegeleiding, multimediatoepassingen, interactiviteit, technisch ontwerp, robotica, enz. Fisheye hielp hen daarbij, met behulp van camera-en lichtmannen, regisseurs, ontwerpers, 3D-beeldenbouwers, VJ’s, computer wizards, techneuten en mechaneuten die een multimediaal amalgama tot stand brengen met toffe concepten en ideeën als resultaat.
Quinten De Corte en Klaas De Meester zijn twee studenten uit het laatste jaar van de masteropleiding Elektronica - ICT, afstudeerrichting ICT, die ze volgen aan de Hogeschool van West-Vlaanderen. Ze hebben beiden voordien een bachelor in New Media & Communication Technology behaald aan dezelfde hogeschool en vorig jaar besloten om via een schakeljaar verder te studeren en een masterdiploma te behalen.
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
1 / 11
Aanpak Planning We zijn begonnen met het brainstormen over ons project; als eerste stap vroegen we ons af wat we precies nodig hadden. Om dit duidelijker te maken, maakten we een afspraak met Fisheye in Gent, in de hoop dat we hierdoor wat wijzer zouden worden over wat van ons verwacht werd. Uit het gesprek dat er volgde met Stijn Slabbinck kwamen enkele ideeën naar voren maar kwamen we eigenlijk al gauw tot de conclusie dat we hier zo ver in konden gaan als we wouden; we maakten dan ook de afspraak dat de uitgewerkte functionaliteit eerder beperkt zou zijn, maar degelijk uitgewerkt. Na het gesprek met Fisheye, startten we met het ontleden van het project: we deelden de geïdentificeerde ‘problemen’ op in deelproblemen, zoals hieronder te lezen is. Daarna onderzochten we welke technologieën en technieken reeds gebruikt worden en bepaalden we welke we in het project zouden kunnen implementeren.
Gebruik aangeleerde technieken Innowiz Innowiz is een manier om mensen door een innovatief proces te begeleiden en hen aan te moedigen om bepaalde creatieve technieken gebruiken. Het werd ontwikkeld door onderzoekers van het Industrial Design Center van de Hogeschool West-Vlaanderen in Kortrijk en bestaat ui 4 stappen: Een eerste stap is het definiëren van het probleem. Voor het interactief boekt vonden we dat de basis van het project uit volgende zaken bestond: - Er moest een mix van traditionele media en projectie gebruikt worden - Een pagina moest herkend worden, zodat de correcte data weergegeven kon worden. - De draaihoek van de pagina moest herkend worden, zodat we konden bepalen wanneer welke data
geprojecteerd moest worden. Vervolgens zochten we voor deelprobleem enkele ideeën die deze konden oplossen (zie hoofdstuk ideegeneratie) en onderzochten we welk van deze ideeën ons de beste oplossing leken (zie hoofdstuk idee-selectie). Na een selectie van ideeën te hebben gemaakt, hebben we getracht deze uit te werken. Design Principles
Visibility: duidelijk maken hoe de gebruiker met applicatie moet werken
Feedback: gebruiker feedback geven over zijn acties
Constraints: mogelijke acties die uitgevoerd kunnen worden beperken Consistency: gelijkaardige elementen voor gelijkaardige taken gebruiken in applicatie
Affordance: een hint geven aan de gebruiker wat er moet gebeuren: een knop dient om op te duwen, ... Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
2 / 11
Inspiratie De inspiratiebronnen voor het project kwamen vooral van het internet, waar we heel wat toffe interacties gezien hebben. Hierbij viel het op dat we voornamelijk ofwel volledig traditionele ofwel volledig digitale projecten vonden. Bij die laatste vond een interactie meestal door middel van gestures plaats, waarna de applicatie hierop reageerde. De enige mix van traditionele en nieuwe media die we wisten te vinden, was SketchSynth (zie hieronder). Voorbeeld traditionele media: Out of the box - book: http://vimeo.com/11784148
Voorbeeld digitaal boek: http://www.ted.com/talks/mike_matas.html
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
3 / 11
Voorbeeld digitale interactie dmv gestures: Nike bookstore Barcelona: http://www.youtube.com/watch?v=PnDNI5F_r-U
Voorbeeld interactie, mogelijk gemaakt op papier: SketchSynth: http://vimeo.com/42053193#at=0
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
4 / 11
Idee-generatie Wij zouden gaan uitzoeken wat de mogelijkheden hiervoor zijn: We begonnen met de vraag hoe we de twee soorten media konden combineren en keken vervolgens hoe we de pagina konden herkennen waarop het boek opengeslagen lag. Een derde item was hoe we de draaihoek van de pagina gingen herkennen, om zo te bepalen wanneer welke data geprojecteerd moet worden. Als laatste bekeken we hoe we interactiviteit konden toevoegen aan dit portfolio.
#1: Print en projectie We hebben enerzijds de fysieke pagina’s, waarop foto’s afgeprint staan. Hierbij moet er projectie van tekst/extra foto’s/video’s mogelijk zijn, om zo extra content aan de verschillende pagina’s toe te voegen. Het leek ons het eenvoudigst om data die geprojecteerd moet worden in een xml bestand op te slaan. Hiervoor kon dan voor elke titel/tekst/afbeelding/video de breedte, hoogte, x-en y-coördinaat worden meegegeven, zodat we wisten waar deze terecht moest komen. Al de onderdelen konden zo dan door het programma uitgelezen worden. Hiervoor komen dan bij het volgende onderdeel: hoe weten we welke data op welke pagina moet weergegeven worden?
#2: Pagina herkennen Hiervoor zagen we 3 mogelijke opties die we konden gebruiken: Ten eerste kon de layout van de pagina, de vorm ervan, herkend worden. Een tweede optie was om elke pagina een kleurcode te geven en dit in het design te verwerken, om zo de verschillende pagina’s te herkennen. Een derde optie was om via een QR code aan te duiden op welke pagina het boek was opengeslagen en via die code dan de correcte data op te halen.
#3: Draaihoek pagina herkennen Als we de draaihoek van de pagina konden herkennen, konden we bepalen wanneer er naar een volgende pagina moest overgeschakeld worden (en dus wanneer er andere data moest geprojecteerd worden). Een eerste idee hiervoor was om tussen de 2 pagina’s een roterende as te plaatsen met een potentiometer aan; deze zou de draaihoek kunnen bijhouden waarover een pagina gedraaid wordt. Na tests bleek dat dit niet echt praktisch mogelijk zou zijn, aangezien we nooit de potentiometer aan een bepaalde pagina kunnen linken, wat er op zou neerkomen dat elke pagina een eigen potentiometer zou moeten hebben, wat uiteraard niet mogelijk is. Het tweede idee, waarbij we een bepaalde vorm op de pagina voorzien en deze laten herkennen door een camera, was wél een optie. Door een bepaalde vorm te definiëren in een specifieke kleur, konden we bepalen waar een pagina zich in een ruimte bevindt.
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
5 / 11
#4: Interactiviteit Mogelijke interacties met de gebruiker waren: - De tekst animeren vanaf de bladzijden over een bepaald hoek gedraaid (opgeheven) werd. - Videomapping toepassen, zodat de pagina ‘tot leven’ kon komen - Video interactief maken door een play/pauze knop en een volumeregelaar aan de pagina toe te voegen - Mechanische as, die alle pagina’s automatisch terugdraait naar de eerste pagina als er op een geprojecteerde knop gedrukt wordt
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
6 / 11
Idee-selectie #1: Print en projectie Zoals hierboven reeds aangegeven, leek het ons het eenvoudigst om de data die geprojecteerd moet worden, in een xml bestand op te slaan. Hiervoor kan dan voor elk stukje data dat geprojecteerd moet worden de breedte, hoogte, x-en y-coördinaat worden meegegeven, zodat we wisten waar deze terecht moesten komen. Al de onderdelen kunnen op die manier door het programma uitgelezen worden.
#2: Pagina herkennen Van het eerste idee - het herkennen van de layout van de pagina - hebben vrij snel afgezien, aangezien dit ons zou beperken in de vormgeving van de verschillende pagina’s, wat toch niet zou mogen. Dus er bleven nog 2 ideeën over. Het tweede idee, de kleurcode, was niet zo slecht aangezien de RGB-waarde van een kleur vrij eenvoudig bepaald kan worden. Probleem hiermee is dat afhankelijk van licht en dergelijke een kleur vrij snel kan veranderen, waardoor de exacte RGB-waarde kan veranderen en dus foute kleuren kan herkennen (en dus foute data zou inladen). Dus bleef ons 3e idee nog over: de QR-code. Voordeel hieraan is dat we heel wat data hieraan kunnen toevoegen, zonder dat mensen die de QR-code scannen deze data te zien krijgen. Er wordt dus voor gezorgd dat de QR-code multifunctioneel is: het scannen van de code kan een gebruiker naar de website of online portfolio (eventueel aparte applicatie?) van Fisheye sturen, terwijl onze applicatie de extra toegevoegd informatie gebruikt om te bepalen welke pagina opengeslagen ligt. We hebben dan ook voor de QR-code gekozen om ervoor te zorgen dat we weten op welke pagina we zitten.
#3: Draaihoek pagina herkennen Zoals hierboven reeds aangegeven, was het eerste idee met de potentiometers niet realiseerbaar. We hebben dan ook voor het tweede idee gekozen, waarbij we een bepaalde vorm op de pagina voorzien en deze laten herkennen door een camera. Door een bepaalde vorm te definiëren in een specifieke kleur, konden we bepalen waar een pagina zich in een ruimte bevindt.
#4: Interactiviteit Interactiviteit hebben we door aanhoudende problemen en deels daaruit resulterend tijdsgebrek niet kunnen implementeren.
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
7 / 11
Inleiding concept Verwachte interactie Fisheye staat op een multimediabeurs en wilt op een unieke manier hun portfolio voorstellen aan de beursbezoekers. Zij voorzien hiervoor een standaard waarop een gigantisch boek ligt met pagina’s van 1,5 x 1 meter. Bezoekers zien het boek met op de voorkant het logo en komen uit nieuwsgierigheid dichter bij de standaard. Ze slaan het eerste blad om, waarna ze zien dat er geprinte foto’s op de bladzijden staan, maar dat de tekst geprojecteerd wordt, om zo meer uitleg te verschaffen bij de geprinte foto’s van succesvolle projecten van Fisheye. Op het moment dat ze het blad neerleggen, komen er van onderaan op het blad, langs de buitenkant van de verschillende bladzijden balkjes naar boven geschoten, die een soort van randtekening vormen, rondom de geprinte QR-code die reeds op de pagina aanwezig is. Op de tweede pagina staat een kader waarin een stilstaand beeld geprojecteerd wordt, met een knop met het typische ‘play’ logo naast, en iets dat op een slider lijkt. De bezoeker gaat met zijn vinger richting de getekende knop en duwt er op. Het ‘play’ logo verandert in een ‘pauze’ logo en de video begint te spelen, inclusief bijhorend geluid dat uit de boxen die rond het boek gepositioneerd staan komt. Nieuwsgierig verplaatst de bezoeker zijn vinger naar de slider en maakt een neerwaartse beweging; ogenblikkelijk gaat het audiovolume van de filmpje naar beneden. De bezoeker beslist verder te bladeren en pakt het blad vast. Op het moment dat hij blad wilt omdraaien, merkt hij dat alle geprojecteerde onderdelen naar de binnenkant van het boek beginnen te glijden. Op de volgende pagina komt er nieuwe informatie te staan, die begeleiding biedt voor andere projecten. Het oog van de bezoeker valt op een centrale kader waar er een afbeelding in staat, maar waar precies nog meer afbeeldingen links en rechts achter de voorste afbeelding staan. Intuïtief gaat de vinger van de bezoeker van rechts naar links, met als gevolg dat de foto die rechts van de voorste foto stond, nu vooraan komt te staan. Als hij enkele pagina’s verder zit, valt de animatie rond de QR-code hem nogmaals op. Nieuwsgierig neemt de bezoeker zijn smartphone en scant de QR-code. Hij wordt automatisch naar een online applicatie van Fisheye gestuurd, waar hij hun uitgebreide portfolio en contactinformatie vindt. Op de laatste pagina is er een grote knop met ‘Herstart ons verhaal.’ geprojecteerd. Op het moment dat de bezoeker hierop duwt, schiet er een motortje in gang die alle bladzijden automatisch terugdraait via een centrale as die alle bladzijden vasthoudt. Het boek kan nu door een nieuwe bezoeker doorbladerd worden.
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
8 / 11
Werking interface Algemene werking Uitleg is terug te vinden bij ‘verwachte interactie’ op de vorige pagina.
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
9 / 11
Opbouw componenten
De pagina’s, die zich op een standaard bevinden, kunnen door een gebruiker omgedraaid worden. De webcam leest de QR-code op de verschillende pagina’s (waardoor de gegevens bepaald worden die geprojecteerd moeten worden) en volgt ondertussen de gele bol die we gedefinieerd hebben. De projector zal de data die door QR-code bepaald is, projecteren op de fysieke pagina’s, dmv de coördinaten die uit de xml gehaald zijn.
Logica van de interactie Eenzelfde flowchart kan opgesteld worden voor de blobdetectie, die net zoals de QR-code lezer verschillende keren per seconde zijn zicht scant om te kijken of er een bol / QR-code aanwezig is. Als deze aanwezig is, wordt deze herkend en de coördinaten worden ervan bijgehouden, om op die manier een draaibeweging te registreren.
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
10 / 11
Conclusie Moeilijkheden - Het grootste punt van ergernis was dat Processing en OpenCV blijkbaar niet meer goed samenwerken sinds Processing 2.0. We hebben 2 weken lang gezocht naar een manier om Processing en OpenCV op een degelijke manier met elkaar te laten samenwerken, met slechts een half succes als resultaat. - Daarbij kwam nog eens dat de samenwerking tussen OpenCV en Mac OS moeilijker verloopt dan op Windows. - OpenCV verslindt ook graag veel geheugen, zeker als we dan video’s en dergelijke beginnen af te spelen. - Het is niet eenvoudig om projecten te testen, aangezien we zelf geen beamer hebben hangen thuis en het bereik van de webcam die we gebruikt hebben relatief beperkt was. - Het is ook niet eenvoudig om de opstelling goed te krijgen, zodat alles juist geprojecteerd wordt. Afhankelijk van de afstand van de projector tot het boek, moet de data andere coördinaten meekrijgen.
Advies voor toekomstige projecten We vonden het project té uitgebreid en de tijdspanne waarin het moest vervolledigd worden nogal kort, vooral in combinatie met de andere vakken (en vele projecten) die we dit semester gevolgd hebben. We zijn ervan overtuigd dat we een beter resultaat hadden kunnen afleveren indien we hiervoor meer tijd hadden kunnen uitrekken. Daarnaast hebben we heel wat pech gekend, wat het afwerken van ons project ook parten heeft gespeeld. Voor eigen toekomstige projecten hebben we geleerd om sneller ideeën uit een brainstorm voor te leggen aan mensen die heel wat meer kennis hebben omtrent het project waar we met bezig zijn. De Innowiz en Wizard of Oz-technieken nemen we, net als de design principes die we gezien hebben, zeker mee naar volgende projecten, waarbij we ze uitgebreider gaan gebruiken
Advies voor toekomstige studenten - Sneller vragen stellen - Meer overleg proberen plegen (met elkaar én met docenten/projectbegeleiders) - Mensen zoeken die kennis van zake hebben en je door die mensen laten begeleiden. - Projecten niet uitstellen en tijd incalculeren voor problemen.
Quinten De Corte & Klaas De Meester
Mens-Computer Interactie
Januari 2013
11 / 11
