Noisy background – Static
First published on Ka of Isis 140312
Fig. Test 1. If you see no noise above, your browser probably does not support the
When Daniel Rapp authored “Noisy”, a jQuery plugin that adds random static noise to the background of a given element based on the HTML5
Rapp has provided a test chamber where we can experiment with script parameters and generate code and fallback images. A few results from my own testing are shown below. Please look at the page source to see the different settings.
Fig. Test 2. Identical to Test 1 except for the (default) transparent background used here.
Fig. Test 3. When observed closely, the script always generates a repeating pattern. On a large canvas with fine-tuned settings or subtle opacities, this may be hard to descern, but with small
size values the pattern can be in-your-face and end up visually unpleasing.
Fig. Test 4. Noise with opaque reddish particles.
Fig. Test 5. The default parameters yield a very subtle effect, indeed.
Note: Because the script generates a square “tile” based on the
size parameter, it is necessary to specify a size that is at least equal to the width or the height of the canvas element, whichever is the largest, if the image is to be completely random, i.e. with no tiling. In other words, when I wanted to fill a 960x120 px canvas, the script actually generated a 960x960 px tile in the background. This can be taxing on less capable devices.
Important: I ran into trouble using the minified version of the script,
jquery.noisy.min.js. The author had not provided a version number, so I can only state that the script I tested initially was downloaded from GitHub in early March 2014. I finally ended up using my own manually minified version (which is larger that Rapp’s original 1.4 kB file).
Update: On 12 March 2014 Daniel Rapp published an updated minified version.