Tileable Stripe Patterns

Tileable textures are easy to make. But suppose you have a vertical or horizontal stripe pattern (or any other pattern that only repeats in one direction) and you wanted to rotate it so that it is tilted at an angle while maintaining the ability to tile it (perhaps as web page background). To make such a tileable rotated pattern, you need to do a little bit of math to figure out how to get the pattern to repeat properly. To make it clear, take a look at the following images. The first image is a stripe pattern that is unrotated and tiling is easy. The second image is rotated and you can see that the pattern on each edge no longer lines up with the opposite edge.

This tutorial shows how to make a tileable rotated stripe pattern for arbitrary rotation angles. Although this tutorial is written for the GIMP, there are actually very few GIMP-specific instructions. It is therefore applicable in Photoshop or any other paint program.

The technique shown here is built upon for arbitrary tileable patterns in my rotated tileable patterns tutorial.

The strategy is simple:

1. Take an unrotated, tileable stripe texture.
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. You can accomplish the same thing as this tutorial by visually by looking at the rotated pattern and cropping an area that is tileable, but I am showing the math because it can be built upon to tile other, more complex patterns.

The way to do this is really easy with just a bit of math, as shown below:

The stripes pattern has a period of w pixels (number of pixels it takes to repeat) and is rotated by an acute angle measured from the horizontal. The image size you need to make a tileable version of the rotated texture is shown in the figure. The math shown here simply ensures that the texture repeats an integer number of times horizontally and vertically.

The trig functions sin and cos will produce not produce nice, round numbers for the image size but this is OK because we are working on pixels; all you have to do is round it to the nearest pixel and when you crop the image, you just have to make sure you select +/- 1 pixel for best repeatability.

The math works best when you use an acute angle, so if you are rotating the other way, then measure the angle as shown below:

To actually make the rotated texture, follow these steps:

1. Calculate how many pixels your original stripes pattern takes to repeat (w).
2. Decide on the angle you want to rotate by and measure it as shown in the images above.
3. Calculate the needed width and height h' and w' for the minimum tileable size.
4. Tile (Filters → Map → Tile) your unrotated stripes pattern 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, try to determine whether cropping to +/- 1 pixel of the calculated dimensions will be better for repeability. It should be fairly obvious when you compare the pixels on each corner of the crop area.

The basic principle behind this technique is that you can create a large, rotated texture and then select the smallest image that contains a repeatable unit of the rotated texture.

Final result for w = 100 and 30 degree rotation angle is shown below: