# How to convert a 2D matrix into a 2D map intensity graph (color one)

• April 10th, 2013, 12:34 AM
walkinginwater
How to convert a 2D matrix into a 2D map intensity graph (color one)
hi, guru:
I am now having a 2d matrix a[i][j], which has a size of 1024�256. the row number stands the x-axis infomration, the column number stands for the y-axis information and the value a[i][j] stands for the intensity of the graph. For example, a[32][56]=100, means at point where x=32, y=100, the intensity is 100 counts.
What I would like to do is that I want to plot a 2D map with different color stands for differnt intensity based on the the matrix a[i][j]. for example a[8][0]=0, then at that point(8,9) the color is black. if a[10][10]=maximum intensity, then at point (10,10) there are red. This is kind of intensity graph in labview.
I haven't done this before, because normally I just load the 2d matrix into labview or Origin to plot that. However recently I change the lab, and those license are not available anymore. I need to use Visual C++ express 2010 to finish this.
My personal insight to do this is to have a picture with a pixel size of 1024�256. The color of each pixel (i,j) is based on the value a[i][j]. Am I right about this?
Does anybody have done this before? Can I use OpenGl to do this? Any help will be much appreciated!
• April 10th, 2013, 03:47 PM
walkinginwater
Re: How to convert a 2D matrix into a 2D map intensity graph (color one)
Nobody have ever ever done this? Or my question are just two stupid ?
• April 10th, 2013, 04:07 PM
S_M_A
Re: How to convert a 2D matrix into a 2D map intensity graph (color one)
No it's not stupid. You can use OpenGL for this but that seems like an overkill. Depending on what you intend to do with the result you can do it with for instance GDI+ http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx
• April 10th, 2013, 06:19 PM
TheGreatCthulhu
Re: How to convert a 2D matrix into a 2D map intensity graph (color one)
Basically, you just need to figure out how to encode those values into the image. You don't have to store x/y information, because it's implicit (the location of the pixel). Depending on the pixel format, there's gonna be a certain limited amount of memory per pixel available; for example, if you use 32 bpp, you can use it all to store an integer or a float. However, if you want to visually encode this info (that is, to create a map that you can look at), then you have to adhere to the pixel format. If you use, say, 32bppArgb, each of the 4 bytes is reserved for a specific channel (B, G, R, A). Depending on what you need to do, you can use each channel separately, to store different information (normal maps used by things like games use the RGB channels to store the three XYZ coordinates of a vector), or you can create a grayscale image (where RGB components all have the same value - but this then limits you to only 256 different values, and introduces redundancy; a different pixel format might be better suited).
The values themselves can be encoded in various ways, depending on your needs. If you have to use less memory than the amount used by the values in the actual matrix, then you have to sacrifice some precision, or quantize; further, if you also might need to think about how to encode negative values.
• April 10th, 2013, 07:02 PM
walkinginwater
Re: How to convert a 2D matrix into a 2D map intensity graph (color one)
Thanks very much for the reply. Do I need to store x,y information. Because it's just a x,y are correspoding to the i and j of a[i][j] repsectively. And there is no negative values inside my matrix. the minimum value is 0, which I 'd like to corresponding to dark.
The inserted picture is ploted by the matlab. So that's basically what I want.
I am sure there will be a simple way to do this in C++. It is just I am not expert of VC.

Quote:

Originally Posted by TheGreatCthulhu
Basically, you just need to figure out how to encode those values into the image. You don't have to store x/y information, because it's implicit (the location of the pixel). Depending on the pixel format, there's gonna be a certain limited amount of memory per pixel available; for example, if you use 32 bpp, you can use it all to store an integer or a float. However, if you want to visually encode this info (that is, to create a map that you can look at), then you have to adhere to the pixel format. If you use, say, 32bppArgb, each of the 4 bytes is reserved for a specific channel (B, G, R, A). Depending on what you need to do, you can use each channel separately, to store different information (normal maps used by things like games use the RGB channels to store the three XYZ coordinates of a vector), or you can create a grayscale image (where RGB components all have the same value - but this then limits you to only 256 different values, and introduces redundancy; a different pixel format might be better suited).
The values themselves can be encoded in various ways, depending on your needs. If you have to use less memory than the amount used by the values in the actual matrix, then you have to sacrifice some precision, or quantize; further, if you also might need to think about how to encode negative values.

• April 11th, 2013, 08:07 AM
TheGreatCthulhu
Re: How to convert a 2D matrix into a 2D map intensity graph (color one)
Quote:

Originally Posted by walkinginwater
Do I need to store x,y information. Because it's just a x,y are correspoding to the i and j of a[i][j] repsectively.

No need then - as I already said:
Quote:

Originally Posted by TheGreatCthulhu
You don't have to store x/y information, because it's implicit (the location of the pixel).

Basically, an image is already a matrix of sorts, and there's a direct correspondence with rows and columns.

If you want a color image of that form, probably the simplest thing to do is to take your range of possible matrix values and map them linearly to some color on a color gradient, like this:
Attachment 31307

You could simply create an image 1px high, and with whatever width you find suitable, create a rainbow-like gradient using a tool like Photoshop, or even programmatically (for full control), and then load that image into your app, and map your values to colors using that (by mapping a matrix value to a horizontal position in the gradient image).

Let's say your gradient is 512 pixels wide, and the range of the values in the matrix is [0, 1]; if your matrix value is 0, you pick up the leftmost pixel in the gradient, the one at (0, 0), and if the matrix value is 1 (or whatever is the max/cap in your case), you pick the color from the rightmost pixel, at (511, 0). Map the values in between linearly - u can use the two-point formula, and the point-slope form of the linear equation.
Code:

```// The two points are (x1, y1) and (x2, y2) // Here, y1=0 and y2 is the width of the gradient, and [x1, x2] is the range of your matrix values m = (y2 - y1)/(x2 - x1)    // this gives you the slope in y = mx + b // Here (x0, y0) is either (x1, y1) or (x2, y2), it doesn't matter y - y0 = m(x - x0) When you plug in the values, solve for y, and simplify, you'll get the equation in the standard form: y = mx + b  // but, b should be zero in your case, so it's just gonna be: y = mx // which really means [horizontal_pos_on_the_gradient_map] = m * [value_in_the_matrix]```
Then you take the pixel at that position on the gradient map, get its color and put it into the corresponding pixel on the visualization image.
The colors for the gradient are entirely up to you. I recommend saving the gradient image in a non-compressing or losseless format (bmp, png...).

I'll leave it to the C++ experts here to help you with the implementation details (I'm more on the .NET side).