Question

我接着调整了他的代码，并希望为生成的数据网格生成一些颜色贴图。

我最初的想法是将海洋中最深的一点带到珠穆朗玛峰的高度，作为我的身高范围。海平面位于约2076米，最大高度约为10924米（珠穆朗玛峰为8848米）。无论如何，所以我正在生成我的数据网格，其值与我想要的非常接近。

我正在考虑制作一个十六进制颜色值的数组，首先是用深蓝色调为浅色调为水，然后是深绿色到白色，用于海平面到山脉。我可以设置高度值范围以对应于颜色区域。

做这种事情的常用技巧是什么？我更具体地说，对于给定的高度值，如何在2个十六进制值之间生成特定的十六进制颜色？

Answer 1

是的，你的建议听起来不错。对于中间值，通常使用线性插值。以下代码段显示如何在＃00和#ff之间插入5％的路径（并显示您需要的转换）：

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

显然，你将它包装在一个函数中 - 我只是从我检查它的chrome命令行剪切+粘贴。

[编辑：]那清楚吗？在上面的例子中，如果你想要＃00和0m以及#ff在100m，我正在计算5m的值，其中该值仅适用于一个通道（r，g或b）。你需要为各个步骤重复这个步骤，并将r g和b连接在一起。

这是另一个例子，你从＃a0下降到＃20，范围为50米，距离＃a0 10米。请注意，我们有一个额外的减法因为初始值不为零。

> ("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有这样的函数已经为你编写了，如果它有任何帮助（没有使用它，但它就是那种库......）