colour meets sound

(schoolproject 2017, 2 year bachelor graphic design)

Profiel

Ik heb twee passies in mijn leven: mode en roze. In 2012 begon ik aan mijn opleiding Creatie & Mode op middelbaar niveau. Na 4 jaar patroontekenen, stikken en ontwerpen, besloot ik om mijn toekomst een andere draai te geven. Ik wou nog steeds bezig zijn met mode maar wou het op een andere manier invullen. Ik besloot om Grafisch Ontwerp te gaan studeren op LUCA School of Arts en zit momenteel in het tweede jaar bachelor. Ik probeer elke opdracht te linken aan mijn vorige opleiding of tenminste een kleine touch uit de modewereld te geven. Mijn broer is een even grote modefanaat als ik. We gaan vaak samen winkelen en discussiëren veel over de nieuwe trends. Toch is er een aspect waar we elkaar niet kunnen volgen: kleur. Mijn broer lijdt aan daltonisme of kleurenblindheid, een kleine erfenis van mijn opa. Hij ziet kleur, maar anders dan wij. Rood is soms groen, pasteltinten worden allemaal wit en hij ziet geen verschillende tonen blauw. Kortom, hij kan kleurvarianten niet categoriseren in de goede kleurgroep en sommige contrasterende kleuren zijn voor hem dezelfde tonen.

Deze opdracht ging om van het digitaal archief van Europeana een interactief werk maken, zodat kunst toegankelijk werd voor iedereen. De database van EuropeanaFashion sprak me onmiddellijk aan. De vele verschillende stijlen, kleuren, coupes en stoffen zijn gewoonweg prachtig. Ik toonde het dan ook aan mijn broer, die het op een andere manier zag als ik. Zo ontstond mijn idee: ik wou een tool creëren waarmee mensen die kleurenblind zijn, de kleuren van fantastische ontwerpen op een andere manier kunnen waarnemen.

In mijn onderzoek kwam ik al vrij snel bij Neil Harbisson en zijn TED Talk terecht. Deze jonge kleurenblinde kunstenaar ontwikkelde een soort van derde oog waarmee hij kleuren kan horen. Zo kan hij toch de kleuren rondom ons ervaren, maar op een andere manier. Hij gaat elke kleur koppelen aan een toon en elke tint aan een toonhoogte. Ik downloaden zijn Eyeborgapp en ging zelf ook luisteren naar mijn omgeving.

Mijn eerste insteek voor deze opdracht was om een tool te ontwikkelen waarbij je kleuren kon scannen en deze werden dan gekoppeld aan de Europeana database en aan geluid. Uiteindelijk kwam ik na een paar feedbacksessies op het idee het omgekeerd te doen: je kan door de database scrollen en zo de gekoppelde kleuren zien en horen.

Interface

Voor het ontwerpen van mijn interface gebruikte ik de programma’s Sketch en Flinto en koos ik voor een strak design. Ik wou zo de link leggen met het luxueuze gevoel van de haute-couture. Bewust heb ik ook geen kleuren gekozen omdat ik het gangbaar wou maken voor mensen met daltonisme en de aandacht wou vestigen op de kleuren van de kleding. De computer applicatie start onmiddellijk met het hoofdscherm waar je een scroll hebt van alle 286 afbeeldingen van EuropeanaFashion. Je kan heen en weer scrollen door de afbeeldingen en hoort zo bij elke afbeelding onmiddellijk het geluid.

Desktop HD 2

Als je over de actieve afbeelding gaat met je muis, wordt deze een beetje groter en kan je erop klikken waarna er een pop-up open gaat. Verder heb je op het hoofdscherm ook in de rechterbovenhoek twee buttons: één die aanwijst dat je geluid moet aanstaan en één die meer informatie weergeeft over mijn project en idee.

Desktop HD 4

In de pop-up staan drie elementen op een rijtje: links staat er de naam van de kleur, de kleurcode en een rechthoek gevuld met de gekozen kleur, in het midden staat de gekozen afbeelding en rechts de informatie over het ontwerp. Je kan over de afbeelding met je muis gaan en zo het geluid van elke kleurpixel horen. Ook verschijnt de kleur van de pixel in de rechthoek naast de afbeelding.

