About the interactive painting

For viewing this work, you should have a video display with more than 256 colors and a web browser that supports BGCOLORs in table cells (HTML 3 or later). If you see tiny dark glitches in the image, try reloading or refreshing the page.

In 1975, I made a painting (acrylic on canvas, 52" x 52", collection of the artist) that looks much like this image.

This is not a photograph of the original, but a reconstruction using RGB (red-green-blue) colors. The corner colors were matched to the original painting, and the intermediate colors were calculated using a linear interpolation formula. The result looks very much like the physical painting. Because the RGB color system was designed to be visually linear, a progression of values such as (0, 51, 102, 153, 204, 255) turns out to be equally spaced both arithmetically and visually. This linearity makes it easy to calculate precise transparency effects such as the ones found in the work of Josef Albers. I wish I'd had Photoshop when I was studying color theory in art school!

Visually, the image produces effects depending on "simultaneous contrast" among sequences of colors. Within each square, for example, the color seems to modulate from top to bottom (lighter and yellower at top to darker and bluer at bottom) and from side to side (redder at left to greener at right). The rows and columns look like they could consist of transparent overlays. The rows and columns also have a slightly concave, "fluted" look. These effects get stronger the longer you look--they seem to depend on visual habituation or after-images.

I decided that it would be fun to make this painting interactive, so that you could play with the colors and layout. The interactive version, originally implemented as a Perl program (and later as a JavaScript application), lets you do the following:

Select a preset color scheme. There are a number of variations on the original painting, such as ones with more cells (7x7 or 9x9) and ones that are mirrored. Much easier than working with paints, colored paper, and rubber cement! There are also ones with entirely different colors. Someday I would like to fix the programs so that you, the viewer, could add to the list of presets.

Tweak the painting interactively. If you choose "Interactive hexadecimal" or "Interactive decimal" you will get an input form that allows you to enter RGB color values. Someday I would like to implement the user interface in Java, so that you could tweak the color values using graphical sliders.

The hex version calls for 6-character hex numbers such as FFCC00. In this hex representation, the first pair of hex digits or "bytes" (FF) represents the R (red) value, the second pair (CC) represents G (green), and the third pair (00) represents B (blue). The hex digits are 0-9 and A-F (for 10-15). This is the system used in HTML.

The decimal version lets you type in three separate numbers for R, G, and B. Each value must be in the range 0-255.

You can set the RGB colors for the four corners of the painting, as well as the painting background and page background. The intermediate values are calculated by the program.

You can choose the number of rows and number of columns, in the range 3-11. You can choose the grid size (square size) in the range 18-108 pixels (72 pixels equals one inch). If the painting gets too wide for your browser window, it will be "squished" horizontally; you can "square it up" by choosing a smaller square size.

If you check "Mirror vertical" the painting will be mirrored top to bottom, using the bottom row as an axis. If you check "Mirror horizontal" the painting will be mirrored left to right, using the right column as an axis. Note that the corner designations (upper right, lower left, etc) still refer to the original grid before it is mirrored.

You can send me comments by using the site Contact form.

[ kal zone | Web art ]