What Color Are You Today?

What Color Are You Today?

WCAYT is een website die de mogelijkheid biedt jouw current mood te visualiseren middels een kleur. Deze kleur verplaatst zich vervolgens naar een interactieve kaart van Nederland. Op basis van GPS kan de gebruiker slechts één provincie veranderen van kleur, de provincie waarin hij zich op dat moment bevindt. Zo krijg je een interactieve kaart van Nederland die gedurende de dag blijft veranderen.

Dit concept wordt aangevuld met Meteor, een realtime platform met een enorme library aan pakketten. Meteor zorgt er voor dat de gebruiker de pagina niet hoeft te re-freshen maar dat deze automatisch geupdate wordt.

WCAYT maakt gebruik van SVG bestanden, vector bestanden gemaakt in Adobe Illustrator die scaleble zijn. Middels een Javascript library genaamd Snapsvg worden deze vector bestanden geanimeerd, en krijgen deze andere waarden. Denk hierbij aan kleur.

Het concept bestaat uit: HTML / CSS / Javascript / Vector svg / Meteor /

Meeting met Vasillis van Gemert, docent te HvA Communication & Multimedia Design

Vasillis doet veel onderzoek naar kleur, kleurenstudies. De emoties achter kleur, gedragingen op basis van kleur en wat een kleur nou eigenlijk betekent. Het was erg inspiratievol om Vasillis zijn projecten te zien, en zijn gedachtestelling te horen omtrent mens & kleur. Conclusie: Wij weten eigenlijk heel weinig over kleur en wat het doet/is.

Met deze informatie in het achterhoofd ben ik aan de slag gegaan. Ik ben tot een demo gekomen van mijn concept, en heb deze dan ook gepresenteerd. Het was een leerzaam traject, met top docenten die je op de juiste manier prikkelen.

Mijn demo is te zien op:

https://github.com/TuriGuilano

26-06-2015 Mits: Documentatie (technische uitwerking van het idee beschrijven en uitleggen)

Beschrijving & technische uitwerking: What color are you today

Concept:

Het idee bestaat uit vier onderdelen:

1. De gebruiker
2. Zijn of haar emotie
3. Het koppelen van de emotie aan een kleur
4. Deze weergeven in de kaart van Nederland

Door de emotie te koppelen aan de kaart van Nederland, op basis van GPS krijg je een interactieve kaart van Nederland die Real-time refresht wanneer een gebruiker zijn of haar kleur toevoegt. Het idee hierachter is om zo te achterhalen waar in Nederland, op dit moment zich de meest gelukkige mensen bevinden. De gebruiker kan met zijn selectie slechts één provincie aanpassen, dit hangt af van de GPS.

Technische uitwerking:

Voor dit project heb ik gebruik gemaakt van een aantal elementen:
– HTML / CSS /Javascript
– Adobe Illustrator / PhotoShop
– Vector bestanden
– Snapsvg, een Library voor Javascript die svg bestanden (vector) kan animeren
– Meteor, een realtime platform met een gigantische library aan paketten

Hoe breng ik deze elementen dan samen:

Het begint bij het creëren van een Vector / SVG bestand. Deze SVG draagt een ontzettend lange code met zich mee die ik binnen de HTML van de pagina plaats. De SVG heeft bepaalde waarde mee gekregen zoals zijn kleur, en oppervlakte. Deze codes zijn van belang wanneer ik de SVG ga manipuleren binnen mijn javascript. 

Ik creëer een button binnen de HTML van de pagina en koppel een event aan de button. Wanneer er op de button geklikt wordt, voert JS een code uit die de SVG manipuleert. Hierbij is Snapsvg van belang. Middels de terminologie van Snap roep ik een bepaalde functie aan, die ik waardes meegeef,
waardoor de SVG gemanipuleerd wordt.

Dit alles is fijn, maar het grootste deel komt nu: het Real Time maken van deze interactieve pagina.
Meteor biedt een platform aan wat er voor zorgt dat een webpagina niet gerefresht hoeft te worden. Deze wordt automatisch geüpdate. Hiermee is de interactieve kaart van Nederland compleet. Zo wordt de data van de gebruiker opgeslagen en gelijk doorgevoerd, dit biedt een nieuw arsenaal van mogelijkheden aan. Hier kan je ongelofelijke stappen mee maken. Denk hierbij aan het realtime weergeven van de beurs, of het realtime weergeven van de gelukstoestand op basis van kleur per provincie binnen Nederland.

Technische uitwerking 1.0

Voor het 1.0 product zou ik gaan werken met een color picker in plaats van buttons die provincies animeren en veranderen van kleur.

Wanneer de gebruiker op een provincie klikt, komt er een color picker naar voren, de gebruiker kan een kleur selecteren en deze wordt vervolgens overgezet naar de provincie. De provincies kun je zien als individuele elementen binnen de HTML pagina, wanneer er op zo een element geklikt wordt speelt er zich een event af binnen de JS die gekoppeld is aan dat specifieke element.
Deze zorgt er op zijn beurt voor dat de gebruiker een kleur kan selecteren. De geselecteerde kleur wordt meegegeven aan het element, en de gebruiker heeft succesvol zijn mood doorgegeven!

Bekijk code op github:
https://github.com/TuriGuilano