Kandinsky, Circles 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.

Learn about

  • Abstract art and the artist Kandinsky
  • The maths of circles and plotting points
  • Computing: sequences of instructions
  • Computing: vector graphics

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

AbstractCircles400dpi.jpg

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

Instructions for painting a painting

kandinsky1Kandinsky’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.

Let’s look at this simpler picture I’ve just created first. It’s instructions are:

Rectangle(black, 0, 0, 20, 20)

Circle(blue, 7, 6, 5) 
Circle(black, 5, 5, 3) 
Circle(orange, 7, 8, 2) 
Circle(red, 6, 4, 1)
Circle(red, 16, 10, 1)

Each instruction tells you the shape to draw, its colour, the position to draw (first a distance across the page and then a position down from the top left of the page) and finally the size. Computer Scientists give coordinates in a different way to mathematicians! The first instruction

Rectangle(black, 0, 0, 20, 20)

says draw a rectangle that is black to act as the background. Its top corner is at position (0,0) – so the top left corner of the page – with size 20×20 (so it is actually a square!)

The other instructions say draw circles. The first one

Circle(blue, 7, 6, 5)

says draw a blue circle with its centre at (7,6) – position 7cm along and 6cm down. Its radius is 5cm.

Computer graphics drawing programs are actually creating a set of instructions a bit like this as you draw. They store that set of instructions (which is in itself a program) as the representation of the image.

Make your own copy of my picture

Follow the instructions for the whole picture in the order given and create your own copy of it as a paper collage. Draw circles using a compass, colour them, cut them out and stick them on squared paper at the right position.

Sequencing Matters

Notice that like other programs, the order that the instructions are followed matters. This is called the sequence of instructions. 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 rather than as a collage, sticking on shapes, 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. You have created a puzzle with instructions for someone else to follow that would allow them to recreate it.

The full instructions for my original picture are:

Rectangle(black, 0, 0, 40, 40)

Circle(blue, 14, 12, 10)
Circle(magenta, 19, 7, 3)
Circle(black, 11, 11, 7)
Circle(orange, 15, 17, 3)
Circle(lawngreen, 23, 13, 3)
Circle(lawngreen, 10, 22, 2)
Circle(red, 21, 23, 3)
Circle(red, 35, 7, 3)
Circle(black, 35, 9, 1)
Circle(red, 37, 11, 1)
Circle(red, 35, 13, 1)
Circle(orange, 29, 19, 1)
Circle(orange, 13, 31, 1)
Circle(blue, 8, 26, 2)
Circle(red, 9, 27, 1)
Circle(blue, 5, 27, 1)
Circle(blue, 3, 25, 1)

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. They 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.

Bounding Boxes

In our language we gave the top corner and length for rectangles but the centre and radius for circles. This isn’t very consistent – and what do you do when you have irregular shapes? It would be nice to have a common way to specify any shape. Some vector languages (and drawing programs)  solve this by giving positions and sizes of everything using what computer scientists call ‘bounding boxes‘. The position is ALWAYS the top left hand corner of an invisible rectangle. You draw the given shape as large as possible in the rectangle. So using this approach an instruction:

Circle(blue, 2, 3, 1)

says draw an invisible square with top left corner at position 2cm along and 3cm down, with sides 1cmx1cm. Draw inside that square the largest blue circle possible (so one of diameter 1cm). The same idea works for irregular shapes including ones made by combining shapes (like a semi-circle on top of a square.


More vector puzzles


QMUL - Queen Mary University of London logo