Creating Pixelated Images in C#

Because the 80s retro game look is a thing in indie games.
Jan 05 2009 by James Craig

If you read my site for any length of time, you'll notice that I tend to post a lot on things like image manipulation, image recognition, video processing (in the future anyway), etc. To be honest I find the field to be rather interesting and have even started working on incorporating OpenCV into the project I'm working on... Anyway, I'm starting to add some more "fun" items to my library. No real practical use, just there for the sake of being there really. In this instance I wanted to simply create a pixelated cookie monster... I'm not going into why I wanted to create this, but it's for an April Fools joke. Anyway, I decided instead of doing the easy thing (opening up Photoshop) that I'd do it the hard way and use C#.

 /// <summary>
/// Pixelates an image
/// </summary>
/// <param name="OriginalImage">Image to pixelate</param>
/// <param name="PixelSize">Size of the "pixels" in pixels</param>
/// <returns>A bitmap which is pixelated</returns>
public static Bitmap Pixelate(Bitmap OriginalImage, int PixelSize)
{
Bitmap NewBitmap = new Bitmap(OriginalImage.Width, OriginalImage.Height);
BitmapData NewData = Image.LockImage(NewBitmap);
BitmapData OldData = Image.LockImage(OriginalImage);
int NewPixelSize = Image.GetPixelSize(NewData);
int OldPixelSize = Image.GetPixelSize(OldData);
for (int x = 0; x < NewBitmap.Width; x += (PixelSize / 2))
{
int MinX = MathHelper.Clamp(x - (PixelSize / 2), NewBitmap.Width, 0);
int MaxX = MathHelper.Clamp(x + (PixelSize / 2), NewBitmap.Width, 0);
for (int y = 0; y < NewBitmap.Height; y += (PixelSize / 2))
{
int RValue = 0;
int GValue = 0;
int BValue = 0;
int MinY = MathHelper.Clamp(y - (PixelSize / 2), NewBitmap.Height, 0);
int MaxY = MathHelper.Clamp(y + (PixelSize / 2), NewBitmap.Height, 0);
for (int x2 = MinX; x2 < MaxX; ++x2)
{
for (int y2 = MinY; y2 < MaxY; ++y2)
{
Color Pixel = Image.GetPixel(OldData, x2, y2, OldPixelSize);
RValue += Pixel.R;
GValue += Pixel.G;
BValue += Pixel.B;
}
}
RValue = RValue / (PixelSize \* PixelSize);
GValue = GValue / (PixelSize \* PixelSize);
BValue = BValue / (PixelSize \* PixelSize);
Color TempPixel = Color.FromArgb(RValue, GValue, BValue);
for (int x2 = MinX; x2 < MaxX; ++x2)
{
for (int y2 = MinY; y2 < MaxY; ++y2)
{
Image.SetPixel(NewData, x2, y2, TempPixel, NewPixelSize);
}
}
}
}
Image.UnlockImage(NewBitmap, NewData);
Image.UnlockImage(OriginalImage, OldData);
return NewBitmap;
}

Actually that isn't that difficult really. The code above takes in a Bitmap object and the size of the individual pixels. It then does one pass over a section of that image (a section is the size in pixels specified), finds the average image color, and does another pass setting the pixels to that value. Once it's done with the image it breaks out of the loop and returns a new version of the bitmap in its pixelated glory. A couple things to note is the fact that the code uses a couple of functions from my utility library to Lock/Unlock the images in order to speed things up a bit. You can simply remove them and replace the SetPixel/GetPixel function with the built in function. Anyway, I hope this helps out someone out there. So try out the code, leave feedback, and happy coding.