混沌思维场

主页背景的技术原理

"混沌思维场"是一个基于 HTML5 Canvas 和原生 JavaScript 构建的交互式生成艺术背景。它通过算法模拟生物神经元的放电、代谢以及思维在无序中的流动感。该作品旨在通过数学模型具象化"混沌"这一抽象概念，同时本站主页提供深邃、科技且具有呼吸感的动态背景。

神经元粒子系统

场域由 $140$ 个独立运行的"神经元粒子"组成。每个粒子拥有独立的空间坐标 $(x, y)$、速度向量 $(v_x, v_y)$ 以及特有的色彩属性。

思维代谢机制

不同于物理模拟中的边缘反弹，本项目采用了"消失重置"逻辑：

• 当粒子移动超出屏幕视口边界时，算法会立即在屏幕随机位置初始化一个新粒子。
• 哲学意涵：模拟大脑中旧念头的消逝与新灵感的瞬间迸发，体现了思维的流动性而非封闭性。

布朗运动扰动

为了表现"混沌"，粒子并非做匀速直线运动。在每一帧渲染中，算法会为速度向量注入微小的随机增量：

$$\Delta v = (\text{random}() - 0.5) \cdot \text{jitter}$$

这种高频的微小抖动使得粒子的运动轨迹呈现出不可预测的蜿蜒感。

动态突触连接

算法通过计算点对点的欧几里得距离（Euclidean Distance）来决定是否绘制连线：

$$d = \sqrt{(x_1 - x_2)^2 + (y_1 - y_2)^2}$$

• 连线逻辑：当 $d < \text{threshold}$ 时，绘制一条代表"突触"的线条。
• 视觉映射：线条的透明度与粗细随距离 $d$ 的增加而线性衰减，营造出深度感和放电的闪烁感。

交互机制

局部柔和扰动

当鼠标在场域内移动时，指针周围 $180\text{px}$ 范围内会产生微弱的引力场和乱序抖动：

• 粒子会感受到极轻微的排斥力，以避免在指针处堆叠。
• 扰动仅在局部发生，确保了背景作为 UI 底层的静谧感。

神经元拖拽交互

系统支持直接的物理交互：

• 点击检测：鼠标按下时，算法会遍历粒子序列并锁定距离指针最近的一个点（需在 $30\text{px}$ 判定圆内）。
• 实时锁定：被抓取的粒子会暂时挂起其原有的混沌算法，坐标被强行映射到鼠标位置。
• 发光增强：拖拽状态下的粒子会获得额外的 shadowBlur 滤镜，产生高亮的"选中"视觉反馈。

视觉设计规范

色彩模型

采用 HSL (Hue, Saturation, Lightness) 模型：

• 主色调：偏向青蓝色系 ($180^\circ - 240^\circ$)，传达冷静的科技感。
• 火花点缀：$10%$ 概率生成橙红粒子，模拟大脑中的突发兴奋点。
• 动态透明度：使用 hsla 确保在叠加渲染时色彩层次丰富。

运动残影

通过在每一帧绘制一个极低透明度 ($22%$) 的黑色矩形覆盖层，实现了视觉上的"拖尾"效果。这使得高速运动的粒子看起来像流星或思维火花，增强了动态张力。

UI 融合层

内容遮罩层采用了玻璃拟态设计：

• backdrop-filter: blur(12px)
• 这种模糊处理让背景的混沌动态作为一种"影影绰绰"的氛围存在，不干扰文字的可读性，同时增强了界面的空间深度。

可调参数

这套算法方案平衡了"数学逻辑的严谨性"与"生成艺术的随机美感"。