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.

Author: Ludvig Lindblom

Ludvig Lindblom is a front-end developer from Stockholm, Sweden who's nuts about internet, user interfaces and web standards. Besides his passion for the web he has an education in agriculture and forestry, has worked as a lumberjack, is a father of two and always has a chilled glass in the fridge on fridays for the weekly dry martini.

1 thought on “The colour project”

Comments are closed.