However, here comes the catch: I want to rotate the image by about 30° and then tile it. This has proved surprisingly hard; of course rotating the image is easy – but finding a perpendicular unit tile (the blue block in the above image) isn’t:

Clearly the 100×100 unit tile won’t cut it. How do I choose the correct unit tile? The position presumably doesn’t matter, only the size is important, but I don’t know how to calculate that. Intuitively I expect that the rotation angle and the dot product will feature heavily but that’s as far as I got1. What’s worse, the rotation for arbitrary angles isn’t exact due to the inherent discreteness of pixels so even if I calculate the mathematically correct size it won’t necessarily result in a seamless tile.

So how can I calculate an optimal angle/size combination given the size of the perpendicular unit cell (here, 100×100) and an approximate desired angle?

1 My thought was that (using Wikipedia notation), since we want the projection of A onto B to be as long as B, we have |B|=|A|·cosϑ, and thus |A|=|B|/cosϑ. Which, in my case, would yield the new length |A|=115.470 but a simple try shows that this cannot be correct by a long shot, besides yielding an ugly non-integral number. In fact, just looking at the above rotated picture we can see that the whole 200×400 picture doesn’t contain a repeating perpendicular unit.

2 Answers
2

As you mention, there's math involved that is way beyond my understanding, so I'll only bring some of the principles that have to do with designing it.

Basically, the 'solution' would be:

Take an unrotated, tileable texture that repeats horizontally and vertically.

Tile it to a large image.

Rotate the large image by the desired angle.

Find the size of the smallest repeatable unit of this rotated texture (using the math below).

Crop the large image to the size of the repeatable unit.

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:

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

The explanation goes on a little bit more, so if you found it useful please feel free to edit the answer (or post a new one).

Interestingly all this theorising comes to nothing because apparently Inkscape doesn’t work pixel-perfect so that even though I created the pattern using exact values and mathematical rotations, the resulting bitmap still has slight distortions, making it impossible to extract tiles. :-(
– Konrad RudolphApr 8 '13 at 19:56

I started doing this, thinking "how difficlt can it be"?. Oh it was quite a challenge, and I failed big time. Maybe my angle was wrong, or my technique was bad, but my canvas was just HUGE. I gave up before discovering the magic point of patternization xD (at about 20x of my original size) - Edit: Example.
– YiselaApr 7 '13 at 23:29

Unfortunately that method will only work for a very few specific rotation angles (see the linked post in Yisela’s answer).
– Konrad RudolphApr 8 '13 at 8:24