Full Contact Wallpaper

This is an interactive graphics program, which generates a patterned graphic, which is tiled so as to be useable as a webpage background image.

Here are some samples of the kinds of images it can produce.

Click on Noise to try it out. The tutorial follows, as well as other information. (The clock only updates on refresh.)

Quick & dirty

Try 11 veins, and hit hide. Then check reflect and try 33 veins. Then check hold & tile. Another cool one is 7 veins, changing the color to abcdef, and cosine to none or cubic. And then switch on marble!

Noise [new] tutorial feedback about

Tutorial - Overview

The Perlin noise function is generated as a rectangle of shades of grey. The darker areas have a lower value and the lighter areas have a higher value. It can be thought of as a landscape of hills and valleys where the highest snowcapped hilltops are white, down to the lowest valleys which are black.

The noise function is then 'applied' to a colored rectangle; the color becomes equivalently darker or lighter corresponding to the different shades of grey. It might be thought of pressing the landscape into a flat colored plain; the deformed plain now has dark colored valleys and light colored hills.

The noise function can be tweaked - smoothed, amplified, and so on - which may result in black wrapping around to white in interesting contours and folds. Likewise, its application can cause the red green blue components of a color to vary differently, giving rise to color gradients along the edges and slopes.

This program employs the Perlin function in a nonstandard way; the Perlin noise function has far more applications than available here.

Tutorial - Noise

There are three rungs with controls:
apply Apply noise function to color square
tweak Tweak the noise function
noise Generate a Perlin noise function

Beneath the rungs are a number of 1D and 2D plots, with the uppermost being the sum or composite of all the ones beneath. This is the noise function.

The one dimensional plots actually correspond to the top part of the two dimensional plots, or grey scale rectangles; peaks and valleys in the 1D plot will match up with respective light and dark areas along the top of the 2D plot.

The frequency of each channel corresponds to the number of peaks and valleys, and is shown by the red dots in the 1D plots. The amplitude, given as a value between 0.0 & 1.0, is the relative height and depth of the hills and valleys. Try a frequency of 44 in channel 2 (and cubic) to get the orange skin effect.

10

21

32

43

54

65

There are four methods of interpolation - none, linear, cosine, & cubic - which specify how curvy or not the slope is between the hills and valleys. This is apparent in the 1D plots. Note that cubic occasionally can plot outside the range; check reflect (below) to get rid of unwanted holes.

none

linear

cosine

cubic

There can be any number of channels - the middle example in blue & yellow above uses just one channel - but four or so with increasing frequency and decreasing amplitude is common.

1

2

3

4

The smooth function flattens the landscape - lowers the hilltops and fills in the valleys. This not only softens the base noise but also slows down some of the more garish effects (below).

Each session, a new set of values is generated, as represented by the red dots in the 1D plots, and these are the basis for the overall pattern generated. Check the hold box to fix the number thereby maintaining the pattern. A particular number will always generate the same underlying pattern.

The show/hide button can be used to remove the individual plots, which allows the program to generate the final result faster. In the event of an image not appearing (broken) try viewing the image (right click).

Tutorial - Tweak

This program applies noise in a nonstandard way. Each noise value above or below medium grey lightens or darkens the color in that area by the relative amount. The brightness and darkness values modify that effect - the default values of 1.0 lighten and darken fully, whereas values of 0.0 effectively turn them off. The cloudy sky is achieved by applying noise to a blue rectangle but minimising the darkness - no areas of sky are darkened leaving a flat blue sky, but the brightened areas then become the clouds.

Cloud control is enabled by a special function cover, which give none 0.0 to full 1.0 cloud cover, and sharpness, where clouds go from thin 0.0 to dense 1.0.

cover: 0.15

sharpness: 0.15

0.35

0.35

0.55

0.55

0.75

0.75

0.95

0.95

If a color goes above white it will either start over as black - clipped (default) - or be reflected back from white. This will appear as veins. The veins value amplifies the noise by that amount, causing it to cross the barrier up to that many times, which draws that many veins. Since the separate red green blue components cross separately the veins break out colourfully.

clip

1

3

5

7

9

reflect

1

3

5

7

9

The graphics generated are png and some systems support their transparency from invisible 0.0 to normal 1.0.

Tutorial - Apply

The παράγετε button is the go button.

Sorry - no color converter; color is keyed in as a hex triplet - rrggbb. For example ff0000 is red, ff9999 is pink and ff9900 is orange. There are tons of html color pickers on the web.

Width & height set the pixel width & height of the color rectangle.

66 x 99

86 x 79

106 x 59

126 x 39

Check tile to see the result as the web page background.

Checking marble increases the edge gradients which gives a nice marble effect when veins is set above 2. The width & height example above is 5 veins, reflect on and color 'aabbcc'.

The red, green, and blue components can be held steady individually.

Noise [new] tutorial feedback about

About

The Perlin noise function was invented by Ken Perlin in the mid 1980s. Rather than having just random perturbations, the Perlin noise function combines a number of random perturbations at different scales. The result handily simulates natural looking clouds smoke and fire, and can also be used to simulate wood grains and veins in marble.

This program is based on Hugo Elias' fine description of the Perlin noise function. Here are links o their respective pages.

Ken Perlin Award Hugo Elias

Why

I wrote this program for four reasons.
  • The Perlin noise function is stunningly cool.
  • Recent incarnations of php have the GD library built in, which provide graphics capabilities. This means you can create graphics on the fly. All the graphics on this webpage were created whilst the page was loading, including the background image.
  • php can recurse. Many of the images on this page are actually the same page but just called with different parameters. If you glance at the source, many of the <img src=...> point to this file.
  • I wanted some nice background images for another project, so I rolled my own.

    Noise [new] tutorial feedback about