A Live Gamma Correction Preview

With the advent of the latest generation of browsers (Firefox 1.5-2, Internet Explorer 7 and especially, even in its beta state, Firefox 3), there is enough speed available to use what would previously be seen as 'javascript tricks' in useful apps. Provided you take care not to have too many elements on screen at once you can pretty freely render webpages by moving divs around, with a mentality much like that required for using sprites - keep moving blocks as small as possible, and keep any frame-based animations tiny. Additionally, opacity effects - either with a full alpha channel or applied per-div - are usually rendered quite fast.

It is the last fact that we use here, to implement a live gamma correction preview. If we take a sensible upper limit of 2.5 and its reciprocal 0.4, we can render the endpoints of the sequence:

Technical interlude: For each number x we are in fact applying 'the gamma correction that would be needed for a display that incurs a gamma of x'. In actual fact we don't care about such things, and we are doing it this way so that increasing values correlate with increasing brightness. One way of avoiding confusion here is to say that 'applying gamma' correlates decreasing values with increasing brightness and 'applying gamma correction' correlates increasing values with increasing brightness. This is probably the best thing to do, because in the popular consciousness 'gamma correction' is the name of the thing, and correlation of increasing values with increasing brightness is intuitive.

So, having the endpoints along with the original, we have 3 images we can mix. The css and proprietary opacity functions in browsers all do weighted mixing of an element with its background, so mixing 3 images can get tricky. Luckily in this case we want to mix the original with either the low-gamma version or the high-gamma version, and never both together. This also frees up the z-order a bit, and in any case, provided it is reflected in the algorithm, any z-order could be used.

The algorithm is simply a mapping from gamma values to the percentages in which the images must be mixed. It is important to note that the curves resulting from this weighted mixing differ slightly from the true gamma curves for all values except the end (and middle) points. For this reason it is best to provide the option to apply true gamma to the output of any image editor using this technique.

An example, for FF1.5+ and IE6+. The gamma option is in the 'edit' menu. Note that you will not be able to save in this editor, as it is one of the public demos of the Waxpad system.


Back to Waxpad
Waxpad Article: Javascript Gamma Correction