Предложения о том, как сделать цветную карту для сгенерированной карты местности?

Question

Меня заинтересовал этот вопрос, который кто-то вчера опубликовал о алгоритмах с бриллиантовыми квадратами, о производительности Node.js / coffeescript в математически интенсивном алгоритме.

Я выполнил адаптацию его кода и хочу сделать следующий шаг в создании некоторых цветовых карт для результирующей сетки данных.

Мои первоначальные мысли состояли в том, чтобы перенести самую глубокую точку океана на высоту Эвереста в качестве моей высоты. Таким образом, уровень моря составляет около 2076 метров, а максимальная высота - около 10924 метров (Эверест - 8848 метров). В любом случае, я создаю свою сетку данных со значениями, которые очень близки к тому, что я хочу.

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

Каковы общие методы для такого рода вещей? Я думаю более конкретно, как вы генерируете определенный шестнадцатеричный цвет между двумя шестнадцатеричными значениями для данного значения высоты?

Answer 1

Да, то, что вы предлагаете, звучит хорошо. для промежуточных значений обычно используется линейная интерполяция. В следующем фрагменте показано, как интерполировать 5% пути между #00 и #ff (а также показаны необходимые преобразования):

> ("00" + Math.floor(parseInt('00',16) + 5 / 100 * parseInt('ff',16)).toString(16)).slice(-2)
"0c"

очевидно, вы бы обернули это в функцию - я просто вырезал + вставил из командной строки Chrome, где я проверил это.

[edit:] это понятно? в вышеприведенном случае я вычисляю значение на 5m, если вы хотите #00 и 0m и #ff на 100m, где значение только для одного канала (r, g или b). вам нужно будет повторить это для разных шагов и соединить rg и b вместе.

Вот еще один пример, где вы переходите от #a0 до #20 в диапазоне 50 м, 10 м от #a0. обратите внимание, что у нас есть дополнительное вычитание, потому что начальное значение не равно нулю.

> ("00" + Math.floor(parseInt('a0',16) + 10 / 50 * (parseInt('20',16) - parseInt('a0', 16))).toString(16)).slice(-2)
"86"

Итак, игнорируя преобразование, интерполяция выглядит так:

start_value + (distance_from_start / total_distance) * (end_value - start_value)

и преобразования

decimal_int = parseInt(hex_string, 16)
hex_string = decimal_int.toString(16)

ps я бы предположил, что processing.js имеет функции, подобные этой, уже написанные для вас, если это поможет (не использовал, но это такая библиотека...)