这个好奇是源自于媳妇的一句话，她在试用LLM后，觉得这个东西的原理不可能是“预测后一个字符”，因为这太简单和短视了，无法产生实际上已经出现的有价值的对话。这让我想到了小小的蚂蚁，每只蚂蚁的视野都很小，但群体却极其高效和有序。

本文的代码实现了 双信息素蚁群系统。整体结构可以理解为一个离散空间上的 stochastic agent system，其行为机制接近经典的 Ant Colony Foraging Model。体现了小小的蚂蚁如何通过每个短视的行为构筑起群体的高效与智能。

• 从蚁群到优化算法
  • 路径选择模型
  • 信息素更新机制
  • 更短路径为何会自动出现
  • 群体智能的一个重要特点
• 实时模拟
• 蚁群与信息素
  • 永远能回家的策略
  • 引导到食物的策略
  • 群体模拟

[toc]

从蚁群到优化算法

蚂蚁觅食行为不仅是一种有趣的群体行为模型，它实际上启发了一类重要的优化方法： 蚁群优化算法（Ant Colony Optimization, ACO）。

该算法最早由 Marco Dorigo 在 1990 年代提出，用于解决组合优化问题，例如旅行商问题。 其核心思想正是对前文模拟机制的抽象。

路径选择模型

在 ACO 中，问题通常表示为一张图：

其中

• $V$ 为节点
• $E$ 为路径

每条路径上存在信息素：

表示从节点 $i$ 到节点 $j$ 的吸引程度。蚂蚁从节点 $i$ 选择下一个节点 $j$ 的概率为（当然，这只是理论式，实时并不会这么复杂）

其中

• $\tau_{ij}$ —— 信息素强度
• $\eta_{ij}$ —— 启发式信息（例如距离倒数）
• $\alpha,\beta$ —— 权重参数

简单来说：

• 信息素表示 群体经验
• 启发函数表示 局部理性

信息素更新机制

当蚂蚁完成一次路径后，会对经过的边进行强化：

其中

• $\rho$ 为挥发率
• $\Delta\tau_{ij}$ 为新增信息素

通常

其中

• $L$ 为路径长度
• $Q$ 为常数

因此：

路径越短 → 信息素增长越快。

这与自然界蚂蚁的行为完全一致。

更短路径为何会自动出现

设两条路径长度分别为

单位时间往返次数近似为

因此沉积信息素速度

于是

更多蚂蚁会选择路径 1，形成 正反馈循环：

短路径 → 更多蚂蚁 → 更多信息素 → 更短路径

同时挥发机制防止系统陷入旧路径。

群体智能的一个重要特点

蚁群算法的特别之处在于：

个体极其简单，但群体行为高度复杂。

单个蚂蚁只具备一些极度短视的能力，包括：

• 随机探索
• 信息素跟随
• 信息素沉积

整个种群却能产生种种智能体才能具备的行为，比如：

• 最短路径发现
• 动态环境适应
• 群体协作

这种现象被称为 Emergent Intelligence（涌现智能）， 类似机制也出现在以下领域

• 鸟群模型（Boids）
• 鱼群行为
• 细菌趋化
• 神经网络学习

类似这样， 局部规则 + 环境记忆 → 群体智能。 每只蚂蚁并不知道最短路径在哪里，但通过不断强化有效路径，整个系统像一台计算机一样，会通过不断试错“计算”出最优解。

换句话说， 优化并不一定需要中央控制。 自然界通过极其简单的短视规则，就能完成复杂问题的求解。这与 LLM 是相近的，大量“预测下一个字”的小机制复合成具有智能的大系统。所以 LLM 表现出的智能是涌现出来的。

实时模拟

蚁群与信息素

自然界蚂蚁的协同行为主要依赖 信息素 (pheromone)。 单个蚂蚁几乎没有全局认知能力，但通过在环境中留下化学信号，可以形成一种 间接通信机制（stigmergy）。

在模拟中环境被离散为网格：

每个格子记录两种信息素：

