Color transformation with paper.js in a range

Question

I have a problem and need a solution after thinking about it the whole day. I want to generate a canvas which changes his color by using a range. Sound simple.

The colors are in (HSB). There are 6 colors.

1. blue (230, S,B)
2. green (130, S,B)
3. yellow (55, S,B)
4. orange (40, S,B)
5. red (0(or 360), S,B)
6. violette (315, S,B)

The saturation and brightness are insignificant (can be the same all the time).

the color has to change in this range

1. blue 0 - 2.9 green
2. green 3 - 5.9 yellow
3. yellow 6 - 8.9 orange
4. orange 9 - 11.9 red
5. red 12 - 14.9 violette

so if i've get some data like this

var sample Data = new Array(0.1,0.2,0.3,0.4,3.4,5.9,9.3,9.4,9.5,9.6,...);

the canvas has to change the hue between slow from blue to green and then there should be a "color-cut" because of the "big jump" from 0.4 to 3.4 (something between green and yellow).

I'm looking for the "logic" behind this problem. I have already the HTML with canvas. For canvas and colors I'm using Paper.js

hope someone understand my problem!

thanks

Answer 1

I don't know Paper.js, so I can't help getting the colors on the canvas, but I can help to convert the data into a color. Since your five hue ranges havn't same size we have to do a separate calculation for each.

var sampleColors = [],
    l = sampleData.length,
    s = '50%',
    b = '50%';
function getColor(d) {
    var c, m = d % 3;
    if (d < 3) c = 230 - m * 33.333;
    else if (d < 6) c = 130 - m * 25;
    else if (d < 9) c = 55 - m * 5;
    else if (d < 12) c = 40 - m * 13.333;
    else c = 360 - m * 15;
    return 'hsb(' + Math.round(c) + 'deg,' + s + ',' + b + ')';
}

for(var i = 0; i < l; i++) {
    sampleColors.push(getColor(sampleData[i]));
}

Now sampleColors contains the hsb color strings that belong to the items in sampleData.

sampleData[0] == 0.1;    sampleColor[0] == 'hsb(227deg,50%,50%)';
sampleData[4] == 3.4;    sampleColor[4] == 'hsb(120deg,50%,50%)';

If the color notation doesn't fit your needs, please post critique.