iOS Color space on iphone

[THEDEAN911]

I have a X and Y plane with values 0,0 - 160,160. Each point has a value that ranges from 0 to a peak value. I'm trying to display the points in a grid with the point's value represented by colors, like a heat map. How do I create a color space on the iphone that has good contrast and I can move across the color space using the point's value? I have created the grid of points using the following code, i've been experimenting with math to create an RGB color for each point with little success.

for (int x = 0; x < (gridsize * res); x ++) {
            for (int y = 0; y < (gridsize * res); y ++) {
                fx = (float) x / (float) res;
                fy = (float) y / (float) res;
                subrect = rectsize/res;
                points[x][y] = #math to create value
                CGContextSetRGBFillColor(c, (points[x][y]/coords[3]), 0.0, 0.0, 1.0f);
                CGContextFillRect(c, CGRectMake((x*subrect+160), (y*subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*-subrect+160), (y*-subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*-subrect+160), (y*subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*subrect+160), (y*-subrect+160), subrect, subrect));
            
            }
        }

What's the easiest way to create a color space with high contrast? I've googled around but couldn't find anything for iphone, only color programming on the mac. Please point me in the right direction and I can start figuring it out.

Thanks.

 

[Duncan C]

I have a X and Y plane with values 0,0 - 160,160. Each point has a value that ranges from 0 to a peak value. I'm trying to display the points in a grid with the point's value represented by colors, like a heat map. How do I create a color space on the iphone that has good contrast and I can move across the color space using the point's value? I have created the grid of points using the following code, i've been experimenting with math to create an RGB color for each point with little success.

for (int x = 0; x < (gridsize * res); x ++) {
            for (int y = 0; y < (gridsize * res); y ++) {
                fx = (float) x / (float) res;
                fy = (float) y / (float) res;
                subrect = rectsize/res;
                points[x][y] = #math to create value
                CGContextSetRGBFillColor(c, (points[x][y]/coords[3]), 0.0, 0.0, 1.0f);
                CGContextFillRect(c, CGRectMake((x*subrect+160), (y*subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*-subrect+160), (y*-subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*-subrect+160), (y*subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*subrect+160), (y*-subrect+160), subrect, subrect));
            
            }
        }

What's the easiest way to create a color space with high contrast? I've googled around but couldn't find anything for iphone, only color programming on the mac. Please point me in the right direction and I can start figuring it out.

Thanks.

I seriously doubt if you want to create your own color model, like RGB, HSB, LAB, CMYK, or the like, and implement everything that would be required to let you draw in that colorspace. You should expect to spend like 6 months laying the groundwork for something like that, and that's assuming you know a lot about Apple's drawing engine.

I would suggest using the HSB model, locking saturation to a fairly high value, and using hue and brightness as your x and y values. You'll probably want to limit the brightness range so you don't go too close to black, because you won't be able to see the hue in very dark colors.

Several years ago I found code on the 'net that showed how to map HSB values back and forth to RGB and I used that approach for an app I was writing. I let the users input values in HSB, and converted the results to RGB values. You could do the same thing. Play with the color picker in Mac OS (which has an HSB mode) to see if that will work for you.

 

[THEDEAN911]

Thanks for the response. So there's no API or something in UIColor to create a heatmap more easily?

 

[xArtx]

So you just want to step through a range of nice colours that blend into each other?

 

[ArtOfWarfare]

Thanks for the response. So there's no API or something in UIColor to create a heatmap more easily?

Unless I'm mistaken, OpenGL allows you to specify vertex colors and it'll automatically blend in the space between them. Other than that, nope, I have nothing better. Although I would suggest that, if your heatmap is always the same, you're probably better off prerendering it, saving it as a png resource, and then loading it up in a UIImage.

 

[xArtx]

include this:

float rcolours[256];
float gcolours[256];
float bcolours[256];
int redfactor = 1, greenfactor = 2, bluefactor = 3;
int redphase = 0, greenphase = 50, bluephase = 100;
int ptime = 0;

void shades_generate(int ptime)
{
    int i;
    unsigned red, green, blue;
    unsigned r = ptime * redfactor + redphase;
    unsigned g = ptime * greenfactor + greenphase;
    unsigned b = ptime * bluefactor + bluephase;
    
    // iOS implementation
    for(i=0; i < 256; ++i) {
    r &= 0xFF; g &= 0xFF; b &= 0xFF;
    red = 2 * r;
    if (red > 255)
    red = 510 - red;
    green = 2 * g;
    if (green > 255)
    green = 510 - green;
    blue = 2 * b;
    if (blue > 255)
    blue= 510 - blue;
        
    rcolours[i] = red;
    gcolours[i] = green;
    bcolours[i] = blue;
    r++; g++; b++;
    }
}

do this to generate the shade table:

    redfactor   = rand()%4;
    greenfactor = rand()%4;
    bluefactor  = rand()%4;
    redphase    = rand()%256;
    greenphase  = rand()%256;
    bluephase   = rand()%256;
    shades_generate(ptime++);

now the third colour in the 256 colour table (floats) is:

rcolours[2],gcolours[2],bcolours[2].

If you don't like the first table do the second chunk
of code however many times it takes, or alter it.

 

[xArtx]

A better example:

 

[Duncan C]

I have a X and Y plane with values 0,0 - 160,160. Each point has a value that ranges from 0 to a peak value. I'm trying to display the points in a grid with the point's value represented by colors, like a heat map. How do I create a color space on the iphone that has good contrast and I can move across the color space using the point's value? I have created the grid of points using the following code, i've been experimenting with math to create an RGB color for each point with little success.

for (int x = 0; x < (gridsize * res); x ++) {
            for (int y = 0; y < (gridsize * res); y ++) {
                fx = (float) x / (float) res;
                fy = (float) y / (float) res;
                subrect = rectsize/res;
                points[x][y] = #math to create value
                CGContextSetRGBFillColor(c, (points[x][y]/coords[3]), 0.0, 0.0, 1.0f);
                CGContextFillRect(c, CGRectMake((x*subrect+160), (y*subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*-subrect+160), (y*-subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*-subrect+160), (y*subrect+160), subrect, subrect));
                CGContextFillRect(c, CGRectMake((x*subrect+160), (y*-subrect+160), subrect, subrect));
            
            }
        }

What's the easiest way to create a color space with high contrast? I've googled around but couldn't find anything for iphone, only color programming on the mac. Please point me in the right direction and I can start figuring it out.

Thanks.

Wait. It sounds like your problem is simpler than I thought at first. You want to represent values in a linear range, from say 0 to 255?

That should be easy to do. How many uniquely identifiable steps do you have to show?

 

[xArtx]

If it's only two colours couldn't you draw a gradient in the background with Quartz,
and draw the graph to mask it to cover what you don't want to see?