Pixel Generator

CONSIDER pixel pattern backgrounds. They create an amount of visual activity in the empty space surrounding your content, but they do not distract if done subtley. One will find a glut of repositories with free patterns on the web, but it is difficult to find an interesting pattern in a color that complements your design scheme.

So, I set out to write a pixel art background generator that maintains an established background color. This is an easy task given that pixel patterns can be viewed as halftone operators. Simply put, if you have a pattern that is half black and half white, it will appear grey from a distance. By carefully tracking the ratios and intensities of colors that compose a pattern, one can control the perceptual tone of the background.

The header of this page demonstrates the effect. Squint or step back from the monitor and the two halves appear the same color, but the colors on each half are unique to that side. In this manner, an existing design can have a pixel background added without altering the perceived color scheme of the page.

Program

An Example

Pretend you are developing a webpage for a manufacturer whose device is a bizarre color, like brown, and they want the webpage to have a similar color background. First, enter the corresponding RGB color triplet (80,60,40) into the applet controls on the lower left hand block. This sets the perceptual color. Next, choose a resolution. Large resolutions are more complex and ornate whereas the smaller resolutions are simpler and …less ornate.

Next, drag a the mouse around in the upper left corner. Left clicks add foreground pixels, whereas right clicks revert to background pixels. Note that the color changes as more pixels are drawn. As more foreground pixels are on the screen, they require less contrast to maintain equilibrium with the background pixels. There are two option toggles affecting the drawing grid, the Mirror toggle and the Radial toggle. Mirroring will create horizontal reflections in the tiling pattern, and radial symmetry will duplicate your brush strokes diagonally in the editor. Both default to on and force a certain structure to your drawing such that it is difficult to create a bad pattern.

Having created a pattern, modify the contrast sliders. These affect the offsets of the foreground color from the perceptual color. The applet will calculate the percentage of foreground color and modify the intensity of the secondary color to balance the perception. Occasionally, an out of gamut color warning will highlight. This indicates that the current settings have violated the perception rules. No matter what you mix with a solid blue foreground color, nothing a monitor can do will make a red perceptual tone.

Smaller amounts of contrast create a very subtle effect. Squint, stand back, or remove your glasses and the two boxes on the right should be indistinguishable. Of course, this falls apart for very high levels of contrast, partly because your brain can't see the forest for the trees and partly because the effect only works with proper gamma correction between the applet and your monitor — a tragically ludicrous assumption. In fact, this applet outlines the technique behind most gamma correction schemes (a %50 black/white halftone should be grey).

Where's the Save Button?

There is no save here. Java applets have no access to your hard drive or your clipboard. Trust me, this is a good thing. A save enabled copy of the applet is attached below and will write to the hard drive when run locally (use the 's' key to bring up a dialog); the more paranoid/security minded may prefer to do a simple screen cap or scan the source code for malicious code and compile themselves. Your choice.