×
Namespaces

Variants
Actions
(Difference between revisions)

Instagram Lo-Fi Filter Recipe - Mk1 (Nokia Imaging SDK)

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - - Performance)
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
Line 1: Line 1:
[[Category:Nokia Imaging SDK Filter Recipes]]
+
[[Category:Nokia Imaging SDK Filter Recipes]][[Category:Nokia Imaging SDK Filter Recipes]]
[[Category:Nokia Imaging SDK Filter Recipes]]
+
 
{{Abstract|This recipe replicates [http://instagram.com/ Instagram]'s ''Lo-Fi'' Filter using Nokia Imaging SDK inbuilt filters. }}
 
{{Abstract|This recipe replicates [http://instagram.com/ Instagram]'s ''Lo-Fi'' Filter using Nokia Imaging SDK inbuilt filters. }}
 
{{SeeAlso|
 
{{SeeAlso|
Line 42: Line 41:
 
The code for creating the effect, the source, renderer and target is described in [[#How to use the filter]] and [http://developer.nokia.com/Resources/Library/Lumia/#!nokia-imaging-sdk/core-concepts.html Core concepts] (Nokia Developer Library). The fragment below shows only the "recipe-specific" code for adding the filters to the {{Icode|List<IFilter>}}.  
 
The code for creating the effect, the source, renderer and target is described in [[#How to use the filter]] and [http://developer.nokia.com/Resources/Library/Lumia/#!nokia-imaging-sdk/core-concepts.html Core concepts] (Nokia Developer Library). The fragment below shows only the "recipe-specific" code for adding the filters to the {{Icode|List<IFilter>}}.  
  
{{Warning|The code below uses a {{Icode|Rect}} based on the image size ({{Icode|_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]].}}  
+
{{Warning|The code below uses a {{Icode|Rect}} based on the image size ({{Icode|m_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]].}}  
  
 
<code csharp>var filters = new List<IFilter>();</code>
 
<code csharp>var filters = new List<IFilter>();</code>
Line 56: Line 55:
  
 
//Vignetting
 
//Vignetting
Color black;
+
Color black; //from Windows.UI
 
black.R = 0;
 
black.R = 0;
 
black.G = 0;
 
black.G = 0;
 
black.B = 0;
 
black.B = 0;
  
// NOTE: How _frameSize obtained depends on the architecture
+
// NOTE: How m_FrameSize is obtained depends on the architecture
 
Rect region = new Rect();
 
Rect region = new Rect();
region.X = 0.1 * _frameSize.Width;
+
region.X = 0.1 * m_FrameSize.Width;
region.Y = 0.1 * _frameSize.Height;
+
region.Y = 0.1 * m_FrameSize.Height;
region.Width = _frameSize.Width - (2 * region.X);
+
region.Width = m_FrameSize.Width - (2 * region.X);
region.Height = _frameSize.Height - (2 * region.Y);
+
region.Height = m_FrameSize.Height - (2 * region.Y);
  
 
filters.Add(new VignettingFilter(1.5, black, region));
 
filters.Add(new VignettingFilter(1.5, black, region));
Line 120: Line 119:
 
</code>
 
</code>
  
The recipe uses a {{Icode|Rect}} based on the image size ({{Icode|_frameSize}}) to define the vignetting region. In the code fragment above we have access to the source as a {{Icode|StreamImage}}, and so can get the {{Icode|ImageSize}} using the following  '''asynchronous''' function call:
+
The recipe uses a {{Icode|Rect}} based on the image size ({{Icode|m_FrameSize}}) to define the vignetting region. In the code fragment above we have access to the source as a {{Icode|StreamImage}}, and so can get the {{Icode|ImageSize}} using the following  '''asynchronous''' function call:
 
<code csharp>
 
<code csharp>
 
//Get image size from stream to use in vignetting. Note is asynchronous call.
 
//Get image size from stream to use in vignetting. Note is asynchronous call.
 
ImageProviderInfo imageInformation = await StreamImage.GetInfoAsync();
 
ImageProviderInfo imageInformation = await StreamImage.GetInfoAsync();
Size _frameSize = imageInformation.ImageSize;  
+
Size m_FrameSize= imageInformation.ImageSize;  
 
</code>
 
</code>
  
Line 132: Line 131:
 
== Testing the filter ==
 
== 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 [http://developer.nokia.com/resources/library/Lumia/nokia-imaging-sdk/sample-projects/real-time-filter-demo.html Real Time Filter Demo]).
+
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 [http://developer.nokia.com/resources/library/Lumia/nokia-imaging-sdk/sample-projects/real-time-filter-demo.html Real Time Filter Demo]). Simply to add the filter source above to both ''RealtimeFilterDemo'' and ''StaticFilterViewer'' test apps in their respective switch statements. You may also need to add the line:
 +
<code csharp>using Windows.UI;</code>
  
The first step is simply to add the filter source above to both ''RealtimeFilterDemo'' and ''StaticFilterViewer'' test apps in their respective switch statements.
+
Note that the code for both test apps makes the frame size available as {{Icode|m_FrameSize}} (as used in the recipe snippets).
 
+
 
+
'''For the RealtimeFilterDemo''' <br />
+
 
+
After adding the recipe, open '''NokiaImagingSDKEffects.cs''' and add the following private member to class {{Icode|NokiaImagingSDKEffects}} to hold the frame size.
+
<code csharp>private Size _frameSize;</code>
+
 
+
Then in method {{Icode|GetNewFrameAndApplyEffect}}, assign this value to the {{Icode|frameSize}} passed in:
+
<code csharp>
+
public async Task GetNewFrameAndApplyEffect(IBuffer frameBuffer, Size frameSize)
+
{
+
_frameSize = frameSize;</code>
+
 
+
{{Icode|_frameSize}} is then available to the recipe.
+
 
+
 
+
'''For the StaticFilterViewer''': <br />
+
 
+
Add the following lines at the top of the recipe to get the frame size from the image source (in '''StaticCustomEffects.cs''', {{Icode|Initialize()}} method):
+
<code csharp>
+
ImageProviderInfo imageinfor = await StreamImage.GetInfoAsync();
+
Size _frameSize = imageinfor.ImageSize; </code>
+
 
+
Note that the method is uses {{Icode|wait}}, so you will also need to update {{Icode|Initialize()}} and the methods that call it to be {{Icode|async }}({{Icode|PreviousEffect()}}and {{Icode|NextEffect()}} )
+
  
  

Latest revision as of 06:26, 3 March 2014

This recipe replicates Instagram's Lo-Fi Filter using Nokia Imaging SDK inbuilt filters.

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

Contents

[edit] Introduction

The Instagram Lo-Fi filter makes colours richer and adds stronger shadows. This filter is used in about 2.55% of all photos shared on Instagram (source /filterfakers.com).

The recipe in this article shows how to recreate Lo-Fi by combining some of the 50+ inbuilt filters from the Nokia Imaging SDK. The recipe below is loosely based on this guide by Vaibhav on www.tricky-photoshop.com.

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


[edit] 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 (m_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 Lo-Fi 
 
//Adjust colors
Curve curve_adjustcolour = new Curve(CurveInterpolation.Linear);
curve_adjustcolour.SetPoint(31, 0);
curve_adjustcolour.SetPoint(211, 255);
filters.Add(new CurvesFilter(curve_adjustcolour, curve_adjustcolour, curve_adjustcolour));
 
//Vignetting
Color black; //from Windows.UI
black.R = 0;
black.G = 0;
black.B = 0;
 
// NOTE: How m_FrameSize is obtained depends on the architecture
Rect region = new Rect();
region.X = 0.1 * m_FrameSize.Width;
region.Y = 0.1 * m_FrameSize.Height;
region.Width = m_FrameSize.Width - (2 * region.X);
region.Height = m_FrameSize.Height - (2 * region.Y);
 
filters.Add(new VignettingFilter(1.5, black, region));
 
//Adjust colors
double a = -1.327294144973702e-05;
double b = 0.005561362467440;
double c = 0.444925588571998;
 
Curve curve_colouradjust1 = 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_colouradjust1.SetPoint(i, yvalue);
}
filters.Add(new CurvesFilter(curve_colouradjust1, curve_colouradjust1, curve_colouradjust1));
 
//Adjust colors
Curve curve_colouradjust2 = new Curve(CurveInterpolation.Linear);
a = -0.001396825396825;
b = 1.356190476190476;
 
for (int i = 1; i < 255; i++)
{
int yvalue = (int)(a * Math.Pow(i, 2) + b * i);
curve_colouradjust2.SetPoint(i, yvalue);
}
filters.Add(new CurvesFilter(curve_colouradjust2, curve_colouradjust2, curve_colouradjust2));
 
//Adjust colors
Curve curve_colouradjust3 = new Curve(CurveInterpolation.Linear);
curve_colouradjust3.SetPoint(255, 229);
filters.Add(new CurvesFilter(curve_colouradjust2, curve_colouradjust2, curve_colouradjust2));

[edit] 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 (m_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 m_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.


[edit] 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). Simply to add the filter source above to both RealtimeFilterDemo and StaticFilterViewer test apps in their respective switch statements. You may also need to add the line:

using Windows.UI;

Note that the code for both test apps makes the frame size available as m_FrameSize (as used in the recipe snippets).


[edit] License

The code has been released with the standard MIT License.

[edit] Performance

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 9 FPS
- -

[edit] Gallery

This page was last modified on 3 March 2014, at 06:26.
81 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.

×