Variations on Variants

I first saw Josef Albers' work and the Portland Art Museum. They had a series of variants that I found quite attractive, all with a similar set of rectangles in different colors. When I got home, I found that Albers had created a lot of these variants. You can see a few here. It seemed to me that he was experimenting with the interactions between the different colors, while keeping the shapes constant.

I thought that would be interesting to create color variations pragmatically, so I described the rectangles of the variant as HTML blocks - the same blocks that separate columns of text on a web page.

The original image was something like this, but with different colors:


The HTML block version turned out like this:

What you're seeing is actually this text.

<div style='width:480px;height:480px;background-color:#f1f1f1;position:relative;'>
<div style='width:83%;height:60%;background-color:#3f6093;position:absolute;left:8.5%;top:19.1%;'></div>
<div style='width:398px;height:87px;background-color:#3f4e87;position:absolute;left:41px;top:105px;'></div>

<div style='width:287px;height:49px;position:absolute;left:91px;top:143px;background-color:#333e40;'></div>
<div style='width:287px;height:25px;position:absolute;left:91px;top:167px;background-color:#25312d;'></div>
<div style='width:250px;height:12px;position:absolute;left:115px;top:180px;background-color:#354447;'></div>
<div style='width:287px;height:150px;position:absolute;left:91px;top:192px;background-color:#333e40;'></div>
<div style='width:250px;height:113px;position:absolute;left:115px;top:192px;background-color:#435152;'></div>
<div style='width:212px;height:174px;position:absolute;left:128px;top:206px;background-color:#3f4e87;'></div>
<div style='width:212px;height:136px;position:absolute;left:128px;top:206px;background-color:#25312d;'></div>
<div style='width:212px;height:99px;position:absolute;left:128px;top:206px;background-color:#354447;'></div>
<div style='width:25px;height:50px;position:absolute;left:302px;top:230px;background-color:#25312d;'></div>

<div style='width:25px;height:50px;position:absolute;left:152px;top:230px;background-color:#25312d;'></div>
<div style='width:99px;height:73px;position:absolute;left:190px;top:206px;background-color:#435152;'></div>
</div>


Your web browser takes these instructions and draws boxes of the specified colors.

After I defined the size and location of the rectangles, I wrote a php script (a computer program often used to create web pages) that selects four random colors and fills in the rectangles. The image you see below is the defined rectangles filled with four random colors and their combinations.

You can create your own variations here, just click on new colors.