Note: This is an entry in the Nokia Original Imaging Effect Wiki Challenge 2014Q2

This article explains how to create an effect which looks like the image of a TFT panel.


There is a really cool and geeky effect, which was used in the previous version of Microsoft's MSDN website, which looks like picture that was taken from a TFT display. It looks nice for source code, and at one point, it was pretty common to see such images. This article will help the user implement a similar effect for Nokia Imaging SDK.

The original image, without the Pixlate Effect
The same image with the Pixlate Effect applied


The source code is available on github. You can get it from here.

Code Walkthrough

We begin with the basic Custom Effect implementation, we inherit our class from the CustomEffectBase class.

public class PixlateEffect : CustomEffectBase

Visual Studio will generate the required methods for you. The actual work will happen in the OnProcess method. Let's take a closer look.

            var sourcePixels = sourcePixelRegion.ImagePixels;
var targetPixels = targetPixelRegion.ImagePixels;

We initialize the fields in which we store the image, the actual pixels. Nothing more to comment here.

var row = 0;
sourcePixelRegion.ForEachRow((index, width, position) =>
if (row % 2 == 0)
for (int y = 0; y < width; ++y, ++index)
targetPixels[index] = ResultPixel(sourcePixels[index]);
for (int x = 0; x < width; ++x, ++index)
if (x % 2 == 0)
targetPixels[index] = ResultPixel(sourcePixels[index]);
targetPixels[index] = sourcePixels[index];

What we are doing here is simply walking through the image, selecting every other row and every other column. That is the %2. If we are in an odd row or column, we simply put the original pixel into the new image. The actual magic is the next method:

            var pixel = sourcePixel;
uint blue = pixel & 0x000000ff; // blue color component
uint green = (pixel & 0x0000ff00) >> 8; // green color component
uint red = (pixel & 0x00ff0000) >> 16; // red color component
return 0xdd000000 | blue | (green << 8) | (red << 16); // we return the original pixel, only slightly darker

So, we get each pixel, get the color components and reassemble the pixel later, only with transparency this time. This will be that grid which actually creates the effect.


After reading this code, you should be able to write your own similar effect. I encourage you to do so, get the source from github, modify it, make your own effect.


The code has been released with the standard MIT license.


Originally contributed on 12 July 2014‎ by hlabadi