Mondrian Art in PHP

One of my favourite artists is a chap called Mondrian. He lived in the early 20th century in America, and was quite experiemental in his work. He tried to break an image down into its most base forms, to represent things in as little form as possible. He was relatively successful as an artist, and made some pictures I particularly enjoy looking at.

A Mondrian painting

As a sort of homage to Mondrian I set out to write a simple script that generated PNG files in a similar vein to his early works. He tended to make very geometric images with strong primary colour blocks and heavy bold black lines. GD is ideally suited to recreating this sort of work as its basically lines and rectangles.
As a start for our Mondrian image we will need a canvas to draw on. This is simply a 400*400 pixel true colour image.


<?php

$canvas = imagecreatetruecolor(400,400);

?>

The next stage required is to define some colours to use for painting. In accordance with the Mondrian original we'll use blue, red, yellow, and black for the lines. The block filling colours are entered into an array for easier use later on. We'll also need white for setting the background.


<?php

$white = imagecolorallocate($canvas,255,255,255);

$black = imagecolorallocate($canvas,0,0,0);

$fill[] = imagecolorallocate($canvas,255,0,0);

$fill[] = imagecolorallocate($canvas,255,255,0);

$fill[] = imagecolorallocate($canvas,0,0,255);

?>

Finally we also need to set the line thickness, paint the canvas white, and define the number of blocks that will be filled in in the final image. This is done by generating a random integer.


<?php

imagesetthickness($canvas,2);

imagefill($canvas,0,0,$white);

srand((double)microtime()*1000000);

$segments = rand(2,6);

?>

Whether or not you will need the srand() statement depends which version of PHP you are using. Later versions automatically set the random number seed. Once all that is completed we're set to start generating the Mondrian art work.


<?php

while ($building == 0) {

    if ($c++ > 20 and count($block) > 0) {

        $building = 1;

    }



    if (count($block) >= $segments) {

        $building = 1;

    }



    $x = rand(1,39)*10;

    $y = rand(1,39)*10;

    $w = rand(3,10)*10;

    $h = rand(3,10)*10;

    $add = 0;

    if (is_array($block)) {

        foreach ($block as $bl) {

            if (!(($x >=$bl['x'])and($x <=($bl['x']+$bl['w'])))

            and!((($x+$w)>=$bl['x'])and(($x+$w)<=($bl['x']+$bl['w'])))

            and!(($x <=$bl['x'])and(($x+$w)>=($bl['x']+$bl['w'])))

            and!(($y >=$bl['y'])and($y <=($bl['y']+$bl['h'])))

            and!((($y+$h)>=$bl['y'])and(($y+$h)<=($bl['y']+$bl['h'])))

            and!(($y <=$bl['y'])and(($y+$h)>=($bl['y']+$bl['h']))) ) { 

                $add = 1;

            } else {

                $add = 0;

                break;

            }

        }

    } else {

        $add = 1;

    }



    if ($add == 1) {

        $block[$counter]['x'] = $x;

        $block[$counter]['y'] = $y;

        $block[$counter]['w'] = $w;

        $block[$counter]['h'] = $h;

        $counter++;

    }

}

?>

The placing of the colour blocks is acheived by looping through some code that randomly places a block in the grid, checks whether it overlaps any other blocks, and keeps it if it does not. If it does then the code loops through until the number of required blocks are found. As the code loops there is a variable, $add, that is set to either 0 or 1. If $add is 0 then the block is ignored because it overlaps another, if it is set to 1 then the block is added to an array so that subsequent blocks are checked to see if they overlap it.

Each time a block is added a counter is incremented. When the counter reaches the target number of blocks, or if the code loops around too many times, the loop exits. This is to stop it in cases where it randomly generates overlapping blocks too many times. While this is unlikely it is possible, and should be therefore considered.

Now that we have the positions for the blocks of colour in an array we can set about drawing the image. Initially we draw the black lines that make up the borders and segmentation in the picture.


<?php

for ($counter=0;$counter<$segments;$counter++) {

    if ($block[$counter]['x']>0 or $block[$counter]['y']>0) {

        imageline($canvas, 0, $block[$counter]['y'], 400, $block[$counter]['y'], $black);

        imageline($canvas, 0, $block[$counter]['y']+$block[$counter]['h'], 400, $block[$counter]['y']+$block[$counter]['h'], $black);

        imageline($canvas, $block[$counter]['x'], 0, $block[$counter]['x'], 400, $black);

        imageline($canvas, $block[$counter]['x']+$block[$counter]['w'], 0, $block[$counter]['x']+$block[$counter]['w'], 400, $black);

    }

} 

?>

The next stage in drawing the image is to fill in the colour blocks. To do this part we refer back to the array we generated at the beginning to define the locations and sizes of the blocks. There is a futher considereatin however. As we are using lines thicker than 1 pixel width we have to modify the blocks so that we don't overwrite what has already been drawn.


<?php

for ($counter=0;$counter<$segments;$counter++) {

    imagefilledrectangle($canvas, $block[$counter]['x']+1, $block[$counter]['y']+1, $block[$counter]['x']+$block[$counter]['w']-2, $block[$counter]['y']+$block[$counter]['h']-2, $fill[rand(0,2)]);

}

?>

Actually filling the blocks is simply a matter of calling imagefilledrectangle(). The colour is defined using the array of colours we set up with at random integer between 0 and 2 as there are 3 possible colours. Adding more colours would simply be a matter of defining them in the initial array, and adding to the range of numbers the random function generates.

Finally we need to output the image.


<?php

header("Content-Type: image/png");

imagepng($canvas);

?>

The header() function adds a content-type directive to the request from web browser telling it what to expect. In this case we're using a PNG image type, so we send the MIME type for PNG. Lastly we tell GD to convert our $canvas GD resource into PNG format and send it to the user's web browser.

Thats all there is to it. Building the image is quite an easy process, and it is quite effective too. With more time you could add to the code to improve things, but even at this early stage the results aren't at all bad.

To draw the image in a web page we need to use an IMG html element.

Each time the image is called it will generate a new artwork.