Color Transformation With Paper.js In A Range

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 (H

Solution 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%';
functiongetColor(d) {
    var c, m = d % 3;
    if (d < 3) c = 230 - m * 33.333;
    elseif (d < 6) c = 130 - m * 25;
    elseif (d < 9) c = 55 - m * 5;
    elseif (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.