回転した要素からパターンまたはタイルを作成する方法

私は幾何学模様を持っています–例えば、十字架：

重ねて並べて繰り返したいのですが…簡単です：

青い正方形は、100×100 pxのユニットタイルを示しています。

ただし、ここで問題が発生します。画像を約30度回転させてから、タイリングします。これは驚くほど難しいことがわかりました。もちろん画像の回転は簡単ですが、垂直のユニットタイル（上の画像の青いブロック）を見つけるのは簡単ではありません。

明らかに、100×100ユニットタイルはそれをカットしません。正しいユニットタイルを選択するにはどうすればよいですか？位置はおそらく重要ではなく、サイズだけが重要ですが、それを計算する方法がわかりません。直感的に私は、回転角度とすることを期待して、ドット積が重く特色にするが、それははるかに私が得たようだとして、¹。さらに悪いことに、ピクセルの固有の離散性のため、任意の角度の回転は正確ではないため、数学的に正しいサイズを計算しても、必ずしもシームレスなタイルになるとは限りません。

では、垂直ユニットセルのサイズ（ここでは100×100）とおおよその望ましい角度を考慮して、最適な角度とサイズの組み合わせを計算するにはどうすればよいですか？

¹私の考えは（Wikipedia表記を使用して）、BへのAの投影をBと同じ長さにしたいので、| B | = | A |・cosϑ、つまり| A | = | B | / cosϑ 。私の場合、これは新しい長さ| A | = 115.470を生成しますが、単純な試みは、醜い非整数の数を生成することに加えて、ロングショットではこれが正しくないことを示しています。実際、上記の回転した画像を見るだけで、200×400の画像全体に繰り返し垂直単位が含まれていないことがわかります。

私はこれが助けになるかもしれないことを発見しました：回転したタイル可能なパターンを作成する

あなたが言うように、私の理解をはるかに超えている数学が含まれているので、私はそれを設計することに関係している原則のいくつかだけを紹介します。

基本的に、「解決策」は次のようになります。

• 水平方向と垂直方向に繰り返される、回転されていないタイル化可能なテクスチャを取り上げます。
• 大きな画像に並べます。
• 大きな画像を目的の角度で回転します。
• この回転したテクスチャの最小繰り返し単位のサイズを見つけます（以下の数式を使用）。
• 大きな画像を繰り返し可能なユニットのサイズにトリミングします。

下の画像は、回転していない元のパターンをタイリングし、結果のモザイクを回転して形成された回転したテクスチャを示しています。基本的な回転していないテクセルが強調表示されており、幅はw、高さはhです。回転角度は、水平線とw線によって形成される鋭角です。

鋭角が必要なので、反対方向に回転している場合、上の図は次のようになります。

テクスチャをタイル可能にするために必要な画像サイズ（w 'x h'）は、次のようにして見つけることができます。

説明はもう少し続きますので、役に立ったと思われる場合は、回答を編集してください（または新しい回答を投稿してください）。

これは、私が同様のことをする必要があったときからの非数学的なアプローチです：

1. パターンの大きな領域を作り（タイルは小さくなりません）、必要に応じて回転させます。
2. 視覚的にシンプルで特徴的なスポットを選択します（例：Xの1つのコーナー）
3. 水平および垂直のガイドラインをその正確なスポットに通します。
4. 線の元のスポットの正確な複製に到達するまで、水平線をたどります。そこに垂直ガイドを置きます。
5. 元のスポットの正確な複製に到達するまで、垂直線（両方の垂直線が同じ地面をカバーする必要があります）に従います。そこに水平ガイドを置きます。

これで、可能な限り最小のタイルの周囲に4行の長方形が表示されます（これも小さくはありません）。

それからそれをピクセル完全にするために少しイライラする試行錯誤があります、そしてあなたは行く準備ができているはずです。