Определение правила: связать целочисленное значение с цветом #RGB - PullRequest
Новая
       25

Определение правила: связать целочисленное значение с цветом #RGB

2 голосов
/ 02 апреля 2011

Я бы хотел определить цвет фона C в зависимости от целого числа X (количество положительных голосов)

Хорошо, я мог бы сделать 

if(x==0) c = '#000';
else if(x > 0 && x < 5 ) c = '#001'
else if(X<=5 <= 20) c = '#002';
//and so on...

Но как я могу сделать это, чтобы сделать это постепенно? Я имею в виду от 0 до 500 голосов -> 500 тонов синего цвета? (если я не ошибаюсь, возможны две цифры для HEX (если нет, 15 * 15 xD))

Есть идеи?

Ответы [ 3 ]

3 голосов
/ 02 апреля 2011

Так как вы просто ищете идеи, вот тот, который никто не предложит. Во-первых, посмотрите на формулы «Catmull-Rom Spline». Это сводится к очень простому трюку умножения матриц, который дает формулу для вычисления кривых с учетом набора контрольных точек.

Хорошо, теперь, когда вы знаете все о сплайнах Catmull-Rom, вы можете написать некоторый код для построения кривой в трехмерном пространстве. Ну, что такое RGB, если не трехмерное пространство? Таким образом, вы выбираете несколько хороших контрольных точек цвета (цвета RGB), а затем используете удобную реализацию Catmull-Rom, чтобы сгенерировать параметрическую кривую для всех этих цветов с таким количеством цветов вдоль кривой, как вы хотите.

Крутой особенностью цветовых прогрессий будет то, что они действительно "плавные" при переходах.

2 голосов
/ 20 августа 2011

Включите Raphaeljs на свою страницу и вставьте функции estimateColorForValue() и toHex() в ваш код.estimateColorForValue(hue, value, darkestValue, brightestValue) вычисляет цвет для некоторого значения, интерполируя цвет, определяя, где находится диапазон [darkestValue-brightestValue] value.hue находится в диапазоне [0-1]: 0.1 для оранжево-коричневого цвета, 0.4 для зеленого, 0.8 для розоватого и многих других промежуточных цветов.небольшие изменения оттенка радикально меняют цвет изображения.

Например: estimateColorForValue(.1, 15, 1, 20), можно объяснить тем, что для данных в диапазоне от 1 до 20 вычислите цвет для значения 15 в оранжевом пространстве.1015 *toHex(estimateColorForValue(.1, 15, 1, 20)) ==> "#cf8415"

Код: 

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>

<script>

function toHex(hsb) {
  return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex;
}

function estimateColorForValue(hue, value, darkestValue, brightestValue) {
  // Constants to determine saturation and brightness
  var darkBrightness = 0.6;
  var brightBrightness = 1;
  var darkSaturation = 0.3;
  var brightSaturation = 1;

  // Compute saturation and brightness:
  var gradient = (value - darkestValue) / (brightestValue - darkestValue);
  var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation);
  var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness);

  return {h: hue, s:saturation, b:brightness};
}
</script>
2 голосов
/ 02 апреля 2011

Я бы, наверное, использовал что-то вроде: 

var blueness = x / 2;
if (blueness > 255) blueness = 255;
rgb(0, 0, blueness);

но вы можете использовать эту реализацию sprintf и использовать ее так же, как и на любом другом языке для преобразования в шестнадцатеричный код.

...