1. 食物信息素(foodPheromone)

   \[P_f(i,j)\]

   表示通往食物源的路径强度。

2. 巢穴信息素(homePheromone)

   \[P_h(i,j)\]

   表示通往巢穴的路径强度。

   蚂蚁在移动过程中会在当前位置沉积信息素：

   • 觅食蚂蚁留下 回巢路径
   • 携带食物的蚂蚁留下 食物路径

   信息素随时间挥发：

   \[P(t+1)=\max(0, P(t)-\lambda)\]

   这保证旧路径会逐渐消失，系统能够适应新的食物源。

永远能回家的策略

系统中每只蚂蚁具有两种状态：

• 觅食蚂蚁处于状态：STATE_FORAGING (寻找食物)
• 回巢蚂蚁处于状态：STATE_CARRYING (携带食物回巢)

觅食蚂蚁在移动时不断释放 home pheromone，并且强度随时间而减小

```javascript
homePheromone[idx] = deposit
```

当蚂蚁获得食物后，其行为策略发生反转：

• 不再跟随食物信息素
• 改为跟随 home pheromone 梯度

在实现中，蚂蚁在 3×3 邻域寻找最大梯度方向， 这相当于执行一个离散梯度上升：

因此只要路径曾被探索过，回家的梯度就始终存在。 这就是蚂蚁“永远能回家”的机制。

引导到食物的策略

我们的虚拟蚂蚁按照以下规则引导同伴找到食物

```javascript
// 当蚂蚁成功找到食物并开始返回巢穴时，它会留下 **food pheromone**：
// 这个值随着蚂蚁距离食物的距离增加而减小
foodPheromone[idx] = deposit

// 同时记录 **信息素寿命**
foodPheromoneAge[idx] = limit

// 当寿命结束后信息素快速衰减：
foodPheromone[i] -= fps
```

这种设计产生两个效果：

1. 新路径更强
2. 旧路径自动消失

因此系统会自动收敛到 最短路径。 原因很简单： 较短路径被距离食物的路程更近，因此容易标记成大值。

设路径长度为 (L)，单位时间往返次数约为

沉积速率

于是短路径的信息素浓度更高，蚂蚁更容易跟随它。 这就是经典 positive feedback + evaporation 机制。

群体模拟

整个系统是一个 agent-based simulation。 系统状态可以写为：

其中

• $A$ 为所有蚂蚁状态
• $P_f$ 食物信息素场
• $P_h$ 巢穴信息素场

每一帧执行以下步骤：

```javascript
// 1. 信息素挥发
updatePheromones()

// 2. 蚂蚁决策
applyAntDecision()

// 3. 移动
ant.x += vx
ant.y += vy

// 4. 沉积信息素
depositPheromone()

// 5. 环境交互
handleInteractions()
```

系统行为具有几个典型 emergent phenomena:

1. 路径自组织 随机探索 → 信息素放大 → 稳定路径

2. 最短路径收敛 由于短路径往返频率更高。

3. 动态适应 当食物消失时，路径随时间而消失

    ```txt
    pheromone → evaporation → path vanish
    ```
   

   群体重新探索。

• 使用 WebGL 绘制可交互的网格
• 程序概览
• 核心技术点
  • 1. WebGL 上下文与画布适配
  • 2. 着色器代码组织
  • 3. 顶点着色器
  • 4. 片段着色器与网格生成
  • 5. 数据传递与 GUI 控制
  • 6. 渲染循环
• 总结

使用 WebGL 绘制可交互的网格

在前端图形编程中，网格是一种非常基础且常见的视觉元素。无论是作为坐标参考系，还是作为可视化背景，网格都能帮助我们更好地理解空间关系。本文将通过一个完整的 WebGL 示例，展示如何绘制一个动态的、可交互的网格，并且支持直角坐标和极坐标两种模式。

你将看到一个可交互的网格。直角网格下，背景为简单的红蓝渐变；极坐标模式下，背景变为色环，网格线沿角度和半径方向分布。通过调节参数，你可以直观地看到线条粗细、密度以及边缘柔和度的变化。

程序概览

