Context note: Jerome is using interface and design ideas from a previous r-echos version to make a website for gasworks and node.london. Cf. http://capacity.electronest.com/2008/02/22/commentpress-meets-r-echos/
Every category is associated to a color used as the title’s background. We originally wanted to make a plugin to edit these associations in wordpress admin. But then we thought that the association of a color and a category is a bit subjective and not that meaningful. What is interesting in this system that it allows to quickly identify the “theme” of a bunch of post and make visual links between post titles. So it is important that each category is always associated to the same color, and it could be interesting as well is similar categories or tags (cities and city, curation and curtors etc…) could be associated to similar color.
The solution that we tries is to calculate colors according to the letter composing a category name. It is based on the definition of colors as a mix of levels of red, green and blue. In the HTML styling conventions color can be are expressed as R,G and B values ranging from 0 to 255. So we split each category names in three parts sequentially, each one representing R G and B. Then we associate each letter in the slice to its number in the alphabet, from 0 to 25. We calculate the means of each segment and multiply by 10 so our RGB values ranges from 0 to 250 by steps of 10 units.
For example: “urbanism” is splited in three segments “urb” (R), “ani”(G), “sm”(B), if we match letter and their position in the alphabet it makes ((20+17+1)/3)*10 = 126 for red, ((0+13+8)/3)*10 = 70 for green, ((18+12)/2)*10 = 150 for Blue.
This is how we wrote the function to implement this in Javascript:
1 function get_color(s) { 2 // returns a rgb(R,G,B) string to be used in a CSS stylesheet 3 function calc(s) { 4 var alpha='abcdefghijklmnpqrstuvwxyz'; 5 var t=0; 6 for (var [k, v] in s) { t+=alpha.search(v); } 7 return t/s.length; 8 } 9 if (s != null && s != '') { 10 var i = Math.round(s.length/3); // what is the lenght of a slice 11 var r = Math.round(calc(s.slice(0,i).toLowerCase()))*10; 12 var g = Math.round(calc(s.slice(i,2*i).toLowerCase()))*10; 13 var b = Math.round(calc(s.slice(2*i,s.length).toLowerCase()))*10; 14 return 'rgb('+r+','+g+','+b+')'; 15 } 16 else { 17 return 'rgb(255,255,255)'; 18 } 19 }
