AI 协作日志

学号：202412211401001 · 来源：ai-log.md

# 实验二 AI协作记录

> 工具：Claude（GLM-5.2），以下为三个关键协作点的完整闭环。

## AI协作1 · Koch算法
### 我的目标与初步判断
目标：确认 Koch 雪花线段三等分点 P、Q 的计算以及向外凸起顶点 R 的旋转方向。

初步判断：初始三角形顶点按逆时针排列（底左 → 底右 → 顶点），沿边逆时针行走时，三角形内部在左手边，因此外侧在右手边。所以将向量 Q-P 顺时针旋转 60° 应能得到外侧凸起顶点 R。但我不确定旋转矩阵的具体符号是否正确。

### 关键提示词（原文）
> 初始三角形顶点逆时针排列为 [[-0.82,-0.43],[0.82,-0.43],[0,0.99]]。对每条边 A→B，取三等分点 P=A+(B-A)/3, Q=A+2(B-A)/3。如何计算向外凸起的等边三角形顶点 R？请给出旋转矩阵和推导，不要直接给出完整 Koch 程序。

### AI关键建议摘要
- 向量 v = Q - P = (B-A)/3，长度为原线段的 1/3。
- 逆时针三角形沿边行走时外侧在右侧，应将 v 顺时针旋转 60°（等价于逆时针旋转 -60°）。
- 顺时针 60° 旋转矩阵：`[cos60, sin60; -sin60, cos60]`，即 `[0.5, √3/2; -√3/2, 0.5]`。
- R = P + (0.5*dx + (√3/2)*dy, -(√3/2)*dx + 0.5*dy)，其中 (dx,dy) = Q-P。
- 可用底边验证：底边从 (-0.82,-0.43) 到 (0.82,-0.43)，dy=0，旋转后 R 的 y 分量应为负（向下凸出），确认朝外。

### 我的测试方法与结果
1. **数值验证**：底边 A=(-0.82,-0.43), B=(0.82,-0.43)。
   - P = (-0.273, -0.43), Q = (0.273, -0.43), dx=0.547, dy=0。
   - R = (P.x + 0.5*0.547, P.y - (√3/2)*0.547) = (0, -0.903)。
   - R 的 y=-0.903 < -0.43，确实向下凸出，朝向三角形外侧。✓
2. **Level 0-4 线段数验证**：
   - Level 0: 3 段 ✓, Level 1: 12 段 ✓, Level 2: 48 段 ✓, Level 3: 192 段 ✓, Level 4: 768 段 ✓。
3. **视觉验证**：运行页面观察 Level 1-4，凸起方向均朝外，无向内凹陷。

### 采纳情况及修正结论
完全采纳 AI 建议的旋转方向。公式 `R = [P.x + c*dx + s*dy, P.y - s*dx + c*dy]`（c=0.5, s=√3/2）正确实现，所有 Level 的线段数和凸起方向均验证通过。

## AI协作2 · 绘图板调试
### 具体错误现象（如一次成功，可先人为注入并恢复一个小错误）
在 Task D 中，我暂时移除了 Y 轴翻转公式中的 `1 -` 前缀（即 `yNDC = 2*yCanvas/canvas.height - 1` 而非 `1 - 2*yCanvas/canvas.height`），观察点击位置是否偏移。

### 我的初步排查
预期：点击 Canvas 上半部分，点应出现在上半部分。如果不翻转 Y 轴，点击上方时 yCanvas 小，`2*yCanvas/canvas.height - 1` 得到负值，NDC 中负值在下方，点会出现在下方——即上下颠倒。

### 关键提示词（原文）
> 在 WebGL 鼠标交互中，event.clientY 从页面顶部计算（Y 向下），而 WebGL NDC 的 Y 轴向上（正方向朝上）。如果我用 `yNDC = 2*yCanvas/canvas.height - 1` 而不是 `1 - 2*yCanvas/canvas.height`，会出现什么现象？为什么要翻转？