这个程序使用原生 WebGL 在画布上绘制网格，并通过 dat.GUI 提供了实时控制参数的面板。核心功能包括：

• 自适应画布尺寸（保持 16:9 比例）
• 两种网格模式：直角坐标网格和极坐标网格
• 可调节的网格密度、线宽、边缘羽化（feather）
• 使用着色器中的 wireframe 函数实现平滑、抗锯齿的网格线

核心技术点

1. WebGL 上下文与画布适配

代码首先获取 canvas 元素，并设置其尺寸为父容器宽度的 16:9 比例。通过监听 resize 事件，画布可以在窗口大小改变时自适应调整。

function resizeCanvas() {
  const w = main.clientWidth;
  canvas.width = w;
  canvas.height = w / ratio;
  if (gl) gl.viewport(0, 0, canvas.width, canvas.height);
}

2. 着色器代码组织

为了保持代码清晰，作者将所有 GLSL 代码片段定义在一个 glsl 对象中，包括：

• 标准导数扩展 OES_standard_derivatives：用于 fwidth 函数，实现抗锯齿线条。
• 数学常量 如 PI、复数运算辅助函数。
• HSV 转 RGB 函数，用于极坐标模式下生成彩色背景。
• 复数运算 函数集（虽然本示例中未直接使用，但为扩展留有余地）。
• wireframe 函数：核心网格线算法，支持不同维度的参数。

3. 顶点着色器

顶点着色器非常简单：接收一个二维顶点位置（范围 -1 到 1），将其乘以宽高比 u_ratio 后传递给片段着色器。这样做是为了保持网格在不同屏幕比例下显示为均匀的方格。

attribute vec2 position;
uniform float u_ratio;
varying vec2 v_position;

void main() {
    gl_Position = vec4(position, 0.0, 1.0);
    v_position = vec2(position.x * u_ratio, position.y);
}

4. 片段着色器与网格生成

片段着色器包含了两种网格模式的核心逻辑：

• 直角坐标网格：直接使用 v_position 乘以网格密度因子 u_gridSize，然后通过 wireframe 函数计算该点是否靠近网格线。
• 极坐标网格：将坐标转换为极坐标形式 (半径, 角度)，角度归一化到 [0,1) 范围，同样使用 wireframe 函数绘制同心圆和径向线。

wireframe 函数解析

wireframe 函数是实现高质量网格的关键。它利用了导数的思想，根据屏幕空间的变化率自适应地调整线条宽度，从而避免锯齿。

核心思路：对输入的参数（如坐标）取小数部分，并计算到最近整数线的距离。通过 fwidth 获得该参数在屏幕上的变化率，结合线宽和羽化值，使用 smoothstep 生成平滑过渡的线条。

float wireframe (vec2 parameter, float width, float feather) {
    float w1 = width - feather * 0.5;
    vec2 d = fwidth(parameter);
    vec2 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
    vec2 a2 = smoothstep(d * w1, d * (w1 + feather), looped);
    return min(a2.x, a2.y);
}

颜色混合

在片段着色器中，首先根据模式计算基础颜色（直角坐标下为简单的渐变，极坐标下使用 HSV 生成色环），然后将网格因子与背景混合，使网格线呈现白色半透明效果。

gridFactor = 1.0 - wireframe(...);
gl_FragColor = mix(vec4(rgb, 1.0), vec4(vec3(1.0), gridFactor), gridFactor*0.5);

5. 数据传递与 GUI 控制

通过 dat.GUI 创建控制面板，调整以下参数：

• Grid Size：网格密度
• Line Width：线条宽度
• Line Feather：边缘羽化程度
• Polar Grid：切换直角/极坐标模式

每次参数改变时，更新对应的 uniform 值。

6. 渲染循环

使用 requestAnimationFrame 驱动持续渲染，保证画布实时更新。

总结

这个示例展示了 WebGL 在绘制基本图形方面的灵活性。通过组合简单的顶点数据和强大的片段着色器，我们可以实现各种复杂的视觉效果。wireframe 函数的技巧尤其值得借鉴，它利用屏幕空间导数实现了设备无关的线条渲染，是抗锯齿线条的常用方法。

