Piet Mondrian and Image Representation

Piet Mondrian was a pioneer of abstract art. He was a Dutch painter, famous for his minimalist abstract art. His series of grid-based paintings consisted of rectangles, some of solid primary colour, others white, separated by thick black lines. Experiment with Mondrian-inspired are like this one of mine, while also exploring different representations of images (as well as playing with maths). You will also start to learn to program in the language SVG.

We will use this image to give you the idea, but you could use your own images using different image representations, then get others to treat them as puzzles to recreate the originals.

Vector Images

One way to represent an image in a computer is as a vector image. One way to think of what a vector representation is, is that the image is represented as a series of mathematically precise shapes. Another way to think of it is that the image is represented by a program that if followed recreates it. We will use a simple (invented) language for humans to follow to give the idea. In this language a program is a sequence of instructions to be followed in the order given. Each instruction gives a shape to draw. For example,

Rectangle(Red, 3, 6, 2, 4)

means draw a red rectangle position 3 along and 6 down of size 2 by 4 cm.

Rectangle is the particular instruction giving the shape. The values in the brackets (Black, 3, 6, 2, 4) are arguments. They tell you the colour to fill the shape in, its position as two numbers and its size (two further numbers). The numbers refer to what is called a bounding box – an invisible box that surrounds the shape. You draw the biggest shape that fits in the box. All measurements are in cm. With rectangles the bounding box is exactly the rectangle.

In my language, the position numbers tell you where the top left corner of the bounding box is. The first number is the distance to go along the top of the page from the top left corner. The second number is the distance to go down from that point. The top left corner of the bounding box in the above instruction is 3cm along the page and 6cm down.

The final two numbers give the size of the bounding box. The first number is its width. The second number is its height. For a rectangle, if the two numbers are the same it means draw a square. If they are different it will be a rectangle (a squashed square!)

Here is a program representation of my Mondrian-inspired picture above.

1. Rectangle(Black, 0, 0, 1, 15)
2. Rectangle(Black, 1, 0, 14, 1)
3. Rectangle(Black, 15, 0,1, 15)
4. Rectangle(Black, 9, 1, 1, 14)
5. Rectangle(Black, 1, 5, 14, 1)
6. Rectangle(Black, 3, 6, 1, 9)
7. Rectangle(Black, 6, 6, 1, 4)
8. Rectangle(Black, 12, 6, 1, 6)
9. Rectangle(Black, 1, 8, 2, 1)
10. Rectangle(Black, 13, 9, 2, 1)
11. Rectangle(Black, 4, 10, 5, 1)
12. Rectangle(Black, 10, 12, 5, 1)
13. Rectangle(Black, 0, 15, 16, 1)

14. Rectangle(Blue, 1, 1, 8, 4)
15. Rectangle(Red, 7, 6, 2, 4)
16. Rectangle(Red, 10, 13, 5, 2)
17. Rectangle(Yellow, 13, 6, 2, 3)
18. Rectangle(Yellow, 1, 9, 2, 6)
19. Rectangle(White, 10, 1, 5, 4)
20. Rectangle(White, 1, 6, 2, 2)
21. Rectangle(White, 4, 6, 2, 4)
22. Rectangle(White, 10, 6, 2, 6)
23. Rectangle(White, 13, 10, 2, 2)
24. Rectangle(White, 4, 11, 5, 4)

Create your own copy of my picture by following these instructions on squared paper. Then create your own picture and write instructions of it for others to follow to recreate it exactly.

Mondrian in SVG

My pseudocode language above was for people to follow to create drawings on paper, but it is very close to a real industrial standard graphics drawing language called SVG. If you prefer to paint on a computer rather than paper, you can do it by writing SVG programs in a Text Editor and then viewing them in a web browser.

In SVG an instruction to draw a rectangle like my first black one above is just written

<rect fill="black" x="0" y="0" width="1" height="15" />

The instruction starts < and end />. “rect” says you want to draw a rectangle and each of the arguments are given with a label saying what they mean, so x=”0″ means this rectangle has x coordinate at 0. A program to draw a Mondrian inspired picture is just a sequence of commands like this. However you need a command at the start to say this is an SVG program and give the size /position of the frame (or viewBox) the picture is in. My Mondrian-inspired picture is 16×16 so my picture has to start:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">

An SVG program also has to have an end command.

</svg>

Put all that together and the program to create my picture can be written:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">

<rect fill="black" x="0" y="0" width="1" height="15" /> 
<rect fill="black" x="1" y="0" width="14" height="1" />
<rect fill="black" x="15" y="0" width="1" height="15" /> 
<rect fill="black" x="9" y="1" width="1" height="14" /> 
<rect fill="black" x="1" y="5" width="14" height="1" /> 
<rect fill="black" x="3" y="6" width="1" height="9" /> 
<rect fill="black" x="6" y="6" width="1" height="4" /> 
<rect fill="black" x="12" y="6" width="1" height="6" /> 
<rect fill="black" x="1" y="8" width="2" height="1" /> 
<rect fill="black" x="13" y="9" width="2" height="1" /> 
<rect fill="black" x="4" y="10" width="5" height="1" /> 
<rect fill="black" x="10" y="12" width="5" height="1" /> 
<rect fill="black" x="0" y="15" width="16" height="1" />

<rect fill="blue" x="1" y="1" width="8" height="4" /> 
<rect fill="red" x="7" y="6" width="2" height="4" /> 
<rect fill="red" x="10" y="13" width="5" height="2" /> 
<rect fill="yellow" x="13" y="6" width="2" height="3" /> 
<rect fill="yellow" x="1" y="9" width="2" height="6" /> 
<rect fill="white" x="10" y="1" width="5" height="4" /> 
<rect fill="white" x="1" y="6" width="2" height="2" /> 
<rect fill="white" x="4" y="6" width="2" height="4" /> 
<rect fill="white" x="10" y="6" width="2" height="6" /> 
<rect fill="white" x="13" y="10" width="2" height="2" /> 
<rect fill="white" x="4" y="11" width="5" height="4" />

</svg>

Cut and paste this program into a Text editor. Save it with name mondrian.svg and then just open it in a browser. See below for more on text editors and browsers. The text editor sees the file as just text so shows you the program. A browser sees the file as a program which it executes so shows you the picture.

Now edit the program to explore, save it and open it again.

Try changing some of the colours and see what happens.
Change the coordinates
Once you have the idea create your own picture made of rectangles.

Shrinking and enlarging pictures

One of the advantages of vector graphics is that you can enlarge them (or shrink them) without losing any of the mathematical precision. Make your browser window bigger and your picture will get bigger but otherwise be the same. Doing a transformations like enlargement on the images is just a matter of multiplying all the numbers in the program by some scaling factor.

Text Editing Programs and saving files

On a Windows computer you can find notepad.exe using either the search option in the task bar (or Windows+R and start typing notepad…). On a Mac use Spotlight Search (Command+spacebar) to search for TextEdit. Save your file as an SVG using the .svg (not .txt) as the ending and then open it in a browser (on a Mac you can grab the title of the open file and drag and drop it into a web page where it will open as the drawn image).