Five-Fold Symmetry

Nature is replete with five-fold symmetry, thanks to five-petaled flowers. While most of the works of humankind are designed around 4-fold symmetry and the cube, we have always been interested in five-fold symmetry as well. It's just that it doesn't always work as well as four-fold symmetry.

Our obsession with the number five clearly comes from our own hands, since we have five fingers on each hand. Our expression of the interest with the number five comes in several forms, though. My favorite is the five-pointed star.

Knowledge of the dodecahedron, a platonic solid bounded by regular pentagons, was actually kept secret in the school of Pythagoras. They believed that the general populace was simply not ready for it.

The US military uses five-pointed stars to denote the highest ranks: admirals, generals, and commandants. The five-star symbol was created during World War II for Eisenhower and Nimitz.

I read once where a draftsman invented the symbol for the US Government. But I haven't been able to find this information since. His designs were very interesting, to say the least.

The military loves the pentagon as well, as evidenced by their construction of one of the world's largest buildings: the Pentagon. It is remarkable that General Leslie Groves oversaw its construction. Earlier, he was put in charge of the Manhattan Project. So he was also in charge of the construction of another of the world's largest buildings, at Oak Ridge, Tennessee, used for the processing of Uranium.

Nature likes five-fold symmetry in part because five is a Fibonacci number and nature favors them. When I was a kid, I used to read the Fibonacci Quarterly religiously. I was like that.

It is notable that most music is rooted to four beats per measure. Sometimes, as in a waltz, we use three or six beats per measure. But five (or ten) beats per measure is exceptionally rare, except in Jazz. The Dave Brubeck Quartet made this famous in their rendition of Take Five. You can also hear this uncommon beat in the catchy original Mission Impossible theme, written by Lalo Schifrin (where ten beats is broken into two 3s and two 2s).

For me, it is fun to see the way that pentagons, stars, and the rhomboids interact. You can make a rhombus with 72 and 108 degree angles. This is the one used to create the rhombic dodecahedron.

Put stars and pentagons together and they make an irregular tiling of the plane. The designs at Alhambra in Spain are great examples of the attempt to make a regular tiling from five-fold symmetry. But, if you only use pentagons, it really can't be done.

Here is a basic chart of how they fit together. The rhomboids trim out the design. Roger Penrose has constructed aperiodic tilings out of rhombuses, including the one I show here and also a sharper one with 36 degree angles in it. The golden section (1.6180334...) figures in all the shapes in one way or another. Quasicrystals can be made of these designs.

Try to put pentagons together and you will have little luck in creating a seamless gapless tiling.

Here I have succeeded in putting some together using a star as a root and some crowns to glue them together!

The problem with the tilings stems from the angle of a pentagon: 108 degrees. The wide rhombus has an acute angle of 72 degrees, the complement of 108 degrees. The sharp point of the star is 36 degrees. So this means you get some other obtuse angles in there are well: 144 degrees for the thin rhombus.

A ten-sided regular polygon has outside angles of 144 degrees, the complement of 36 degrees. You can put a crown, three pentagons, and two thin rhombuses together and make a ten-sided polygon.

This construction is often used in Penrose and Kepler tilings. Two such decagons can join and use a common thin rhombus.

As I said before, the problem is that the primary angle, 108 degrees, does not evenly divide 360 degrees and so there must be some left over. After putting three pentagons together, exactly 36 degrees are left over.

So you must also have a star, a thin rhombus, or a crown to make pentagons tile the plane properly. If you distort the pentagon, however, you can solve the problem entirely.

Here is the common way of doing this. It is a novel pattern, for sure! Notice the squat hexagons that intersect each other in perpendicular patterns.

This pattern has been used to create concrete tilings in real life! It's cool that tiling patterns have real-world uses. Of course they occur in crystals all the time and so patterns are automatically embedded in the real world all around us.

It is worthwhile to peruse the images of Alexander Braun, an explorer of pentagonal tiling.

Patterns, Part 7

The Tile Pattern Designer is coming along. In it, you design a tile pattern in a parallelogram repeat block. This gives you quite a bit of leeway, with the ability to design triangular and hexagonal tiles, as shown in Patterns, Part 5. Using a grid to design tile patterns in this way is sufficient to plot out most of the tile patterns from the floor of the San Marco Basilica in Venice, as shown in Patterns, Part 6.

Now I will show you some of its features, all based on complex analytic geometry, which you can learn about in How Does It Work, Part 2.

First I design a pattern by drawing lines between grid points. This one took only eight lines, using a slightly rotated rectangle as the basis. I am careful to leave a few unusual shapes for open areas. This is so I can show you how the beveling works later.

