Mondrian was born in 1872, in Utrecht in The Netherlands and died in 1944, in New York. He also lived in Paris and London and was friends with other painters who were interested in abstract pictures.

The photograph shows him in his studio with Nelly van Doesburg in 1923

Photo credit: by Anonymous - Marty Bax. Mondriaan Compleet. Alphen aan den Rijn: Atrium, 2001 (ISBN 9061139295): p. 46., Public Domain, Link

Abstract Art

Piet Mondrian

In the 1920's, the Dutch painter Piet Mondrian was creating new abstract pictures based on horizontal and vertical geometry.

The still on the video, above, is a replica of his Paris studio. It was created in the Tate Modern art gallery in London. Play the video for a short introduction to Mondrian, his art and his workplace.

Figurative vs. Abstract

Figurative art uses the artists skill to capture a true likeness of the subject. Mondrian's work, in his early career, was figurative. He painted landscapes and nature and tried to make the pictures look realistic.

Abstract art does not try to make a picture of something real that you would recognise. Artists try to make something completely new and interesting using their skill with ideas, materials and techniques.


Mondrian Inspired Logo

Logo is perfect for drawing the geometric shapes loved by Mondrian and his contemporaries. Using the computers that were unknown in Mondrian's time, it should be possible to automatically create pictures inspired by their style. Will it be art?


Random Squares

You already know how to draw a square.

repeat 4 [ fd 100 rt 90 ]

We can draw many random squares. Here is a procedure that will draw 40 squares of random sizes up to 100 pixels at random positions across the screen.

to random_squares
  repeat 40 [
    setxy (random 200) * (pick [-1 1]) (random 200) * (pick [-1 1])
    localmake "size random 100
    repeat 4 [ fd :size rt 90 ]


Before you call random_squares try changing the pen size and colour; also the screen colour.

cs setpensize 3
setpencolour "Blue
setscreencolour "AliceBlue

How would you change random_squares to choose a different colour for each square?

Hint: the pick procedure will pick a random entry from the list you need to give it.

Responsive image Responsive image

Coloured Squares

To colour in a square, we need different code depending on which Logo we are using. We'll focus on FMSLogo where we need to step inside a shape and call the fill command.

The code for one filled in square might look like this (the slowdraw 25 is so you can see what happens):

; Fill a 200 pixel square in FMSLogo
slowdraw 25
cs setfloodcolour "Yellow ; Choose your colour here
repeat 4 [ fd 200 rt 90 ]
pu rt 45 fd 5 fill bk 5 lt 45 pd
slowdraw 0

Did you see the last part where the turtle turns and travels inside the square? You need all that so that fill colours the inside instead of just the outline. Wow! That's acutally more code than drawing the square in the first place.

Maybe the people who made JSLogo didn't like that, so they added a new command, filled, that takes a list of commands and fills in whatever they drew.

cs ; Fill a 200 pixel square in JSLogo
filled "Red [ repeat 4 [ fd 200 rt 90 ]  ]

This means we should be able to write a procedure, filled_square :size :colour that expects to be given the size and colour wanted. It could look something like this:

to fill_square :size :colour
  setfloodcolour :colour
  repeat 4 [ fd :size rt 90 ] ; draw the square
  pu rt 45 fd :size / 2       ; go inside it
  fill                        ; fill with the colour
  bk :size / 2 lt 45 pd       ; go back to the last corner

In the first line :size and :colour, written with a semicolon in front, say that the procedure must be called with two inputs and they are then used inside the procedure in place of fixed numbers or words.

What do you think :size / 2 means? Why is it used? Hover over the code snippet for the answer.

Can you?

Change random_squares to draw filled squares.

Responsive image

After writing filled_square, as shown, I called it inside random_squares and changed some of the numbers to make the picture look pleasing.

For the picture above, I used a pick for my fill colour like this:

pick [white white white red yellow green blue ]

What effect will the repeated white have?


Responsive image

I think this one looks quite like a Mondrian but I don't think it will get to hang in the Tate Modern gallery!

Horizontals and Verticals

The square based pictures look OK, but Mondrian was about much more than just squares. The art movement in which he excelled loved the use of strict horizontal and vertical lines in their paintings.

I wondered if the same code ideas could be used to divide up a virtual 'canvas' into random horizontal and vertical divisions, which could then be coloured in.

I wrote the procedure below. You call it like goldenmond 596, giving the horizontal size you'd like (something just less than 600 fits the default activearea of FMSLogo quite well).

You can keep calling the procedure until you see a picture that you like. Then save it using the bitmap menu.

Another thing to try is repeatedly creating goldenmonds.

to goldenmond :h
  localmake "pos pos
  localmake "heading heading
  localmake "xmin xcor - :h/2
  localmake "xmax xcor + :h/2
  localmake "r :h/1.618 ; use the golden ratio
  localmake "ymin ycor - :r/2
  localmake "ymax ycor + :r/2
  pu setxy :xmin :ymin pd
  seth 0 repeat 2 [ fd :r rt 90 fd :h rt 90 ]

  ; vertical lines
  repeat 3 [
    pu setxy :xmin :ymin pd
    seth 90 fd random :xmax - :xmin
    seth 0 fd :ymax - :ymin

  ; horizontal lines
  repeat 3 [
    pu setxy :xmin :ymin pd
    seth 0 fd random int :ymax - :ymin
    seth 90 fd :xmax - :xmin

  ; colour
  pu repeat 16 [
    setxy :xmin :ymin
    seth 90 fd random :xmax - :xmin
    seth 0 fd random int :ymax - :ymin
    if (pixel = screencolour) [
      setfloodcolour pick [ghostwhite blue yellow red green]
  ] pd

  ; restore turtle
  pu setpos :pos pd seth :heading

Another thing to try is repeatedly creating goldenmonds.

forever [ cs goldenmond 596 wait 100 ]

Use a longer wait if you'd like time to save the good ones!

Heptuple vision

Responsive image

Seven goldenmonds of different sizes.

cs repeat 7 [
  goldenmond random 596