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.

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.

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.

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:

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

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):

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.

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

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):

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).

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'.

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):

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:

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):

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

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.