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.

Unrotated stripes patternRotated stripes pattern

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.

Strategy

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.

Instructions

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

Tileable rotated stripe pattern - the minimum tileable size is shown

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:

Measure the acute angle for these calculations

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:

Tileable rotated stripe pattern

Discussion

umer, 2013/04/23 23:42
Could you explain the math more. That what are you calculating and why. I know trig, just cant see the purpose of calculating hypotenuse to get the height and width for repeating. And very few people know it. :D
Peter Yu, 2013/04/28 14:27
To make it tileable, you need to know the number of pixels that allows the pattern to repeat in the vertical and horizontal directions. If you draw the two hypotenuse lines that you are calculating, you will see that they correspond exactly to the number of pixels vertically and horizontally.
I would love to hear your feedback. Enter your comment below [ Terms of Use ]:
QFZBB
 

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 - 2019 Peter Yu