×
Namespaces

Variants
Actions

Pixlate Effect

From Nokia Developer Wiki
Jump to: navigation, search

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

Contents

Introduction

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

Source

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]);
}
}
else
{
for (int x = 0; x < width; ++x, ++index)
{
if (x % 2 == 0)
targetPixels[index] = ResultPixel(sourcePixels[index]);
else
targetPixels[index] = sourcePixels[index];
}
}
row++;
 
});

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.

Summary

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.

License

The code has been released with the standard MIT license.


Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0 SDK
Dependencies: Nokia Imaging SDK
Article
Created: hlabadi ()
Last edited: Loukt (12 Jul 2014)
This page was last modified on 12 July 2014, at 23:04.
170 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×