Remove | Item | Quantity × Price | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|

Your cart is empty |

In 2019 I started to learn plugin development for Adobe Photoshop and built my first extension named Seamless, which since then helped many people to create seamless patterns more easily. Currently, I’m working on a version 2 of this plugin, which is going to have several new features as well as some performance upgrades.

One new functionality I'm planning is a tool for **rotating seamless patterns** that keeps the resulting image tileable as well. This task isn’t as trivial as it might sound, because it only works with specific angles and the new repeating interval of the pattern has to be found.

Following this theory by Peter Yu, I finally managed to implement a script that calculates the new document size that’s necessary for a rotated pattern to remain tileable. However, one important step was still missing: **Calculate how often the pattern would need to be repeated along both axes so that a rotated version of it would fill up the whole canvas**, as shown in the following image:

Sketching the problem with pen and paper helped me to identify which lengths had to be calculated. Essentially, we need to find the length of a line with the same rotation, starting from one corner of the canvas and ending at the intersection with a perpendicular line going through the opposite corner. I guess that was hard to follow in words, so let’s visualize it:

The goal is to calculate the length of the green line, to then divide it by the width of the pattern (white box with black border), which accordingly results in the necessary multiplication factor to fill up the canvas, at least along one axis.

Let’s recapitulate which **values we already have**: The new document’s width and height and the rotation angle. In trigonometry, right angles are often crucial for approaching the solution, as they make calculating sides of triangles easier. One right triangle can be pinned like that:

Due to the right angle, we now know two angles and the side *w* of the blue triangle.

The side *b* can be calculated using the sum of angles and the law of sines:

**β = 180° - 90° - α**

**b = (w / sin(90°)) • sin(β)**

In order to get the length of the red line we’re still missing, we shift it upwards until we have a triangle whose hypotenuse is the height of the canvas. This ensures that we **know one side and two angles** again, allowing us to calculate the missing sides as described before:

As chance would have it, both formulas have a division by the sine of the right angle *γ*. That’s convenient as the **sine of 90° is 1**, making the formula quite simple accordingly.

__Keep in mind__: Depending on the coding language you’re using, sin/cos/tan-functions might expect the angle either in **degree or radians**, so make sure to check that first.

Now that we can cover the canvas along one axis, the same calculations have to be done for the other direction of repetition:

After calculating both green lines and the resulting scale factors for the original pattern, the sequence of the script would be as follows:

- Scale up the canvas according to the calculated factor
- Fill up the canvas with the pattern
- Rotate everything by the specified angle
- Crop to the previously calculated new canvas bounds

Done! We’ve rotated a tileable pattern while making sure that the new **canvas is fully covered and also tileable**:

If you’re interested in the Seamless 2.0 plugin for Photoshop, you can subscribe to the newsletter on the front page and I’ll let you know once it’s finished.