Creating seamless rotated background image

Question

I want to repeat a background image that is rotated. Trying to make it seamless is destroying my soul.

Starting with something simple, consider each image is laid out like bricks. Creating a seamless repeating background image is pretty simple:

(the red area is the crop). You can see this working as expected at http://jsfiddle.net/mPqfB.

Now let's say I want to rotate the image by 45 degrees:

Unfortunately, the same crop no longer works, as you can see on http://jsfiddle.net/mPqfB/1.

I'm trying to figure out how to crop the image correctly so that we have a seamless repeat. There's probably some fairly trivial maths involved to do this but I can't for the life of me figure it out.

[Update]

I'm attempting to follow @oezi's calculations so to make things easier have created an image of dimensions: 100px x 50px.

Therefore:

Least Common Multiple = 100
Hypotenuse = 100² + 100² = 20000

Now I'm assuming this means we don't have to create an image of 20000px x 20000px. Am hoping that @oezi can clarify how he performs his resizing??

If this is a² + b² = c² is equal to c = square root of (a² + b²)

Then we can concur that our crop should be 141px?

Finally, this doesn't actually explain where we take the crop from?

[Update 2]

It does look like this is how the resize should be created. Taking a 141px x 141px crop of the image yielded the correct results - http://jsfiddle.net/EfuV2/

As far as where to crop from, it doesn't actually matter!

Answer 1

is the rotation is exactly 45 degrees, you'll have to find out the least common multiple of the width and height of your unrotated pattern.

• in your case, that's 15100 (width 100 and height 151)
• it would be much better to scale your pattern to width 100 and height 150, so the least common multiple is only 300

Take that number and some math (pythagorean theorem). Assume your number is the length of the two short arms and calculate the length of the hypotenuse - that's our result (make a square image of that size to get your pattern).

• in your case, that's 21355
• with resizing, it's ~ 424

Note that this is just typed straight from my head because i can't try it out practically at the moment - but i'm really sure it's correct.

edit: a fast (and messy) test got me to this:

• http://i.imgur.com/rZuu9.jpg
• http://jsfiddle.net/mPqfB/2/ (click the image-link first, otherwise jsfiddle doesn't show the image)

accidentally i made the pattern only be 423 in height and the rotation isn't perfect (don't have photoshop here), but it's good enough to prove that my math is correct.