希望这篇文章能帮助你理解 WebGL 渲染管线以及如何利用着色器绘制高质量的网格。完整代码可以在文末找到，你也可以在此基础上扩展更多功能，比如动态动画、纹理映射等。

Jekyll Intro

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')

# => prints 'Hi, Tom' to STDOUT

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

Local js File Test

Test the local js file, which adds the svg to the #svgDiv.

Equation Test

Inline equation $\beta=3$

Block equation

Table Test

Table 1

Table 2

Making a post “sticky”

Add sticky: true to the frontmatter of your blog post.

Exclude sticky post from paginated posts

By default, sticky posts are still included in the paginated posts. To exclude a sticky post from paginated posts, add hidden: true to the frontmatter of that blog post.

Example

See the “Introducing Tale” post.

Steps

1. Add excerpt_separator: <!--more--> to the frontmatter of your blog post.

2. Insert this <!--more--> at where you would like the excerpt to cut off in your blog post.

Note

This follows Jekyll’s recommended way of managing excerpts.

Example

See this post or the “Introducing Tale” post.

Tale features

• Compatible with GitHub Pages
• Responsive design (looks just as good on mobile)
• Syntax highlighting, with the help of Pygments
• Markdown and HTML text formatting
• Pagination of posts
• Sticky posts
• Tags
• Excerpt management
• Disqus comments

Head over to the Example Content post for a showcase of Tale’s text formatting features.

Browser Support

Tale works on most if not all modern browsers, including Chrome, Safari and Firefox 👍🏼

Download or Contribute

Tale is publicly hosted on GitHub, so go ahead and download or fork it at the GitHub repository. If you spot any bugs or have any suggestions, feel free to create an issue or make a pull request.

Thanks for checking out Tale!

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

H1

H2

H3

H4

H5

H6

Text formatting

- **Bold**
- _Italics_
- ~~Strikethrough~~
- <ins>Underline</ins>
- <sup>Superscript</sup>
- <sub>Subscript</sub>
- Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>
- Citation: <cite>&mdash; Chester How</cite>

• Bold
• Italics
• Strikethrough
• Underline
• ^Superscript
• _Subscript
• Abbreviation: HTML
• Citation: — Chester How

Lists

1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3

* Unordered list item 1
* Unordered list item 2
* Unordered list item 3

1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3

• Unordered list item 1
• Unordered list item 2
• Unordered list item 3

Links

Check out tale on [GitHub](https://github.com/chesterhow/tale).

Check out tale on GitHub.

Images

![Placeholder image](https://placehold.it/800x400 "Placeholder image")

![Image with caption](https://placehold.it/700x400 "Image with caption")
_This is an image with a caption_

This is an image with a caption

Code and Syntax Highlighting

Use back-ticks for inline code. Multi-line code snippets are supported too through Pygments.

// Sample javascript code
var s = "JavaScript syntax highlighting";
alert(s);

# Sample python code
s = "Python syntax highlighting"
print s

Adding linenos to the highlight tag enables line numbers.

1
2
3
// Sample javascript code
var s = "JavaScript syntax highlighting";
alert(s);

Blockquotes

> Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Horizontal Rule & Line Break

Use `<hr>` for horizontal rules

<hr>

and `<br>` for line breaks.

<br>

Use <hr> for horizontal rules

and <br> for line breaks.

The end

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets: like these

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

Sit in window and stare ooo, a bird! yum. Sit and stare. Sweet beast loves cheeseburgers. Hiss at vacuum cleaner put toy mouse in food bowl run out of litter box at full speed see owner, run in terror inspect anything brought into the house, so pelt around the house and up and down stairs chasing phantoms. Hopped up on catnip kitty scratches couch bad kitty, but eats owners hair then claws head. Lie on your belly and purr when you are asleep kitty power! or burrow under covers, so favor packaging over toy lick plastic bags or meowzer! yet unwrap toilet paper.

Cat Ipsum