Create rotated tileable patterns

Following on my tutorial on how to make tileable stripe patterns, this is a tutorial on how to make tileable rotated versions of any tileable pattern or texture (for example, a rotated checkerboard, a tilted grid or an angled weave pattern). This is a little more complicated than the stripes pattern and requires a bit more math. As with the previous tutorial, the problem is to take a tileable texture and rotate it and still keep the rotated texture tileable as part of a web page background or something like that. Shown below is a generic tileable pattern where I highlighted the repeating texture element (texel), along with a rotated version of the same texture. Tiling is easy for the unrotated image, all you need to do is make an image that contains exactly one of the repeating texture elements. The rotated texture is trickier to tile and you can see that the pattern at each edge of the image will be hard to match up with the opposite edge. This tutorial works out how to make it tileable.

Unrotated generic pattern with repeating texel highlightedRotated generic pattern with repeating texel highlighted

Although this tutorial is written for the GIMP, there are actually very few GIMP-specific instructions. It is therefore applicable to Photoshop or any other paint program.

Strategy

The strategy is identical to the tileable stripes tutorial:

  1. Take an unrotated, tileable texture that repeats horizontally and vertically.
  2. Tile it to a large image.
  3. Rotate the large image by the desired angle.
  4. Find the size of the smallest repeatable unit of this rotated texture (using the math below).
  5. Crop the large image to the size of the repeatable unit.

This produces the tileable rotated texture.

Geometry

There is a bit of geometry involved here. It might be unclear but full understanding is not necessary to use the technique. The image below shows a rotated texture that was formed by tiling the original unrotated pattern and then rotating the resulting mosaic. The basic unrotated texel is highlighted and has width w and height h. The angle of rotation is the acute angle formed by the w line with the horizontal:

A repeating texture was rotated arbitrarily

Since we want acute angles, if you are rotating in the other direction, then the diagram above looks like this:

A repeating texture was rotated arbitrarily

There are two orthogonal directions (along w and h lines) in which the pattern repeats. To see this, consider the figure below which shows two overlapping stripe patterns (orange and blue):

The pattern can be decomposed into two overlapping orthogonal textures

Each rotated stripe pattern is individually tileable with two box sizes shown in the diagram: the blue pattern is (h_h, w_h) and the orange pattern is (h_w, w_w). I have shown these two boxes in the diagram but only one pattern is shown in each. It is clear that each of these boxes is a tileable section of its respective pattern. This is the same box size as calculated in my tileable stripe pattern tutorial for each of the patterns.

To make the combined pattern tileable, the image width w' must contain a whole number of w_w and w_h, and the image height h' must contain a whole number of both h_h and h_w. In other words, the final tileable image size must be chosen so the orange and the blue stripe patterns repeat a whole number of times in the vertical and horizontal directions.

Calculations

The image size (w' x h') necessary to make the texture tileable can be found as follows:

Image height for tiling Image width for tiling

Step by step, the calculations can be made as follows:

  1. Calculate h_h, h_w, w_h and w_w.
  2. Find the reduced fractions that correspond to (h_h / h_w) and (w_h / w_w), which will give you p_h, q_h, p_w and q_w.
  3. Calculate h' and w'.

If h_h / h_w and w_h / w_w are not rational, then you will not be able to find p's and q's that are whole numbers and you will not be able to tile the texture. The trick is to always choose a rotation angle for the texture whose tan is rational. Some examples (not an exhaustive list; there are many angles that have rational tan):

Angle (degrees)tan
5.710591/10
11.30991/5
14.03621/4
18.43491/3
26.56511/2
33.69012/3
451
56.30993/2
63.43492/1
71.56513/1
75.96384/1
84.289410/1

Just plug rational numbers into arctan to find angles like these (be aware that different implementations ofarctan output either radians or degrees; you need degrees to use in GIMP).

Instructions

Now that you can calculate h' and w', you can create your tileable pattern:

  1. Your unrotated pattern repeats horizontally every w pixels and vertically every h pixels. This is the texel size.
  2. Decide on the angle you want to rotate by and measure it as shown above. Make sure to choose an angle whose tan is rational.
  3. Calculate the needed width and height h' and w' for the minimum tileable size based on the math above.
  4. Tile (Filters → Map → Tile) your unrotated texture into an image that, when rotated, is large enough to contain a patch that is h' x w' in size.
  5. Rotate the image to produce the rotated pattern.
  6. Crop to h' and w', rounding to the nearest pixel. When you crop you should check whether choosing a size +/- 1 pixel in each dimension will be better for repeatability.

One thing to keep in mind is that the original texel width (w) and height (h) should either be relatively small or share a common factor. Otherwise, the calculated w' and h' might be quite large, which means you need a large image to tile properly. Also, if you stick to angles whose tan value is a “nice” fraction (like 1/4, 1/3, 1/2, 1/5), then it is easier to get nice sizes for w' and h'.

Example: Tileable, rotated Weave pattern

Start GIMP and create a 1000 x 1000 image.

Go to Filters → Artistic → Weave.

Use the default values (which will produce a texture that repeats horizontally and vertically every 80 pixels, i.e. h=80 and w=80):

Default Weave Settings

Since we created a large image already, we do not need to tile the unrotated Weave texture. We just need to Rotate (Layer → Transform → Arbitrary Rotation) the layer by -26.57 degrees (counter-clockwise rotation by 26.57 degrees).

Using the math above, we get the following:

ParameterValue
h80
w80
Angle26.57
h_h89.4428
h_w178.8851
w_h178.8851
w_w89.4428
h_h / h_w1 / 2
w_h / w_w2 / 1
h'178.8851
w'178.8851

Therefore, I cropped a 179 x 179 square in the rotated image to be the smallest repeatable texture unit (one tile of the rotated texture):

Tileable, rotated Weave texture

I tiled the above texture and this is what it looks like:

Tiled, rotated Weave texture

Automating With G'MIC

The technique in this tutorial was implemented in G'MIC (a very extensive image processing plugin for GIMP) as the “Tileable Rotation” filter. See the discussion thread here by the developer that implemented the filter. I have not had a chance to play with it yet. This filter should fully automate the process, but keep in mind the math here, which will help you choose the right angles and pattern dimensions.

Discussion

mahvin, 2011/05/25 05:55
Brilliance! Thank you for sharing this.
art girl, 2012/10/28 14:15
that's pretty cool!
I would love to hear your feedback. Enter your comment below [ Terms of Use ]:
BHBWG
 

About Peter Yu I am a research and development professional with expertise in the areas of image processing, remote sensing and computer vision. I received BASc and MASc degrees in Systems Design Engineering at the University of Waterloo. My working experience covers industries ranging from district energy to medical imaging to cinematic visual effects. I like to dabble in 3D artwork, I enjoy cycling recreationally and I am interested in sustainable technology. More about me...

Feel free to contact me with any questions about this site at [user]@[host] where [user]=web and [host]=peteryu.ca

Copyright © 1997 - 2014 Peter Yu