js-noisy-gradient

Small and very fast single-function "lib" for smoothing visible banding in linear-gradient backgrounds.

Intro

Gradient fills that use very similar colors are prone to produce a visual artefact called color banding.

For example, a vertical linear-gradient from #112233 to #223344 looks like this:

Depending on your monitor and the lighting conditions the effect may be pronounced or just barely visible. Here's the same image with luminosity levels adjusted to exaggerate the effect:

Banding is certainly not an Earth-shattering issue, but when it's noticeable, it tends to stick out and detract the attention from the rest of the design.

Solution

There is however a very simple solution. It works by adding a small amount of noise to the image, so that some pixels become a little bit lighter and some a little bit darker.

By varying the amount of noise and the strength of lightening/darkening it is possible to visually blend bands together, albeit at the expense of adding a bit of a texture.

Or, again, with the exaggeration to show the details:

And, finally, "raw" and "smoothed" versions side by side:

The code

NoisyVerticalGradient() accepts image dimensions, a set of gradient stops and optional configuration overrides, and produces an image filled with a smoothed gradient as per above.

Caveats:

• Gradient stops are solid colors, specified in #rrggbb format.
• Gradient stops are assumed to be spaced evenly.
• The gradient is vertical, as per the function name.
• IE is not supported.

Pixels from the raw gradient fill are lightened up or dimmed by overlaying either pure white or pure black pixels with a random alpha transparency.

The usage:

var nvg = new NoisyVerticalGradient(50, 400, ['#112233', '#223344'] );
var png = nvg.render_png();
document.getElementById('xyz').style.backgroundImage = png;

This can obviously be simplified with some code to automatically extract width, height and stops arguments from the DOM/CSS of a target element.

Options:

• cover - the percentage of pixels that gets their color tweaked. The default is 1.0, which is "all pixels".
• black - the maximum alpha of pure black pixels. The default is 0.03.
• white - the maximum alpha of pure white pixels. The default is 0.015.

So something like this will introduce an overly strong black-only noise to about 30% of the image:

var nvg = new NoisyVerticalGradient(..., { cover: 0.3, black: 1.0, white: 0.0 });

WebGL

Adding noise to an image is not really rocket science, but the trick is how to do it fast.

Here it's done with WebGL, which is probably one of more esoteric uses of this lovely framework.

In fact, the WebGL use is what makes the whole thing notable.

If you ever wondered how to apply WebGL in a purely aesthetic capacity, this is the example of that.

2D canvas

There's also a pure 2D canvas version, but be advised that it can be very slow even on very fast machines. Literally, it will take seconds to run for an image that's not even a full screen.

For that reason the fallback to the 2d_canvas rendering in case when WebGL is not available is OFF by default.

You can switch it on by setting canvas_fallback to true in the opts argument of NoisyVerticalGradient.

Live example

This code was written for the recent redesign of Bvckup 2 homepage which makes a good use of very dark gradients that showed a fair amount of banding with the plain linear-gradient.

Could've just photoshopped the noise on a background strip, but where's fun in that? :)