Will McLean
Process diary

Colour by word

Created: September 9, 2018

This is an exercise by Will McLean. View this exercise here or view all exercises here.

Let’s see if I can programatically set a colour based on a word. Programatically generating colours forces me to design a “process” rather than the result. This is something that could save me a shed load of time and effort in future projects.

Process

I will use Hue, Saturation and Luminosity. I will set them as follows:

  • Hue is set by the ‘value’ of the letters
  • Saturation is set by the length of the word
  • Luminosity is manually set at 50%

Hue

Hue is set by the value of the letters. Each letter is given a value from 1 to 26. A being 1 and Z being 26. We add those value together to get a total value for the word out of a maximum that is calculated by 26 * no. of letters. For example a word with 4 letters would result in a maximum value of 26 * 4 = 104. We then turn that into a degree value out of the possible 360 degrees in the hue range using cross multiplication.

let wordLength = document.querySelector('.word').length,
            letterPercentage = 100 / wordLength,
            totalHue = 0;

        for ( i = 0; i < wordLength; i++ ) {
            let value = word.charCodeAt( i ) - 64; // See unicode values: https://unicode-table.com/en
            value = parseInt( value );
            totalHue += value / 26 * letterPercentage;
        }

For example, the word COOL has four letters. C = 3, O = 15, O = 15 and L = 12. The maximum is 104. By adding the values together we get 45 / 104. We then use cross multiplication to turn this into a degree value ie. hue / 360 = 45 / 104. Therefore hue = 45 / 104 * 360 = 156 degrees

Saturation

Saturation by comparison is a doddle. I set the amount of letters I want the satuaration to max out at (ie. equal 100%). If our max was 10 letters then if a word has 4 letters then it has 40% saturation. A word with 6 letters gets 60% saturation. Anything over 10 letters would max out at 100%. For the exercise I choose 12 as the max out value:

sat = wordLength / 12 * 100;

 

Why are all the words blue?

After coming up with the system I threw a bunch of words into it. Turns out that the system of adding up all the values from the letter invariably ended up with values in the middle section of the range. This meant all the colours were blue. To fix this I added a step into the system that turned the value of the word into a percentage before translating it to a degree value. I then made all values from 0 to 25% equal to 0 degrees, all values from 75% to 100% equal to 360 degrees and then spread the values in between across the full 360 degrees.

let myMin = 25,
            myMax = 75;

        if ( totalHue < myMin ) {
            totalHue = 0;
        } else if ( totalHue > myMax ) {
            totalHue = 360;
        } else {
            totalHue = totalHue - myMin;
            totalHue = totalHue / ( myMax - myMin ) * 360;
        }

Credits:
Concept: Will McLean & Brett Walsh
Development: Will McLean

This is a Exercises post.