Rick Barraza

Sunday April 20, 2008

Bitmap Images and Particle Engines with Silverlight

Needless to say, its been one hectic year so far! Between Project Maestro at SXSW, Teaching at MIX08, Winning the PhizzPop nationals, Artists in Residency and getting ready for the Web 2.0 Expo, this is the first chance I've had to push up a new post! But this is a great time for Silverlight development and I'll be keeping you updated with some amazing things just over the horizon!

First things first, we're going to talk about Streaming data and particles today. Here's the project the code snippet comes from:

Instructions: Move the slider to increase the particle buzz. Upload any 24 bit .BMP file. All binary streams are processed client side, there is no server manipulation required.



Here is the main loop that takes the BMP file from a client side dialog box, parses it on the client side to extract the important informatio, and populate an array of custom color objects that will be used to draw the tiles:

   [...]
   using System.Windows.Media.Imaging;
   using System.IO;
   using System.Windows.Browser;
   using System.Windows.Resources;

   drawSqaure[] tiles;     
   double totalCol = 0;
   double totalRow = 0;
   double imageWidth = 0;
   double imageHeight = 0;

   [...]
   
   private void OpenBMP()
   {
       OpenFileDialog ofd = new OpenFileDialog();

       if (ofd.ShowDialog() == DialogResult.OK)
       {
           Stream stream = ofd.SelectedFile.OpenRead();
           output = ofd.SelectedFile.Name;

		
	   // Find out how big the file is. Create a Byte array to hold it.
	   // Read the values you need from the Bitmap data stream...
	
           int nBytes = Convert.ToInt32(stream.Length);
           byte[] ByteArray = new byte[nBytes];
           int nBytesRead = stream.Read(ByteArray, 0, nBytes);
           stream.Close();

	
	   // BMP Header files start with B and M in Ascii
	                  
           if ((ByteArray[0] == 66) && (ByteArray[1] == 77))
           {
               output += " [24bit BMP File] ";
           }
           else
           {
               output = " ERROR: File is not a BMP";
               txtOut.Text = output;
               return;
           }
	   
	   // BMP files will pad the stream with leading zeros if the
	   // image width in pixels is not divisble by 4
  	   
           imageWidth = (double)(convert4Bytes(ByteArray[18], ByteArray[19], 
			ByteArray[20], ByteArray[21]));
           double rowPad = imageWidth % 4;
           imageHeight = (double)(convert4Bytes(ByteArray[22], ByteArray[23], 
			ByteArray[24], ByteArray[25]));
           int dataOffset = convert4Bytes(ByteArray[10], ByteArray[11], 
			ByteArray[12], ByteArray[13]);
           int bitDepth = convert2Bytes(ByteArray[28], ByteArray[29]);
           int imageDataSize = convert4Bytes(ByteArray[34], ByteArray[35], 
			ByteArray[36], ByteArray[37]);

           if ( (imageWidth > 600) || (imageHeight > 600) ) {
               output = "ERROR: Image too large. Please select another file.";
               txtOut.Text = output;
               return;
           }

           if (bitDepth != 24)
           {
               output += "ERROR: Color depth must be set at 24 bits.";
               txtOut.Text = output;
               return;
           }

	   
	// I will be calculating out the color average of 10x10 pixel 
	// squares from the image and storing them in a drawSqaure object.
	// A 24bit BMP uses 3 bytes per pixel for the color. This code 
	// can easily be expanded to support other bit depths as well.
	
           int resolution = 10;
           int bytesPerPixel = 3;

           totalCol = Math.Floor( imageWidth / resolution);
           totalRow = Math.Floor( imageHeight / resolution);

           int totalTiles = (int)(totalCol * totalRow);
           tiles = new drawSqaure[totalTiles];
                        
           double rowOffset = 0;
           double pointer = 0;
           int index = 0;

	   
	// Here is the important part. I have now stored the Bitmap 
	// image's stream in my byte array and I have created an array 
	// of 'drawSquare' objects to be populated with the average
	// of the 10 x 10 pixel square color values I will next calculate.
	   

            for (int r = 0; r < totalRow; r++)
            {
	    
	// BMP files send their pixel data from the bottom left corner
	// of the image UP. Also, while their pixel data is traditional 
	// 0-255 per RGB color, the ORDER is reversed, so it comes in 
	// BGR, not RGB.
	    
            rowOffset = 54 + (r*(resolution * 
			((imageWidth * bytesPerPixel) + rowPad) ));
            for (int c = 0; c < totalCol; c++)
            {
            pointer = rowOffset + (c * resolution * bytesPerPixel);
            drawSqaure d = new drawSqaure();
            int b = 0;
            int g = 0;
            int red = 0;
                        
            for (int i = 0; i < resolution; i++)
            {
              for (int y = 0; y < resolution; y++)
              {
                 int calc = Convert.ToInt32(pointer + 
			(i*((imageWidth*bytesPerPixel)+rowPad)) + (y*3));
                 b += (int)ByteArray[calc];
                 g += (int)ByteArray[calc+1];
                 red += (int )ByteArray[calc + 2];
              }
            }
	    
	// Since the above nested for loops will sample a 10 x 10 pixel   
        // square, I need to divide the sum of each Color by 100 to 
        // get its color average per channel.
  	    
            d.red = red / 100;
            d.blue = b / 100;
            d.green = g / 100;
            tiles[index] = d;
            index++;
          }
      }
      txtOut.Text = output;
      ByteArray = null;
      buildUI();
    }
}