I base it on a staggered block pattern, but I also place some rotated rectangles inside the largest rectangle.

I suppose I could have been a little more fancy in my design, but I wanted to show a few of the characteristics that you can control to render your tile patterns. The first, which you are familiar with, is the automatic recognition of closed polygonal areas.

Here I show the polygon areas.

The pattern is really made up of line segments that are automatically divided up. Then they are arranged into a graph, with nodes at the places where the segment ends meet. Then I mark each segment so both sides of it get visited. And start tracing counterclockwise to collect closed polygon areas. The complex part is how to handle holes and stand-alone polygons, but we'll talk about that some other time.

By the way, the graph is special because it wraps around just like the pattern does.

There is a tool to put color into each of the polygons directly. I have chosen an "earth and aqua" color scheme: surf and turf.

Next I bevel the edges of the polygons. This is actually complicated. It involves a gabling operation as we will see in a moment.

A bevel is shaded using an interesting model which predicts its color in HSV space based on the base color of the polygon and shading from the angle of the edge it is derived from. You can adjust the overall light angle in the interface.

The cool thing about polygonal display is that you only need to create the polygons once. Then you just need to evaluate all the copies on screen within the view. It's a bit messy to do that!

The bevel width is controllable, allowing you to magically adjust the look of the tiles directly with a slider. For me, it's a bit disorienting to change the bevel width, because I am not used to seeing this occur in real time in the real world.

I have made the computation of the bevel geometries bulletproof, a thing I was not able to accomplish at Fractal Design (and Metacreations) when I was trying to create the first version of this tool.

It appears that I've learned a few things since then! With previous posts, I have created the bevels by hand, by designing polygons on the grid. Now The bevels can be created automatically from the source polygons using a non-destructive procedural process. In other words, they can also be turned off if you like.

There is also a grout control. This means you can change the grout width in real time with a slider as well. This can make tiles that look a bit more real, since real tiles do have grout in between them.

The grout operation uses the beveling engine, so even if a tile disappears because the grout is so large, it knows not to output it.

And yes, it is disorienting to change the grout width in real time as well! When you move the slider fast, it's just crazy!

And, of course, you can turn the grout off if you like.

The beveling is completely general. If you crank up the beveling width until it is large enough, the center parts of the tiles disappear. This is why I call this a gabling operation.

The actual polygons output are really equivalent to the computations required by architects when they are producing gables for a roof of an oddly-shaped house.

I'm glad it works, because sometimes the polygon shapes are non-intuitive! It seems to be bulletproof now, and works in the general case. Like I said, I use this same engine for the grout computation as well.

One more problem presented itself when I was building this tool: the matte edge problem. When rendering polygons that abut each other, you get a tiny matte edge. I have made the background black to make this more obvious.

This problem occurs because I am using a standard polygon renderer (CoreGraphics bezierPath) and each polygon is output with anti-aliasing. This means that the edges will have a one-pixel-thick one-quarter-intensity dropout between them.

I remedy this by enlarging each polygon by 0.24 pixels before I render it. This can't really be done properly by stroking the edge (as in Postscript). It must be done by widening the polygon. So I built a widening engine into my tile engine.

All of the other diagrams show the result of this widening setting.

I think next I will do some work in refraction. With just a bit of work, it could look just like stained glass. This would require me to make the results actually 3D. Actually, that's not too hard, given the gabling model I use to compute the bevels.

Perhaps one tile could shade its neighbor. Or a global illumination model could give the rendering a bit more life.

Now, what does real marble look like?

Patterns, Part 6

Tiling patterns are the subject of an application I have written specifically for exploring the San Marco Basilica tiling patterns I recorded in my notebooks in May, 1997.

The original tilings were simply sketched. This is not because I was without a camera. I certainly had a very good one with me. No, I sketched the tilings by hand because the church authorities would not allow photographs in the Basilica!

What mathematicians and others have done is to buy the post cards (I think I have a few of them as well), scan them, and post their pictures online. Usually as a challenge for students to determine which repeating group is represented in the tiling.

You can find all about the regular pattern repeating groups in the Handbook of Regular Patterns. My copy of this book is well dog-eared.

The pattern of five-square C-tiles from an earlier post of mine, Different Perspectives, is seen here. This was an early test case for my new application, which I call Tile Patterns.

This C-tile is one of the twelve pentominoes. All of the pentominoes can tile the plane in one way or another, though some of the tiling bases are a bit larger than this one.

For information on the grid, basis, and segments used to define the tiles, consult my last post, Patterns, Part 5.

My test cases for this application make pretty designs. And some are rather busy in an op-art fashion.

