×
Namespaces

Variants
Actions

Barack Obama "Hope" Poster Effect Filter Recipe

From Nokia Developer Wiki
Jump to: navigation, search

This filter recipe simulates the iconic Barack Obama "Hope" Poster by Shepard Fairey made famous during the United State 2008 Presidential Election

See Also
Article Metadata
Tested with
SDK: Windows Phone 8.0 SDK
Devices(s): Nokia Lumia 1020
Dependencies: Nokia Imaging SDK 1.2
Article
Created: kennethkau (14 Jul 2014)
Last edited: Loukt (18 Jul 2014)

Contents

Introduction

This article describes the methods to create a filter recipe producing an effect similar to the Barack Obama "Hope" Poster.

The poster became an iconic depiction of the then-presidential candidate through its bold solid color (red/white/blue) composition and impactful text on the bottom. The poster led to many adaptations featuring similar color scheme and style.

In addition, this article will show ways to change the color scheme for those who do not wish to use red/white/blue.

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>.

var filters = new List<IFilter>();
// "Barack Obama 'Hope' Poster Filter Recipe"
// Auto Level the luminance and contrast of image
filters.Add(new AutoLevelsFilter());
// Despeckle the image to smooth it out, may set it to High or even Maximum
filters.Add(new DespeckleFilter(DespeckleLevel.Low));
// Apply Cartoon Filter to 'flatten' out the image
filters.Add(new CartoonFilter());
filters.Add(new PosterizeFilter(10));
filters.Add(new GrayscaleFilter());
// Now that image should be grayscaled and posterized, apply ColorSwaps to various shades of gray
// This is for the darkest gray
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 5, 51, 75), 0.07, false, true));
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 90, 90, 90), Color.FromArgb(255, 227, 30, 47), 0.07, false, true));
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 130, 130, 130), Color.FromArgb(255, 119, 164, 170), 0.1, false, true));
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 170, 170, 170), Color.FromArgb(255, 172, 190, 171), 0.1, false, true));
// This is the for the lightest gray
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 235, 235, 235), Color.FromArgb(255, 251, 228, 174), 0.1, false, true));

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();
}

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).

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 1020 4-6 FPS

Gallery of "Hope" Filter

Extension - Alternative Color Schemes

One can apply different color schemes to produce a different effect. For example, one can use the colors red, black, and yellow instead to celebrate Germany's win in the World Cup 2014.

For the extension example, Microsoft's corporate color scheme will be used.

Source Code for "Hope" Style Microsoft Color Filter

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>.

var filters = new List<IFilter>();
// "Barack Obama 'Hope' Poster Filter Recipe"
// Auto Level the luminance and contrast of image
filters.Add(new AutoLevelsFilter());
// Despeckle the image to smooth it out, may set it to High or even Maximum
filters.Add(new DespeckleFilter(DespeckleLevel.Low));
// Apply Cartoon Filter to 'flatten' out the image
filters.Add(new CartoonFilter());
filters.Add(new PosterizeFilter(10));
filters.Add(new GrayscaleFilter());
// Now that image should be grayscaled and posterized, apply ColorSwaps to various shades of gray
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 0, 65, 133), 0.07, false, true));
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 90, 90, 90), Color.FromArgb(255, 242, 80, 34), 0.07, false, true));
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 130, 130, 130), Color.FromArgb(255, 1, 164, 239), 0.1, false, true));
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 170, 170, 170), Color.FromArgb(255, 127, 186, 0), 0.1, false, true));
filters.Add(new ColorSwapFilter(Color.FromArgb(255, 235, 235, 235), Color.FromArgb(255, 255, 185, 1), 0.1, false, true));

Gallery of "Hope" Style Microsoft Color Filter

This page was last modified on 18 July 2014, at 02:06.
193 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.

×