Digital Creatives: Tessellate by code

Teachers Notes

• ESCHER AND TESSELLATION

  

  Although I am absolutely without training or knowledge, I often seem to have more in common with mathematicians than my fellow artists.

  M.C. Escher

  Today the work of Dutch artist M.C. Escher (1898 – 1972) is well known, but initially it was mathematicians and scientists who were most interested in Escher’s work. Surprisingly, Escher didn’t do well at mathematics in school, but his complex designs have inspired many mathematical thinkers.

  Escher was intrigued by tessellations – patterns that repeat without gaps or overlapping. Over three decades, he created more than 130 tessellations incorporating repeating motifs of creatures and figures. He referred to his tessellations as ‘regular division of the plane.’

  To create many of these tessellations, Escher used mathematical transformations. In maths a shape is considered transformed when it is shifted from one position to another while maintaining its exact image. Translation, reflection and rotation are ways to transform a shape in a tessellation.

• Translation, reflection and rotation

  

  Translation

  Look at the first image. How have the horses been placed to repeat the pattern? Have they been flipped or turned?

  A translation is when an image is preserved and moved in any direction across a surface without turning or flipping it. This can be seen in Regular division of the plane no. 105 (Pegasus), 1959, in which only one shape is used. The original horse shape is maintained and shifted across the surface to create other winged horses that form the tessellation.

  Glide reflection

  Now look at Regular division of the plane no. 18 (Two birds), 1938. How has the bird been placed to make the pattern?

  Escher has used translation and glide reflection. A glide reflection is made up of a reflection and a translation. In this image, the white bird is flipped over the line of reflection – the mirror line – to create the image of the blue bird. The blue bird is then shifted vertically parallel to the mirror line.

  Rotation

  Now look at Regular division of the plane no. 99 (Flying fish), 1954.

  How has the flying fish shape been repeated in this tessellation? Can you find the fixed point around which the fish turn?

  Rotation is used to create the tessellation. A rotation is when one point of the image is fixed and the rest of the image is rotated around that point. For this work, Escher fixed the fish’s tail, and rotated its body around the fixed point to create the other fish.

• NENDO

  

  Nendo (‘clay’ in English) is a collaborative design studio, with offices in both Milan and Tokyo. Founded in Tokyo in 2002 by Oki Sato, the studio has a distinctive approach which it applies to the design of interiors, installations, furniture, household products, and art objects.

  Nendo describes its job as:

  Giving people a small ‘!’ moment. There are many small ‘!’ moments hidden in our everyday. But we don’t recognise them. And even when we do recognise them, we tend to unconsciously reset our minds and forget what we’ve seen.  But we believe these small ‘!’ moments are what make our days so interesting, so rich.

  A house for Escher

  Oki Sato was invited by the NGV to create a thought-provoking exhibition space that responded to themes in M.C. Escher’s work. Sato’s design is a series of interconnected spaces that follow the journey of Escher’s life’s work, building on Escher’s ideas with different spaces and methods of display. The viewer experiences the work in an immersive way, rather than just passively viewing it as a series of framed pictures on a wall.

  Sato chose the house as a ‘hero’ symbol and icon to convey the concept of space:

  The house is an icon and a symbol of space that many people can recognise and understand. This simple shape can convey various concepts such as inside and outside, two-dimensional and three-dimensional, perspective and scale, as well as evoke emotions and feelings such as longing and nostalgia. When I thought about the invitation to design a space for Escher, I thought about a shape that can contain and convey all the layers and complexities of this exhibition and will serve as a ‘house’ for Escher.

  Each space contains a different iteration or expression of the house motif. For instance, to reflect Escher’s fascination with the concept of infinity, Sato designed a circular chandelier made from suspended chains comprised of 30,000 die-cut houses. The houses are painted black on one side and white on the other, with a group in the centre inverted, so that depending on the viewpoint, a white or black house silhouette appears floating in the middle of the installation.

  Sato designed a new nendo collection for the exhibition: a series of eleven objects made from black and white metal, developed from sketches produced throughout the exhibition design process.

  In response to Escher’s tessellations nendo created its own tessellation using the house motif, which allows for multiple readings. Depending on the point of focus, the houses seem to face right or left, up or down. Inverted houses fill up the space in between.

  Black, white, and grey

  The whole exhibition design is monochromatic: black, white and grey. Sato explains:

  In this collaboration we tried to use fewer graphic elements in order to allow Escher’s work to stand out. Furthermore, we decided to use only white, black and grey in the design and accentuate details using only light, shadows and reflections.

