UWP Composition Effects: Temperature and Tint

In this article we discuss TemperatureAndTint, the Composition API effect that -unsurprisingly- allows you to adjust the temperature and/or tint of an image.

The Temperature property affects the balance between the blue and yellow colors in an image. Decreasing the color temperature makes an image look bluish. Increasing the temperature intensifies the green and red colors – in RGB-space this is the way to increase yellow. Here’s what happens to an image of a color wheel (image in the middle) when you decrease (image on the left) or increase (image on the right) the color temperature:

Temperature1 Temperature2 Temperature3

The Temperature property of the TemperatureAndTint effect does not stand for the color temperature of the image itself, for the relative change in color that is caused by the effect. It is defined as a float between –1 and 1.

The Tint property affects the balance between the green and magenta colors in an image. Increasing the tint increases the intensity of red and blue pixels, while decreasing increases the amount of green. Here’s the effect of changing the Tint in a color wheel image:

Tint1 Temperature2 Tint2

The Tint property is also a value in the range from -1 to 1.

What is Color Temperature?

The standard unit measure of Color Temperature is degrees Kelvin (K) -a variation of Centigrade a.k.a. degrees Celsius- and it ranges from 1000 to 10000. It was discovered in the late 1800’s at a Scottish barbecue. Physicist and mathematician Lord William Kelvin heated a block of carbon and observed its glow producing a range of different colors at different temperatures. The heated black cube first produced a dim red light, increasing to a brighter yellow as the temperature went up, and eventually produced a bright blue glow at the highest temperatures. These observations led to a color temperature scale based on a theoretical “ideal black body”.

Funny enough, the bluish light -which corresponds to the higher color temperature- is described as cool. So warm and cool refer to the color, not to the temperature.

Here’s how Kelvin’s color temperature scale looks like:

ColorTemperatures

Most computer screens and televisions have a color temperature of 6500 K. That’s why you see a blue glow through the windows when you drive by someone’s house at night.

Let’s see how we can use the notion of Color Temperature on the Universal Windows Platform, and find some use cases for it.

How to apply the effect with the Composition API

In Visual Studio, make sure that your UWP project references the Microsoft UI Composition Toolkit project, and install the Win2D UWP Nuget package. For more info on the configuration and initialization of the different Composition API citizens, read my previous article.

When we create the effect, we give it a name. When we create an EffectFactory for the effect, we parameterize the Temperature and Tint properties:

// Create the effect, but don't specify the properties yet.
var temperatureAndTintEffect = new TemperatureAndTintEffect
{
    Name = "temperatureAndtint",
    Source = new CompositionEffectSourceParameter("source")
};

// Compile the effect
var effectFactory = _compositor.CreateEffectFactory(
    temperatureAndTintEffect,
    new[] { "temperatureAndtint.Temperature", "temperatureAndtint.Tint" });

Then we create a brush and apply it to the SpriteVisual:

// Create and apply the brush.
_brush = effectFactory.CreateBrush();
_spriteVisual.Brush = _brush;

There’s no base image loaded yet, so here’s how to load one in a CompositionSurfaceBrush  and plug that brush in the effect brush:

// Create CompositionSurfaceBrush
var surfaceBrush = _compositor.CreateSurfaceBrush();

// Create an image source to load
CompositionImage imageSource = _imageFactory.CreateImageFromUri(uri);
surfaceBrush.Surface = imageSource.Surface;

_brush.SetSourceParameter("source", surfaceBrush);

When you know the values that you want to apply to the Temperature and/or Tint properties of the effect (e.g. from a Slider control or data binding), then call InsertScalar:

private void ChangeTemperature(float temperature)
{
    // Apply parameter to brush.
    _brush.Properties.InsertScalar("temperatureAndtint.Temperature", temperature);
}

private void ChangeTint(float tint)
{
    // Apply parameter to brush.
    _brush.Properties.InsertScalar("temperatureAndtint.Tint", tint);
}

warning_thumb3  Tip: You can avoid hardcoded strings by using the nameof() operator.

Some of the Composition API effect related methods require parameters in the name-of-the-effect.name-of-the-property format, like “temperatureAndTint.Temperature”. With the nameof() operator you can get to the name of a variable, type, or member at runtime. That allows you to avoid the hard-coded strings to better survive refactorings.

Here’s how you could store the Temperature parameter and use it in the EffectFactory constructor:

// Strongly typed version of the "temperatureAndtint.Temperature" string
_temperatureParameter = temperatureAndTintEffect.Name 
	+ "." 
	+ nameof(temperatureAndTintEffect.Temperature);
var effectFactory = _compositor.CreateEffectFactory(
    temperatureAndTintEffect,
    new[] { _temperatureParameter, "temperatureAndtint.Tint" });

The value was stored in a field, so it can be reused when we apply the value:

_brush.Properties.InsertScalar(_temperatureParameter, temperature);

Using Color Temperature to adjust the lighting in photos

The most common use of Color Temperature in software is white-balancing pictures. Our brain automatically adapts to different lighting colors: we perceive a white T-shirt as white whether we are indoors and using warm artificial lighting or outdoors in sunlight. Our eyes and brain recalibrate what we read as white, based on our experience and points of reference, but a camera does not. When taking a picture, the camera needs to be properly configured to the correct color temperature setting. If it’s not well done, the image needs to post-processed.

Many photo editor apps come with a slider for the Temperature in the Red-White-Blue scale, and a slider for the Tint in the Green to Magenta scale to do minor adjustments.

That’s exactly what the sample app does, so let’s move to other usages of Color Temperature.

Using Color Temperature to adapt a display to the time of day

The TemperatureAndTint effects provides you with an opportunity to make text better readable and interacting with your app more comfortable and less fatiguing. If you are reading a book, the pages will always appear white – no matter what light source you’re under. But pure white is not always the ideal background. For some apps, it makes sense to adjust the background color based on your user’s environment (indoors or outdoors) or the time of day (day or night): blue is a better background in full sunlight, and soft yellow-to-orange tones are better for reading bed-time stories. There already is a huge range of apps available that monitor the light conditions (or use history data) and adapt the screen setting accordingly. For a good example, take a look at f.lux.

Apps on the Universal Windows Platforms have no write access to screen settings and system colors. But nothing prevents you from using a pale background image in your app and changing its color temperature through the Composition API.

Here’s what happens when you load a white gradient bitmap into the sample app and change the color temperature:

White1 White2 White3

Using Color Temperature to highlight an area

The Color Temperature effect is not only useful on a white background. The following screenshots show the effect in action against a colorful (blue and red) background:

Colorful1 Colorful2 Colorful3

In the image on the left, the blue area is nicely highlighted. In the image on the right, the red area gets all the attention. So adjusting the Color Temperature (or Tint) can be used to temporarily highlight different zones in your UWP app, and this can be done with animation.

The Code

The sample app lives here on GitHub. The Assets folder in the main project has other sample images for you to experiment with: people, flowers, buildings…

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s