Printer-friendly version

Tessellation Doodles

Joel Clark

If we have a group of shapes that fit together on a plane leaving no gaps or overlaps, we say that they tessellate (or tile) the plane. Often we try to accomplish tiling with repetition of a small number of different shapes or even a single repeated shape.

This is practical when manufacturing real tiles for a floor. But also the fewer different shapes and the simpler they are, the more symmetry will be involved, which can be very pleasing to the eye. The shapes don't have to be polygons, of course. Their perimeters may be curved, as long as they fit together and fill the plane.

Searching for shapes

It is an interesting task to find a shape that, when repeated, will fit perfectly with copies of itself to fill the plane in this way.

One could use pencil, paper and scissors to find shapes by trial and error, but it is better to start with some basic facts about tessellation and work from there.

There are a huge number of polygons and combinations of polygons that have been found to tile the plane. Let's start with the simplest. The only regular polygons that will tessellate the plane are the square, the regular hexagon, and the equilateral triangle. (See references below.)

From the figures above, note that in the case of the square and the hexagon, only translation of the basic shape is required to tile the plane. The case of the equilateral triangle requires a reflection and a translation (or a rotation and translation).

A strategy often used in classrooms when studying tessellation is to start with one of the above regular polygons and then perform a modification according to certain rules that preserve the ability of the resulting tile to fill the plane.

Consider the square. If you create a feature extending outward from the right side of the square, and at the same time a matching feature that extends inward from the left side, the shape will still tile the plane. That is the strategy I used in writing the freeware Tessellation Doodle Program available for download at: http://ourworld.cs.com/manyclarks/apps_1/JacTess.exe

The Tessellation Doodle Program

The program is very simple to use. First, download the program at http://ourworld.cs.com/manyclarks/apps_1/JacTess.exe.

When the program is running, if you drag the mouse holding the left button down, you will create a set of wide lines simultaneously. They are arranged in three different ways, corresponding to the three regular polygons that will tile the plane.

The first is a square grid having two different colored lines. The second is a hexagonal grid having three different colored lines. The third is a rectangular grid having two colors, with the second colored line made to move in the negative x-direction as the cursor is moved. This represents the reflection required in the case of the equilateral triangle. The number of colors is not significant. Different colors merely allow us to see the boundaries.

The line width may be selected. As you draw, if you run into one of the previously drawn lines, you will be overwriting it with the color being drawn at the cursor. If you start with wide lines, you will see that you can quickly fill all the white space with colors.

Once the white space is gone, you will see that whatever shapes you make, they will be identical and require only translation (or translation and reflection) to completely fill the plane.

In the example shown below, approximate squares have been drawn, and a projection added on the right. The negative of the projections is created automatically as you draw.

The sequence below shows step-by-step drawing based on the hexagonal pattern. I drew a hexagon and then added some ears. Of course, you don't have to draw a hexagon. I just did so to illustrate the underlying shape. You can make any lumpy shape and the program will constrain it so that it will tessellate the plane.

Any curlicues you draw will tile the plane, as seen below:

We see that we can draw an equilateral parallelogram (diamond):

Also, we can push the shape to become a convex hexagon having four equal sides:

Distort the square edges with a zigzag, and we get a tiling of crosses:

Using the third option at the top of the Select Line Attributes dialog window, we can draw shapes that will tile the plane, but only if some of the tiles are reflected. Here we take an equilateral triangle as the starting point and add a feature:

Here is another single curved shape that fills the plane, but requires flipping:

It is pleasant, but not surprising, to see the above order emerging from freehand drawing with the mouse. After all, we set it up based on known successful tiling. It should be possible to extend this "automatic" tessellation by starting from other sets of rules, perhaps to find a single tile that works when translated and rotated 90 degrees, and many other combinations of translation, rotation, reflection, and glide reflection.

Tessellation using the two regular polygons, the octagon and the square, shown above, could be a program basis. By using the left mouse button to draw the "square color" and the right mouse button to draw the "octagon colors," first one and then the other, we can "push" the borders back and forth between the two shape regions. I haven't done this, mind you, I'm speculating. And there may be many more possibilities. For example, Reference 4 below gives the other seven semi-regular tessellations (using two regular polygons). There are also many more less-symmetrical tilings.

Tessellation Program Operation

System Requirements

The Tessellation Doodle Program was written on a 166 MHZ Pentium computer having 24 MB RAM and running Windows 95. It has been tested on a 2.4 GHZ Xeon CPU machine with 512 MB RAM and running Windows XP. Please understand that I just finished writing this program in its latest form in February 2004, and it has had very little testing. It is freeware. I make no guarantees that it will run on any particular system.

Screen Refresh Option

The check box at the bottom of the 'Select Line Attributes' dialog box is checked at startup. When checked, the program stores all the lines being drawn in PC memory. Most of it is not taking up RAM space, but is compressed and put in temporary hard drive storage. As you draw, the program will show an estimate of the number of bytes stored on the status bar at the bottom right. The program is set to limit this to 50 megabytes.

This storage takes place so the screen can be refreshed when covered and uncovered by another window or is resized. This is convenient and avoids inadvertent erasing of the drawing. But it also means you have to be careful to move the 'Save As' dialog box clear of the drawing, or you can get a screen shot of the dialog box on top of your drawing. Apparently on long refreshes, the PC time shares and lets the screen shot take place before the refresh is done.

If you uncheck the box, you will still be able to draw and save to a file or print, and with very little memory usage. But you will need to be more careful not to cover and uncover the drawing or resize the window or you will lose the drawing. When the 'Save' dialog box opens on top of your drawing, don't move it, just click on 'Save.' When the dialog box disappears, it has saved what was underneath. and will replace it so you will get it back in time to screen capture it to a file.

Saving Drawings

The Tessellation Doodle Program saves drawings by doing a screen capture to a Windows Bitmap [.bmp] file. The default window size of 488 x 330 pixels will result in a 159 kB file. You may resize the window up or down and the file size will change accordingly. The program window maximized for a 15-inch monitor will result in a 648 kB file having 1020 x 648 pixels.

Printing Drawings

The program can print directly to a color raster-type printer. It is only basic printing without a lot of options. Use 'Print Preview' to see what you will get. The output will be sized to the screen width, so you can get some control of output by changing window size while observing the 'Print Preview.'

Opening Drawings

The 'File->Open' menu option will allow you to open files you saved previously (or other [.bmp] files). If you draw more on them, only the new lines will be stored as lines.

If you resize the screen, it will be refreshed from the bitmap and then the lines redrawn on top of that. Thus there is the option of not saving lines and being able to quickly go back to the bitmap-saved state by triggering a refresh.

References:

1. http://mathforum.org/sum95/suzanne/whattess.html
2. http://www.coolmath.com/tesspag1.htm
3. http://www.math.csusb.edu/faculty/susan/tess/cmctess.html
4. http://mathworld.wolfram.com/Tessellation.html