Pattern Collider

https://aatishb.com/patterncollider/

Pattern Collider is a tool for generating and exploring quasiperiodic tiling patterns. Every pattern that you create has a custom URL that you can bookmark & share.

Learn more about how it works by watching the Minute Physics video.

Credits & License

Created by Aatish Bhatia in collaboration with Henry Reich.

Special thanks to Arkarup Banerjee, Shefali Nayak, Vijay Ravikumar, and Connie Sun for their helpful feedback & suggestions.

This project uses the following javascript libraries:

p5.js (for drawing)
vue.js (for interactivity)
hsluv.js (for colors)
seedrandom.js (for randomization)

All code in this repository with no prior license is published under the open-source MIT License.

What are Quasiperiodic Patterns?

Quasiperiodic patterns are patterns that don't repeat themselves when you slide in any direction, but where every motif (i.e. every cluster of tiles) occurs infinitely often throughout the pattern. The most famous example of a quasiperiodic tiling is the Penrose Tiling. Quasiperiodic patterns can also be found in medieval Islamic Art, and they occur in nature in the form of quasicrystals.

Visually, these patterns contain many repeating motifs, and yet the entire pattern doesn't repeat in any direction. The trick is that they're constructed out of components that do repeat periodically, but whose periods never coincide with each other (because their ratio is an irrational number).

Some "Famous" Tiling Patterns

Here are a few previously named tiling patterns that you can recreate with Pattern Collider:

5-fold Penrose Tiling (reference)
6-fold Stepped Plane (click randomize to generate variations) (reference)
7-fold Socolar Tiling (reference)
8-fold Ammann-Beenker Tiling (reference)
12-fold Socolar Tiling (reference)

How It Works

Pattern Collider uses the multigrid method of creating quasiperiodic patterns discovered by the mathematician Nicolaas Govert de Bruijn.

de Bruijn noticed that every collection of intersecting lines generates a tiling pattern. To see this, start with a bunch of lines and find the points where they intersect.

At each intersection point, draw equilateral polygons whose sides are perpendicular to the lines.

These are the tiles. Each tile arises from the intersection of two lines. The shape of the tile is determined by the intersection angle.

Because of the way these tiles are constructed, you can always slide them together into a seamless pattern.

This tiling pattern and grid of lines are dual to each other, meaning they're alternate representations of the same pattern. Every grid of lines is a tiling pattern in disguise.

We can use this duality to construct Penrose Tiles. First, draw 5 sets of equally-spaced parallel lines, with each set tilted 360°/5 = 72° from the previous set. This particular grid of lines is called a pentagrid.

By applying de Bruijn's procedure to transform this grid into a tiling pattern, we end up with the well-known Penrose tiling. Since lines in the pentagrid only intersect at two possible angles (72° or 144°), this tiling pattern only contains two possible types of tiles (a thin rhombus and a thick rhombus).

If you shift these lines around, but maintain their spacing and orientation, you can create an infinite family of Penrose-like tilings.

You can repeat this procedure for different numbers of parallel line sets (aka multigrids) to create many other patterns. Pattern Collider uses de Bruijn's multigrid method to create quasiperiodic tiling patterns.

How to Use Pattern Collider

Interaction

Click the save icon 💾 on the top right of the pattern to save the image
Click on a line in the grid to select it & to highlight the corresponding ribbon in the tiling pattern. Click and drag to select parallel lines / ribbons.

Click on a tile to select it & highlight the corresponding intersection point in the grid. Click and drag to select multiple tiles.

The clear selection button clears all selections, and the reset button resets all changes & returns to the default tiling pattern.

Pattern Settings

Symmetry: Controls the rotational symmetry of the pattern. Higher = more sets of parallel lines / ribbons. The pattern will be quasiperiodic for all symmetry values except 3, 4, and 6. Patterns with a N-fold symmetry contain points where the tiling looks the same if you rotate it by 360/N degrees.

Pattern: Controls the offset of each family of lines from the center of the grid. When pattern = 0 or 1, more than 2 lines intersect at a point, and this results in polygons with more than four sides in the tiling patterns. Interesting things happen when pattern = 0.5 or when pattern = 1 / symmetry.

Rotate: Rotates the pattern about its center. (Rotations are about the center of the tiling pattern, not around the center of the viewable patch. When glide = 0 these are the same.)

Pan: Pans the patch sideways. You can use pan in combination with rotate to move around the tiling pattern.

Disorder: Offsets each family of lines in the grid by a random amount. The size of the random offset is controlled by the disorder slider. This allowes you to explore a wider set of tiling patterns.

Randomize: Creates a new set of random offsets, so you jump to a different random pattern. This button only works when disorder > 0.

Share Pattern: Copies the URL of this pattern to the clipboard for easy bookmarking & sharing.

Size Settings

Radius: Sets the radius of the circular patch of tiles.

Zoom: Zooms in or out of the pattern.

Show Grid/Tiling: Shows or hides the grid or tiling pattern.

Color Settings

Change Color Palette: Generates a new color palette for the tiles.

Reverse Colors: Reverses the order of colors in the color palette.

Color Using Tile Orientation: Colors the tiles based on its orientation instead of its area. This is particularly helpful for visualizing 3 and 6 fold symmetry.

Color Tiles: Toggles whether to fill in the color of tiles.

Intersections: Toggles whether to identify the intersection points in the grid.

Edges: Toggles whether to outline the edges of the tiles.

Edge Brightness: Sets the brightness of the edges.

Hue: Sets the average hue of the pattern.

Hue Range: Sets the hue range of the pattern. Goes from negative to positive. Setting this to zero will color the tiles in shades of a single hue.

Saturation: Controls the saturation of the pattern. Zero = grayscale.

Contrast: Controls the contrast of the pattern, i.e. the darkness to brightness range. Higher contrast makes the patterns more easily visible but de-emphasizes the hue.

Tiles: Shows one of each type of tile being displayed.

References

Here are some excellent in-depth references on how to construct Penrose Tiles Using the Pentagrid Method:

And this is an interesting popular science read on the discovery on quasicrystals and their connection to Penrose Tilings:

The Second Kind of Impossible by Paul Steinhardt

aatishb / patterncollider