Patterncollider: 準周期的なタイリングパターンを生成・探索する

Patterncollider https://aatishb.com/patterncollider/ Patterncolliderは、準周期的なタイリングパターンを生成・探索するためのツールです。作成したすべてのパターンには、ブックマークして共有できるカスタムURLがあります。仕組みについては、Minute Physicsのビデオをご覧ください。 クレジットとライセンス Aatish BhatiaがHenry Reichとの協力により作成しました。フィードバックと提案に感謝します。 このプロジェクトでは、以下のJavaScriptライブラリを使用しています。 p5.js (描画用) vue.js (インタラクティビティ用) hsluv.js (色用) seedrandom.js (ランダム化用) このリポジトリにある、事前のライセンスがないすべてのコードは、オープンソースのMITライセンスの下で公開されています。 準周期パターンとは？ 準周期パターンとは、どの方向にスライドしても繰り返されないが、すべてのモチーフ（つまり、タイルのすべてのクラスター）がパターン全体に無限に現れるパターンのことです。準周期タイリングの最も有名な例はペンローズタイリングです。準周期パターンは、中世イスラム美術にも見られ、準結晶の形で自然界にも現れます。視覚的には、これらのパターンは多くの繰り返しモチーフを含んでいますが、パターン全体がどの方向にも繰り返されません。そのトリックは、周期的に繰り返されるコンポーネントから構築されているが、それらの比率が無理数であるため、それらの周期が決して一致しないことです。 いくつかの「有名な」タイリングパターン Patterncolliderで再現できる、以前に名付けられたタイリングパターンの例をいくつか示します。 5重線対称のペンローズタイリング（参照） 6重線対称の階段平面（ランダム化をクリックしてバリエーションを生成）（参照） 7重線対称のソコラタイリング（参照） 8重線対称のアマン・ビーンカータイリング（参照） 12重線対称のソコラタイリング（参照） 仕組み Patterncolliderは、数学者ニコラース・フェルディナント・デ・ブルインが発見したマルチグリッド法を使用して準周期パターンを作成します。デ・ブルインは、交差する線の各コレクションがタイリングパターンを生成することに気づきました。これを見るには、いくつかの線から始めて、それらが交差する点を見つけます。各交差点で、線に垂直な正多角形を描きます。これらがタイルです。各タイルは2本の線の交差から生じます。タイルの形状は、交差角度によって決まります。これらのタイルが構築される方法により、シームレスなパターンにスライドさせて組み合わせることができます。このタイリングパターンと線のグリッドは互いに双対であり、同じパターンの代替表現であることを意味します。線の各グリッドは、 disguis のタイリングパターンです。この双対性を使用してペンローズタイルを構築できます。まず、5セットの等間隔の平行線を描き、各セットは前のセットから360°/5 = 72°傾けます。この特定の線のグリッドはペンタグリッドと呼ばれます。デ・ブルインの手順を適用してこのグリッドをタイリングパターンに変換すると、よく知られたペンローズタイリングが得られます。ペンタグリッドの線は2つの可能な角度（72°または144°）でのみ交差するため、このタイリングパターンには2種類のタイル（細いひし形と太いひし形）しか含まれません。これらの線を移動しても、間隔と向きを維持すれば、ペンローズライクなタイリングの無限のファミリーを作成できます。異なる数の平行線セット（別名マルチグリッド）に対してこの手順を繰り返すことで、他の多くのパターンを作成できます。Patterncolliderは、デ・ブルインのマルチグリッド法を使用して準周期タイリングパターンを作成します。 Patterncolliderの使い方 インタラクション パターンの右上にある保存アイコン💾をクリックして画像を保存します。 グリッド内の線をクリックすると、それが選択され、タイリングパターン内の対応するリボンがハイライトされます。 ドラッグして平行線/リボンを選択します。 タイルをクリックすると、それが選択され、グリッド内の対応する交差点がハイライトされます。 ドラッグして複数のタイルを選択します。 クリア選択ボタンはすべての選択をクリアし、リセットボタンはすべての変更をリセットしてデフォルトのタイリングパターンに戻します。 パターン設定 対称性: パターンの回転対称性を制御します。値が高いほど、平行線/リボンのセットが多くなります。値が3、4、6以外の場合、パターンは準周期的になります。N重線対称のパターンには、パターンを360/N度回転しても同じように見える点が含まれます。 パターン: グリッド中心からの各線のオフセットを制御します。パターン=0または1の場合、2本以上の線が一点で交差し、タイリングパターンで4辺より多い多角形が生成されます。パターン=0.5またはパターン=1/対称性のときに興味深いことが起こります。 回転: パターンを中心を中心に回転させます。（回転はタイリングパターンの中心周りであり、表示領域の中心周りではありません。グライド=0の場合、これらは同じです。） パン: パッチを横方向にパンします。パンと回転を組み合わせてタイリングパターン内を移動できます。 ディスオーダー: グリッド内の各線のセットをランダムな量だけオフセットします。ランダムオフセットのサイズは、ディスオーダースライダーで制御されます。これにより、より広い範囲のタイリングパターンを探索できます。 ランダム化: ランダムオフセットの新しいセットを作成し、異なるランダムパターンにジャンプします。このボタンは、ディスオーダー>0の場合のみ機能します。 パターンを共有: このパターンのURLをクリップボードにコピーして、ブックマークや共有を容易にします。 サイズ設定 半径: タイルの円形領域の半径を設定します。 ズーム: パターンをズームインまたはズームアウトします。 グリッド/タイリングを表示: グリッドまたはタイリングパターンを表示または非表示にします。 色設定 カラーパレットを変更: タイルの新しいカラーパレットを生成します。 色を反転: カラーパレットの色順を反転させます。 タイルの向きで色付け: タイルの面積ではなく、その向きに基づいてタイルに色を付けます。これは、3重線対称と6重線対称を視覚化するのに特に役立ちます。 タイルに色を付ける: タイルの塗りつぶしを切り替えます。 交差点: グリッド内の交差点を識別するかどうかを切り替えます。 エッジ: タイルのエッジをアウトライン表示するかどうかを切り替えます。 エッジの明るさ: エッジの明るさを設定します。 色相: パターンの平均色相を設定します。 色相範囲: パターンの色相範囲を設定します。負から正へ変化します。これをゼロに設定すると、タイルは単一色相の濃淡で色付けされます。 彩度: パターンの彩度を制御します。ゼロはグレースケールです。 コントラスト: パターンのコントラスト、つまり明るさの範囲を制御します。コントラストが高いほどパターンが見やすくなりますが、色相は強調されなくなります。 タイル: 表示されている各種類のタイルを1つ表示します。 参考文献 ペンローズタイリングの構築方法に関する優れた詳細な参考文献をいくつか紹介します。 ペンタグリッド法によるペンローズタイリング ペンローズタイリングのリボン ペンローズタイリングにおける帝国問題 ペンタグリッドとペンローズタイリング ペンローズタイリング 平面の非周期的タイリングの代数理論 そして、準結晶の発見とそのペンローズタイリングとの関連性に関する興味深い一般科学記事です。 不可能な第二の種類