在一定范围内用paper.js进行颜色变换

Question

我有一个问题，需要一个解决办法，经过一整天的思考。我想要生成一个画布，它通过使用范围来改变他的颜色。听起来很简单。

颜色在(HSB)里。有6种颜色。

1. 蓝色(230、S、B)
2. 绿色(130、S、B)
3. 黄色(55、S、B)
4. 橙色(40，S，B)
5. 红色(0(或360)，S，B)
6. 维奥莱特(315，S，B)

饱和度和亮度微乎其微(可以一直保持不变)。

颜色必须在这个范围内改变。

1. 蓝色0- 2.9绿色
2. 绿色3- 5.9黄色
3. 黄色6- 8.9橙色
4. 橙色9- 11.9红色
5. 红色12-14.9中提琴

所以如果我能得到像这样的数据

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,...);

画布必须改变颜色之间的慢从蓝色到绿色，然后应该有一个“剪彩”，因为“大跳跃”从0.4到3.4 (绿色和黄色之间的东西)。

我在寻找这个问题背后的“逻辑”。我已经有了带有画布的HTML。对于画布和颜色，我使用的是Paper.js

希望有人能理解我的问题！

谢谢

Answer 1

我不知道Paper.js，所以我不得不在画布上得到颜色，但是我可以帮助将数据转换成颜色。由于您的五色范围没有相同的大小，我们必须对每一种颜色进行单独的计算。

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]));
}

现在，sampleColors包含属于sampleData中项的hsb颜色字符串。

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

如果颜色符号不符合您的需要，请发表评论。