关于如何为生成的地形图制作彩色地图的建议

Suggestions on how to make a color map for a generated terrain map?

本文关键字:彩色 地图 地形图 于如何      更新时间:2023-09-26

我对昨天有人发布的关于菱形方算法的问题很感兴趣,Node.js/coffeescript在数学密集型算法上的性能。

我遵循了他的代码,并想采取下一步为生成的数据网格生成一些颜色映射。

我最初的想法是把海洋中最深的点到珠穆朗玛峰的高度作为我的高度范围。这使得海平面约为2076米,最大高度约为10924米(珠穆朗玛峰为8848米)。总之,我生成的数据网格的值非常接近我想要的。

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

做这种事情的常见技术是什么?更具体地说,如何在给定高度的2个十六进制值之间生成特定的十六进制颜色?

是的,你的建议听起来不错。对于中间值,通常使用线性插值。下面的代码片段展示了如何在#00和#ff之间插入5%的方式(还显示了您需要的转换):

> ("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)。你需要在不同的步骤中重复,并将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已经为你写了这样的函数,如果它有任何帮助(没有使用它,但它是那种库…)