Grayscale PGgraphics to a gradient map

dehyde

Hi

I have a grayscale pgraphics that I'm crating that simulates accumulation and I want to transition the grayscale colors into a gradient map of multiple hues similar to the one in the attached image.

I'm not sure how to approach this.

jeremydouglass

I can help you with this.

Will the brightness channel of your PGraphics pixels range 0-255, or are you working with a defined range?

Does your target elevation-style output involve a specific list of colors? What are they?

dehyde

@jeremydouglass the range is not yet defined but let's assume it is the same range as the this map:

120, 178, 222
141, 193, 234
161, 210, 247
185, 227, 255
216, 242, 254
167, 223, 210
171, 207, 164
239, 235, 191
222, 214, 163
211, 202, 157
202, 184, 130
194, 166, 106
184, 151, 89
170, 135, 83
169, 158, 141
244, 222, 216

and yes, the brightness is normal 0-255 range :)

jeremydouglass

1. As a demo example of random accumulation, begin with the Noise2D example sketch

2. Add an ordered array of colors[] corresponding to your gradient map. This short example list of colors was sampled from the key to your Russian map of the Caucasus.

       color P3 = color( 169, 134,  81);
       color P2 = color( 194, 167, 107);
       color P1 = color( 221, 216, 163);
       color  O = color( 171, 208, 165);
       color N1 = color( 217, 242, 253);
       color N2 = color( 161, 210, 245);
       color N3 = color( 121, 178, 221);
       color[] colors = {N3, N2, N1, O, P1, P2, P3};
   

3. Add a function lerpColors(float amt, color... colors) -- it will take a value from 0-1 and return a color interpolated from the color list. For more on it, see https://forum.processing.org/two/discussion/comment/92946/#Comment_92946

       color lerpColors(float amt, color... colors) {
         if(colors.length==1){ return colors[0]; }
         float cunit = 1.0/(colors.length-1);
         return lerpColor(colors[floor(amt / cunit)], colors[ceil(amt / cunit)], amt%cunit/cunit);
       }
   

4. Change the line in the sketch where you assign a value to each pixel. Your new line will pass the brightness (0-1) to lerpColors and return a color from your map.

       pixels[x+y*width] = lerpColors(constrain(bright/255,0,1), colors);
   

That's it! A nice elevation-colored map done in a topographic style, along with a reconfigurable color key that you can play around with.

---

Because you mentioned "a grayscale PGraphics that I'm crating that simulates accumulation": you may also be interested in this previous discussion of accumulating arrays of random points.

https://forum.processing.org/two/discussion/comment/120856/#Comment_120856

jeremydouglass

...so, to substitute a more detailed color map, you would redefine colors[] using your data above:

color[] colors = {
  color(120, 178, 222),
  color(141, 193, 234),
  color(161, 210, 247),
  color(185, 227, 255),
  color(216, 242, 254),
  color(167, 223, 210),
  color(171, 207, 164),
  color(239, 235, 191),
  color(222, 214, 163),
  color(211, 202, 157),
  color(202, 184, 130),
  color(194, 166, 106),
  color(184, 151,  89),
  color(170, 135,  83),
  color(169, 158, 141),
  color(244, 222, 216)
}