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.
Comments
Back to Waxpad