Onder de rechthoek is er een button met de tekst ‘make a …. scroll for Europeana Fashion’. Wanneer je op deze button klikt, ontstaat er een nieuwe scroll met kleuren uit de gekozen kleur. In de rechterbovenhoek ontstaat er dan een button met de naam van de kleur. Als je op deze button klikt, ontstaat er weer een scroll zonder kleurfilter.

Desktop HD 12 copyDesktop HD 13

Processing

Voor het programmeren van mijn tool koos ik voor het programma Processing 3.3 dat ondersteund wordt door Java. Dit omdat ik al wat gewerkt had met Processing en ik dankzij deze kleine ervaring een basiskennis heb. Mijn kennis was niet groot genoeg om alles zelf te programmeren en ik kreeg de hulp van twee programmeurs.

Op welke manier kleuren koppelen aan geluid?

Als basis schrijven we een code om een venster te maken met het kleurenspectrum in. Het volume wordt gelinkt aan de helderheid van de tint. Wanneer je dus naar donkere kleuren gaat, wordt het geluid stiller dan wanneer je naar heldere tinten gaat. De kleuren zelf worden gelinkt aan de klank, als je dus met je muis van rood helemaal links naar rood helemaal rechts gaat, hoor je een mooie overgang van: do, re, mi, fa, sol, la, si. Dit werkt als je over een keurenspectrum gaat met je muis maar hoe kan ik dit systeem doen werken op afbeeldingen?

 

Hoe elke kleurpixel apart uit een afbeelding koppelen aan geluid? 

We importeren een afbeelding in Processing 3.3 en op de afbeelding programmeren we een vierkant. De color scan wordt gelinkt aan de mouse-over, het vierkantje verandert van kleur wanneer je over de afbeelding gaat met je muis. Doordat ik in de vorige stap kleuren al had omgezet in geluid en met deze code verder ging, hoor je ook het geluid die past bij de kleur. Als resultaat krijg je een muziekstukje wanneer je over de afbeelding gaat met je muis. Deze code heb ik nodig voor een latere stap in mijn interface. Momenteel moet ik een oplossing vinden hoe ik per afbeelding maar één kleur zie en hoor.

 

Hoe een bepaalde kleur koppelen aan een reeks afbeeldingen?

We importeren een reeks afbeeldingen en voor elke afbeelding maken we een vierkant met een bepaalde kleur in. Zo kunnen we door de scroll gaan met de pijltjes van het toetsenbord om zo de kleur van het vierkantje te horen. Dit werkt op een paar random afbeeldingen, nu gaan we zien of dit werkt op een grote reeks afbeeldingen.

 

Hoe deze stap toepassen om de 268 foto’s van Europeana Fashion?

Voor de volgende stap moet ik eerst wat voorwerk doen. Ik importeer elke afbeelding in Photoshop en kies de meest opvallende of prominente kleur. Ik maak een tabel waarin ik eerst de naam van de afbeelding zet en dan de HSB waarde. Dus in de eerste kolom komt de naam van de afbeelding (bijvoorbeeld ‘000’), in de tweede kolom de Hue-waarde van de gekozen kleur (bijvoorbeeld: 50), in de derde kolom de Saturation-waarde van diezelfde kleur (bijvoorbeeld: 95) en in de vierde kolom de Brightness-waarde van de kleur (bijvoorbeeld : 52). Deze kolommen importeer ik in Processing 3.3 en zo kan je de kleuren horen voor de 268 afbeeldingen van EuropeanaFashion. Het systeem van mijn tool is nu geprogrammeerd, nu ga ik testen of ik ook elke kleurpixel apart van de 268 afbeeldingen van EuropeanaFashion kan beluisteren.

 

Hoe elke kleurpixel apart uit de afbeeldingen van Euopeanan Fashion koppelen aan geluid?

Dit is al gelukt op één afbeelding maar ik wil deze code testen op een reeks afbeeldingen. Dit blijkt minder vlot te gaan. De conclusie hiervoor is dat mijn afbeeldingen te zwaar zijn dus verminder ik de resolutie van mijn afbeeldingen zodat dit in de volgende stappen vlotter zou gaan. Ik heb nu alle basiselementen code en kan beginnen aan mijn interface.

 

