aatishb/patterncollider 源码: https://github.com/aatishb/patterncollider

Pattern Collider

https://aatishb.com/patterncollider/

Pattern Collider 是一个用于生成和探索准周期镶嵌图案的工具。你创建的每个图案都会生成一个可收藏和分享的自定义网址。通过观看 Minute Physics 视频（https://youtu.be/-eqdj63nEr4）了解更多工作原理。

致谢与许可

由 Aatish Bhatia（https://aatishb.com/）与 Henry Reich（https://www.minutephysics.com/）合作创作。特别感谢 Arkarup Banerjee（https://www.arkarup.com/）、Shefali Nayak（https://shefalinayak.com/）、Vijay Ravikumar（https://this-vijay.github.io/）和 Connie Sun（https://www.cartoonconnie.com/）提供的宝贵反馈与建议。

本项目使用了以下 JavaScript 库：

• p5.js（https://p5js.org/）（用于绘图）
• vue.js（https://vuejs.org/）（用于交互）
• hsluv.js（https://www.hsluv.org/）（用于颜色）
• seedrandom.js（https://github.com/davidbau/seedrandom）（用于随机化）

本仓库中未另行声明许可的代码均采用开源 MIT 许可协议（https://github.com/aatishb/patterncollider/blob/main/LICENSE）发布。

什么是准周期图案？

准周期图案是指：当你沿任意方向平移时，图案不会重复；但图案中的每个母题（即每个瓦片簇）都会在图案中无限多次出现。最著名的准周期镶嵌例子是 Penrose Tiling（https://en.wikipedia.org/wiki/Penrose_tiling）。准周期图案也出现在中世纪伊斯兰艺术中（https://link.springer.com/article/10.1007/s12210-020-00969-9），并以准晶（https://en.wikipedia.org/wiki/Quasicrystal）的形式存在于自然界中。

视觉上，这些图案包含许多重复的母题，但整个图案在任一方向都不重复。其诀窍在于，它们是由确实周期性重复的组件构成的，但各组件的周期互不一致（因为它们的比值是无理数）。

一些“著名“的镶嵌图案

以下是几个可借助 Pattern Collider 再现的有名称的镶嵌图案：

• 5 重 Penrose Tiling（https://aatishb.com/patterncollider/）（参考（https://tilings.math.uni-bielefeld.de/substitution/penrose-rhomb/））
• 6 重 Stepped Plane（https://aatishb.com/patterncollider/?symmetry=6&disorder=1&randomSeed=0.42&radius=76&zoom=2.4&orientationColoring=true）（点击随机化生成变体）（参考（https://www.sciencedirect.com/science/article/pii/S0012365X10004516））
• 7 重 Socolar Tiling（https://aatishb.com/patterncollider/?symmetry=7&radius=88&zoom=2.13&stroke=44）（参考（https://tilings.math.uni-bielefeld.de/substitution/socolars-7-fold/））
• 8 重 Ammann-Beenker Tiling（https://aatishb.com/patterncollider/?symmetry=8&pattern=0.5&radius=140&zoom=2&stroke=255&showStroke=true&hue=250&hueRange=173&contrast=30&reverseColors=true）（参考（https://tilings.math.uni-bielefeld.de/substitution/ammann-beenker/））
• 12 重 Socolar Tiling（https://aatishb.com/patterncollider/?symmetry=12&pattern=0&pan=2&radius=150&zoom=2&rotate=15）（参考（https://tilings.math.uni-bielefeld.de/substitution/socolar/））

工作原理

Pattern Collider 使用了由数学家 Nicolaas Govert de Bruijn（https://en.wikipedia.org/wiki/Nicolaas_Govert_de_Bruijn）发现的生成准周期图案的多网格法（https://www.math.brown.edu/reschwar/M272/pentagrid.pdf）。

de Bruijn 注意到：每一组相交的直线都会生成一种镶嵌图案。具体做法是：先绘制一组直线，找出它们的交点。在每个交点处，画出边垂直于这些直线的等边多边形（https://en.wikipedia.org/wiki/Equilateral_polygon）。这些多边形就是瓦片。每个瓦片由两条直线的相交产生，瓦片的形状由相交角度决定。由于这种构造方式，这些瓦片总能无缝拼合在一起。

[ lines to tiles ] 直线到瓦片

这种镶嵌图案与直线网格是对偶的，即它们是对同一图案的不同表现形式。每个直线网格本质上都是一种隐藏的镶嵌图案。

[ grid tiles dual ] 网格 瓦片 对偶

