The colour project

En av mina vänner, Pontus Willebrand, studerar på Forsbergs och har tillsammans med sina kurskamrater Moa Blomkvist, Janna Lindholm, och Josefin Quistbergh arbetat med ett projekt som handlar om ord och färger.

Deras infallsvinkel har varit att omvandla just ord till färger, och för detta ändamål har det tagit fram en algoritm som genererar HSB-värden (Hue/Saturation/Brightness) för ord beroende på en rad parametrar, så som ordets längst, ordets första bokstav, och förhållande mellan ordets samtliga konsonanter respektive vokaler.

För att presentera arbetet ville de ta fram en enkel webbapp med ett formulärfält där besökaren kan skriva in ett ord och få fram färgen som det ordet resepresenteras av, och det var här jag kom in i bilden i min roll som gränssnittsutvecklare.

Jag tog deras algoritm och omvandlade den till JavaScript, skapade en sida (jag fick ganska fria händer gällande utformningen) och satte ihop allt. Eftersom webbläsare inte kan tolka färger i HSB-format så var jag dessutom tvungen att skriva ett par extra funktioner som omvandlar HSB till RGB. Eftersom jag dessutom ville kunna visa färgkoden i både HEX, RGB, och HSL så skrev jag dessutom funktioner för att omvandla RGBvärden till just HEX och HSL.

Det går enbart att använda a-z i formulärfältet, och alla andra tecken, inklusive blanksteg, raderas. Detta för att projektet bara ska hantera ett ord i taget.

Sidan som den ser ut i dag finns på pontuswillebrand.se/thecolourproject, och jag har dessutom en egen, uppdaterad version på iamleft.se/thecolourproject där jag experimenterar med sidans design och lite extra features.

På den experientiella versionen av projektet så har jag ändrat hur bakgrundsfärgen animeras (detta kräver dock IE9+, eller senare versioner av Chrome, Firefox, Opera, eller Safari). Sidans URL uppdateras också när ett nytt ord skrivs in i fältet så att man kan länka direkt till ett specifikt ord. Samtidigt så ändras sidans titel och (om man använder Google Chrome) faviconen för sidan ändras till att visa den färg som ordet representerar. Funktionen för faviconen är inget avancerat, det är bara ett gömt canvas-element som fylls med färgen när man skriver ett ord och sedan, via toDataURL(), omvandlas till en DataURI som ersätter faviconens href-värde.

Algoritmen kommer eventuellt att uppdateras då vi tycker att den har en tendens att generera färger i det blå/gröna spektrat lite väl ofta, och så småningom kommer den version som ligger på Pontus webbsida att uppdateras, men så länge kan man se båda versionerna.

JavaScript till Forsbergs

Jag har en vän som går på Forsbergs där han för tillfället gör en sak med ord och färg. Till detta experiment hade han och hans kursare tagit fram en halvt om halvt avancerad algoritm som omvandlar ord till färger i HSV-format.

Detta ville de visualisera i en webbläsare och projicera under en utställning, men tyvärr så saknades kompetensen när det kom till JavaScript, så därför frågade de mig om jag ville hjälpa till.

Självklart sa jag ja, och jag sitter i skrivande stund och knappar kod och räknar matte. Det blir nog en lång kväll.

Jag vet inte ännu om/när jag kan visa koden jag skrev för någon annan, men är det fritt fram sen så länkar jag den här på bloggen.

Hur som helst, tillbaks till koden.

Slides from the 2011 Scandinavian Web Developers Conference

Today I went to the Scandinavian Web Developers Conference, a 1 day, 1 track conference in Stockholm, Sweden and I thought I’d share with you the slides from the different sessions.

There was 9 speakers, each giving a presentation and at the moment of writing I have the links to 6 of the slides but I will update this post as I get access to the rest and here they are.

I will also do a more detailed post on the conference as a whole, but right now I am having some post-conference beer and should probably get back to discussing web browsers, bugs and feature detection with the people at my table. 😉