### AI建议与逐项测试
AI 指出：
1. Canvas 像素坐标 Y 向下（0 在顶部，height 在底部）。
2. WebGL NDC Y 向上（-1 在底部，+1 在顶部）。
3. 不翻转时：点击顶部 → yCanvas≈0 → yNDC≈-1 → 绘制在底部，上下颠倒。
4. 翻转后：点击顶部 → yNDC = 1-0 = 1 → 绘制在顶部，正确。

**测试1**：不翻转时点击 Canvas 左上角，点出现在左下角——确认上下颠倒。
**测试2**：恢复 `1 - 2*yCanvas/canvas.height` 后，点击四角，位置全部正确。✓
**测试3**：矩形两次点击（先左上后右下），矩形出现在正确位置，无方向错误。✓
**测试4**：切换工具（线段→矩形）后再点击，firstPoint 正确重置，无旧点残留。✓

### 最终原因及修复证据
原因是 Canvas 坐标系 Y 向下而 NDC Y 向上，必须翻转。恢复 `yNDC = 1 - 2*yCanvas/canvas.height` 后所有点击位置正确。代码中 D3 处已正确实现翻转。

## AI协作3 · 主题整合
### 主题及预期效果
主题词："绽放"。预期：复用 Koch 雪花和旋转动画，增加外环、放射线和节点标记，点击改变图案中心，滑块控制展开尺度。

### 两个方案的AI提示词（原文）
> 我要用 WebGL 2.0 做一个"绽放"主题的交互图案，复用 Koch 雪花和旋转动画。请提出两种用基本图元（POINTS/LINES/LINE_LOOP）表达"绽放"主题的方案，比较图元数量、交互难度和可解释性。不要给我完整代码，只给方案对比。

### 方案比较、取舍理由

**方案A：Koch 雪花 + 外圆环 + 放射线 + 节点**
- 图元：LINE_LOOP（雪花+圆环）、LINES（放射线）、POINTS（节点），共3种图元类型。
- 交互：滑块控制层数和尺度，点击移动中心，按钮控制旋转。
- 可解释性：高——圆环=花瓣边界，放射线=生长方向，节点=花蕊。
- 图元数量：雪花 3×4^n + 圆环 96 + 放射线 24 + 节点 12。

**方案B：多层嵌套 Koch + 螺旋路径**
- 图元：LINE_LOOP（多层雪花）、LINE_STRIP（螺旋）、POINTS（路径标记）。
- 交互：滑块控制层数和螺旋密度，拖拽控制旋转。
- 可解释性：中——螺旋路径与绽放的关联较抽象。
- 图元数量：多层雪花 (3×4^n)×层数 + 螺旋点数，数据量更大。

选择**方案A**：图元数量适中，可解释性强，交互复用已有控件且新增点击移动中心，满足要求。方案B 的螺旋路径与"绽放"关联较弱且数据量大。

### 实际实现、测试与结果
- 复用 Koch 算法（来自 Task B/C）和 requestAnimationFrame 动画（来自 Task C）。✓
- 新增几何组成：外圆环（LINE_LOOP, 96点）、放射线（LINES, 24点）、节点（POINTS, 12点）。✓
- 交互方式：Level 滑块（复用）、Scale 滑块（新增）、点击移动中心（新增）、Toggle 旋转（复用）。✓
- 验证：点击 Canvas 不同位置，图案中心跟随移动；调整 Scale 滑块，图案缩放；点击 Toggle，放射线和雪花开始/停止旋转；外环始终静止，界定边界。所有几何均由 WebGL 绘制。✓

## 其他AI使用（若有）
- 使用 AI 辅助检查 Shader 语法（`#version 300 es` 中 `in/out` 和 `precision` 声明），确认符合 GLSL ES 3.00 规范。
- 使用 AI 确认 `requestAnimationFrame` 不保证固定 60fps，需用时间戳 dt 计算帧间隔，Task C 中已采用 `Math.min((time-lastTime)/1000, 0.1)` 限制最大步长。