Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 08:08, 28 February 2014 by hamishwillee (Talk | contribs)

Instagram X-Pro II Filter Recipe by Miracle Machine (Nokia Imaging SDK)

From Wiki
Jump to: navigation, search

This recipe replicates Instagram's X-Pro II Filter using Nokia Imaging SDK inbuilt filters.

See Also
Article Metadata
Tested with
SDK: Windows Phone 8.0 SDK
Devices(s): Nokia Lumia 920
Dependencies: Nokia Imaging SDK 1.0
Created: hamishwillee (27 Feb 2014)
Last edited: hamishwillee (28 Feb 2014)



The Instagram X-Pro II filter makes colours more vibrant and gives a warm appearance (sometimes described as "vintage"). This filter is used in about 0.32% of all photos shared on Instagram (source /

The recipe in this article shows how to recreate X-Pro II by combining some of the 50+ inbuilt filters from the Nokia Imaging SDK. The recipe is loosely based on How to Make Instagram X-PRO II Effect Using Photoshop (Miracle Machine blog).

The article includes the recipe source code, instructions on how it can be used and tested, performance measurements and a gallery.

Source code

The code for creating the effect, the source, renderer and target is described in #How to use the filter and Core concepts (Nokia Developer Library). The fragment below shows only the "recipe-specific" code for adding the filters to the List<IFilter>.

Warning.pngWarning: The code below uses a Rect based on the image size (_frameSize) to define the vignetting region. Depending on the architecture of your app this may be available directly where you're defining the filter, or indirectly from the source. This is discussed further in #How to use the filter.

var filters = new List<IFilter>();
//Instagram Filter: X-Pro II
Color black;
black.R = 0;
black.G = 0;
black.B = 0;
// NOTE: How _frameSize obtained depends on the architecture
Rect region = new Rect();
region.X = 0.1 * _frameSize.Width;
region.Y = 0.1 * _frameSize.Height;
region.Width = _frameSize.Width - (2 * region.X);
region.Height = _frameSize.Height - (2 * region.Y);
filters.Add(new VignettingFilter(1.0, black, region));
//Adjust colors
double a = -0.00002746151084310468;
double b = 0.010566561680750;
double c = 0.091211513981563;
Curve curve_blue = new Curve(CurveInterpolation.Linear);
curve_blue.SetPoint(0, 25);
curve_blue.SetPoint(255, 230);
Curve curve_red_green = new Curve(CurveInterpolation.Linear);
for (int i = 1; i < 255; i++)
int yvalue = (int)(a * Math.Pow(i, 3) + b * Math.Pow(i, 2) + c * i);
curve_red_green.SetPoint(i, yvalue);
filters.Add(new CurvesFilter(curve_red_green, curve_red_green, curve_blue));

How to use the filter

This recipe uses only filters based on IFilter. These are combined by simply adding them to an IFilter list, which is then passed to a FilterEffect along with the source. The code fragment below shows the general strategy (this is explained in more detail in Nokia Developer SDK - Core concepts).

var filters = new List<IFilter>();
//The recipe filters are added here
using (var source = new StreamImageSource(stream))
using (var filterEffect = new FilterEffect(source) { Filters = filters })
using (var renderer = new WriteableBitmapRenderer(filterEffect, writeableBitmap))
await renderer.RenderAsync();

The recipe uses a Rect based on the image size (_frameSize) to define the vignetting region. In the code fragment above we have access to the source as a StreamImage, and so can get the ImageSize using the following asynchronous function call:

//Get image size from stream to use in vignetting. Note is asynchronous call.
ImageProviderInfo imageInformation = await StreamImage.GetInfoAsync();
Size _frameSize = imageInformation.ImageSize;

Depending on the application architecture it may be possible to get hold of frames directly. It is also possible to define vignetting without a region, and this might be an area for further exploration.

Testing the filter

The easiest way to test the recipes is to add them to the Test Apps for Viewing Custom Filters (Nokia Imaging SDK) (a fork of the Real Time Filter Demo).

The first step is simply to add the filter source above to both RealtimeFilterDemo and StaticFilterViewer test apps in their respective switch statements.

For the RealtimeFilterDemo

After adding the recipe, open NokiaImagingSDKEffects.cs and add the following private member to class NokiaImagingSDKEffects to hold the frame size.

private Size _frameSize;

Then in method GetNewFrameAndApplyEffect, assign this value to the frameSize passed in:

public async Task GetNewFrameAndApplyEffect(IBuffer frameBuffer, Size frameSize)
_frameSize = frameSize;

_frameSize is then available to the recipe.

For the StaticFilterViewer:

Add the following lines at the top of the recipe to get the frame size from the image source (in StaticCustomEffects.cs, Initialize() method):

ImageProviderInfo imageinfor = await StreamImage.GetInfoAsync();
Size _frameSize = imageinfor.ImageSize;

Note that the method is uses wait, so you will also need to update Initialize() and the methods that call it to be async (PreviousEffect()and NextEffect() )


The code has been released with the standard MIT License.


This section lists the approximate frame rate range (in frames-per-second) obtained by using the recipe in the Test framework.

Device FPS (Frames Per Second)
Lumia 1020 12-14 FPS
- -


Note, original (unmodified) image is here.


This is a fairly accurate reproduction of the Instagram X-Pro II filter using Nokia Imaging SDK recipes.

Note that it is usually possible to reproduce Instagram filters using different recipes, and to trade-off off "accuracy" and "performance". If this recipe does not meet your needs, see if we have any others in the category, or create your own (with associated article!)

296 page views in the last 30 days.