Kandinsky and Vector Images

Wassily Kandinsky is famous as a pioneer of abstract art, creating paintings that, unlike early art, were not trying to depict reality. Instead, Kandinsky used shapes and colour to create striking imagery. He was interested in how the positions, shapes and colour of things had an effect on the person looking at a painting. He seems a perfect artist to use to explore vector graphics based on mathematically accurate shapes.

Kandinsky (among other things) is famous for paintings of circles. Suppose, inspired by seeing his paintings, I want to attempt to draw some pictures of my own…Here is my first ever attempt, drawn in a computer graphics program:


(I don’t of course claim it to be a masterpiece like a Kandinsky, but I quite like it!)

Instructions for painting a painting

Kandinsky’s paintings were one-offs. They existed only on the canvas. As I drew mine I was actually creating a series of instructions that could be followed to recreate it exactly anytime I like:

Square, Black, 1, 1, 20
Circle, Blue, 3, 2, 10
Circle, Pink, 9, 3, 3
Circle, Black, 3, 3, 7
Circle, Orange, 7, 8, 3
Circle, Green, 7, 6, 3
Circle, Green, 5, 11, 2
Circle, Red, 10, 11, 3
Circle, Red, 17, 3, 3
Circle, Black, 18, 5, 1
Circle, Red, 19, 6, 1
Circle, Red, 18, 7, 1
Circle, Orange, 15, 10, 1
Circle, Orange, 7, 16, 1
Circle, Blue, 4, 13, 2
Circle, Red, 5, 14, 1
Circle, Blue, 3, 14, 1
Circle, Blue, 2, 13, 1

Follow the instructions and create your own copy (go on have a go in a drawing program or by cutting out coloured circles to stick on squared paper). Each instruction consists of a shape to draw, its colour, the position to draw (first a distance across then a position down from the top left of the page) and finally the size. The positions and sizes are actually of what computer scientists call ‘bounding boxes‘. The position is the top left hand corner of an invisible square. You draw the given shape as large as possible in the square. More generally bounding boxes are rectangles, but mine are all squares so my instructions assume that giving only one size dimension. So the last instruction:

Circle, Blue, 2, 13, 1

says draw an invisible square with top left corner at position 2cm along and 13cm down, with sides 1cmx1cm. Draw in that square the largest blue circle possible (so one of diameter 1cm).

Sequencing Matters

Notice that like any program, the order that the instructions are followed, the sequence of instructions, matters. Some shapes are drawn on top of others. If you were to draw the square last you would end up with a completely different style of abstract painting!

(If you are drawing them yourself with coloured pencils or felt tip pens you will also find it doesn’t quite work as the instructions assume one colour completely hides anything below.)

Create your own

Now create your own Kandinsky inspired circle picture, but write instructions in my simple language as above, and you have created a puzzle for someone else to follow that would allow them to recreate it.

Vector versus Bitmap Images

This way of saying what a picture should be like as mathematically-precise shapes contrasts with the other way of doing it. Computers often represent images as a bitmap: a grid of pixels – breaking up the image into lots of small squares and then saying what colour each square is. The image is made up a bit like a Roman Mosaic. The more squares you have the more accurate the picture you have. You need to have lots of very small squares to make slanting lines and circles look right though. The end up with jagged, step-like edges. Also if you want a bigger picture, so make all the squares bigger, that jaggedness becomes ever more obvious. You have lost the fact that it was supposed to be a line or a circle.

By specifying mathematical shapes you can ensure the picture is always as accurate as possible. If  you want a picture 3 times the size of the original to put on your wall, just multiple all the numbers in the instructions above by 3 before you follow them. You may have done something like that, scaling pictures, in maths. Now you know why the maths is useful, it allows computer to create accurate images, however large or small you make them, and changing the size is as simple as multiplying the numbers (which computers can do easily).

Eventually you may want to display the picture on a computer screen made of pixels (as I had to to create the above) but you only do that, only creating a bitmap version from the instructions when you need to. The program doing the displaying can  even let you zoom in and draw a new accurate version of just the zoomed in version, so that it always looks as accurate as possible.