Constellation 星座连线
Fifty nodes, and every pair closer than 90px gets a line whose opacity is the distance itself. 五十个节点,距离小于 90px 的两两之间连一条线,透明度直接用距离算。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Two nested loops over the node array give the O(n²) pair pass — fine at 50 nodes, visibly slow at 500. Line alpha is 1 - d/90, so lines fade in continuously as nodes approach rather than popping at a threshold. The mouse is tracked but unused in the base version, which is the obvious hook for interactivity. 两层嵌套循环做 O(n²) 配对——50 个节点没问题,500 个就会肉眼可见地卡。线的不透明度是 1 - d/90,所以线是随距离连续淡入的,而不是踩到一个阈值突然出现。基础版里鼠标坐标取了但没用,这正是加交互的现成接口。
What to change可以改的地方
- 1Link each node to the mouse as an extra edge for a stronger sense of touch.
- 2Raise the threshold to 140px and reduce the node count to keep the line count sane.
- 1把鼠标也当成一个节点连进去,触碰感会强很多。
- 2阈值提到 140px 时记得降节点数,否则线会糊成一片。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。