How to display a matrix as colors instead of elements in c#

Question

I need to represent a matrix (2D array) as colors instead of array elements.

Lets say, I have a 8x6 matrix as

1 1 1 1 2 2

1 1 1 1 0 0

3 3 3 3 3 0

0 0 0 0 0 0

in this

there are three sub matrices as 4x4, 3x2, 2x5 represented with different numbers

I need to make an image with a rectangle of the matrix-size in such a way that each sub-matrix should be painted with different colors(any color other than white).

Can anyone help me to do this in c#.net? I am not good in graphics. thanks in advance

WinForms? WPF? Something else?... with WinForms you can use a `Panel` and use the [Paint Event](http://msdn.microsoft.com/en-us/library/system.windows.forms.control.paint(v=vs.110).aspx). Just iterate the matrix and draw each 'square' depending on the number. Each square should be 1/6 by 1/8 of the panel size. Use a predefined array of colors for each index. Try this and then come back when you get stuck, and show your code — musefan, Jan 28 '14 at 10:31
Technically, since the question is to create an image (Image instance?), the target platform (WinForms, WPF, etc) doesn't play any role of how to make a required, say, Bitmap — Dmitry Bychenko, Jan 28 '14 at 11:16
sorry for late reply, i intent to draw in asp.net web forms. — a4ashiq, Jan 29 '14 at 08:08

Dmitry Bychenko · Accepted Answer · 2014-01-28T11:12:17.860

Well, just create an image (e.g. Bitmap) and paint, save etc:

public static Bitmap MatrixAsBitmap(int[,] data) {
  if (Object.ReferenceEquals(null, data))
    return null;

  // Possible brushes (fill yourself)
  Brush[] brushes = new Brush[] {
    Brushes.Red,     // <- color for 0
    Brushes.Green,   // <- color for 1
    Brushes.Blue,    // <- color for 2
    Brushes.Yellow,  // <- ...
    Brushes.Cyan
  };

  // Let resulting bitmap be about 200x200
  int step_x = 200 / (data.GetUpperBound(1) - data.GetLowerBound(1));
  int step_y = 200 / (data.GetUpperBound(0) - data.GetLowerBound(0));

  Bitmap result = new Bitmap((data.GetUpperBound(1) - data.GetLowerBound(1) + 1) * step_x,
                             (data.GetUpperBound(0) - data.GetLowerBound(0) + 1) * step_y);

  using (Graphics gc = Graphics.FromImage(result)) {
    for (int i = data.GetLowerBound(0); i <= data.GetUpperBound(0); ++i)
      for (int j = data.GetLowerBound(1); j <= data.GetUpperBound(1); ++j) {
        int v = data[i, j];

        gc.FillRectangle(brushes[v % brushes.Length], new Rectangle(j * step_x, i * step_y, step_x, step_y));
      }
  }

  return result;
}

...

  int[,] A = new [,] {
    {1, 1, 1, 1, 2, 2},
    {1, 1, 1, 1, 2, 2},
    {1, 1, 1, 1, 2, 2},
    {1, 1, 1, 1, 0, 0},

    {3, 3, 3, 3, 3, 0},
    {3, 3, 3, 3, 3, 0},

    {0, 0, 0, 0, 0, 0},
    {0, 0, 0, 0, 0, 0}
  };

  // Do everything as like with the bitmap:
  //  show it up, e.g. myPictureBox.Image = result;
  //  save it to the file...
  Bitmap result = MatrixAsBitmap(A);

Since my requirement is for asp .net , I rewrote for asp. I will post as another answer so that anyone else can benefit. — a4ashiq, Jan 29 '14 at 08:29

score 0 · Answer 2 · answered Jan 29 '14 at 08:34

Asp.net sample code made from Dmitry Bychenko's answer.

<%@ Page Language="C#" ContentType="image/jpeg" %>

<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Text" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%
    Response.Clear();

int[,] A = new [,] {
{1, 1, 1, 1, 2, 2},
{1, 1, 1, 1, 2, 2},
{1, 1, 1, 1, 2, 2},
{1, 1, 1, 1, 0, 0},

{3, 3, 3, 3, 3, 0},
{3, 3, 3, 3, 3, 0},

{0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0}
};

int[,] data = A; 
// Do everything as like with the bitmap:
//  show it up, e.g. myPictureBox.Image = result;
//  save it to the file...

// Possible brushes (fill yourself)
Brush[] brushes = new Brush[] {
Brushes.Red,     // <- color for 0
Brushes.Green,   // <- color for 1
Brushes.Blue,    // <- color for 2
Brushes.Yellow,  // <- ...
Brushes.Cyan
};

// Let resulting bitmap be about 200x200
int step_x = 200 / (data.GetUpperBound(1) - data.GetLowerBound(1));
int step_y = 200 / (data.GetUpperBound(0) - data.GetLowerBound(0));

Bitmap result = new Bitmap((data.GetUpperBound(1) - data.GetLowerBound(1) + 1) * step_x,
                         (data.GetUpperBound(0) - data.GetLowerBound(0) + 1) * step_y);

using (Graphics gc = Graphics.FromImage(result)) {
for (int i = data.GetLowerBound(0); i <= data.GetUpperBound(0); ++i)
  for (int j = data.GetLowerBound(1); j <= data.GetUpperBound(1); ++j) {
    int v = data[i, j];
    gc.FillRectangle(brushes[v % brushes.Length], new Rectangle(j * step_x, i * step_y,     step_x, step_y));
  }
}

result.Save(Response.OutputStream, ImageFormat.Jpeg);
result.Dispose();
Response.End();
%>

How to display a matrix as colors instead of elements in c#

2 Answers2