【问题标题】:Suggestions on how to make a color map for a generated terrain map?关于如何为生成的地形图制作彩色地图的建议?
【发布时间】:2011-08-14 00:33:28
【问题描述】:

我对昨天有人发布的关于菱形平方算法的问题很感兴趣,Node.js / coffeescript performance on a math-intensive algorithm

我继续修改他的代码,并希望采取下一步措施,为结果数据网格生成一些颜色图。

我最初的想法是把海洋的最深点到珠穆朗玛峰的高度作为我的高度范围。这使海平面约为 2076m,最大高度约为 10924m(珠穆朗玛峰为 8848m)。无论如何,所以我正在生成我的数据网格,其值非常接近我想要的。

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

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

【问题讨论】:

    标签: javascript colors terrain


    【解决方案1】:

    是的,你的建议听起来不错。对于中间值,通常使用线性插值。下面的 sn-p 显示了如何在 #00 和 #ff 之间插入 5% 的路径(并且还显示了您需要的转换):

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

    显然,您会将其包装在一个函数中 - 我只是从我检查过的 chrome 命令行中剪切+粘贴。

    [edit:] 清楚吗?在上述情况下,如果您想要#00 和 0m 以及 100m 处的 #ff,我将计算 5m 处的值,其中该值仅适用于一个通道(r、g 或 b)。您需要对各个步骤重复此操作,并将 r g 和 b 连接在一起。

    这是另一个示例,您将从 #a0 下降到 #20,范围为 50m,距离 #a0 10m。请注意,我们有一个额外的减法,因为初始值不为零。

    > ("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 已经为你编写了这样的功能,如果有帮助的话(没用过,但它就是那种库......)

    【讨论】:

    • 所以要明确一点,5 是一个可调整的参数,基于我想要的值之间的差异量,而 100 是我生成的数据中的可变高度?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-04
    • 2015-01-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-26
    相关资源
    最近更新 更多