Here is one, which has tiles that seem to simulate cut jewels, which must certainly qualify as a 1990's video game background!

This one broke my program a few times before I got it to work. Mostly because some of the polygons actually have holes in them!

Since the last post, I have implemented a few new things. Before, the application had the ability to set a grid, adjust and specify a basis parallelogram, and draw segments. As you draw, segments appear in all repeats of the basis area.

I have added the ability to divide up the segments when they touch or cross. Then I extracted a set of nodes (all on grid points) that bound each segment. Then I added the code to identify all closed polygon areas. As I mentioned, this includes some holes as well, particularly in the jewel tiling. Finally, the ability to specify the color for each closed polygonal area has been added. This allowed me to create all the tiling patterns you see here.

When I work this way, I only have to specify each polygon's color once, and all repeats of that polygon get colored. So I don't have to (laboriously) do the coloring in Painter. I get a cleaner result also. With this tiling, you can just see the parallelogram basis in red. Oops, I left it in!

Each of these patterns represents a new test case that broke the new application in some way.

The ability to save and restore patterns was the first feature I made. Then, when I built the extraction of polygons, I had to write save and restore of the polygons and their colors. This was an exercise in versioning, since I had saved several patterns already, but only the segments were stored.

Really what is needed (beyond what I have written so far) is the ability to maintain a palette of colors that is easy to pick from. And an easy way to deposit color into the polygons, with just a click.

The traditional way of doing this, along with adding segments, is a toolbox. Which is kind of passé, when you look at modern multitouch UI.

The ability to edit segments (in case I make a mistake) was another important feature to add.

Without that feature, I would have to clear and start over. Very troublesome!

So a segment selection and adjustment capability was necessary to implement. The requirement was either moving the entire segment or moving one of its ends. I just snapped the mouse point to the grid and looked for a segment end at that point.

For picking in the middle of a segment, I used a pick tolerance (really just a few pixels) to decide if I was close enough to the center of the line to pick it. Still, I had to implement point-to-segment distance, which is the only hard geometric computation.

Having implemented Shapes as part of Painter (and part of ColorStudio), I am very familiar with grid snapping and geometry editing. Actually very little coding was required.

I also used the San Marco Basilica tiling patterns as test cases. The first few patterns are really not as three-dimensional as some of the patterns. I think these were some of the first patterns laid down on the Basilica floor.

This pattern shows a black field with interspersed gray and light brown rectangles. Or you could view it as a checkerboard with turned gray squares inside the black ones.

The challenge for the tilers was to create diamonds that are just rotated squares. The larger light brown diamonds have an edge length that is sqrt(2) times larger than the smaller gray squares. That must have been fun.

The next pattern shows a lattice design.

This design has a brown field with small black squares inside it. Each black square has a gray diamond inside it.

Clearly, the later the tile work was designed, the more complicated it becomes. Notice here that the brown field is actually made of hexagons that interlock. It's hard to show that here, though.

In the real Basilica, the tiles are all made of marble. So there is a strong texture to all of them, and also quite a bit of color variation.

That may be the next thing for me to implement, to simulate the marble texture. Of course I have some ideas on how to do that. Also, simulating the grout will be of importance. That turns out to be pretty easy, since I already have a way to render that (as I showed in the previous post).

With this one, the patterns are getting a bit more three-dimensional.

There's just the suggestion of a square box with a white bottom. This is inside a kind of square corner.

Of course, all the tile work is two-dimensional since it is just a floor.

The tilers took on the challenge of making their work more and more three-dimensional with time. By the time we get to the renaissance, most of the designs were faux three-dimensional designs, as we will see with later examples. Perhaps this one is more like a coat of arms.

The next one shows a feature that is quite common on the Basilica floor: the checkerboard.

Checkerboard occur most commonly in frieze work (borders) and often go around curves on the Basilica floor.

This shows the artisan's skill more than ever.

This pattern is found on the floor, along with some that only feature four checkers on a side.

I figure the high contrast of the checkerboard was a visual stimulant. But in reality, the tilers were influenced by what they could get from the quarries. In the year this was made, there was probably a surplus of white and black marble.

No patterns on the Basilica floor are more striking, or more difficult to create, than the ones that feature circles.

Here I have approximated the circular arcs with polygons, but you get the picture.

The really cool thing about this one is the way the circles intersect each other so perfectly.

Oh, and by the way, you see the pattern is incomplete at the top. Its another bug I'm chasing! You will see this on three or four of the tile images in this post.

Nonetheless, this image shows the magic of tile patterns.

This shows another kind of tile pattern. I think the design has the downwards diagonals in a kind of three-dimensional design to indicate some kind of depth.

