5 Making Patterns

In these skills, you will be using the tiles you designed in Skill 3: Design 4 tiles to create, redesign, and test your own algorithmic tile patterns.

Figure 18  Creating and testing patterns

Show description|Hide description

The image shows a sequence of a graphical pattern on the left that is then tested by positioning it in the context of a house wall on the right.

Figure 18  Creating and testing patterns

This introduction will provide you with some historical context about pattern design before you get started on making your own patterns using p5.js.

Technically, patterns are known as ‘tessellations’ – flat surfaces composed of geometric shapes, referred to as tiles, without any overlaps or gaps.

Tessellations can be regular or irregular. Regular means that the surface is made from a single shape that is repeated so that all the edges align. There are three shapes that can form regular tessellations: squares, equilateral triangles, and hexagons. Any one of these can be repeated infinitely to create a surface with no gaps (see diagrams (a), (b), and (c) in Figure 19). Irregular tessellations can be made from almost any kind of geometric shape combined with a different shape or shapes (see diagrams (d), (e), and (f)).

Figure 19  (a)–(c) Regular tessellations; (d)–(f) irregular tessellations

Show description|Hide description

Figure 19a depicts a regular pattern made up of squares in a grid. Figure 19b depicts a regular pattern made up of triangles. Figure 19e depicts a regular pattern made up of hexagons. Figure 19d depicts an irregular pattern made up of offset squares. Figure 19e depicts a pattern made up of hexagons and squares, where small squares are placed in the centre of four larger hexagons. Figure 19f depicts an irregular pattern made up of triangles arranged within a larger set of hexagonal patterns.

Figure 19  (a)–(c) Regular tessellations; (d)–(f) irregular tessellations

The artist, Maurits Cornelis Escher, is famous for making tessellations with irregular tiles shaped like animals and other natural objects – notice how the horsemen are repeated in interlocking rows in Figure 20. Escher was a Dutch graphic artist (1898–1972) famous for using mathematics for visual effect. He created intricate drawings, lithographs, and woodcuts. Today, Escher’s prints are widely used in all forms of decorative design.

Figure 20  Horsemen drawing by Escher

Show description|Hide description

The image shows a drawing where white horsemen face the left and red horsemen interlock with this shape, facing the right.

Figure 20  Horsemen drawing by Escher

In these skills, you are only going to focus on regular tessellations of square tiles. Squares are easy to think about and code, and you can make some amazing patterns with them. This introduction draws inspiration from the aesthetics and structures of Truchet tiles, described below, which you will bring into the twenty-first century using p5.js code.

Truchet tiles

Figure 21

Show description|Hide description

The image shows a double-page spread of Truchet’s geometric black-and-white patterns.

Figure 21

These square tile patterns are named after Sebastien Truchet (1657–1729), a priest from France who was a polymath across art/design and the sciences. He created important inventions in mathematics, engineering, graphic design, and typography. Truchet is known for a book of intricate tile patterns that he published in Memoire sur les Combinaisons (1704). These patterns were popularised in 1987 and have become very influential in art and design as well as topology.

Truchet first got the idea for these patterns by looking at ceramic tiles that were piled up and ready to be used:

During the last trip that I took to the canal d’Orléans by order of His Royal Highness, in a château called Motte St. Lyt 4 leagues this side of Orléans, I found several ceramic tiles that were intended for tiling the floor of a chapel and several other apartments. They were of square shape, divided by a diagonal line into two colored parts. In order to be able to form pleasing designs and patterns by the arrangement of these tiles, I first examined the number of ways in which these tiles could be joined together in pairs, always in checkerboard array.

(Sebastien Truchet, translated by Pauline Boucher, from Smith and Boucher, 1987, p. 373–374)

The four rotations of the Truchet tile can be seen in the figure below.

Figure 22

Show description|Hide description

This image shows four squares of identical shape in a row. In the first square, the bottom left corner triangle is coloured in black. The second has the top left corner coloured in black. In the third, the top right corner is black. In the fourth, the bottom right corner is black.

Figure 22

All the Truchet patterns are made from a single square tile with a black-and-white triangle decoration that is rotated in four different orientations. Truchet found that he could create a vast range of visual patterns by arranging these simple tiles in different ways. To record the variations, Truchet created one of the earliest ways of encoding complex patterns, long before the invention of the computer.

Figure 23

Show description|Hide description

The image shows a page of diagrams and text, organised into rows and columns. Small black-and-white Truchet tiles are displayed in rows to show all the visual combinations of the tiles. Each row is numbered, and there is some text, though it is difficult to read, next to each tile combination.

Figure 23

The figure below shows some of Truchet’s more complex patterns, made with the same tiles. You will be able to recreate these using p5.js.

Figure 24

Show description|Hide description

The image shows a double-page spread with four different black-and-white Truchet tile patterns. The patterns are complicated, and look like decorative mosaic patterns.

Figure 24