Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Filter Cookbook (Nokia Imaging SDK)

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - - Early Bird)
hamishwillee (Talk | contribs)
m (Hamishwillee - Redirect to new page.)
 
Line 1: Line 1:
[[Category:Draft]]
+
#REDIRECT [[Category:Nokia Imaging SDK Filter Recipes]]
{{Abstract|This article contains "recipes" for creating new and popular filters (for example, Instagram filters) by combining inbuilt [http://developer.nokia.com/lumia/nokia-apis/imaging Nokia Imaging SDK] filters and effects.}}
+
{{SeeAlso|[http://developer.nokia.com/resources/library/Lumia/nokia-imaging-sdk.html Nokia Imaging SDK] (Lumia Developers' Library)}}
+
{{ArticleMetaData <!-- v1.3 -->
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.wgt]]) -->
+
|devices= Nokia Lumia 1020
+
|sdk= Windows Phone 8.0 SDK
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
+
|signing=<!-- Special Signing requirements -->
+
|capabilities= <!-- Required capabilities for code (e.g. ID_CAP_LOCATION, ID_CAP_NETWORKING) -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
+
|translated-by= <!-- [[User:XXXX]] -->
+
|translated-from-title= <!-- Title only - not link -->
+
|translated-from-id= <!-- Id of translated revision -->
+
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-timestamp= <!-- After re-review: YYYYMMDD -->
+
|update-by= <!-- After significant update: [[User:username]]-->
+
|update-timestamp= <!-- After significant update: YYYYMMDD -->
+
|creationdate= 20140220
+
|author= [[User: Hamishwillee]]
+
}}
+
 
+
== Introduction ==
+
 
+
The [http://developer.nokia.com/lumia/nokia-apis/imaging Nokia Imaging SDK] has over 50 [http://developer.nokia.com/resources/library/Lumia/nokia-imaging-sdk.html#toc_Filtersandeffects inbuilt filters and effects]. These can be used together in groups to create almost any imaginable visual effect: including those made famous by apps like Instagram and Photoshop.
+
 
+
This "cookbook" is a library of community-contributed filter-group recipes. We encourage you to use the recipes provided, improve them, and [[#Contributing a recipe|contribute your own]].
+
 
+
== How to use the recipes ==
+
 
+
Filters are combined by simply adding them to an {{Icode|IFilter}} list, which is then passed to a {{Icode|FilterEffect}}. Each recipe shows the code to determine filter parameters (if needed) and the code to add the filter to the list ("{{Icode|filters}}"):
+
<code csharp>
+
filters.Add(new AntiqueFilter());
+
filters.Add(new RotationFilter(35.0));
+
</code>
+
 
+
This approach makes it very easy to test the recipes in 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]) by simply extending the switch statement to add the filters and copy-pasting the recipe text.
+
 
+
== Instagram filters ==
+
 
+
=== X-Pro II ===
+
This Instagram filter makes the colours in the image more vibrant and gives a warm (possibly "vintage") appearance. The recipe below is loosely based on [http://iamiqbal87.blogspot.fi/2012/04/how-to-make-instagramx-pro-ii-effect.html this blog]. Note,  original (unmodified) image is [[:File:Door_ImageOriginal.jpg|here]].
+
 
+
<gallery widths="400px" heights="350px">
+
File:Door_X-ProII_Instagram.jpg|Instagram
+
File:Door_X-ProII_FilterGroup1.jpg|Recipe
+
</gallery>
+
 
+
{{Note|This recipe gets the image size using an asynchronous function. The calling function must therefore also be asynchronous.}}
+
 
+
'''Recipe'''
+
<code csharp>
+
//Instagram Filter: X-Pro II
+
 
+
//Get image size from stream to use in vignetting. Note is asynchronous call.
+
ImageProviderInfo imageInformation = await StreamImage.GetInfoAsync();
+
Size _frameSize = imageInformation.ImageSize;
+
 
+
//Vignetting
+
Color black;
+
black.R = 0;
+
black.G = 0;
+
black.B = 0;
+
 
+
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));
+
</code>
+
 
+
 
+
=== Lo Fi ===
+
 
+
The Lo-Fi Instagram filter makes colours richer and adds stronger shadows. The recipe below is loosely based on [http://www.tricky-photoshop.com/instagrams-lo-fi/ this guide]. Note,  original (unmodified) image is [[:File:Door_ImageOriginal.jpg|here]].
+
 
+
<gallery widths="400px" heights="350px">
+
File:Door_LoFi_Instagram.jpg|Instagram
+
File:Door_LoFi_FilterGroup.jpg|Recipe
+
</gallery>
+
 
+
{{Note|This recipe gets the image size using an asynchronous function. The calling function must therefore also be asynchronous.}}
+
 
+
'''Recipe'''
+
<code csharp>
+
//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));
+
 
+
//Get image size from stream to use in vignetting. Note is asynchronous call.
+
ImageProviderInfo imageinformation = await StreamImage.GetInfoAsync();
+
Size _frameSize = imageinformation.ImageSize;
+
 
+
 
+
//Vignetting
+
Color black;
+
black.R = 0;
+
black.G = 0;
+
black.B = 0;
+
 
+
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.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));
+
</code>
+
 
+
 
+
=== Valencia ===
+
 
+
The Valencia Instagram filter gives images a slight faded "1980's" appearance by adding a light brown and grey tint. The recipe below is loosely based on [http://www.youtube.com/watch?v=H5fFJCK2XVU this tutorial]. Note,  original (unmodified) image is [[:File:Door_ImageOriginal.jpg|here]].
+
 
+
<gallery widths="400px" heights="350px">
+
File:Door_Valencia_Instagram.jpg|Instagram
+
File:Door_Valencia_FilterGroup.jpg|Recipe
+
</gallery>
+
 
+
'''Recipe'''
+
<code csharp>
+
//Adjust colors
+
double ar = 1.752369270855186e-08;
+
double br = -1.835843575157521e-05;
+
double cr = 0.003760684854141;
+
double dr = 0.708921609107977;
+
double er = 30;
+
 
+
double ag = -1.055045968753709e-09;
+
double bg = 8.911970207324917e-07;
+
double cg = -2.590336356913679e-04;
+
double dg = 0.028503062912458;
+
double eg = 0.259107895292852;
+
 
+
double ab = 2.204671352703166e-09;
+
double bb = -1.303028437701711e-06;
+
double cb = 2.581991768409657e-04;
+
double db = -0.020690120745464;
+
double eb = 1.566757883591609;
+
double fb = 28;
+
 
+
Curve curve_red = new Curve(CurveInterpolation.Linear);
+
Curve curve_green = new Curve(CurveInterpolation.Linear);
+
Curve curve_blue = new Curve(CurveInterpolation.Linear);
+
 
+
for (int i = 1; i < 255; i++)
+
{
+
  int yvalue = (int)(ar*Math.Pow(i, 4) + br*Math.Pow(i, 3) + cr*Math.Pow(i, 2) +dr*i + er);
+
  curve_red.SetPoint(i, yvalue);
+
 
+
  yvalue = (int)(ag*Math.Pow(i, 5) + bg*Math.Pow(i, 4) + cg*Math.Pow(i, 3) + dg*Math.Pow(i, 2) + eg*i);
+
  curve_green.SetPoint(i, yvalue);
+
 
+
  yvalue = (int)(ab * Math.Pow(i, 5) + bb * Math.Pow(i, 4) + cb * Math.Pow(i, 3) + db*Math.Pow(i, 2) + eb*i + fb);
+
  curve_blue.SetPoint(i, yvalue);
+
}
+
 
+
filters.Add(new CurvesFilter(curve_red, curve_green, curve_blue));                   
+
</code>
+
 
+
=== Early Bird ===
+
 
+
The ''Early Bird'' Instagram filter gives images a retro feel with soft faded colours and a hint of yellow. The original (unmodified) image is [[:File:Shoe_ImageOriginal.jpg|here]].
+
 
+
<gallery widths="500px" heights="350px">
+
File:Shoe_EarlyBird_Instagram.jpg|Instagram
+
File:Shoe_EarlyBird_FilterGroup.jpg|Recipe
+
</gallery>
+
 
+
{{Note|This recipe gets the image size using an asynchronous function. The calling function must therefore also be asynchronous.}}
+
 
+
'''Recipe'''
+
<code csharp>
+
filters.Add(new ColorAdjustFilter(-0.012, +0.04, -0.161)); //Add more green
+
filters.Add(new HueSaturationFilter(0, -0.3)); //Decrease saturation
+
                       
+
//Adjust red curve
+
Curve curve_red = new Curve(CurveInterpolation.Linear);
+
curve_red.SetPoint(0, 25);
+
filters.Add(new CurvesFilter(curve_red, new Curve(CurveInterpolation.Linear), new Curve(CurveInterpolation.Linear)));
+
                       
+
filters.Add(new ContrastFilter(0.35)); //Increase contrast
+
 
+
//Get image size from stream to use in vignetting. Note is asynchronous call.
+
ImageProviderInfo imageInformation = await StreamImage.GetInfoAsync();
+
Size _frameSize = imageInformation.ImageSize;
+
 
+
//Vignetting
+
Color black;
+
black.R = 0;
+
black.G = 0;
+
black.B = 0;
+
 
+
Rect region = new Rect();
+
region.X = 0.0375 * App._frameSize.Width;
+
region.Y = 0.0375 * App._frameSize.Height;
+
region.Width = App._frameSize.Width - (2 * region.X);
+
region.Height = App._frameSize.Height - 2 * region.Y;
+
 
+
filters.Add(new VignettingFilter(0.55, black, region));         
+
</code>
+
 
+
=== Rise ===
+
{{UnderConstruction|Original is more yellowy, particularly on whites.}}
+
 
+
The ''Rise'' Instagram filter gives images a glow and warmth by adding yellow tones. The recipe below is loosely based on [http://www.tricky-photoshop.com/create-rise-effect/ this tutorial]. Note,  original (unmodified) image is [[:File:Football_ImageOriginal.jpg|here]].
+
 
+
<gallery widths="400px" heights="350px">
+
File:Football_Rise_Instagram.jpg|Instagram
+
File:Football_Rise_FilterGroup.jpg|Recipe
+
</gallery>
+
 
+
{{Note|This recipe gets the image size using an asynchronous function. The calling function must therefore also be asynchronous.}}
+
 
+
'''Recipe'''
+
<code csharp>
+
//Adjusted colors
+
Curve curve_red = new Curve(CurveInterpolation.Linear); //tableR[i] = 0.7 * i + 71.7;
+
curve_red.SetPoint(0,72);
+
curve_red.SetPoint(255, 250);
+
Curve curve_green = new Curve(CurveInterpolation.Linear);
+
curve_green.SetPoint(0, 41);
+
curve_green.SetPoint(255, 220);
+
Curve curve_blue = new Curve(CurveInterpolation.Linear);
+
curve_blue.SetPoint(255, 179);
+
filters.Add(new CurvesFilter(curve_red, curve_green, curve_blue));
+
 
+
//Color adjust
+
filters.Add(new ColorAdjustFilter(0.18746, 0.10746, 0));
+
 
+
//Contrast
+
filters.Add(new ContrastFilter(0.35));
+
 
+
//Decrease saturation
+
filters.Add(new HueSaturationFilter(0, -0.75)); //Decrease saturation
+
 
+
//Lightening up the image 3%
+
Curve curve_lightenimage = new Curve(CurveInterpolation.Linear);
+
curve_lightenimage.SetPoint(0, 8);
+
curve_lightenimage.SetPoint(247, 255);
+
filters.Add(new CurvesFilter(curve_lightenimage, curve_lightenimage, curve_lightenimage));
+
 
+
//Get image size from stream to use in vignetting. Note is asynchronous call.
+
ImageProviderInfo imageInformation = await StreamImage.GetInfoAsync();
+
Size _frameSize = imageInformation.ImageSize;
+
 
+
//Vignetting
+
Color black;
+
black.R = 0;
+
black.G = 0;
+
black.B = 0;
+
 
+
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.5, black, region));           
+
</code>
+
 
+
 
+
 
+
== New/unique filters ==
+
 
+
This section is for "unique" filters - not based on popular/common effects.
+
 
+
=== Magic Edge Pen ===
+
Mimics Sobel operator edge detection. Created by [[User: Navibyte]].
+
{|
+
|-
+
| [[File:Magic_Edge_Pen.jpg|frame|none|Magic Edge Pen]]
+
|
+
<code csharp>
+
filters.Add(new GrayscaleFilter());
+
filters.Add(new MagicPenFilter());
+
filters.Add(new ContrastFilter(0.6));
+
</code>
+
 
+
Image turned to grayscale, then Magic Pen is applied and finally contrast is added to make edges more crisp and to remove ambient noise.
+
 
+
This filter was originally in [[Combining imaging filters to create new real-time camera effects#Magic Edge Pen]]
+
|}
+
 
+
 
+
=== Night Vision===
+
 
+
Simulates view through infra-red "Night Vision" equipment. Created by [[User: Navibyte]].
+
{|
+
|-
+
| [[File:Night Vision.jpg|none|frame|Night Vision]]
+
|
+
<code csharp>
+
// "Night Vision"
+
filters.Add(new ColorAdjustFilter(-0.9f, 1.0f, -0.9f));
+
filters.Add(new SharpnessFilter(5));
+
filters.Add(new BrightnessFilter(-0.5));
+
filters.Add(new ContrastFilter(0.4));
+
</code>
+
 
+
The first filter adjusts colors by decreasing red and blue components and increasing green component on a RGB image frame. Then some sharpness and contrast is added but brightness level is lowered.
+
 
+
This filter was originally in [[Combining imaging filters to create new real-time camera effects#Magic Edge Pen]]
+
|}
+
 
+
=== X-Ray ===
+
 
+
Simulates "X-ray" effect. Created by [[User: Navibyte]].
+
{|
+
|-
+
| [[File:X-Ray.jpg|none|frame|X-Ray]]
+
|
+
<code csharp>
+
// "X-Ray"
+
filters.Add(new GrayscaleNegativeFilter());
+
filters.Add(new SharpnessFilter(6));
+
filters.Add(new ContrastFilter(-0.4));
+
</code>
+
 
+
Applies negative grayscale, increases sharpness but decreases contrast.
+
 
+
This filter was originally in [[Combining imaging filters to create new real-time camera effects#Magic Edge Pen]]
+
|}
+
 
+
 
+
 
+
=== Warp Cartoon ===
+
 
+
Applies simultaneous warp and cartoon. Created by [[User: Navibyte]].
+
{|
+
|-
+
| [[File:Warp Me Up.jpg|none|frame|Warp cartoon]]
+
|
+
<code csharp>
+
// "Warp Cartoon"
+
filters.Add(new WarpFilter(WarpEffect.Twister, 0.75));
+
filters.Add(new CartoonFilter(true));
+
</code>
+
 
+
This filter was originally in [[Combining imaging filters to create new real-time camera effects#Magic Edge Pen]]
+
|}
+
 
+
== Contributing a recipe ==
+
 
+
Please extend this article with your own unique or well-known filters or by improving the current set.
+
 
+
It is not mandatory, but you may also choose to add your filter to the [[Test Apps for Viewing Custom Filters (Nokia Imaging SDK)]]
+

Latest revision as of 09:14, 28 February 2014

  1. REDIRECT
This page was last modified on 28 February 2014, at 09:14.
14 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.

×