Reflact interactieve installatie Scriptie afstudeerproject
1
betreft. Scriptie afstudeerproject door. Saro Van Cleynenbreugel voor. Gwen van Iersel en Iris Douma datum. 1 july 2010
2
Voorwoord Toen ik in Januari 2010 mijn stage bij Mediamatic bijna afgerond had stuurde ik een mailtje naar het Medialab dat ik interesse had in de projecten. Ze stuurden terug dat ze wel belangstelling hadden in mijn kunnen. Mijn voorkeur lag bij twee projecten. Het eerste was het urban projectie project waarbij je de uitdaging kreeg om een interactieve installatie te ontwerpen waarbij grote straatprojecties gebruikt werden. Het andere project was het Scryptionproject. Ik heb voor het Scryptionproject gekozen omdat er meer vrijheid was om gekke ideeën te bedenken en omdat het urban screen project mij te groot leek. Daardoor zou ik naar mijn idee minder leren. Van McLuhan had ik toen nog niet gehoord, maar het klonk allemaal wel spannend. Mij idee was om meer te gaan leren over de Arduino en hoe je dit het beste in kan zetten bij het maken van interactieve installaties. Een Arduino is een electronisch platform om eenvoudig met sensoren te werken. Aangezien we alle vrijheid hadden in het bouwen van een interactieve installatie had ik het idee dat dit hiervoor een mooie kans was. Ik kwam te zitten in een team van drie studenten (later vier) en Iris Douma als onze project leider. De mensen in mijn team waren: Noraly Schiet was de onderzoeker, project manager en verantwoordelijke voor algemene documentatie. Susann Masslau was onze designer en interaction designer. Mijn functie was programmeur en technische bouwer. Later kwam Stefano Vargiu er bij. Hij hield zich bezig met het 3D modelleren van onze installatie en hielp mee met opbouwen van de installatie en het uitvoeren van tests. Tijdens mijn project had ik ook mensen die mij bijstonden bij het maken van de software en het herzien van mijn werk. Deze ‘externe professionals’ waren Kasper Kamperman (hij is leraar aan de academie voor kunst en techniek in Enschede en hij werkt in het Medialab als technische ondersteuning. Hij heeft veel tijd gestoken in mij en zo in ons project) en Leo van der Veen (hij is in kunstenaar en installatie bouwer, vrij technisch van aard). In het begin van het project had ik nog Ubi de Feo (hij is electronisch engineer) als externe professional maar, hij werd zodra ik in de gaten kreeg dat er geen Arduino meer gebruikt ging worden werd hij vervangen door Leo en Kasper. Ook heb ik twee feedback momenten gehad met Machiel Veldkamp (werknemer bij Mediamatic). Hij bouwt ook installaties in Processing en beheerst de techniek heel goed. Helaas had hij het gedurende mijn afstudeerproject erg druk met twee eigen projecten.
3
Inleiding In dit document ga ik het hebben over het verloop van het project. Ik ga vertellen hoe we tot het concept zijn gekomen, over het voor onderzoek en over de creatieve sessies. Ik ga vertellen hoe de realisatie van de installatie is verlopen, de stappen die we ondernomen hebben, de tegenslagen die we gehad hebben en wat mijn leermomenten waren.
Introductie [5]
Zo werkt de installatie Vraagstelling Doelstelling Deelvragen Gebruikte methoden Gebruikte materialen Mijn taken Theoretische achtergrond
De doorlopen fasen [8]
Onderzoeks fase Concept fase Design fase Bouw fase
Leermomenten [15] Conclusie [17] Aanbevelingen [18] Feedback van externe professional [19] Bijlagen [20] Afstudeerprojectplan
Technisch specificatie document Plan van aanpak Technische research Globale project planning Literatuurlijst
Literatuurlijst [41]
4
Introductie Het Scryption museum is zich na de heropening meer gaan richten op jonge professionals. Het Scryption vroeg aan ons een interactieve installatie te maken voor in het bijzonder de tentoonstelling over Marshall McLuhan in het thema ‘Understanding media’. De installatie moet een link hebben met een theorie van McLuhan. McLuhan is een filosoof die voornamelijk beroemd is geworden vanwege zijn studie naar media en naar de invloed van media op ons denken.
Zo werkt de installatie Je komt aan en je ziet grote panelen waarop ons logo te zien is dat groot ‘Reflact’ zegt, de vraag ‘Wie ben jij in de digitale wereld?’. Daar tegenover een quote van McLuhan, ‘We shape our tools and afterwards our tools shape us’, en uitleg over zijn filosofie. Verder zie je een donker kamertje waar het naartoe leidt. Hier zie je een spiegel en een groot paneel dat vraagt: ‘Who are you?’ Tussen de spiegels in hangen een toetsenbord en instructies waarop staat hoe de installatie in zijn werk gaat. De bezoeker kijkt in de spiegel links van hem en realiseert zich: dit ben ik, dit is mijn hoofd, mijn lichaam ik identificeer mij met mijn spiegelbeeld. Vervolgens kijkt hij naar rechts. Hij ziet de vraag en beantwoordt die door zijn voor- en achternaam in te vullen. Hierna ziet hij dat het paneel zich als een spiegel begint te gedragen. Hij ziet zijn eigen silhouet alleen nu is het niet zijn hoofd, zijn lichaam maar zijn het foto’s en stukken tekst die hij herkent en niet herkent. Dit is zijn digitale zelf. Vraagstelling Onze hoofdvraag tijdens de research was: hoe breng je de filosofie van mcLuhan over door middel van een ervaringsinstallatie?
5
Doelstelling De doelgroep van de installatie is young professionals en het museum denkt dat young professionals zelf het beste weten hoe ze voor zichzelf iets leuks moeten maken. Daarom vragen ze studenten om dingen in het museum te maken. Het museum wilde iets interactiefs omdat dat de doelgroep aanspreekt, je kan zelf participeren. Ook wilden ze dat de installatie de gedachte van mcLuhan zou communiceren en op deze manier de doelgroep media bewust of wijs maakt. Deelvragen De deelvragen die we tijdens onze research gebruikten, waren: Hoe ziet een aantrekkelijke installatie voor onze doelgroep er uit? Bij een aantrekkelijke installatie kun je met meerdere mensen tegelijk participeren en hij wekt discussie op. Dit doe je doormiddel van een ervaring die de installatie de gebruiker geeft, de gebruiker wil graag participeren en actief deelnemen. Wat voor interactie werkt er eigenlijk voor een groep? Een natuurlijke en eenvoudige interactie die je samen kunt beleven. De interactie spreekt voor zich en werkt in principe zonder enige uitleg. Welk idee van McLuhan willen we bij de bezoeker overbrengen? We willen de bezoeker bewust maken van het feit dat de manier waarop ze het internet vormgeven uiteindelijk een online identiteit ten gevolge heeft. Waar zetten we de installatie neer, wat is de ruimte? De installatie wordt neergezet op verschillende locaties. In eerste instantie gingen we uit van het Scryption als hoofdlocatie. We hebben toen gekeken naar lichtomstandigheden en de grootte van de ruimte. Dit hebben we ook gedaan voor de kantine op school, de expositieruimte op school en uiteindelijk voor het Trouw gebouw. Welk platform (technisch) kunnen we het best gebruiken bij wat voor soort installatie? Er zijn veel platformen die in de installatie wereld. En ze zijn allemaal dusdanig ontwikkeld dat ook een niet diehard programmeur er mee kan werken. Ik heb in mijn technisch onderzoek vijf platformen nader bekeken: de Arduino, Flash AS3, Max MSP, OpenFrameworks en Processing. Gebruikte methoden We hebben brainstormsessies gehouden, we hebben veel excursies gemaakt, interviews met andere kunstenaars en experts gehouden, we hebben usecase scenario’s gemaakt, een storyboard gemaakt, we hebben een ontwerpdocument, een technisch document en een research document gemaakt. Verder hebben we veel vergaderd en veel planningen gemaakt. Voor meer uitleg verwijs ik naar de hoofdstukken die verdeeld zijn in de fases van ons project.
Voor de grote weergave verwijs ik naar de bijlage
6
Gebruikte materialen De materialen in de installatie zijn: hout, blinderende doek, wit polyester paneel, grote panelen voor de prints, schroeven, matte zwarte verf, lampen met IR filters, metalen frames voor de panelen, gaffer tape, spiegel, plexiglas paneel met spiegelfolie De gebruikte hardware in de installatie is: Een wireless toetsenbord, beamer, computer, videocamera met IR gevoelige chip en IR filter, de nodige snoeren en kabels. Voor de software gebruikten we Processing, Mac OSX en internet. Mijn taken Mijn officiële taak binnen het team was om alle technische aspecten te realiseren en erover na te denken. Hieronder viel het technische onderzoek, waarbij ik analyseerde welke platforms er zijn en wat hun sterke en zwakke kanten zijn. Ook was het communiceren van de technische mogelijkheden naar het team toe, met name de designer (omdat zij het moet ontwerpen), mijn taak. Verder heb ik verschillende materialen onderzocht, onder andere voor de projectie van onze installatie. Ik keek naar welk materiaal het beste doorzicht gaf voor de camera en tegelijkertijd voor een mooie projectie zorgde. Iedereen had zijn specifieke eigen taken, zoals ik heb beschreven in het voorwoord. Uiteindelijk met het opbouwen van de constructie hebben we allemaal dynamisch samengewerkt. Theoretische achtergrond De theoretische achtergrond van de installatie is gebaseerd op McLuhan, media filosoof / theoreticus. Het was echt een man die wel iets te zeggen had over media en hoe media in de toekomst de wereld zou vormen. Hij was best wel sceptisch tegenover media omdat je naar zijn idee geen controle kon hebben over media maar je kon alleen maar haar effecten bestuderen, en dat deed hij dan ook. Hij vergeleek de technologie met ons zenuwstelsel wat wij buiten onszelf en om ons heen plaatsen. Iedereen kan deelnemen aan dit zenuwstelsel. McLuhan’s meest sprekende quote is ‘The Medium is the Message’ wat wil zeggen dat het medium in grote mate bijdraagt aan wat de eigenlijke boodschap is. Bij het zenden van een boodschap moet je het juiste medium in je beslissing meenemen. Wij hebben voor het medium van een interactieve ervaringsinstallatie gekozen omdat het een duidelijke boodschap overbrengt naar de gebruiker toe. Onze installatie werkt krachtig omdat we niet gaan lopen zwabberen om de filosofieën van McLuhan maar omdat we er één ding uitgevist hebben en dit sterk verbeeld hebben. We zijn geen teksten gaan voorleggen aan de bezoekers of lange video’s die het ene oor ingaan en de neus weer uit maar geven een krachtige boodschap mee die de gebruiker vervreemd en op zijn beurt doet nadenken. Op onze installatie staat een quote van McLuhan uit 1964: ‘We shape our tools, and afterwards our tools shape us’. Wij geven het internet vorm en het internet geeft ons vorm door wat we erop hebben gezet. Wat ik en anderen onder mijn naam op het internet hebben gezet vormt mijn online identiteit. De installatie vertelt op een duidelijke manier dat er naast je eigen identiteit zoals je jezelf ziet in de spiegel en de gedachten die je bij jezelf hebt, er een digitale identiteit is die we gevisualiseerd hebben door middel van een digitale spiegel. Hij geeft ook jou weer, alleen zie je niet je fysieke zelf maar hoe je eruit ziet op het internet en wat er over jou gezegd wordt op het internet.
7
De doorlopen fasen Schematische weergave van de verloop van het project
Onderzoeks fase Voor het komen tot een goed concept hebben we ons in het begin veel verdiept in wie McLuhan is en wat zijn ideeën waren. Hiervoor heeft Noraly literatuur aangehaald (boeken van McLuhan), we hebben een documentaire over hem bekeken en veel overleg gepleegd met voornamelijk Robert aangezien hij gespecialiseerd is in de theorieën van McLuhan. Robert werkt aan de HvA en bij ons project hielp hij met de communicatie tussen het Scryption en ons project team. Ik heb onderzoek gedaan naar verschillende technische aspecten. Zo heb ik verschillende platformen onderzocht die veelal gebruikt worden bij het maken van kunstinstallaties. Platformen waar ik onderzoek naar heb gedaan zijn: Arduino, Flash, MaxMSP, Processing en openFrameworks. Ik heb gekeken in naar welk platform je het beste kunt gebruiken bij welke vorm van interactie. Dat is ook handig geweest voor mijn algemene kennis over wat er nu eigenlijk mogelijk is. Dit waren mijn bevindingen:
8
Arduino Om de Arduino beter te leren kennen heb ik eerst een workshop gedaan bij Media-
matic bij Ubi de Feo. Hier heb ik geleerd hoe de Arduino werkt en hoe je het in kan zetten bij de bouw van applicaties. Ik heb tijdens de workshop mijn eerste programma’s voor de Arduino geschreven en wat geëxperimenteerd met de mogelijkheden. Zo heb ik een lichtsensor en een potentiometer gebruikt voor het regelen van een LED lampje. Dit is natuurlijk allemaal erg basic maar zodra je deze basics beheerst is het heel eenvoudig om wat voor sensor dan ook te gebruiken. Later heb ik nog verschillende voorbeelden gevonden van installaties die gerealiseerd waren met het gebruik van een Arduino. De Arduino werd dan gebruikt om bepaalde acties waar te nemen en vervolgens een reactie in gang te zetten. Eigenlijk kun je elke vorm van input gebruiken die je maar kunt bedenken omdat er gewoonweg overal wel een sensor voor is. De Arduino heeft een grote variatie aan toepassingsmogelijkheden doordat het gebruik maakt van elektronica. Elekronica maakt gebruik van natuurkundige wetten en is daardoor in veel dingen terug te vinden. De Arduino is slechts het middel om signalen op te vangen en processen in gang te zetten. Het platform maakt gebruik van een reeks input poorten die digitale en analoge signalen kunnen uitlezen en zenden. De input van sensoren kun je gemakkelijk omzetten in leesbare data door gebruik te maken van standaard code die je kant en klaar van het web kunt plukken. Dit komt omdat het platform vrij toegankelijk is en hierdoor een grote community heeft die al hun code deelt met de buitenwereld. Flash AS3 Met Flash en AS3 was ik al bekend, dit zijn tools waarmee ik heb leren werken tijdens mijn opleiding Interactieve Media. AS3 is erg handig voor het visueel maken van digitale data. Het word veelal gebruikt voor het maken van spellen, interactieve graphics, web templates en andere tooltjes voor op het web. Je kunt Flash ook goed combineren met het Arduino platform. Je leest dan de inputs die door de Arduino opgevangen worden uit en gebruikt die voor een variabele in AS3. Je kunt zo bijvoorbeeld de grote van een rondje controleren met de hoeveelheid licht dat er op de sensor komt. Of de positie van je hand ten opzichte van objecten op een beeldscherm uitlezen en aan de hand daarvan bepaalde objecten manipuleren. Max MSP Max MSP is een tool waarmee je gemakkelijk kunt programmeren op een visuele manier. Door bolletjes (die voor stukjes code staan) met elkaar te verbinden kun je gemakkelijk verschillende dingen in je code snel uitproberen en aanpassen. Ook behoud je op deze manier een goed overzicht over je code. Een nadeel van Max is dat het niet open source is en je dus eerst een geldige licentie moet aanschaffen. Wat hier ook nog eens bij komt is dat de community hierdoor wat minder groot is. Max wordt veel gebruikt voor audio en video processing. Bijvoorbeeld het mixen ervan. Processing Met Processing kun heel goed data visualiseren. Het is net als de Arduino open source en ondersteunt je hierdoor met een grote community. Net als Max MSP is het een krachtige tool voor video en audio processing. Een nadeel zou zijn dat ik aan het begin van het project nog geen ervaring had met deze tool maar ik wilde mij wel honderd procent inzetten om het onder de knie te krijgen. Doordat Processing gebruikt maakt van libraries waarmee je een hoop dingen kunt doen met minimale code is het gemakkelijk om mooie dingen te maken. Voor mijn onderzoek heb ik ook boeken geraadpleegd (Physical Computing van Dan O’Sullivan and Tom Igoe, Make: Electronics van Charles Platt) om te zien wat je eigenlijk kunt maken met elektronica. Deze achtergrond informatie was ook erg nuttig voor het bouwproces. Verder heb ik onderzoek gedaan naar sensoren en nagedacht over hoe je bepaalde sensoren kunt inzetten. Tijdens de onderzoeksfase heb ik verschillende exposities en 9
musea bezocht. Ik ben naar Trans Natural (Trouw gebouw), V2 (Rotterdam), TweeTakt (Utrecht), FabLab (Utrecht), DeCode (Londen), Science Museum (Londen) en naar Niet Normaal! (Amsterdam) geweest. Je kunt hier meer over lezen op onze blog, http://scryption.medialab.hva.nl Verder heb ik met Ubi de Feo een gesprek gehad over de technische realisatie van ons uitgekozen concept (toen nog de Google Mirror). We hebben het gehad over verschillende manieren van interactie en op welke manieren het gemaakt kan worden (technisch gekeken). Ik heb mezelf de vraag gesteld welk platform het beste bij wat voor interactie paste. Het platform zelf is vele malen geswitcht tijdens het ontwikkelproces. Zo was ik in de eerste instantie van plan om een Arduino te gebruiken maar later werd ons concept veel meer op het digitale vlak gericht en hierdoor was ik genoodzaakt om een keuze te maken tussen openFrameworks en Processing. We zijn tot de conclusie gekomen dat Processing het beste platform was om het mee aan te pakken, vooral omdat de ondersteunende community het grootst is. Hier staat meer over in het hoofdstuk ‘Leermomenten’. Concept fase Verder zijn we met verschillende mensen in gesprek gegaan om hun visie te horen over onze concepten. Dit waren veelal gesprekken met de klant zelf aangezien we het voor hun maakten en graag hadden dat ze met ons mee dachten en ook met Robert omdat hij veel weet over McLuhan’s theorieën. Ook hebben we met andere installatiebouwers gebrainstormd. Eerst met Leo van der Veen, hij is iemand die al langere tijd interactieve en niet interactieve installaties bouwt. Daarna hebben we met Levien Nordeman (onderzoeker media and education) en Jelle van der Ster (ontwerper van software en tools voor kunstenaars) nog een gesprek gehad over onze concepten en zij hebben ons vervolgens weer voorzien van inspiratie (Meer informatie over deze inspiratie kun je vinden op onze blog scryption.medialab.hva.nl). We deden individuele research die we tijdens vergaderingen bespraken, waarna we gezamenlijk gingen brainstormen. Ik zocht voorbeelden van installaties, Susann deed research naar typografie en interactie en ze maakte het design van ons logo en huisstijl, Noraly deed de theoretische research. Uiteindelijk hadden we toch wel zes concrete concepten op tafel liggen. Dat waren: The Hidden Quotes Dit was het concept om verschillende quotes in het museum te verstoppen in passende gerelateerde media. We hadden bijvoorbeeld het idee om op een bonnetje de quote te zetten: ‘cash is a poor man’s credit card’, en op de wc ‘food for the mind is like food for the body: the inputs are never the same as the output’. Drown in information Bij deze installatie wilden we de gebruiker laten ervaren hoe het is om een overdaad aan informatie te krijgen. Dit dachten we te doen door middel van een muur van water die om je heen omhoog rijst of letters die als regendruppels naar je toe komen of een ander idee door heel veel plaatjes en tekst achter elkaar op iemand af te vuren. The Google Forest Bij dit concept wilden we de gebruiker bewust maken van het feit dat Google maar een relatief klein deel van het internet ontsluit en dat Google eigenlijk een beetje bepaalt wat je te zien krijgt aan de hand van door hen geschreven algoritmes. ‘Forest’ omdat we het als een mystiek bos wilden maken waar je een beetje doorheen geleid wordt door paden die door Google voor je gelegd worden.
10
The Global Village Hierbij wilden we de bezoeker de gelegenheid geven om samen met andere bezoekers een soort community te creëren door ze de optie te geven om verschillende mediatypen vast te leggen op een fysieke locatie. Ze zouden postcards kunnen maken,
video’s en audio kunnen achterlaten. Een andere variatie op het idee was dat we een fysieke village maquette zouden bouwen waar je in de raampjes foto’s van personen kon zien en dat je door aan te bellen op een deurbel een berichtje kon afluisteren die die persoon daar achter had gelaten. Hot vs. Cool Media Bij dit concept was het de bedoeling om met media zelf de ervaring mee te geven of het een hot of een cold mediatype was. Dit sluit aan op een theorie van McLuhan waarbij hij onderscheid maakt tussen hot en cool media. We merkten dat we tijdens het uitdenken van deze concepten op een gegeven moment niet echt vordering meer maakten en tegelijkertijd hadden we nog steeds het gevoel dat het meesterwerk er nog niet tussen zat. Toen werd er tijdens een brainstormsessie een nieuw concept geboren wat we in het begin de ‘Google Mirror’ noemden en later Reflact. Het concept ontstond bij Iris in het atelier, of eigelijk aan de picknicktafel in de tuin onder de zon. We waren toen bezig met het evalueren van onze concepten. Ik weet niet meer hoe het precies is gekomen omdat we gewoon lekker aan het fantaseren waren en van het één komt het ander en zo kwam van de Google Forest de Google Mirror. Deze naam omdat het letterlijk een spiegel is die je silhouet laat zien op het scherm en omdat de installatie ook als doel heeft om zelf te reflecteren over hoe jij eruit ziet op het internet.
11
Design fase In de design fase heb ik nagedacht over de structuur van de software en de interactie met de gebruiker. Ik heb een flowchart gemaakt van de te nemen stappen in de software, dus wat gebeurt er in de software als een gebruiker zijn naam intypt en wat gebeurt er als de gebruiker voor de camera staat. Het was een onderverdeling van de te maken processen. (zie bijlage) Ik heb hem gemaakt om voor mezelf en voor anderen duidelijk te hebben wat de structuur van de software ging zijn. Het was een nuttig naslagwerk om te zien wat ik al gemaakt had en wat ik nog moest maken. Wel heb ik het te weinig aangepast gedurende de vordering van de code. Er zijn heel veel dingen veranderd, maar ik dacht al mijn tijd nodig te hebben voor het schrijven van de code en heb daarom geen tijd meer besteed aan het updaten van mijn flowchart. In het vervolg wil ik dit wel beter bijhouden om het overzicht te bewaken. Ook heb ik nagedacht over hoe de setup zou gaan zijn: de positie van de beamer, camera, panelen, lampen, etc. Het doel hierbij was om én een mooie projectie te hebben, én een goed zicht voor de camera te behouden. Eerst heb ik van opstelling een schets gemaakt.
Hierna heb ik een eerste testopstelling gemaakt om te zien hoe het in de praktijk werkte. Ik kwam er toen achter dat het er niet helemaal uitzag als ik wilde. Het moest anders kunnen maar hoe? Iris Douma had een idee voor een andere opstelling die lijkt op die van een multitouch tafel maar ik was nog niet overtuigd of dit ook zou werken met doorzicht. Later op het station van Tilburg was ik toch overtuigd dat het zou gaan werken en besloot ik om de opstelling te gaan testen. Eerst heb ik dit heel grof gedaan door te kijken of je doormiddel van infrarood filters door het projectiescherm heen kon kijken.
12
Bouw fase Tijdens de ontwikkeling van de software hebben we verschillende technieken geprobeerd voor het creëren van silhouetten en hoe objecten reageren en interactie hebben met de gebruiker. Libraries die we gebruikt hebben zijn Box2D (physics library) en OpenCV (video library met blobdetectie en gezichtsherkenning). Omdat ik in het begin nog niks afwist van Processing heb ik hulp moeten vragen aan verschillende externe professionals, waaronder Machiel Veldkamp, Leo van der Veen en Kasper Kamperman. Het is heel fijn om iemand te hebben om samen mee te programmeren, omdat je elkaar kunt inspireren. Zo hebben we de grenzen van Processing verkend. Ik heb veel gehad aan het boek ‘Learning Processing’ van Daniel Schiffman. Hij legt hierin heel duidelijk de basis van Processing uit. Halverwege de bouwfase heb ik ook een workshop bijgewoond van Daniel Schiffman, mede om mijn Processing skills aan te scherpen. ‘s Avonds gaf hij ook nog een lezing en liet hij onder andere veel inspirerend werk zien van zijn studenten in New York. Vóór de bouwfase heb ik deelgenomen aan het Prototyping Dev Camp dat Mediamatic toen organiseerde. Zo kreeg ik een mooie warmloper in Arduino’s en Processing voor het bouwen van de installatie. Tijdens deze knutselweek heb ik in een klein team een fiets ontwikkeld waarmee je muziek kunt maken. Door negen sensoren aan de fiets vast te snoeren op een Arduino en de data draadloos te versturen naar een andere Arduino die zorgt dat Processing het kan gebruiken om geluidseffecten aan te sturen. Deze installatie was naar aanleiding van de tentoonstelling ‘Sur Place’ over de stedelijke fietscultuur.
Een ander belangrijk punt was de materiaalkeuze voor het projectiescherm. Ons eerste idee was om een half doorlatende spiegel te gebruiken. We wilden het silhouet van de gebruiker visualiseren door gebruik te maken van een camera die achter de spiegel op de persoon gericht stond. Om de projectie op de spiegel uit te filteren maakte ik gebruik van een infrarood passthrough filter. Hierdoor zag de camera alleen maar het infrarood licht. Na uitvoerig testen bleek dat de half doorlatende spiegel te veel licht doorliet en dat de gebruiker hierdoor te veel licht in zijn ogen kreeg, wat voor enige frustratie zorgde. We hebben verschillende soorten folie gekocht en getest. De leesbaarheid van de content bleef toch dermate slecht dat we moesten overwegen om toch een ander materiaal te gebruiken. Zodoende zijn we gaan testen met speciale projec-
13
tiepanelen. Die panelen belemmerden het zicht van de camera wel erg en daardoor werd de belichting belangrijk. Dit zijn de testresultaten van de matrialen tests:
De verschillende spiegelfolies die ik getest heb kostten veel geld. Ik heb daarna voor het projectiepaneel wit polyester paneel getest. Voor een oplossing heb ik me laten inspireren door het Uturm team die een oplichtende muur gebruikten voor het detecteren van een silhouet. Hier heb ik toen snel een paar tests mee gedaan door een wit polyester paneel te belichten van achteren. Dat zorgde voor een egale oplichtende achtergrond en dat was wat we nodig hadden.
14
Leermomenten Natuurlijk heb ik tijdens mijn afstudeerproject een hoop geleerd, meer dan ik ooit had durven dromen. Ik werd in het diepe gegooid met nieuwe platformen waar ik nog maar vaag van gehoord had. Ik kreeg de kans om met professionals samen te werken die een rijke kennis in huis hebben met betrekking tot de software en de hardware. Doordat ik in een multidisciplinair team werkte kon ik mijn eigen ding doen en ook een steentje bijdragen aan de aanpak van de werkzaamheden en de kennis van mijn teamgenoten. Je leert uiteraard het meeste van blunders. Er is dus ook een heleboel fout gegaan. Ik ben letterlijk met vallen en opstaan over de finish gekomen. Bedenken hoe het werkt is één ding, maar in de praktijk zul je zien dat het realiseren toch altijd moeilijker gaat. Ik had bijvoorbeeld mijn keuze al gemaakt om het allemaal in openFrameworks te maken. Dit is immers open source en je kan er alles mee, real-time en nog snel ook. Ik had mijn eerste programmaatjes al snel werkende en het zag er behapbaar uit. Ik realiseerde me wel dat ik veel zou moeten leren maar dat had ik bij het begin van het project al bedacht. Toen ik dit voorstelde aan Iris en Kasper kreeg ik anders te horen. Iris vond Max MSP een goede keuze omdat ze dan zeker was van een goede afloop omdat haar vriend Leo van der Veen hier veel kennis van in huis heeft. Kasper Kamperman vond Processing een beter idee omdat dit een veel grotere communiy heeft omdat het platform langer bestaat dan openFrameworks en het zou eenvoudiger zijn om mee te werken. Kasper was er ook van verzekerd dat het snel genoeg zou zijn voor wat wij wilden maken. Ze hebben me overtuigd, dus ik liet openFrameworks vallen. Later bleek toch dat sommige real-time berekeningen iets te zwaar waren voor Processing en hier hebben we op moeten inspelen door zuinig te zijn op de rekenkracht. Ik heb ook geleerd dat communicatie heel belangrijk is. Het is goed als iedereen weet wie waarmee bezig is zodat je op één lijn blijft zitten. Volgens Iris was er op bepaalde momenten te weinig communicatie en zijn dingen hierdoor soms chaotisch verlopen. Volgens mij kun je deze dingen niet alleen op slechte communicatie schuiven en is het meer een verschil in werkstijl, wel heeft Iris mij de sterke punten van een goede communicatie laten inzien. Naar mijn idee moet niet alle tijd opgaan aan planningen maken en urenlange vergaderingen. Het is bijvoorbeeld erg belangrijk om tijd te reserveren voor dingen waar je zelf mee bezig bent tijdens het project, een designer richt zich op andere dingen in de researchfase dan een techneut. Tijdens het brainstormen worden de meest gekke dingen genoemd en soms wil je de neiging voelen (dat had ik een paar keer) om een idee absurd te noemen, of niet realistisch. Maar ook dan is het toch belangrijk om dat niet te doen, want als je dit doet zal je teamgenoot dichtslaan en niet meer zo gul zijn met zijn of haar creativiteit. Het ontwerpen van een interactieve installatie is erg moeilijk zonder het direct toe te passen in de praktijk. Je hebt als student nog maar weinig ervaring en hierdoor weinig inzicht voor het bedenken van oplossingen. Je moet nog veel proberen en leren. Ik raad dus ook aan om in toekomstige projecten het designen en bouwen meer te combineren, dus meer met een trial-and-error-systeem te werken om hierdoor gaandeweg tot een oplossing te komen. Hier moet je ook weer niet in doorslaan. We waren bijvoorbeeld aan het testen met de projectie op spiegelfolie, alleen was de projectie naar ons idee niet goed genoeg zichtbaar. Er moest dus een donkerdere folie komen om de projectie helderder te maken. We hadden het besteld zonder dat we het goed getest hadden, maar toen bleek dat het niet werkte. Uiteindelijk hadden we de keuze voor de donkerdere folie wel moeten maken aangezien we materialen nodig hadden tegen een strakke deadline en anders zouden we niets hebben om te laten zien op de opening van ‘Kennis Centrum’. Hierdoor waren we veel15
geld kwijt. Het leermoment was: ga niet zomaar conclusies trekken als je een geringe kennis van zaken hebt en wees in staat goede snelle keuzes te maken als de tijd dringt. Maar het meeste heb ik nog geleerd over het ontwikkelen van software op het Processing platform. Dit heb ik te danken aan de enorme steun die ik had aan Machiel, Kasper en Leo.
16
Conclusie Het doel van onze installatie was iets interactiefs dat de gedachte van mcLuhan communiceert en op deze manier de doelgroep media bewust of wijs maakt. Het is gelukt de doelstelling te bereiken, dit bleek uit de reacties van de gebruikers. Het leukst vond ik de creatieve vrijheid die we kregen, omdat we op deze manier echt iets van onszelf konden maken en dus ook iets waar we helemaal achter stonden. Dit was niet alleen leuk maar ook goed voor de motivatie. In de toekomst zou ik zeker vaker zo’n project willen doen. Het minst leuk vond ik het maken van planningen en het documenteren van mijn research, omdat ik in die tijd liever aan het knutselen ben en het maken van planningen en documentatie zorgt daardoor voor frustratie. Wel zie ik het belang in van een planning maken voor belangrijke dingen en ik denk ook dat het heel belangrijk is voor een klant om in te schatten hoeveel hij moet betalen. Dus in de toekomst zal ik wel planningen maken, maar alleen als het echt nodig is.
17
Aanbevelingen We hebben tijdens de open dag iemand geïnterviewd over wat hij van de installatie vond, maar dat tapeje is zoekgeraakt. Hij vond het een leuk concept, alleen het licht van de beamer belemmerde zijn zicht bij het lezen van de content. Dit was na onze tweede testsetup, dus dat hebben we later veranderd door een wit polyester paneel te gebruiken. We wilden flyers uitdelen om interviews te doen maar dat zijn we in de drukte vergeten. Veel tests hebben we ook kunnen doen door gebruikers te observeren tijdens onze testopstellingen en vaak waren de problemen dusdanig duidelijk dat verdere ondervraging niet nodig was. Aan het volgende team dat voor scryption iets gaat maken zou ik als tip willen geven dat ze er goed voor zorgen dat de skills goed verdeeld zijn. Bijvoorbeeld dat je niet twee designers hebt. Hiermee voorkom je conflicten. Ik heb gezien dat dat goed werkt. Verder denk ik dat je de tijd moet nemen om goed naar elkaar te communiceren wat je gedaan hebt, aan het doen bent en wat je gaat doen. Het geeft een goed gevoel als je weet dat iedereen met iets bezig is en dat je begrijpt waarom dingen gedaan worden zoals ze gedaan worden. Op deze manier kunnen je teamgenoten ook inspelen op je bezigheden. Ook vind ik het niet noodzakelijk dat iedereen er altijd is, maar het moet wel duidelijk zijn als je niet komt en je werk mag er niet onder lijden.
18
Feedback van externe professional “Het lijkt dat het lastig voor je is om een probleem helemaal op te delen in kleine stappen en ook te zoeken vanuit verschillende kanten. In dit werkveld is dit wel erg belangrijk, het blijft een belangrijk punt om verder te ontwikkelen.” “Zorg dat je op de hoogte bent van verschillende technieken (bijv. voor displayen shaders, opengl, java3d) en dat je daaruit nieuwe keuzes kan maken.” “Wel creatief, maar ik denk behoudend dmv beperkende beheersing van techniek. Je zou zelf meer initiatief moeten tonen in het aandragen van nieuwe ideeen. Bij het spiegelonderzoek heb je dit wel aardig gedaan denk ik, maar bij het programmeren v.d. interactie had je meer initiatiefnemend kunnen zijn.” “Binnen het Scryption team goed internationaal samengewerkt. Je staat ook open voor feedback.” “Op het vlak van kwaliteit leveren ben je iets te relaxed of zo kom je over. Ik denk dat je meer standvastig moet zijn in het doel wat je wilt bereiken. Ik kreeg de indruk dat de eisen qua interactie nogal leken te ‘zwabberen’. Het is jou taak dan om daar duidelijkheid in te brengen voor of te eisen van je team.” “Ik merk dat je open staat om veel te leren. Op het programmeer vlak heb je zeker nog veel te leren, maar ik zie ook dat je wel stappen hebt gemaakt. Je bent naar mijn mening wel te laat begonnen met experimenteren (pas toen het concept gekozen was). Je hebt een optimistische en positieve houding en dat is erg belangrijk.” “Je zou qua meer initiatief moeten nemen voor een goede planning m.b.t. programmeren. Misschien was het idee ook nog iets te hoog gegrepen ?” “Je staat open voor suggesties. Dat is zowel positief als negatief. Naar mijn mening mag je wel iets meer je eigen lijn trekken. Uiteindelijk moet je afwegen welke feedback echt belangrijk is om je eindresultaat te behalen.” “Je zou meer je eigen lijn kunnen trekken. Je blijft soms nog teveel hangen in 1 ding of oplossing. Het blijft goed om te kijken wat er nog mist in het product (bijv. na de opening van het kenniscentrum) en aan de hand daarvan zelf beslissingen te nemen. Toch experimenteer je ook wel (maar naar mijn mening had dat in de eerste fase van het project plaats moeten vinden).”
19
Bijlagen
contains Graduation project plan version 1.0 by Saro Van Cleynenbreugel date 14-02-2010
Scryption Project My graduation project is for the scryption museum. The Scryption museum is about communication and language and is situated in Tilburg, the Netherlands. My goal is to develop together with my team an interactive installation for the museum. The project has to be finished in 2011. This Project is lead by Iris Douma and takes place at the MediaLab in Amsterdam. We don't have a concrete concept yet but we do know what team role each of us is going to play. The team exists out of three enthusiasts: Suzann our designer, Noraley as our theoretic expert and me as technical builder. My task is to be a physical computing expert, this includes electronics and programming. MediaLab? MediaLAB Amsterdam is a creative, interdisciplinary workplace where inquisitive students and researchers work together on innovative interactive media ideas. In the MediaLAB Amsterdam students from the various institutes of the Hogeschool van Amsterdam (The Applied University of Amsterdam) and the University of Amsterdam study how digital interactive products can contribute to innovative solutions for societal problems. Goals Our goal is to deliver a working installation. We have to deliver a working prototype on the 31 of May. My personal goal is to learn more about physical computing and specialize on the Arduino prototyping platform. I'm learning to read information with sensors from the physical world and to use this data in a digital environment. I'm not going to wait until the building phase to start exploring this, instead I'll start right away. I already ordered two relevant books: Physical Computing and Make Electronics. I choose to use an iterative learning method. So I'm going to apply the theories I read in the books right away. This is the best way of learning for me. Build, try it, fail, build and try it again.
20
The project The museum Scryption (Tilburg) has asked us to create an interactive installation on the theme ‘The medium is the message’ of Marshal McLuhan coming out of his book ‘Understanding Media’. We try to give visitors a different approach to new media and its impact on our society. We don´t just want to entertain people, but make them realize which importance and big influence media has on everyone of us.
For now we know that Robert (our project partner) wants us to give people the realization when one chooses for a certain kind of media one will perceive the world with the advances and also the limitations of this media. So the media will cut you off from other media types. For example, if you choose Twitter you will perceive the world through the Twitter channel. Normally you would have watched the news in this time, so this part is now lost. Keeping track Of course I have to keep track of what I'm doing during the project, my responsibilities and deliverables. I'll do this by keeping a journal online (saromedia.nl) about my personal progress. Of course I'll also post my research documents relevant to my part in my journal. We also have a general project blog (scryption.medialab.hva.nl) where we write everything according to the project. Professional contact It's not clear yet who my professional contact is going to be. But I'm on it and by the end of this week I'll have found my prof. Links personal progress journal scryption project page
21
Ref_act Technical specification document
by. Saro Van Cleynenbreugel for. Gwen van Iersel date. 21-04-2010
22
Introduction In this document I will explain how the technical part is going to work. At first I’ll show how the application is going to work. This I’ll do with a flowchart and later on I’ll support this with a use-case scenario. I also give an overview of the libraries that I’m going to use.
23
Flowchart of the Mirror installation
24
Top Down The scheme below shows you the input and output channels of the installation and how and what they put out or let in.
This scheme gives you a closer look on what happens inside the ‘Blackbox’.
The Platform I’m going to use openFrameworks as a platform. But this may change because this already changed several times. At first it was openFrameworks then I worked a bit in Processing but now it seems that Processing is too slow so now I want to use openFrameworks again. And coming Thursday I’m going to take a look at Quartz. This is a more visual programming language like maxMSP.
25
Use Case The user sees an interesting installation and is now curious. The user sees that he has to fill in his name to make use of the installation. The user fills in his name. The user is asked to move in front of the mirror. The user recognizes his image in de regular mirror. The user looks in to the digital mirror and recognizes his shape. The user plays a bit with moving his body. The user stops and walks away. Go back to step 1.
26
Needed hardware Digital video camera At firs we will use an ordinary webcam and later on I want to get a high performance camera called the Dragonfly 2 or rent a HD camera at the HvA. Where to buy them: http://www.ptgrey.com/products/dragonfly2/index.asp Infrared pass trough filter High Temperature filters to filter out visible light, for each light, and for the camera. We use High Temperature Lee Filters HT 026 (bright red) and HT 172 (lagoon blue). Where to buy them: http://www.leefiltersusa.com/LightPrice/LightPriceHTSheet.html Beamer The brightness of the beamer depends on the amount of the surrounding light. In a quit dark room an average beamer with 1500 lumens would be ok. But still this is something that we have to test on sight. For now I know the Scryption museum has a 3000 lumens beamer for us to use. Translucent projection surface (white polyester) This is the surface we are going to project on, it is needed for back projection. It’s a fairly common material and is available in any D.I.Y.shop. Places to buy: http://www.tradekey.com/product_view/id/1130263.htm
27
The Setup Here you can see how our setup is going to work. I use infrared light to prevent the usage of unnecessary disturbing light. Infrared light is not visible for the human eye and will for not intervene with the projection. The camera will be made so it only sees the infrared light. For this I use a special filter that is listed above in the hardware list. The semitransparent mirror is needed in order to place the camera nicely in front of the person. The mirror is also supposed to give it a kind of mirror like effect to make it look more like a real mirror. The beamer we use does not have to be a real bright one because we are going to work in a dark environment.
28
Planning
29
Plan van Aanpak
Plan van Aanpak scryption project
Door. Saro Van Cleynenbreugel Voor. Gwen van Iersel Datum. 14-04-2010
30
Inleiding In dit document beschrijf ik in het kort wat het project inhoud. Voor wie we het maken en wat er van ons verwacht word. Verder beschrijf ik hoe we ons vooronderzoek hebben benaderd en wat het voor mij heeft opgeleverd. En ik geef aan hoe ik de kwaliteit van het prototype kan waarborgen. Ik heb ook een planning toegevoegd met hierin wanneer we wat gaan doen.Probleemstelling Het scryption museum is zich met de heropening meer gaan richten op jonge professionals. Het Scryption vroeg aan ons een interactieve installatie te maken voor in het bijzonder de tentoonstelling over Marshall McLuhan in het thema van ‘understanding media’. De installatie moet een link hebben met een theorie van McLuhan. McLuhan is een filosoof die voornamelijk beroemd is geworden omwille van zijn studie naar media en naar de invloed van media op ons denken. Deelvragen: Hoe ziet een aantrekkelijke installatie voor onze doelgroep er uit? Wat voor interactie werkt er eigenlijk voor een groep? Welk idee van McLuhan willen we bij de bezoeker overbrengen? Waar zetten we de installatie neer, wat is de ruimte? Welk platform (technisch) kunnen we het best gebruiken voor de realisatie van ons concept?
Vooronderzoek Voor het komen tot een goed concept hebben we ons in het begin veel verdiept in wie McLuhan is en wat zijn ideeën waren. Hiervoor hebben we literatuur aangehaald, een documentaire over hem bekeken en veel overleg gepleegd met voornamelijk Robert aangezien hij gespecialiseerd is in de theorieën van McLuhan. Ik heb onderzoek gedaan naar verschillende technische aspecten. Zo heb ik verschillende platformen onderzocht die veelal gebruikt worden bij het maken van kunstinstallaties. Platformen waar ik onderzoek naar heb gedaan zijn: Arduino, Flash, MaxMSP, Processing en openFrameworks. Ik heb gekeken in naar welk platform je het beste kunt gebruiken bij welke vorm van interactie. Ook is het handig geweest voor mijn algemene kenners over wat er nu eigenlijk mogelijk is. Verder heb ik onderzoek gedaan naar sensoren en nagedacht hoe je bepaalde sensoren kunt inzetten. Tijdens de onderzoekfase heb ik ook verschillende exposities en musea bezocht. Ik ben naar Trans Natural (Trouw gebouw), V2 (Rotterdam), TweeTakt (Utrecht), FabLab (Utrecht), DeCode (Londen), Science Museum (Londen) en naar Niet Normaal! (Amsterdam) geweest. Verder zijn we met verschillende mensen in gesprek gegaan om hun visie te horen over onze concepten. Dit waren veelal gesprekken met de klant zelf aangezien we het voor hun maken en graag hebben dat ze met ons mee denken en Robert omdat hij veel weet over McLuhan zijn theorieën. Ook hebben we met andere installatie bouwers gebrainstormd. Eerst met Leo, hij is iemand die al langere tijd interactieve en niet interactieve installaties bouwt. Daarna hebben we met Levien en Jelle nog een gesprek gehad over onze concepten en hebben ons vervolgens weer voorzien van inspiratie (Meer informatie over deze inspiratie kun je vinden op onze blog scryption.medialab.hva.nl). Verder heb ik met Ubi een gesprek gehad over de technische realisatie van ons uitgekozen concept (De Mirror). We hebben het gehad over verschillende manieren van interactie en op welke manieren het gemaakt kan worden (technisch gekeken).
31
Conclusie Met een Arduino als platform is vrijwel elke interactie mogelijk. Door de ruime keuze aan sensors kunnen we vrijwel alles waarnemen. Hierdoor is veel verschillende interactie mogelijk. In de bijlage kun je mijn research (in het Engels) terug vinden. We zijn in staat verschillende input van sensoren om te vormen naar verschillende output. We kunnen bijvoorbeeld licht opvangen in een sensor en dan omzetten in beweging als output. Dit kan ook andersom, beweging omzetten in licht. Na overleg met Ubi over de realisatie van het concept zijn we min of meer tot de conclusie gekomen dat het openFrameworks het beste zou gaan werken voor het Mirror concept. Dit omdat het platform snel is en dus geschikt voor realtime processing en omdat je voor vrijwel iedere vorm van interactie van te voren gedefinieerde classes kunt vinden op de openFrameworks website. Iris twijfelt zelf nog wel over de keuze voor openFrameworks en wil dat ik nog eens ga kijken of ik het toch niet beter in Processing kan maken (dit raad Ubi af omdat het minder snel en minder stabiel zou zijn). Om over de mogelijkheden van Processing te praten heb ik morgen een afspraak met Kasper. Voor het Quotes concept wat nu meer een bij project is naast de Mirror als hoofd project is het gebruik van de Arduino voldoende omdat hier wat simpelere vormen van interactie gelden.
Kwaliteit Borgen Ik kan de kwaliteit borgen doormiddel van vet opstellen van een overzichtelijk technisch specificatie document waarin ik kan lezen wat ik precies moet bouwen en vooral hoe. Dit document kan ik ook gebruiken voor het uitleggen van mijn idee over de realisatie naar externe professionals die mij gaan helpen. Deze professionals zijn Ubi (Technisch iemand die veel van elektronica en hardware weet maar ook wat van de software kant), Leo (Heeft veel ervaring met installaties en is bekend met MaxMSP, Processing en Arduino’s) en Kasper (heeft ervaring met Processing en openFrameworks). Verder maak ik gebruik van een globale planning en een wekelijkse planning die mij begeleid door de verschillende fasen van de bouwfase. Planning: 14-04-2010 Start met het bouwen van het eerste prototype/demo 19-04-2010 We presenteren de eerste demo aan Jolande 20-04-2010 Start met het realiseren van de code voor the final prototype 25-04-2010 Bestellen van de nodige elektronische elementen 05-05-2010 Gedetailleerde lijst van nodige materialen voor het fysieke bouwen 06-05-2010 Alle nodige fysieke materialen bij de dichtst bijzijnde bouwmarkt kopen 11-05-2010 Start met het Fysieke bouwen in het atelier in Amersfoort 31-05-2010 Deadline voor the final prototype
32
Research - technical In order to do good research you should be able to ask good questions. So that is what I did in order to do my research.
Questions for technical research
Which platform would be suitable for what kind of installation (interaction)? There are a lot of platforms out there that can be used for realizing the same thing. But there are some differences between them; some of them are better then others in certain things. Therefore I selected a few common platforms that are well known in the art scene and used for building installations. Of course I have my favorites that I really want to learn and some others can just be useful for certain things. To know more about each of them en what there strengths and weaknesses are is talked to people who work with is on a frequent bases. Arduino To get to know more about this platform at first I did a workshop about the basics. Here I learned how the Arduino works and how you can use it in projects. I worked with the platform en did some tests. Later I searched for more concrete examples of what you could do with an Arduino. A few examples you can find here: Car drum installation http://www.youtube.com/watch?v=6TOti7Zh3m0 All kind of interaction in one installation http://www.youtube.com/watch?v=TLMNos0cNl0 Google earth navigation with your feet http://www.youtube.com/watch?v=zoNwJ931aqI Basically it is about that you can use every kind of input you would like to because there are just a lot of sensors you could actually use and connect with an Arduino. The brought variety comes with the fact that the Arduino uses very low level standard electronics. You can use digital and even analogue inputs. This input you can easily transfer into readable data by using standard code thats already out there. This code is widely available on the web because Arduino is an open source platfrom thats widely used. The next step is using this data, by making something happen according to the data it receives. Its as easy as that. Flash AS3 I already knew a lot about Flash and AS3 (the programming language), those are tools I learned to work with during my Interactive Media studies. Its very useful for virtual representation of the digital. But you can also mix it with for example the Arduino. This way you can use for example a sensor connected to the Arduino as an i physical input and make something in flash happen and project this on the floor. This is an example where they used a shadow detection system as an input for a flash environment. http://www.youtube.com/watch?v=-3tqQMQbYcI&feature=player_embedded
33
Max MSP and Processing Max MSP is a tool where you can easily program in a visual way by connecting different objets to each other. I had an introduction to this software before by an ex fellah intern (this is his webpage http://www.talbenisty.com/). He explained to me that each object represents a piece of code that you have to write for yourself. The thing with Max is that its not open source so maybe its better to get into Processing, what’s also very strong in audio and video processing and it even is open source. Processing is very strong in visualizing data. So it can be used to visualize large amounts of data of the web, for example the linkage between different tweets on the web. I talked a bit with Machiel Veltkamp (his blog: http://www.tempc.dreamhosters.com/) about the possibilities of it with live processing of data so the usage of live manipulation of video using an input like the dancing of a crowd. This is the website where you can learn all about processing http://processing.org/ This is an example of the use of processing where sound is used as an input and the visuals are influenced by it http://www.youtube.com/watch?v=VyNA56kU0CM This is an example of data visualization using Processing http://www.youtube.com/watch?v=ZL62fF6Uzjo&feature=related This is a MaxMSP example where one uses a water bowl as a musical instrument. An analogue input is used (the water) and MaxMSP linked it to different sound outputs http://www.youtube.com/watch?v=fNH3rD6LWd8
How are the visitors going to use the technique? It depends on what kind of interaction where looking for. Mainly we want people to use their whole body instead of just pressing a ordinary button. So I see people swiping with there thole body. A good example of this you can see in this video: http:// www.youtube.com/watch? v=QDVaRSHVNwM, it is a installation at a exhibition I went to. There where a lot of installations that used a natural kind of input and for me this seemed to work very good with the visitors, so it is something to keep in mind. We have to test a lot to see if the user interacts with the installation the way it is supposed to be. How do we make a solid and strong installation? Make it simple and solid, use strong materials that cannot break easily. Use for example a plastic instead of glass. Make sure vulnerable cables and electronics are safely placed out of side or carefully packed in tubes. How do we connect the physical with the digital and visa-versa? This we can do by using the platforms that I introduced above. The Arduino is a nice linking medium for this. Then you use the sensory part to connect to the physical and you use other platforms like Flash or Processing to let something digital happen. Of course you can do also digital stuff with the Arduino itself. What kind of interaction works for a group? Something where a lot of people can participate at the same time. For example the body paint installation. But you can also think about a kind of interaction where every time someone joins, it adds something to the experience. The use of different sensors and the possibilities.
34
In which way can we use pressure sensors in an installation? What pressure Why its analog (increasing or decreasing value) When if you want to measure pressure or weight
Who someone pressing How by putting the sensor between objects or object and body Example of the usage in a serious toy http://www.waag.org/project/scottie Graph on how much pressure http://www.youtube.com/watch?v=NGRqWaIECm8&feature=channel Using buttons on the ground to navigate a projection on the ground http://www.youtube.com/ watch?v=WLBpCQI8dwg In which way can we use temperature sensors in an installation? What temperature Why its analog (increasing or decreasing value) || you can detect if its warm or cold Where in a room When if there is a situation that influences temperature Who People, weather or friction How by placing the temperature sensor at the place where it has to be measured Examples of interaction Measure the temperature change when a person is standing near. When the temperature in a small room rises something happens. In which way can we use noise sensors in an installation? When people get more noisy the computer will rise its volume Beat detector (robot dancing) http://www.youtube.com/watch? v=csvCupgBtBE&feature=related Interactive table with music http://www.chrisoshea.org/projects/plinkplonk/#video Recording random sound and mixing it http://www.youtube.com/watch?v=dkC5Gj4zGOs In which way can we use light sensors in an installation? To see where light is shining on or how much light is shining in a curtain place Can see where there is more light http://www.youtube.com/watch?v=ATnnMFO60y8&NR=1 Laser light switch http://www.youtube.com/watch?v=g3lgVZBmGA4&feature=related In which way can we use color sensors in an installation? Use color coding for subjects Translate colors into different ambient sound colors (some kind of live music sampler) This machine detects light and dark connected to a motor http://www.youtube.com/watch? v=Q_Z1_MVhTP4&feature=related In which way can we use movement sensors in an installation? Measure how much people move and translate it in light. The more movement the brighter the room. Interactive LED table http://www.youtube.com/watch?v=IkmpIXd9Q90&feature=related mirors folowing a person (using camera) http://www.chrisoshea.org/projects/audience/ In which way can we use wind sensors in an installation? Let people use their breath to make a choice.
35
In which way can we use infrared-light sensors in an installation? What Light thats not visible to the eye Why Because humans can’t see it Where In a room or on a display When If infrared light should be seen by a system Who infrared light lamps How by placing a infrared camera on the right spot Examples of interaction: As a remote and for the user invisible signing. To make an interactive whiteboard using a wii-mote In which way can we use magnetic sensors in an installation? A magnetic switch can be used to check if someone opens a door. In which way can we use tilt sensors in an installation? Here a tilt sensor applied in a game controller http://www.youtube.com/watch?v=kazHFsGK3tc&feature=player_embedded# In which way can we use accelerometer sensors in an installation? Introduction to the sensor http://www.youtube.com/watch?v=HYUYbN2gRuQ Connected to a camera http://www.youtube.com/watch?v=Fd2K8ieo5xQ&NR=1 Robot movement http://www.youtube.com/watch?v=Qlukl5fLi7s&feature=related In which way can we use range finder in an installation? Ultrasonic range finder + flash http://www.youtube.com/watch?v=bZIKbuZaJSQ Example basic http://www.youtube.com/watch?v=vQTOCRSuyH4&feature=related Interacting with a screen by using your body http://www.youtube.com/watch? v=4VgqolVKOzM&feature=related In which way can we use gas (oxygen) sensors in an installation? By measuring the amount of oxygen in the air and translating in something different like color or noise. In which way can we use EMF (electronic magnetic field) detector in an installation? This is a tutorial I found on how to read out an electro magnetic field using just a wire and an Arduino http://www.youtube.com/watch?v=y1Bke3750WE
Conclusion
With the Arduino prototyping platform we can use every kind of sensor. So you can sense almost everything. This sensing we can use for a lots of different interaction with the user. We can also mix input that we get from the sensors into a different kind of output. Like for example sense movement and transform this into color. Or the other way around read color and transform it into movement. Sometimes you have to put the data into an other medium in order to see its meaning.
36
Globale planning project
37
38
39
40
De code //Dit is de main code waar processen in gang gezet worden /* Reflact mirror software Date: 22 june 2010 Devellopt by: Saro Van Cleynenbreugel With big thanks to Kasper Kamperman, Leo van der Veen en Machiel Veltkamp */ // AANTAL FRAMES VOORDAT ER TERUG WORDT GEGAAN NAAR HOOFDMENU // Programma draait op ongeveer 10 frames per seconde dus 300 programmaTijd = +/- 30 seconden int programmaTijd = 2000; int screenshotTijd = 500; String pictureFolder = “Fotos”; import import import import import import import import import import
hypermedia.video.*; java.awt.*; // for processing 1.1 fullscreen.*; processing.opengl.*; javax.media.opengl.GL; pbox2d.*; org.jbox2d.collision.shapes.*; org.jbox2d.common.*; org.jbox2d.dynamics.*; controlP5.*;
PGraphicsOpenGL pgl; GL gl; OpenCV opencv; PBox2D box2d; FullScreen fs; ControlP5 controlP5; Textlabel displayMode; Textlabel flipMode; Textlabel invertMode; Textlabel fps; int int int int int
blinkTimer = 0; programmaTimer = 0; programmaMode = 0; screenshotTimer; canLoad = 0;
int minArea = 2000; int maxArea; int captureWidth = 320; int captureHeight = 240; int screenWidth = 1280; int screenHeight = 500; float scaleXFactor = screenWidth/float(captureWidth); // convert to Float for good scaling float scaleYFactor = screenHeight/float(captureHeight);
41
int int int int
thresholdValue = 0; contrastValue = -113; brightnessValue = -128; blurValue = 4;
int mode = 1; // use for displaying different images of the process boolean flip = false; boolean invert = true; boolean find=true; boolean showOpenCV = false; //Voor de shape van de persoon Boolean serfaceGetekend = false; float pointsX; float pointsY; // ArrayList for the elements we are going to use ArrayList boundaries; ArrayList boxes; XMLElement xml; XMLElement xml2; XMLElement[] plaatjes = new XMLElement[25]; XMLElement[] descriptionText = new XMLElement[25]; int aantalTextObjecten = 10; int aantalBeeldObjecten = 15; int aantalObjecten = aantalBeeldObjecten + aantalTextObjecten; /// Typing VARS String typing=””; String formattedTyping; String saved=””; int indent=25; PImage jk; PFont fontInterface; PFont font; int xcounter = 0; void setup() //---------------------------------------------------------- S E T U P { size(screenWidth,screenHeight,OPENGL); // blobs werken niet met blend, mask mode is traag pgl=(PGraphicsOpenGL) g; gl= pgl.gl; gl.glDepthMask(false); gl.glDisable(GL.GL_DEPTH_TEST); gl.glClear(GL.GL_DEPTH_BUFFER_BIT); // Turn on the blend mode gl.glEnable(GL.GL_BLEND);
42
smooth(); maxArea = captureWidth*captureHeight; // max size of Blob
opencv = new OpenCV( this ); opencv.capture(captureWidth,captureHeight); font = loadFont( “AndaleMono.vlw” ); textFont( font ); //println( “Press space bar to record background image” ); controlP5 = new ControlP5(this); displayMode = controlP5.addTextlabel(“label1”,””,width-200,20); flipMode = controlP5.addTextlabel(“label2”,”flipmode : false”,width-200,40); invertMode = controlP5.addTextlabel(“label3”,”invertmode : true = dark transparent”,width-200,60); fps = controlP5.addTextlabel(“label4”,”fps”,width-200,80); Controller mySlider0 = controlP5.addSlider(“thresholdValue”, 0,255,0,0,200,10); Controller mySlider1 = controlP5.addSlider(“contrastValue”, -128,128,0,10,200,10); Controller mySlider2 = controlP5.addSlider(“brightnessValue”, -128,128,0,20,200,10); // Controller mySlider3 = controlP5.addSlider(“blurValue”, 0,16,40,80,200,10); // Controller mySlider4 = controlP5.addSlider(“minArea”, 0,10000,40,100,200,10); //Controller mySlider2 = controlP5.addSlider(“maxArea”, 0,maxArea,40,60,500,10); // Create the fullscreen object fs = new FullScreen(this); // enter fullscreen mode fs.enter(); fontInterface = createFont(“Eurostile”,36,true); // Initialize box2d physics and create the world box2d = new PBox2D(this); box2d.createWorld(); // We are setting a custom gravity box2d.setGravity(0, 0); Boolean doSleep = true; // Create ArrayLists boxes = new ArrayList(); boundaries = new ArrayList(); // links boundaries.add(new Boundary(0,height/2,5,height)); // rechts boundaries.add(new Boundary(width,height/2,5,height));
}
// onder boundaries.add(new Boundary(width/2,height,width,5)); // boven boundaries.add(new Boundary(width/2,0,width,5));
43
void draw() //------------------------------------------- D R A W { background(0); if(programmaMode==0) { // teken zwarte achtergrond met witte letters en blinken cursor whoAreYou(); } else if(programmaMode == 1) { programmaTimer++; if(programmaTimer == programmaTijd) { programmaTimer = 0; programmaMode = 0; } // PImage jk = twitterImage(saved, fontInterface, 16, 2, 100, 0); //rotate(PI/2); //image(jk,500,1000); //rotate(-PI/2); opencv.read(); // read camera image in OpenCV buffer //if(flip) opencv.flip( OpenCV.FLIP_HORIZONTAL ); opencv.flip( OpenCV.FLIP_HORIZONTAL ); if(mode == 0) { displayMode.setValue(“mode 0 : plain image”); image(opencv.image(), 0, 0, width, height); } opencv.convert(OpenCV.GRAY); opencv.contrast(contrastValue); opencv.brightness(brightnessValue); if(invert) opencv.invert();
// Converts to greyscale
// invert met i-toets
// slider op 0 zetten betekend automatische threshold bepaling via Otsu algorithm if(thresholdValue==0) opencv.threshold(0,255, OpenCV.THRESH_OTSU); else { opencv.threshold(thresholdValue); } opencv.blur(OpenCV.BLUR, blurValue); if(mode == 1) { opencv.invert(); //pgl.beginGL(); // This fixes the overlap issue // Define the blend mode gl.glBlendFunc(GL.GL_SRC_ALPHA,GL.GL_ONE); displayMode.setValue(“mode 1 : blended image”);
44
//image(img2,0,0, width, height); // show dolpin image (loaded in setup) image(opencv.image(), width/2, height/2, width, height);
//pgl.endGL(); } fps.setValue(“framerate: “ + (int)frameRate); // We must always step through time! box2d.step(); // Display all the boundaries for (int i = 0; i < boundaries.size(); i++) { Boundary wall = (Boundary) boundaries.get(i); wall.display(); } // Display all the boxes for (int i = 0; i < boxes.size(); i++) { Box p = (Box) boxes.get(i); p.display(); } // Boxes that leave the screen, we delete them // (note they have to be deleted from both the box2d world and our list for (int i = boxes.size()-1; i >= 0; i--) { Box p = (Box) boxes.get(i); if (p.done()) { boxes.remove(i); } } youAre(); // SCREENSHOT : if(screenshotTimer==screenshotTijd) { String fileName = pictureFolder; fileName += “/”; fileName fileName fileName fileName fileName fileName fileName fileName fileName fileName fileName fileName fileName
+= += += += += += += += += += += += +=
saved; String.valueOf(day()); “d”; String.valueOf(month()); “m”; String.valueOf(year()); “y”; String.valueOf(hour()); “h”; String.valueOf(minute()); “m”; String.valueOf(second()); “s”;
saveFrame(fileName + “.tif”); screenshotTimer++;
} else if(screenshotTimer==screenshotTijd+1){ // FLITS
45
fill(255,255,255); rect(width/2,height/2,width,height); screenshotTimer++; } else if(screenshotTimer==screenshotTijd+2) { // JUST SIT AND WAIT TILL screenshotTimer WILL DE BE RESET }else { // DRAW LINE stroke(0,255,0); float y = float(screenshotTimer)/100.0; y *= float(height); int inty = int(y); line(0,inty,width,inty); screenshotTimer++; }
} // ALS ER IS GE-ENTERED LAAD NIEUWE PERSOON if(canLoad==1) { canLoad=0; loadNewPerson(saved); }
} // ----------------------------------------------------- loadNewPerson void loadNewPerson(String _name) { String formattedTyping = “”; for(int i=0;i<_name.length();i++) { if(_name.substring(i,i+1).equals(“ “)) { formattedTyping = formattedTyping + “%20”; } else { formattedTyping = formattedTyping + _name.substring(i,i+1); } } String googleURL = “http://www.google.nl/search?client=safari&rls=en&num=30 &q=” + formattedTyping; filterGoogle(googleURL); String googleImageURL = “http://www.google.nl/images?client=safari&rls=en&num =30&q=” + formattedTyping; filterGoogleImage(googleImageURL); }
46
// content is url or string // type = true when image otherwise its text void addBox(String content, boolean type) { //xpos,ypos, true, content, maxThumbWidth, maxThumbHeight // int xpos = (width/2) + int(random(-1,1)*(width/2)); // verspreiden links rechts vanaf center // int ypos = (height/4) + int(random(height/3)); int xpos = 200+int(random(width-200)); // verspreiden links rechts vanaf center int ypos = int(random(height));
Box p = new Box(xpos,ypos, type, content, height/2, width/(aantalObjecten/2)); // Box p = new Box(xpos,ypos, type, content, height/3-20, width/(aantalObjecten/3)-10); boxes.add(p); } // --------------------------------------------------------------------- keyPressed void keyPressed(){ //--------------------------- Typen naaminvoerveld links boven || Keylisteners if(key ==’\n’){ blinkTimer = 0; screenshotTimer = 0; programmaTimer = 0; programmaMode = 1; if(typing != “”) { saved = typing; deleteOldBoxes(); // canLoad = 1 : aan het eind van de draw() functie zal hij pas nieuwe content laden : stage is dan al gecleared canLoad = 1; typing =””; } addBox(“twitterimage.png”,true);
} else if(keyCode==8) { // backspace if(typing.length() != 0){ typing = typing.substring(0, typing.length() - 1); } } else if(keyCode != 16 && keyCode != 20) { // shift(16) and caps(20) typing = typing + key; } // --------------------------------------------------------- whoAreYou void whoAreYou(){ gl.glDisable(GL.GL_DEPTH_TEST); // alpha blend. gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA); //-------------------DE TEKST EN HET INVOERVELD ------- WHO ARE YOU? //Draw a rect for readebility fill(255); rectMode(CENTER); //strokeWeight(2); //stroke(0); rect(width/2,height/2,width,height); textFont(fontInterface); textAlign(LEFT); pushMatrix(); translate(width/2-300,height-50); rotate(-PI/2);
47
fill(0); text(“Who are you?”,indent,30,0); blinkTimer++; if(blinkTimer==50) blinkTimer = 0; String drawText = typing; if(blinkTimer < 25) drawText += “|”;
}
text(drawText,indent,80,0); rotate(PI/2); popMatrix();
// ---------------------------------------------------------------------- youAre void youAre(){ gl.glDisable(GL.GL_DEPTH_TEST); // alpha blend. gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA); //----------------------------------------DE TEKST EN HET INVOERVELD ------- WHO ARE YOU? //Draw a rect for readebility fill(255); rectMode(CENTER); //strokeWeight(2); //stroke(0); rect(100,height/2,200,height); textFont(fontInterface); textAlign(LEFT); pushMatrix(); translate(120,height-50); rotate(-PI/2); fill(0); if(saved !=””) { text(“This is digital “,indent,-20,0); text(saved,indent,20,0); } blinkTimer++; if(blinkTimer==30) blinkTimer = 0; String drawText = typing; if(blinkTimer < 15) drawText += “|”;
}
48
text(drawText,indent,60,0); rotate(PI/2); popMatrix();
// ---------------------------------------------------- deleteOldBoxes void deleteOldBoxes(){ for (int i = boxes.size()-1; i >= 0; i--) { Box p = (Box) boxes.get(i); p.killBody(); boxes.remove(i); } draw();
} public void stop() { opencv.stop(); super.stop(); } // dit is de class voor alle randen van het scherm aan te geven class Boundary { // A boundary is a simple rectangle with x,y,width,and height float x; float y; float w; float h; // But we also have to make a body for box2d to know about it Body b; BodyDef bd; PolygonDef sd; Boundary(float x_,float y_, float w_, float h_) { x = x_; y = y_; w = w_; h = h_; // Figure out the box2d coordinates float box2dW = box2d.scaleScreenToWorld(w/2); float box2dH = box2d.scaleScreenToWorld(h/2); Vec2 center = new Vec2(x,y); // Define the polygon sd = new PolygonDef(); sd.setAsBox(box2dW, box2dH); sd.density = 0; // No density means it won’t move! sd.friction = 0; //0.3f; //sd.restitution = 0.8f; //0; //0.5f;
}
}
// Create the body bd = new BodyDef(); bd.position.set(box2d.screenToWorld(center)); b = box2d.createBody(bd); b.createShape(sd);
// Draw the boundary, if it were at an angle we’d have to do something fancier void display() { fill(0); stroke(0); rectMode(CENTER); rect(x,y,w,h); }
49
//Dit is de class die de objecten maakt waar de content van het internet in komt te staan. class Box { // We need to keep track of a Body and a width and height Body body; int x; int y; int w; int h; boolean type; PFont fontObjects = createFont(“Eurostile”, 20); //PFont fontObjects = createFont(“Futura”, 20); //PFont fontObjects = createFont(“Arial Black”, 20); PImage plaatje; boolean _imageResized = false; // Constructor Box(int x_, int y_, boolean type_, String content_, int width_, int height_) { type = type_; x = x_; y = y_; // worden afhankelijk v.d. content nog aangepast in resize image w = width_; h = height_; if(type == true) { if(content_.equals(“twitter.png”)) { plaatje = loadImage(“twitter.png”); } else { plaatje = requestImage(content_); } //println(“plaatje geladen”); makeBody(new Vec2(x,y),h-(h/3),w); } else { // String txt, PFont f, int fontsize, int linespacing, int maxW, int maxH) plaatje = prepareText(content_, fontObjects,20,5, w, h); //println(“text geladen”); makeBody(new Vec2(x,y),h,w); } // Add the box to the box2d world //makeBody(new Vec2(x,y),h,w); }
50
// This function removes the particle from the box2d world void killBody() {
}
box2d.destroyBody(body);
// Is the particle ready for deletion? boolean done() { // Let’s find the screen position of the particle Vec2 pos = box2d.getScreenPos(body);
}
// Is it off the bottom of the screen? if (pos.y > height+w*h) { killBody(); return true; } return false;
// Drawing the box void display() { if(type == true) // image { if (plaatje.width > 0) // check if image is loaded { if(_imageResized == false) // check if image is already resized { _imageResized = resizeImage(); // not, resize and set _imageResized to true } } } // We look at each body and get its screen position Vec2 pos = box2d.getScreenPos(body); // Get its angle of rotation float a = body.getAngle(); imageMode(CENTER); rectMode(CENTER); pushMatrix(); translate(pos.x,pos.y); rotate(-PI/2); rotate(a); fill(255,0,255,0); stroke(0); rect(0,0,w,h);
image(plaatje,0,0);
}
rotate(PI/2); popMatrix();
// This function adds the rectangle to the box2d world void makeBody(Vec2 center, float w_, float h_) {
51
// Define a polygon (this is what we use for a rectangle) // // // //
PolygonDef sd = new PolygonDef(); float box2dW = box2d.scaleScreenToWorld(w_/2); float box2dH = box2d.scaleScreenToWorld(h_/2); sd.setAsBox(box2dW, box2dH); // Make the body’s shape a circle CircleDef sd = new CircleDef(); sd.radius = box2d.scaleScreenToWorld(w_/2); // Parameters that affect physics sd.density = 1f; sd.friction = 0f; sd.restitution = 1f; //0; //0.5f; // Define the body and make it from the shape BodyDef bd = new BodyDef(); bd.position.set(box2d.screenToWorld(center)); body = box2d.createBody(bd); body.createShape(sd); body.setMassFromShapes(); // Give it some initial random velocity body.setLinearVelocity(new Vec2(random(-1,1)*6,random(-1,1)*6)); //body.setAngularVelocity(random(-5,5));
} // resize images bij het laden // om zo geheugen te beparen boolean resizeImage() { float p_W = plaatje.width; float p_H = plaatje.height; //resize Plaatje if(p_W > p_H) { // x is groter float factor = p_H/p_W; int plaatjeX = int(p_H * factor); //println(factor); plaatje.resize(w, 0); } else { // y is groter float factor = p_W / p_H; int plaatjeY = int(p_W * factor); plaatje.resize(0, h); }
52
// geef true terug, die plaatsen we in de imageResized array, zodat ze maar 1 keer
resized worden. return true; } /* new version that seems to use the correct measures. kasperkamperman version with maxHeight */ PImage prepareText(String txt, PFont f, int fontsize, int linespacing, int maxW, int maxH) { int padding = 5; // calculate width considering padding int numLines = 0; String[] wordsArray; String tempString = “”; textFont(f,fontsize); // necessary to calculate the exact with of the string (textWidth) // textAscent + textDescent is height of one line int lineHeight = int(textAscent()+textDescent()) + linespacing; wordsArray = split(txt, “ “); for (int i=0; i < wordsArray.length; i++) { if (textWidth(tempString + wordsArray[i]) < (maxW-(2*padding))) { tempString += wordsArray[i] + “ “; } else { tempString = wordsArray[i] + “ “; numLines++; } } numLines++; //adds the last line int calculatedHeight = numLines*lineHeight; int w = maxW; // textWidth(str); // int(textWidth(txtsplit))+(padding*2); int h; if(maxH>0) { if(maxH>calculatedHeight) h = calculatedHeight; else h = maxH; } else { h = calculatedHeight; } PGraphics pg;
53
pg = createGraphics(w,h,JAVA2D); pg.beginDraw(); pg.background(0); pg.smooth(); pg.noStroke(); //pg.textMode(SCREEN); pg.textFont(f,fontsize); pg.textAlign(LEFT, TOP); pg.textLeading(lineHeight); pg.text(txt, padding, padding, (w-padding*2), (h-padding*2)); //pg.text(txt, padding, padding, w, h); pg.endDraw();
}
}
return pg.get(0, 0, pg.width, pg.height);
//Deze code filtert de code van de google resultaten uit tot bruikbare content // ------------- filterGoogle String errorMess = “Wait for assistance...”; void filterGoogle(String query) { String[] results = null; try { URL url= new URL(query); URLConnection connection = url.openConnection(); // Google rejects pure API requests, so we change the header of the request // to make it believe it is requested by a real browser... :) connection.setRequestProperty(“User-Agent”, “I am a real browser like Mozilla or MSIE” ); results = loadStrings(connection.getInputStream()); } catch (Exception e) // MalformedURL, IO }
54
if (results != null) { String googleSource = results[2]; String[] splits = split(googleSource, “div class=\”s\”>”); // split op for(int i=1;i<splits.length && i < aantalTextObjecten;i++) { String secondSplit = splits[i]; String[] secondSplits = split(secondSplit,”<span class=”); String omschrijving = secondSplits[0]; String googleResult = “”; // ----String[] kleinerdanSplit = split(omschrijving,”<”); for(int j=0;j
”); googleResult += groterdanSplit[groterdanSplit.length-1]; }
// make new box with ggogleResult // HIERO !!!! println(googleResult); addBox(googleResult,false); // EINDE HIERO
} } else { addBox(errorMess,false); } }
// ------------- filterGoogleImage void filterGoogleImage(String query) { String[] results = null; try { URL url= new URL(query); URLConnection connection = url.openConnection(); // Google rejects pure API requests, so we change the header of the request // to make it believe it is requested by a real browser... :) connection.setRequestProperty(“User-Agent”, “I am a real browser like Mozilla or MSIE” ); results = loadStrings(connection.getInputStream()); } catch (Exception e) // MalformedURL, IO { addBox(errorMess,false); } if (results != null) { String googleSource = results[2]; // println(googleSource); String[] splits = split(googleSource, “imgurl=”); // split op for(int i=1;i<splits.length && i < aantalBeeldObjecten;i++) { String secondSplit = splits[i]; String googleImageResults[] = split(secondSplit,”&imgrefurl”); String googleImageResult = googleImageResults[0];
}
}
// HIERO //println(googleImageResult); addBox(googleImageResult,true); // EINDE HIERO
}
55
Literatuurlijst Dit is de Processing website waar ik het meeste aan gehad heb http://processing.org/ Ben Fry, Casey Reas are the co-founders of Processing and the primary designers of the language and software. The team leading the current push forward to Processing 2.0 includes: Florian Jenett, Design and Net burgermeister Dan Shiffman, Tutorials Andreas Schlegel, Contributed Libraries George Michael Brower, Contributed Tools Jonathan Feinberg, Parsing & Android hacking Chris Lonnen, Processing Development Environment Patrick Hebron, Video Library Andres Colubri, OpenGL integration Damien Di Fede Datum: 02-07-2010 Titel: Processing URL: http://processing.org/ OPENCV Processing and Java Library Door: Stéphane Cousot en Douglas Edric Stanley (tot stand gebracht door Intel) Datum: 14-05-2010 Titel: OPENCV Processing and Java Library URL: http://ubaa.net/shared/processing/opencv Dit boek / webpagina heb ik het meest gebruikt Titel: Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction Door: Daniel Shiffman Uitgever: Paperback - Sept. 2, 2008 Datum: 14-05-2010 Opricht datum: 2008 URL: http://www.learningprocessing.com/ De Box2d library page Door: Wahooney, darkzerox, brainclog, ewjordan, george, 0xfb, kavaler, Jens , 0xtob, nimodo, caspin, nimodo, chris_c, BorisTheBrave and udoprog Datum: 14-05-2010 Titel: Box2D Physics Engine URL: http://www.box2d.org/index.html Deze boeken heb ik achteraf gezien niet heel veel gebruikt maar ik zet ze er toch maar tussen aangezien het erg goede boeken zijn Titel: Physical Computing: Sensing and Controlling the Physical World with Computers Het boek is gescherven door Tom Igoe en Dan O’Sullivan Uitgever: Paperback - May 28, 2004
56
Titel: MAKE: Electronics: Learning Through Discovery Gescherven door: Charles Platt Uitgever: Paperback - Dec. 10, 2009
57
