×
Namespaces

Variants
Actions

Orton Effect Filter Recipe (Nokia Imaging SDK)

From Nokia Developer Wiki
Jump to: navigation, search
Featured Article
18 Sep
2014

This article explains how to recreate the Orton Effect Michael Orton created using multiple analog photographies using Filters from the Nokia Imaging SDK.

WP Metro Icon WP8.png
Article Metadata
Tested with
SDK: Windows Phone 8.1 SDK, Nokia Imaging SDK 1.2
Devices(s): Nokia Lumia 1520, Nokia Lumia 720
Compatibility
Platform(s):
Windows Phone 8
Article
Created: SB Dev (30 Jun 2014)
Last edited: kiran10182 (18 Sep 2014)

Contents

Introduction

The basic idea of recreating the Orton Effect is to blend together blurred version(s) of the image with the original image in order to create a dream like appearance while still retaining a certain amount of detail. To achieve a result with similar colors as the original we first have to create an intermediate result using Screen as our blend function.

The intermediate result is then blurred. The blurred and original version are then combined using Multiply as the blend function to achieve an effect as shown in this image:

Orton Effect

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

Source code

In contrast to many other filter recipes the creation of an intermediate result means we can't merely apply various effects in a row and add all of them to an IFilter-Array. Therefore we need to create three different FilterEffects and create a rendering pipeline from them. The FilterEffect bgFilters is used as the source for both the fgFilters and finalFilters FilterEffect. The finalFilters FilterEffect is used as the source for the renderer.

The below code assumes that we have the original image stored inside a BitmapImage called bitmapSource and want to render the result to a BitmapImage called bitmapResult.

using(BitmapImageSource bis = new BitmapImageSource(bitmapSource))
{
//create the intermediate result
using(FilterEffect bgFilters = new FilterEffect(bis)
{
Filters = new IFilter[]
{
new BlendFilter(m_StreamImageSource, BlendFunction.Screen, 1.0)
}
})
{
//apply the blur
int blurFact = 45;
using(FilterEffect fgFilters = new FilterEffect(bgFilters)
{
Filters = new IFilter[]
{
new BlurFilter(blurFact)
}
})
{
//combine blurred fgFilter result with unblurred bgFilter result
using (FilterEffect finalFilters = new FilterEffect(bgFilters)
{
Filters = new IFilter[]
{
new BlendFilter(fgFilters, BlendFunction.Multiply, 1.0)
}
})
{
//created renderer and render result
using (BitmapRenderer renderer = new BitmapRenderer(finalFilters, bitmapResult))
{
await renderer.RenderAsync();
}
}
}
}
}

How to use the filter

The code above already shows a full usage scenario. To use it with other sources/render targets you merely have to exchange the ImageSource and the renderer that are being used (this is explained in more detail in Nokia Developer SDK - Core concepts).

Testing the filter

The easiest way to test the recipe is to download the real time viewer from GitHub. It is based on the Test Apps for Viewing Custom Filters (Nokia Imaging SDK) (itself a fork of the Real Time Filter Demo) but was adapted in order to allow for a fully custom pipeline.

License

The code has been released with the standard MIT License.

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 1520 3 - 5 FPS
Lumia 1020 2 - 4 FPS
Lumia 720 1 - 3 FPS

Gallery

Include the original image and what the image looks like with the filter applied. The more examples, the better.

This page was last modified on 18 September 2014, at 06:20.
512 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.

×