The drawSquare object simply holds the averaged color values per canvas tile we will add to the screen:

    public class drawSqaure
    {
        public int red { get; set; }
        public int blue { get; set; }
        public int green { get; set; }

    }

And here is what the buildUI() loop looks like:

   private void buildUI()
   {
     int index = 0;
     int nodeSize = 2;
     nodes.Children.Clear();

     for (int r = 0; r < totalRow; r++)
     {
   	for (int c = 0; c < totalCol; c++)
        {
          node n = new node();
          n.SetValue(NameProperty, "n_" + c.ToString() + "_" + r.ToString());
          n.X = origin.X - (totalCol*(nodeSize*.5)) + (c * nodeSize);
          n.Y =  origin.Y - 30 + (totalRow*(nodeSize*.5)) - (r * nodeSize);
          n.anchor = new Point(n.X, n.Y);
          n.vX = 0;
          n.vY = 0;
          drawSqaure d = tiles[index];
          index++;
          n.setColor(Color.FromArgb(0xFF, Convert.ToByte(d.red), 
		Convert.ToByte(d.green), Convert.ToByte(d.blue))); 
          nodes.Children.Add(n);
        }
      }

      index = 0;
      tiles = null;
   }

        private Int32 convert4Bytes(byte a, byte b, byte c, byte d) 
	{ return ( (d<<24) | (c<<16) | (b<<8) | (a)); }

        private Int32 convert2Bytes(byte a, byte b)
	{ return ((b << 8) | (a)); }

The node user control is empty except for a 2x2 rectangle that we can change the fill with through its setColor() function as well as the X and Y public properties that I've gone over many times before.

Finally, the animation engine looks something like this:

        void sb_Completed(object sender, EventArgs e)
        {
            foreach (node n in nodes.Children)
            {
                n.vX += ((double)r.Next(100) - 50.0)/ 5.0;
                n.vY += ((double)r.Next(100) - 50.0) / 5.0;
                n.vX *= buzz;
                n.vY *= buzz;
                n.X += n.vX;
                n.Y += n.vY;
                n.X += (n.anchor.X - n.X) * .07;
                n.Y += (n.anchor.Y - n.Y) * .07;
            }

            sb.Begin();
        }

Of course, I added a couple more bells and whistles in mine, such as controlling the value of the buzz variables above by the position of the slider, but I'll leave you to customize your project anyway you want. The above outlines the essentials required to get it up and running.

Hope you like it. Drop me a note if you do anything cool with this...