我们可以利用这种对偶性来构造 Penrose 瓦片。首先，绘制 5 组等间距的平行线，每组相对于前一组旋转 360°/5 = 72°。这种特定的直线网格被称为五网格（pentagrid）。对五网格应用 de Bruijn 的转换步骤，最终得到著名的 Penrose 镶嵌。由于五网格中的直线只以两种角度相交（72° 或 144°），因此该镶嵌图案只包含两种类型的瓦片（薄菱形和厚菱形）。如果对这些直线进行平移，同时保持它们的间距和方向，就可以生成无穷多种类似 Penrose 的镶嵌图案。

对于不同数量的平行线组（即多网格（https://hal.archives-ouvertes.fr/jpa-00225712/document）），重复此过程可以创建许多其他图案。Pattern Collider 利用 de Bruijn 的多网格法来生成准周期镶嵌图案。

如何使用 Pattern Collider

交互

• 点击图案右上角的保存图标 💾 来保存图像。
• 点击网格中的一条直线以选中它，并在镶嵌图案中高亮对应的条带。点击并拖动可选择平行直线/条带。
• 点击一个瓦片以选中它，并在网格中高亮对应的交点。点击并拖动可选择多个瓦片。
• “清除选择”按钮可清除所有选择；“重置”按钮可重置所有更改，恢复为默认镶嵌图案。

图案设置

对称性: 控制图案的旋转对称性。数值越高，平行直线/条带组数越多。除 3、4、6 之外的对称性值均产生准周期图案。N 重对称图案存在这样的点：绕该点旋转 360/N 度后，镶嵌图案看起来相同。

图案: 控制每组直线相对于网格中心的偏移量。当 pattern = 0 或 1 时，超过两条直线交于一点，从而在镶嵌图案中产生边数大于 4 的多边形。当 pattern = 0.5 或 pattern = 1/symmetry 时会出现有趣的现象。

旋转: 绕图案中心旋转图案。（旋转是绕镶嵌图案的中心，而非绕可视 patch 的中心。当 glide = 0 时两者相同。）

平移: 侧向平移 patch。可结合旋转与平移在镶嵌图案中移动。

无序度: 对网格中每组直线施加随机偏移。随机偏移的大小由无序度滑块控制。这使你能够探索更广泛的镶嵌图案。

随机化: 生成一组新的随机偏移，从而跳转到不同的随机图案。该按钮仅在 disorder > 0 时有效。

分享图案: 将此图案的网址复制到剪贴板，便于收藏和分享。

尺寸设置

半径: 设置圆形瓦片 patch 的半径。

缩放: 放大或缩小图案。

显示网格/镶嵌: 显示或隐藏网格或镶嵌图案。

颜色设置

更改调色板: 为瓦片生成新的调色板。

反转颜色: 反转调色板中颜色的顺序。

按瓦片方向着色: 基于瓦片的方向而非面积进行着色。这对可视化 3 重和 6 重对称性特别有用。

着色瓦片: 切换是否填充瓦片颜色。

交点: 切换是否标出网格中的交点。

边缘: 切换是否勾勒瓦片的边缘。

边缘亮度: 设置边缘的亮度。

色相: 设置图案的平均色相。

色相范围: 设置图案的色相范围，范围从负到正。设为零时，瓦片将呈现单一色相的不同深浅。

饱和度: 控制图案的饱和度。零为灰度。

对比度: 控制图案的对比度，即暗到亮的范围。对比度越高，图案越容易辨识，但色相会被削弱。

瓦片: 显示当前展示的每种瓦片的示例。

参考资料

以下是关于如何使用五网格法构造 Penrose 瓦片的优秀深入参考资料：

• Penrose Tilings Tied up in Ribbons by David Austin（http://www.ams.org/publicoutreach/feature-column/fcarc-ribbons）
• The Empire Problem in Penrose Tilings by Laura Effinger-Dean（http://www.cs.williams.edu/~bailey/06le.pdf）
• Pentagrids and Penrose Tilings by Stacy Mowry & Shriya Shukla（https://web.williams.edu/Mathematics/sjmiller/public_html/hudson/HRUMC-Mowry&Shukla_Pentagrids%20and%20Penrose.pdf）
• Penrose Tiling by Andrejs Treibergs（http://www.math.utah.edu/~treiberg/PenroseSlides.pdf）
• Algebraic Theory of Penrose’s Non-Periodic Tilings of the Plane by N. G. de Bruijn（https://www.math.brown.edu/reschwar/M272/pentagrid.pdf）

此外，这是一本关于准晶发现及其与 Penrose Tiling 关联的科普读本：

• The Second Kind of Impossible by Paul Steinhardt（https://bookshop.org/books/the-second-kind-of-impossible-the-extraordinary-quest-for-a-new-form-of-matter-9781476729930/9781476729930）