I got interested in this question someone posted yesterday about diamond-square algorithms, Node.js / coffeescript performance on a math-intensive algorithm.
I followed through with adapting his code and want to take the next step in generating some color maps for the resulting data grid.
My initial thoughts were to take the deepest point in the ocean to the height of Everest as my height ranges. That puts sea level at about 2076m and max height at around 10924m (Everest is 8848m). Anyway, so I’m generating my grid of data with values that are pretty close to what I want.
I was thinking of making an array of hex color values starting with say a dark shade of blue to light shade for water, then a dark green to white for sea level to mountains. I can setup ranges of height values to correspond to regions of color.
What are the common techniques for doing this kind of thing? I think more specifically, how do you generate a specific hex color between 2 hex values for a given height value?
yes, what you suggest sounds good. for in-between values, typically you use linear interpolation. the following snippet shows how to interpolate 5% of the way between #00 and #ff (and also shows the conversions you need):
obviously, you’d wrap that in a function – i’m just cut+pasting from a chrome command line where i checked it.
[edit:] is that clear? in the case above, i’m calculating the value at 5m if you want #00 and 0m and #ff at 100m, where the value is just for one channel (r, g or b). you’d need to repeat that for various steps, and join r g and b together.
here’s another example where you’re going from #a0 down to #20 over a range of 50m, 10m from #a0. note that we have an extra subtraction because the initial value isn’t zero.
so, ignoring the conversion, the interpolation is:
and the conversions are
ps i would imagine that processing.js has functions like this already written for you, if it’s any help (not used it, but it’s that kind of library…)