Отображение цветов для 16-битных значений оттенков серого с плавными переходами

Question

У меня есть 16 бит точности для моих данных.Попытка визуализировать эти данные в 8-битном оттенке серого приводит к значительному полосатости.Я думал, что могу хранить эти 16-битные значения в цветах.Например, первые 8 битов могут находиться в красном канале, а следующие 8 битов - в зеленом канале.

Однако это приведет к резким переходам.Переход от 65280 (255,0,0) к 65279 (254,255,0) приведет к немедленному изменению цвета с красного на желтый.Это действительно не помогает человеческому толкованию.

Я знаю, что HSB довольно легко может обеспечить 360-градусную вариацию, но 360 значений цвета на самом деле не намного больше, чем 256, которые у меня уже есть с 8-но оттенками серого..

Что было бы наиболее подходящим способом представления значений в диапазоне 0-65535 в терминах цветов, которые переходят таким образом, который имеет смысл для людей?

Answer 1

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

Но если вы написали оможет показаться, что данные имеют градиентный характер, поэтому глаза могли бы быть более прощенными, если бы две разные «числовые зоны» имели одинаковые цвета из-за контекста близких цветов.

Я бы не стал использовать 16 бит (это было бы слишком много, и мы не можем четко видеть все цвета RGB, и мало кто имеет действительно хорошие мониторы).Возможно, вы можете создать интерфейс, который может увеличивать масштаб и добавлять больше контраста в ограниченном диапазоне.

Для меньшего количества битов вы можете начать с сине-зеленого (0, x, x) повышения [x с 0до 255], затем переходя к зеленому (0,255, х) [от 255 до 0], затем к черному (0, х, 0), от 255 до 0, затем к желтому (х, х, 0), затем к красному(255,0,0), затем черным, затем фиолетовым (х, 0, х), затем синим, затем черным и, наконец, белым (х, х, х).

Итак 10шкалы, которые дают нам больше, чем 3 дополнительных бита информации.

Я, вероятно, никогда бы не пошел к черному (как вы видите, это повторяется), а просто к x до 5 или 10, что уменьшит числобит.Но я думаю, что у вас все еще есть 11 бит информации, и масштаб различим человеческими глазами.

В этом примере я использовал 6 основных цветов + вторичные цвета (+ оттенки серого), поэтому их легко различить.Теоретически можно использовать дополнительные промежуточные цвета, но я думаю, что это намного запутало бы наши глаза.

Я бы предложил дополнительный ввод для смещения вверх и вниз по исходным номерам данных, чтобы пользователь мог проверить более подробно(и получать больше битов) в некоторых регионах.Но это хорошо работает, если между соседними числами не так много экстремальных изменений,

Answer 2

Мне не понятно, почему вы рассчитываете значения RGB таким образом, что (255, 0, 0) следует (254, 255, 0).Кажется, что это должно продолжаться в некотором варианте:

(0, 0, 0) -> (254, 0, 0) -> (254, 1, 0) -> (254, 254, 0) -> (254, 254, 1) -> (254, 254, 254).

Это будет представлять переход от черного к белому через красный, оранжевый и желтый без каких-либо резких изменений.Из-за нелинейной работы наших глаз это может не восприниматься как совершенно гладкое, но вы должны быть в состоянии сделать это без значительных полос.Например:

let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

let rgb = [0, 0, 0]
// fill channels fromgre
for (let j = 0; j < 3; j++){
  for (let i = 0; i < 254; i++) {
    rgb[j]++
    ctx.fillStyle = `rgba(${rgb.join(",")}, 1)`
    ctx.fillRect(i +254*j, 0, 1, 50);
  }
}

<canvas id="canvas" width="765"></canvas>

Или синим цветом, начиная с другого конца:

let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

let rgb = [0, 0, 0]
// fill channels fromgre
for (let j = 0; j < 3; j++){
  for (let i = 0; i < 254; i++) {
    rgb[2-j]++
    ctx.fillStyle = `rgba(${rgb.join(",")}, 1)`
    ctx.fillRect(i +254*j, 0, 1, 50);
  }
}

<canvas id="canvas" width="765"></canvas>