Patterns, Part 5

I have decided to write an application to help me return to the original subject of this series of posts: tiling patterns. As you may remember, I was once impressed by the amazing floor of the San Marco Basilica in Venice. The floor is laid out in tiled marble, using a style referred to as Opus Sectile.

In one of my notebooks, I carefully transcribed the design and colors used by the tiles. You see tiling number 7 here, a wonderful pattern rendered in approximately the same shades as the original.

My first attempt at writing a tiling application became the origin of my San Marco series of applications that also saw the construction of the Painter 6 brushes.

For this app, I have simplified the method of how the patterns are constructed. First I lay down a square grid, similar to grid paper.

Most everything can be laid out on a grid. But grids may lead to inaccuracy of aspect ratio and relative sizes of the tiles. So I created the provision for doubling the grid in place on demand. This takes care of the need for additional accuracy and still keeps grid snapping.

Constraint-based systems make things easier, usually. Here is an example of the grid. All the examples are shown at 50% scale.

The next thing is to allow a basis to be designed on the grid.

A basis is a parallelogram that defines the repeat block of the tiling pattern. This repeat block can be any parallelogram shape.

Here it is a rotated square. You will see why the basis is required in a moment.

You will first notice that the basis is defined on the grid. It really consists of an origin and two vectors. One vector, (3, 1) defines the X axis of the basis, and the other vector (-1, 3) defines the Y axis.

Now, in my previous attempt to design a tiling program, I concentrated on a limited set of graph-theoretical operators. Upon reflection I have decided that this is too limiting.

Instead, I rely on simply drawing lines.

Here I draw a single line intersecting the origin of the basis (at the bottom) and extending over the entire width of it. This line gets replicated into all its instances: there is one for each repeat of the basis within the plane.

All the lines are constrained to fall on grid points. This turns out to be handy when it comes to making the line segments meet.

This tiling pattern only requires two lines, it turns out

The second line passes through the opposite (upper right) point of the basis and extends over its entire height.

It also gets replicated into all its instances. Each instance is defined to exist at one of the copies of the basis as it tiles the plane.

Together these lines form the tiling pattern. In this case, the pattern is a 3 by 3 square and a 1 by 1 square, perfectly fitting together.

Because the basis has edges that are length sqrt(10), and because it is square, the repeating elements in the tiling pattern must have area 10 square grid units by definition.

Next, I can remove the grid and basis, change the lines to black, and render it to create the desired tiling pattern.

I have chosen this tiling pattern to start with to show a useful kind of repeat that doesn't fall into the class of patterns easily designed in Painter.

In Painter 4, which was released in November 1995 (a very crucial period in my life!), I implemented the means to paint directly into a pattern and achieve seamless results. This included rectangular patterns and also patterns with horizontal and vertical half-drops.

In this new program, these kinds of patterns can be easily designed, but also both a horizontal and a vertical offset can be applied simultaneously. Sure, this kind of pattern could be designed in Painter. But you would need a square that is ten units on an edge to create it. Well, you could use a half-drop by using a rectangle that is ten units high and three units wide, and a half-drop offset of ten percent. But these are much messier ways of defining the pattern.

I bring the rendered tiling pattern into Painter so I can apply coloring to it. This gives me some ideas for new patterns.

But ideally I would do this inside the new program, which I call Tile Patterns.

It is easy to design a number of patterns using this fresh approach.

You might assume, just because the basis is a parallelogram, that it wouldn't be possible to design triangular shapes, hexagons, or perhaps strangely interlocking shapes.

That would not be a correct assumption. Here a triangular pattern is designed using the grid and a parallelogram whose shape matches the appropriate shape (two triangles attached).

So in this case, the repeat pattern is actually two triangles.

Here I have used an approximation for sqrt(3)/2 which I arrived at using continued fractions. The actual number is 0.8660254... but it can be successively approximated by these fractions:

1/1, 6/7, 13/15, 84/97, ...

I have chosen 6/7, an approximation equal to 0.857... to represent the irrational number, so it's only off by about 1%.

Hexagons can also be designed using this program. Here I am using the same rational approximation to sqrt(3)/2. As with the triangular design, this design uses three lines (which you can see inside the basis parallelogram).

But, unlike the triangular design, the area of the basis is equal to the area of the hexagon.

So far I have only shown convex shapes, but it is also possible to design interlocking concave shapes. This is another kind of interlock, of course, but one which is cyclical in another way: in a lattice.

Consider this pattern. Here I show interlocking plus symbols.

Yes, as you can see, the area of the plus symbol is five square grid units, and so the basis rectangle also has the same area, with edges that are sqrt(5) in length.

I can design interlocking patterns just as easily, but it does take a bit of planning beforehand.

I like to sketch out the pattern first and then draw the basis on top. This gives me a blueprint for how to proceed inside the Tile Patterns program.

Here you see a simple interlocking pattern.

You can see it is designed on the same basis as the first pattern I showed. There are an extremely large number of patterns on this one basis alone.

Tiling is an intellectual exercise. When I was younger, I used to buy grid paper in hexagons and triangles and then color inside the tiles to make patterns. You can see one of these in my three-dimensional thinking blog post. So in the same vein, I color the tiling patterns I create, looking for novel color combinations.

Here is an example of this kind of fun.

Sometimes I just line to make patterns that show color and delight the eyes, and sometimes I am in it for the pattern: really more of a contrasty dotted kind of thing.

It is useful to realize that the tiles do not have to fill the entire space within the plane. I can create individual structures with some separation in between them to give a kind of hand-designed formulation.

In Painter, I can soften and increase contrast (anneal) the pattern to get rounder forms when I want.

This is the technique I used to create this new pattern, a candy-coated array of dots.

They are quite pleasant!

I am not sure where I want to go with this application in the future. Most likely the next step is to have the app automatically enumerate the closed shapes that define the repeats (though, as you can see, there might not be any closed shapes, as in the case of the maze pattern below).

It seems like a merging of the San Marco application capabilities with the line-drawing capabilities of the new app would be a good way to proceed.

Perhaps a nice way to save out tiling patterns as Painter patterns would be useful.

As I referred to earlier, the ability to color the tiles inside the application is a capability I will code up very soon.

Here is a pseudo-maze pattern I have created using this application. This shows that I can control the thickness of the lines when rendering them in black-on-white.

And the final pattern I will show is another tiling pattern from my notebooks on the San Marco Basilica.

Of course the grout spacing is nearly zero in the actual Basilica floor. Those artisans in the twelfth century were actually quite good!