Grayscale PGgraphics to a gradient map

edited May 2018 in How To...

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.

Caucasus_topographic_map-ru.svg

Answers

  • edited May 2018

    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?

  • edited May 2018

    @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 :)

  • edited May 2018
    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.

    Noise2D-topographic-elevation-colors


    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

  • ...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)
    }
    
Sign In or Register to comment.