[Home] [Downloads] [Search] [Help/forum]

Miniwindows in MUSHclient - Blending images

Written by Nick Gammon - July 2008. Updated September 2010.

On this page:

See also:

Introduction to blending

Blending is a way of loading an image on top of an existing portion of a miniwindow (or all of it). You can specify two things when blending:


Blending the image

Before images can be blended to the miniwindow, the image must be "loaded". See Getting started with images - loading the image for how to do this.

WindowBlendImage function prototype:

This blends the specified image into the miniwindow, on top of the specified rectangle.

Example of blending an image

Base image (in miniwindow) Blend image (mentioned in WindowBlendImage)

Normal mode (1)

Normal mode is a straight copy of each pixel from the blend to the base layer. If opacity is 100% then you will only see the blend image. The only point of using normal mode is if you have the opacity at less than 100%.

25% opacity

50% opacity

75% opacity

In these examples you can see how increasing the opacity makes more and more of the blended image appear on top of the base image. Note that the base "image" doesn't have to be literally a picture, it is whatever text, shapes or other graphics are in the destination rectangle in the miniwindow.


Commutative modes

Some blend modes are commutative - that is, blending A on top of B is the same as B on top of A. The descriptions for the various modes will mention when a mode is commutative. Multiply mode is an example of a commutative mode, because the pixel values are multiplied together, and A x B is the same as B x A.


Performance considerations

Blending images tends to be computation-expensive. For example, for a 600 x 600 pixel image, the program has to apply a calculation to 600 x 600 x 3 bytes (one for each of red, green and blue), which would be 1,080,000 calculations. There are more calculations needed if you specify an opacity other than 1, as it needs to merge the computed image back on top of the base image. Suggested techniques for keeping things moving quickly are:


Some simple modes

Average mode (2)

Average mode is the same as normal mode with 50% opacity. Effectively, it is an average of both images.

This mode is commutative (base and blend layer can be swapped).


Interpolate mode (3)

This is similar to average mode, but has better contrast. It uses a cosine calculation for its calculations and is likely to be slower than average mode.

This mode is commutative (base and blend layer can be swapped).


Dissolve mode (4)

This randomly chooses pixels from the base layer or the blend layer, giving a rather strange speckled look. The number of pixels chosen is controlled by the opacity, at 100% opacity you would only see the blend layer. The example below shows dissolve mode at 50% opacity (an opacity parameter of 0.5):


Further reference

I got some inspiration and formulae from the Pegtop.net - Blend Modes series of web pages. There is a lengthy description there of the various modes, along with some of the mathematics behind them.

I got quite a few of the C formulae from Photoshop Blend Mode Math web page.

Both of those pages have example images and examples of various blend modes in operation.


Examples on this page

The examples on this page are taken from Fields of gold... by Spiralz, and Thanks to solea by jam343. These are licensed for royalty-free use under the Attribution 2.5 Generic License. They were obtained from the web site http://www.everystockphoto.com/.

Some ideas and descriptions were adapated from the Pegtop.net Blend Modes article.


Summary of the pages with the various mode groups:


Other pages about miniwindows


[Home]

Written by Nick Gammon - 5K

Comments to: Gammon Software support
[RH click to get RSS URL] Forum RSS feed ( http://www.gammon.com.au/rss/forum.xml )

[Best viewed with any browser - 2K]    [Internet Contents Rating Association (ICRA) - 2K]    [Web site powered by FutureQuest.Net]