Will McLean is a designer and artist working in the Central Coast of NSW where he lives with his wife and 2 children.

Will draws and paints out of habit and addiction. He writes about his struggles on the battlefield of art in the Art Archive section of this site.

Will is a meticulous developer and favours simplicity and clarity within his code. He can’t stand writing things twice so searches for any way to automate. His experiments can be found in the Exercises section of this site.

Will designs within systems. No project is too small for a design system. He favours the unusual, if not, how can he progress? You can read about his work in the Case Studies section of this site.

Created: September 9, 2018

This is a Exercises post.

Colour by word

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