几何万花尺
利用HTML+Canvas技术重现童年的万花尺,探索几何美学的编程工具。
还记得小时候文具盒里那把神奇的尺子吗?
一个在大圆孔里套着的小齿轮,插上一支圆珠笔,随便转上几圈,就能画出繁复又精美的几何花纹。那时候我们叫它“万花尺”或“百变尺”,数学上它有个好听的名字——内旋轮线(Hypotrochoid)。!在这个快节奏的AI时代,我突然想慢下来,用最纯粹的代码(HTML+Canvas),重现这份童年的几何美学。
🎨 模式一:致敬经典
首先,是一个标准的万花尺模拟器。你可以调整外齿轮半径(R)、内齿轮半径(r)以及笔孔的位置(d)。看着线条在屏幕上一点点交织、闭合,有一种莫名的治愈感。这是数学秩序之美。
🌟 模式二:打破规则的“异形”
现实中的万花尺由于物理限制,外框只能是圆形的。但在代码的世界里,物理规则由我定义。如果外框是一个海星形状?或者是一个扭曲的花瓣?齿轮还能顺滑地滚过去吗?我引入了数值模拟算法,让齿轮能够计算不规则边缘的“切线”和“法线”,从而实现在任意数学曲线上的滚动。
✏️ 模式三:灵魂画手(这是重点!)
这是我最喜欢的一个功能——手绘轨迹。以前玩万花尺,我们受限于塑料模具的形状。现在,你可以做“造物主”。你在屏幕上随手画一个圈(哪怕歪歪扭扭也没关系,算法会帮你平滑处理),然后放入齿轮。看着齿轮沿着你亲手画出的不规则路径磕磕绊绊却又精准地滚动,画出独一无二的纹理,这种感觉非常奇妙。
🔗 小结
这个工具我已经部署上线了,打开浏览器就能玩。手机电脑都可以,建议用电脑体验更佳。有时候,编程不仅仅是为了效率和工具,也可以是为了找回那一瞬间的童心。
❓ 常见问题
如何调整万花尺参数?
可以通过调整外齿轮半径(R)、内齿轮半径(r)以及笔孔的位置(d)来改变图案。
万花尺的图案为什么会有治愈感?
线条交织、闭合的过程让人感受到数学的秩序之美,带来一种平静的体验。
如何在线体验这个工具?
打开浏览器,访问该工具的网址即可在线体验。