×
Namespaces

Variants
Actions
(Difference between revisions)

Filter Cookbook (Nokia Imaging SDK)

From Nokia Developer 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 12:14, 28 February 2014

  1. REDIRECT
This page was last modified on 28 February 2014, at 12:14.
19 page views in the last 30 days.
×