Hack 18 Imitate Escher

Repeating tiles need not be limited to
simple geometric grids. This hack explores the principles of the
divided plane to create complex interlocking tiles.

Even if you're not familiar with M.C. Escher by
name, you'll undoubtedly recognize many of the Dutch
artist's famous works. We didn't
license them for reproduction, but you can find them all over the
Web, such as at
http://www.mcescher.com. Some of his most popular works
make use of divided
planes, in which one or more repeated shapes
interlock seamlessly. Some of Escher's most famous
examples include interlocking birds, fish, and reptiles.

You can Google for
"tessellation"
or "divided plane" to find many
such examples on the Web.
("Tessellation" is just a fancy
word for seamless tiling, such as in a checkerboard or mosaic
pattern.)

The Divided Plane

With the negative-space trick [Hack #16] behind us, you may be feeling
pretty confident. That technique used a single tile with negative and
positive space to simulate a geometric pattern, but the tiles were
all square, and the design consisted of simple geometric shapes. What
if you want to create an Escher-like repeating pattern that uses
complex interlocking shapes? How do we make tiles more interesting
than squares and hexagons yet ensure they interlock seamlessly?

The trick to making seamless tiles is to start with a regular shape
and modify it into something more interesting. Let's
again start with a square because it is easiest to work with.

Draw a square. Convert it a movie clip symbol using F8. Next, tile
other square movie clips around it (i.e., arrange multiple instances
of the movie clip symbol on stage) so that you end up with a 3x3 grid
as shown in Figure 3-18. Double-click the middle
clip in the grid to edit it in place.

Figure 3-18. A grid of squares forms the basis for our interlocking tiles

Now modify, say, the left side of the square by curving the side
using the Selection tool. All nine movie clip instances change to
reflect this, as shown in Figure 3-19, so you can
see what a 3x3 grid of your new tile will look like. However,
you'll notice that some of the tiles obscure the
curved part of tiles below, so the pattern isn't
seamless.

Figure 3-19. Adding a curved side to make the tile more interesting

So let's modify the righthand side of our clip so
that it still tiles seamlessly with the left edge of the adjacent
tile. How do you make a perfect fit? Simply copy the stroke from the
left edge of the clip and use it to replace the right edge of what
was formerly a square. You can, of course, use the Zoom tool to get
the placement right. You will see the other instances again give you
real-time feedback of the finished pattern. Figure 3-20 restores our seamlessly tiled pattern in a
slightly more interesting design than the original square tiles.

Figure 3-20. Matching the curve on the other side to maintain tessellation

Without much effort, you've created a new shape that
can be tiled.

The trick to maintaining seamless tiles is to always add to one side
of the shape what you've removed from the opposite
side.

Of course, this is a long way from the work of Escher, or is it? You
can create a tile with an arbitrary outline by
"cutting" pieces from one side of
the shape and pasting the piece on the other side of the shape. Then
you can look at the outline of the shape and decide what it looks
like. Draw in an eye and some feathers, and perhaps it looks like a
bird. Draw in scales and fins, and perhaps it looks like a fish
instead.

A repeating tile doesn't necessarily have to cover
the entire area seamlessly to interlock. So far, we have just changed
the shape outline, but you can also increase the whitespace between
tiles simply by scaling the movie clip you are editing. The 3x3 grid
will automatically update to reflect the additional areas between
tiles created by this change, as shown in Figure 3-21. You can now create more complex tile patterns
because the tiles must interlock only where they touch. We are
effectively assuming the whitespace is actually part of the tile and
using it as our "positive space."

Figure 3-21. If you scale the middle movie clip while in Edit in Place mode, the other instances will reflect the change and also scale down

As soon as you realize that the tiles don't
necessarily have to completely fill the tiled area (but do have to
interlock), you can create a new set of shapes similar to the ones
shown in Figure 3-22.

Figure 3-22. A flock of spiky things...

The shape at the top left of Figure 3-22
doesn't look as if it will tile, but it does, as you
can see by the pattern created beneath it. The trick is to scale your
shape as well as change its basic outline. You can also rotate it:
the symmetry of the grid will reflect anything you do as long as you
do not exit out of Edit in Place mode. We are effectively using the
fact that the 3x3 matrix will remain symmetrical around any line that
passes through the center of the matrix.

Of course, a flock of spiky things is not of much use, but that was
just my starting point. After creating a 3x3 grid of spiky things, I
turned them into something much more in keeping with Escher, as shown
in Figure 3-23. Here, I made sure that the curves of
the bird's wings and neck fit into each other even
when offset. I started by adding lots of positive space (i.e., I
scaled the squares down to create lots of whitespace between them),
then filled it with the bird's wings, tail, and
neck. I also rotated the whole 3x3 matrix slightly to get the
diagonal effect of the tessellated flock (note that this is different
from rotating the central square in Edit-in-place mode, which causes
each tile to remain where it is but rotate on its own axis). And if
you draw in the ears and a nose, the negative space in Figure 3-23 looks like a sleeping bunny rabbit!

Figure 3-23. ...Becomes a flock of Escher-esque birds in flight

The only difference between our regular, rectangular-shaped tiles and
these more complicated tiles is that you cannot easily get the offset
values for each tile just by looking at the clip
_height and _width. Instead,
you have to work the offsets out manually by looking at the (x, y)
positions between tiles when they have been placed in an interlocking
pattern. The same code we used previously [Hack #17] will then work with our
"flock of birds" tiled pattern.

Final Thoughts

As with most design, it's always a good idea to try
emulating the style of well-known artists, just to see where it takes
you and what new ideas you can bring to your designs. In this case,
we've just scratched the surface of the prints
created by M.C. Escher. Emulating some of his works will certainly
create some striking Flash animations and sites!