AI 协作日志

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

# 实验二 AI协作记录

工具：Cursor（Grok 辅助完成代码填空与核验思路）

## AI协作1：Koch算法
### 我的目标与初步判断
需要确认：逆时针等边三角形上，把向量 `Q-P` 旋转 ±60° 后，哪一侧才是“向外凸起”。我的判断：沿边前进时，内部在左侧、外部在右侧，因此应对 `Q-P` 做顺时针（右转）60°。另外 Level n 线段数应为 `3×4^n`，因为每条边每次被替换成 4 条。

### 关键提示词（保留原文）
初始轮廓是逆时针等边三角形。对有向线段 A→B，P、Q 为三等分点。要把 PQ 做成向外的等边三角形顶点 R，向量 Q-P 应该旋转 +60° 还是 -60°？请只讲旋转方向的判断方法，不要直接贴完整 Koch 程序。另：为什么 Level 3 是 192 段？

### AI关键建议摘要
沿逆时针边界行走时外侧在右侧，应对 `Q-P` 右转 60°。可用水平底边 A→B 做探针：外凸应落在 x 轴下方（三角形内部在上方）。线段数：初始 3 边，每层 ×4，故 `3×4^n`；Level 3 为 `3×64=192`。

### 我的测试方法与结果
1. 单独计算水平边 `A=(0,0), B=(3,0)`：`P=(1,0), Q=(2,0)`，右转 60° 得到 `R≈(1.5,-0.866)`，y 为负，凸起朝下，符合“底边向外”。
2. 程序中打印 `buildKoch(n).length`，与 `3×4^n` 对照：Level 0/1/2/3/4 分别为 3、12、48、192、768，与验收表一致。
3. 画面上 Level 0 为三角形，Level 1 三条边中点均向外凸出，没有向内凹陷。

### 是否采纳、修正后的结论
采纳右转 60°：`R = P + (0.5·dx + √3/2·dy, -√3/2·dx + 0.5·dy)`。递归顺序 `A→P→R→Q→B`。绘制用 `LINE_LOOP`，只上传每段起点，顶点数等于线段数。

## AI协作2：交互绘图调试
### 具体错误现象
按实验要求人为注入错误：暂时取消 NDC 的 Y 轴翻转（使用 `yNDC = 2*yCanvas/height - 1`）。点击画布上半部分时，点出现在下半部分，四角测试明显上下颠倒。

### 我的初步排查
怀疑 Canvas 像素坐标原点在左上、WebGL NDC 的 Y 向上，因此必须 `yNDC = 1 - 2*yCanvas/height`。也怀疑 CSS 缩放导致 `clientX` 与 backing store 不一致，应使用 `getBoundingClientRect()` 并按 `canvas.width/rect.width` 换算。

### 关键提示词（保留原文）
Task D 里点击位置上下颠倒。我怀疑没做 Y 翻转。请列出可能原因和逐步验证方法（四角点击、窗口缩放后再点中心、切换工具是否复用旧第一点），不要整文件重写。

### AI建议及逐项测试
1. 对照课堂公式检查 `xCanvas/yCanvas` 与 NDC：恢复 Y 翻转后，左上点击得到大约 `(-1, +1)` 附近，方向正确。
2. 缩小浏览器窗口后再点 Canvas 中心，点仍落在中心附近，说明用了 `rect` 而不是裸 `clientX`。
3. 先点、再画线、再画矩形，三者同时存在，说明 `objects` 被保留。
4. 线段第一次点击后改选矩形，未完成的第一点被清空，不会把旧点当成矩形对角。
5. 清空后旧图形消失。矩形对角无论从左上到右下还是相反，都能得到轴对齐四顶点。

### 最终原因与修复证据
根因是窗口坐标 Y 向下、NDC Y 向上。修复后使用指导书公式。工具切换将 `firstPoint=null`；清空时 `objects.length=0` 并重绘。顶点采用对象变化后 `bufferData` 重新上传。

## AI协作3：主题化整合
### 主题与预期效果
主题定为「生长」：晶体边界（Koch）缓慢旋转，周围有年轮和分叉枝条；点击在画面上留下芽点并移动图案中心。

### 提示词（保留原文）
请用基本 WebGL 图元（POINTS/LINES/LINE_LOOP/TRIANGLES）给出两种表达「生长」主题的方案，比较图元数量、交互难度和可解释性。不要给完整项目代码。我会复用 Koch 生成和旋转动画。

### AI提出的可选方案
方案一：Koch 边界 + 多层同心圆（年轮）+ 从中心递归分叉的 LINES，点击播种 POINTS。图元种类少，交互是滑块+点击，易解释。
方案二：用大量小三角形铺成填充“叶片”，鼠标拖拽改变生长方向。图元数量大，拾取和三角剖分更难，和本实验“不要求高级拾取”不完全匹配。

### 方案取舍与理由
采用方案一。理由：能明确指出两处新增几何（年轮、分叉枝条），复用 B/C/D 的能力，交互可验证；拒绝方案二，避免把精力花在填充三角网而看不清算法与状态。

### 实际实现与验证结果
页面 `task-e.html` / `js/task-e.js`：
- 复用：`buildKoch`、`requestAnimationFrame` + `uTheta`、鼠标 NDC。
- 新增几何：`makeRings()` 三层年轮；`makeBranches()` 六条主干递归分叉及芽点。
- 新增交互：点击写入 `spores` 并更新 `center`；分叉深度滑块改变枝条层数；「节拍脉动」用正弦调制尺度。
验证：改变雪花层数边界变密；拖动尺度整体缩放；开始旋转时年轮可保持相对静止而 Koch/枝条旋转；点击后出现橙色节点且图案中心跟随；复位后节点清空。

## 其他实际使用的AI协作（如有）
同时补全了 Task A 的层次/颜色/重置，以及 Task C 的 theta 更新（度/秒 × 方向 × dt，且只保留一个 rAF 循环）。核心几何与坐标公式均按实验指导书在本地对照测试后采纳。