I'm assuming that you've got a grid of values and you'd like to compute gradients. have I got the wrong end of the stick?

you can use finite difference techniques to compute the gradient at each grid point: http://en.wikipedia.org/wiki/Finite_difference. that page is very abstract (and maths heavy), so i'll try and give you an applied example. using the forward difference technique to compute the x & y gradients at a point (i,j):

float dx = (grid[j][i+1] - grid[j][i]) / cell_width;
float dy = (grid[j+1][i] - grid[j][i]) / cell_height;

you can think of (dx,dy) as the gradient vector for that point. so you can calculate the magnitude of the gradient (how much the function is changing at that point) using:
float gradient_size = mag(dx, dy);

once you have the gradient values you can try all kinds of things. colour coding my gradient magnitude, or mapping gradient angle to hue and magnitude to saturation, etc.

hope this helps.

you wouldn't happen to know of any processing work that demonstrates your example, do you?

here is some code I wrote a while back to explore the gradient field of the Perlin noise field. in essence does the same thing that I outlined in my posts, but here i use the central difference technique rather than forward differences (no reason) and I evaluate the noise function, rather than read values from a grid.

this is my first attempt at posting code so I hope this comes out.

// Sketch to explore Perlin noise.
// Mouse X coordinate sets z coordinate in noise lookups.
// Mode 1: show Perlin noise value
// Mode 2: show gradient of noise
// Mode can be set via 1 & 2 keys.
int mode = 1;

void setup() {
 size(160, 120);
 noiseDetail(4);
}

void draw() {
 float noiseScale = 0.015f;
 for (int i = 0; i < width; ++i) {
   for (int j = 0; j < height; ++j) {
     float x = i * noiseScale;
     float y = j * noiseScale;
     float z = mouseX * noiseScale;
     
     if (mode == 1) {
       stroke(noise(x, y, z)*255);
     } else {
       // use central difference to compute first derivative
       float dx = noise(x + noiseScale/2, y, z) - noise(x - noiseScale/2, y, z);
       float dy = noise(x, y + noiseScale/2, z) - noise(x, y - noiseScale/2, z);
       // in theory the range of dx & dy is [-1,1], but because noise
       // is smoothly varying the range is much smaller so we need to scale values
       // up.
       float r = constrain((dx*100 + 1) * 0.5, 0, 1);
       float g = constrain((dy*100 + 1) * 0.5, 0, 1);
       stroke(r * 255, g * 255, 0);
     }
     
     point(i, j);
   }
 }

 if (keyPressed) {
   if (key == '1') mode = 1;
   else if (key == '2') mode = 2;
 }
}

I had an Idea for how to do this, but it might not be what you need, regardless what I put together is here:
http://angeloyazar.phpwebhosting.com/processing/region_borders/

The ideas that are important for this method are clamping and edge finding in that space, which could be some thing like this:

1. clamp values in the field to the bands you want.
2. find edges
 For each cell:
 a. count neighbors that have the same value as the current cell.
 b. if that number is bigger than 5, current cell is not an edge.
3. draw edges.

You could also set the cell_size to 1, but the way the example is coded it's already kinda slow. But I'm sure that can be changed.

I'm glad it was helpful though, good luck with your project!

I think this is a good addition to the discussion. I'd be excited to see someone implement it. I haven't tried yet.

CONRC - A Countouring Subroutine