Welke stappen neem ik om mijn interface goed te krijgen?

Ik begin met mijn scherm groter te maken, de achtergrond zwart te maken, de afbeeldingen kleiner en allemaal op dezelfde hoogte te zetten. De actieve afbeelding in het midden, het vierkantje met de gelinkte kleur eronder en de vier vorige en volgende afbeeldingen ernaast. Deze vier afbeelding rechts en links van de actieve afbeelding maak ik transparant zodat de aandacht naar de actieve afbeelding zou gaan.

 

Processing tekent pixels en geen elementen…

In mijn vorige stappen moest je door de afbeelding met de pijltjes van het toetsenbord, maar die veranderde ik door een scroll. Wanneer je over de afbeelding gaat met je muis, wordt de afbeelding lichtjes groter en wanneer je klikt, gaat de pop-up open. In de pop-up staat de afbeelding maar groter en een gekleurde rechthoek. Als je over de afbeelding gaat, verandert deze van kleur, maar ook wanneer je met je muis van de afbeelding gaat. Dit komt omdat Processing geen elementen tekent, maar pixels waardoor je geen code kan toepassen op één bepaalde afbeelding. Dit kan een lastig aspect worden voor het programmeren van mijn project. Maar het is ook mijn taak als grafisch ontwerper om de problemen te omarmen en oplossingen te zoeken binnen de mogelijkheden.

Eindwerk

Processing 3.3 is een breed programma en er zijn veel mogelijkheden maar het is geen interface programma. Ik koos er dus voor mijn project voor te stellen in twee programma’s: processing voor de werking ervan en flinto voor de interface. Op deze manier kan ik een zo duidelijk mogelijke simulatie maken van mijn tool.

Voor de interface heb ik lang getwijfeld om voor de scroll nog een startscherm te maken met een kleine introductie maar uiteindelijk heb ik dit weggelaten. Dit was onnodig omdat uiteindelijk iedereen gewoon onmiddellijk wilt beginnen en de informatie op een andere manier kan worden geraadpleegd. Mijn interface was in eindfase op het moment dat een paar mensen van het grafisch bureau Beyond.io uit Antwerpen langskwamen. Ik kreeg toen de vraag waarom ik de kleur in een vierkantje liet en het niet doortrok naar de achtergrond van mijn tool. Ik was niet overtuigd en heb dit dan getest.

Uiteindelijk koos ik ervoor om het zwart te laten omdat ik de strakke en chique sfeer van de Haute-Couture niet wou verliezen. Ook in het logo voor ‘colour meets sound’ blijf ik in deze stijl door het gebruiken van de Vogue-typografie. Ik wou mijn tool zo simpel mogelijk houden zodat de aandacht vooral ging naar de kleuren en geluiden.

De Processing-versie is vooral een simulatie van hoe de scroll werkt, welke geluiden met welke kleuren worden gekoppeld en hoe je elke kleurpixel apart kunt beluisteren. Je kan door de 268 afbeeldingen scrollen, hun geluid horen en kleur zien. De actieve afbeelding (nummer 100) en de 5 ervoor en erna zijn klikbaar. Wanneer je op deze afbeeldingen klikt opent er een pop-up. In de pop-up staat de afbeelding in groot en kan je er over gaan met je muis om zo elke kleurpixel te zien en horen. Deze kleur van de pixel verschijnt ook in de grote rechthoek links van de afbeelding. Boven de rechthoek staat de naam en de code van de kleur en rechts van de afbeelding staat informatie over de kleding. Met het kruisje kan je de pop-up weer sluiten.

Om de kleurfilter te simuleren schreef ik nog een code in een apart venster voor de kleur roze. Op die manier kan je horen en zien hoe de scroll zou werken moest die gefilterd zijn op één kleur. De Processing versie is dus geen vervanging van de flinto-versie maar een ondersteuning zodat de werking van mijn tool duidelijk wordt.

Met dank aan Jan Pillaert (LUCAexperts) & Tanguy Deleu

behance    vimeo