• TESSELLATE BY CODE

  In this workshop, we will use computer code to generate a tessellation. We will use Scratch – a block-based visual programming language – to make a monochromatic rotation/translation tessellation that looks like stacks of neatly repeating cubes. The pattern is made up of one shape rotated around a fixed point that repeats across the surface. The final pattern will look like this:

  

  The finished project can be viewed here

  Step 1:

  Open the Tessellating cubes project in Scratch. You’ll notice a single sprite that looks a bit like an arrow, called tile-white. If you click on the Costumes tab, you’ll see the same sprite with two more costumes: tile-grey and tile-black.

  

  Return to the Code tab. Click and drag the tile-white sprite on to the stage.

  Step 2:

  We want the tile-white sprite to start in the middle of the stage and to point downwards. To do this, you need to make a script (this tells your sprite what to do). Begin by dragging the event block, when (flag) clicked, to the script area. Then, in the Motion blocks, click and drag the go to x_ y_ block so that it attaches to the event block. Change the numbers to x: 0 and y: 0. This will make your sprite move to the centre of the stage. Next, drag the point in direction block to the script area and change the number to 180 (90 is the default setting). From the Looks block category, add the switch costume to tile-white block to your script.

  

  

  Step 3:

  To repeat the shape we can make a clone. In the Control block category, click and drag create clone of myself to the script area and add this to your line of block codes. Next, drag the motion block turn (clockwise) _ degrees and change the number to 120. We want the clone to be a different colour, so click and drag the next costume block from the Looks category.

  We want to repeat this set of instructions three times. In the Control block category, click and drag the repeat block to sit underneath the switch costume to tile-white block, as shown in the image below. Now change the number to 3 (to repeat 3 times).

  

  

  We have created the shape for our tessellating pattern.

  Step 4:

  We now want to make the shape repeat in a column by changing the vertical axis, which is the y axis.

  Let’s start by moving our shape to the top of the stage. Change the initial y coordinate to y: 200 in the go to x:0 y:0 block (this should be the second code block in your script). Next, click and drag the motion block, change y by to the end of your script. Set the number to -66.

  Wrap another repeat block around the repeat 3 and change y blocks, as shown. Change the repeat number to 6.

  Click the green flag to see your shape repeat 6 times!

  

  

  Step 5:

  
  Operators
  Now we are going to make the next column, but this time we are starting from the bottom and going up. First we will reset the starting point using an operator block (Operator blocks script maths operations).

  Begin by adding the motion block: go to x: y: . In the operator block category, drag this block:

  img src=”http://vm-matisse.boh.ngv.local/CIP/preview/image/portals-general-access/383188″

  to sit inside both the x and y brackets. Next, add the motion blocks x position and y position. Modify the equations to read (x position + 57) and (y position + 33)
  Your script should look like this:

  

  To make your shape repeat vertically (going up), copy the series of blocks created in Step 4 and add them to your script. This time, change y by 66. Your shape should tessellate up and down in 2 columns, like so:

  

  Step 6

  Variables
  We want to fill our stage with this tessellating pattern, so now let’s reset our starting point to the edge of the stage, like so:

  

  To continue the pattern, you could repeat the same steps, but there would be a lot of blocks of code.

  Instead, we can make the program recognise odd and even numbered columns and change the action based on that. Go to the Variables category of blocks. Click Make a Variable and give this any name. Be sure to click the option For all sprites.

  

  You will be using the Set columns to 0 and Change columns by 0 blocks from the Variables category. Set the number to 1 for each block. Click and drag each block to your script, as shown:

  

  

  Step 7

  
  We want odd numbered columns to form downwards – and the even ones – upwards.

  We can use an if/else Control block to differentiate between odd and even columns. If our column variable is odd, the y value is minus (–) and if it’s even, y is positive (+).

  You will need to create a series of blocks to tell the program: ‘if the column is an odd number, place the next clones down by 66 each repetition, otherwise, place them up by 66’.

  To achieve this, you will need to use these blocks:

  img src=”http://vm-matisse.boh.ngv.local/CIP/preview/image/portals-general-access/383189″

  – (mod means modulo, which is a way to find every second column (1, 3, 5 etc.))

  Handy tip: It may help to find these blocks and place them in your script area separately.

  Arrange the blocks and add the numbers, as shown:

  

  Step 8

  Now, we are going to replace some of the code blocks used earlier. This will simplify the code and make your tessellation come to life!

  Remove and delete the blocks as shown below.

  

  Add your if/else series of block codes, from step 8, and the repeat 10 block, like so:

  

  Test your code to see if it works.

  

  Now use what you have learnt to make your own tessellatiion!