And traditionally, the black field allows you to see the other elements as objects on that field.

In this case, the black is less used for shading than for simple depth.

This is another example of a half-drop pattern, as it would be called in Painter. Half-drop patterns are typically used for wallpaper. But wallpaper is really not very long-lasting. Not compared with a marble tile floor, which has been known to last thousands of years.

This pattern was featured in my last post. Here the colors are a little closer to the actual pattern taken from the Basilica floor.

With this one, the illusion of depth and three-dimensional structure is excellent.

The black diamond tile is used to show the inside of a box. The top of the box is shown in two colors, giving it a kind of silvery sheen. The side of the box is in natural wood colors. In all, it is an exquisite pattern.

This one was probably sixteenth century.


This next pattern shows clearly the three-dimensional structure.

The rendering of this pattern also shows clearly the grid at the top, the guide lines, and then the tile colors below.

Actually this is a bug, but I find it to be instructional.

With this pattern, the gray diamonds are the bottom of diamond-shaped pits. The white rectangles are the tops of the lattice. And something new: black diamonds form the intersections of the lattice.

It is visually interesting and also something quite new. Each tiling shows the style of its creator. It shows that the Basilica floor was designed by many artisans over the centuries, and that they were influenced by each other.

This tile pattern is an exquisitely detailed one. It is entirely three-dimensional. One thing about these tilings is that they have the concept of an assumed light source.

This imposes a rule that allows the designer to consistently shade the shapes. Of course this means that several different colors of tile are needed. In varying quantities also!

Various pyramidal shapes inhabit this one and so you see it is a different kind of surface depiction than we have seen so far.

Like the black diamonds of the previous tiling, this one features smaller pyramids (or indentations?) at each intersection. So most likely this one was created after the previous one.

Minecrafters will probably recognize this pattern: the corner cube pattern.

It was certainly not invented in Minecraft, which certainly appeared a few centuries earlier on tile floors in Italy.

It shows most clearly that consistent shading is required to get the best illusion of three-dimensional shape.

This is one of my favorite patterns due to its simplicity and its optically convincing form.

So this pattern is one of the more mature three-dimensional forms, rivaled closely by the next pattern.

This pattern is like the previous, but entirely in pyramids.

Ever seen the pyramids at Giza in a satellite reconnaissance photo? What I want to see here are the shadows of each pyramid being cast on their neighbors.

Well, perhaps that was beyond the thirteenth-century tile masters.

One thing needs mentioning. The tile patterns are quite similar to modern quilt patterns. I have even seen some of the San Marco tile patterns worked carefully into quilts (even with the marbled textures in the cloth). I can imagine them in latch-hook rugs as well.

I think this tile pattern shows that the tile masters were both aware and interested in shadows. The black triangle could be one facet of the three-dimensional geometry. But I think it's a shadow.

I see it as a shadow being cast into the trough that has been carved into the floor only in dark squares of the checkerboard pattern.

Walking on a floor with this kind of tiling, or in fact any three-dimensional depiction in a tile floor, would be a trip!

Literally. I would be worried about getting my foot caught in the apparent holes!

I found many depictions of this pattern on the floors in the old churches of Byzantium. This one differs from the earlier one both in color (four colors are used, subtly) and also in the angles of the squares.

Thus also in the width of the diamonds. They liked to use sixty-degree angles, so the diamonds would be "double triangles".

This one is shown at about fifty degrees. Mostly because I used a relatively small grid to construct it. It almost reminds me of the harlequin pattern, which is really only a diamond grid in a two-tone checkerboard. When you shade it in this way, it becomes three-dimensional, and can fool you into thinking it is a real surface.

This ornament is found on the floor at the San Marco Basilica. It is quite complex!

It reminds me of the American Indian rug patterns found at the Ahwahnee hotel in Yosemite.

But the Venetian tile floor will be still there long after the American Indian tapestries have turned to dust.

Unless, of course, global warming takes its toll and submerges the Piazza San Marco in the Adriatic.

In the meanwhile, let's keep the art and science of tiling patterns alive!

Patterns are a part of our lives. Our clothes, our wallpaper, our tapestries and hangings, our rugs, and many touchstones in our very existence show the influence of art and mathematics. The art of making patterns promotes spatial reasoning and creativity.

These are some of the reasons that I have featured textures and patterns in my blog. Also, of course, they dazzle our eyes and provide for wonderful illusions: the illusion of depth, the illusion of interlock, the illusion of spatial connectedness and completeness.

When a tiling pattern has a flaw, we automatically see it.

Patterns are literally built right into our consciousness.

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!