AI 协作日志

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

# 实验二 AI协作记录

> 姓名：喻科棒　学号：202412211401028

> 工具：AI 编程助手（TraeCode，模型 DeepSeek-V4.1）。以下提示词为原文，个人判断与测试结果为本人实际操作后填写。

## AI协作1 · Koch算法（Task B）

### 我的目标与初步判断
目标：确认“把 Q−P 旋转 ±60° 得到突起顶点 R”时该选哪个方向，保证凸起朝轮廓**外侧**。
我的预判：初始三角形按逆时针给出 `(-0.82,-0.43)→(0.82,-0.43)→(0,0.99)`，沿边逆时针行走时图案主体在“左手边”，所以底边（向右）的突起应该朝下，即把向量**右转（−60°）**。也就是说 R = P + Rot(−60°)·(Q−P)。

### 关键提示词（原文）
> 给定等边三角形轮廓 `(-0.82,-0.43),(0.82,-0.43),(0,0.99)`，按逆时针遍历边。对边 A→B 取三等分点 P、Q，要把 Q−P 旋转 ±60° 得到等边三角形顶点 R 使凸起朝外。请说明应选 +60° 还是 −60°，并给出把 R 代入哪条边验证的办法。

### AI关键建议摘要
- 旋转 ±60° 的符号取决于**初始三角形的绕行方向**，不能只凭固定朝向判断；
- 逆时针轮廓、沿边行走时，外侧在“右手边”，对应**右转 −60°**；
- Rot(−60°)·(dx,dy) = (0.5·dx + (√3/2)·dy, −(√3/2)·dx + 0.5·dy)；
- 建议先用一条**水平线**单独测试：若 A→B 向右，R 应在下方。

### 我的测试方法与结果
1. 只保留一条水平边 A=(-0.82,-0.43)、B=(0.82,-0.43)，用 `console.log` 打印 P、Q、R：
   P=(-0.2733,-0.43)，Q=(0.2733,-0.43)，R=(0, -0.9034)。R 在底边**下方**，与预判一致（外凸）。
2. 改回三条边 Level 1，屏幕上得到 12 段、尖角全部朝外的闭合雪花，没有向内凹陷。
3. 核对线段数：Level 0=3、1=12、2=48、4=768，与 `3×4^n` 完全吻合（页面状态栏同步显示）。

### 采纳情况及修正结论
采纳 −60°（右转）方案，并写成可读代码：
`r=[p[0]+dx*c+dy*s, p[1]-dx*s+dy*c]`（c=0.5，s=√3/2）。
**修正**：AI 建议“一律用 −60°”，我补充了条件——只有在初始轮廓逆时针时才成立；若改成顺时针，符号须取反。我在注释里记录了这一点，避免照抄。

---

## AI协作2 · 交互绘图调试（Task D）

### 具体错误现象
先按正确公式实现后，为验证“坐标映射确实必要”，我**人为注入错误**：把 `pointerToNDC` 里的 Y 翻转临时去掉，返回 `[2xCanvas/w-1, 2yCanvas/h-1]`（不翻转）。结果：点击画布左上角，点却出现在左下角；点、线、矩形整体上下镜像。

### 我的初步排查
- 怀疑 `clientX/clientY` 与 Canvas 位置关系有误 → 打印 `rect.left/top`，数值正常；
- 怀疑 Canvas 像素尺寸与 CSS 尺寸不一致 → 打印 `canvas.width` 与 `rect.width`，两者不同（说明归一化时要用 `canvas.width/rect.width` 缩放）；
- 判断主要问题是 **Y 轴方向**：屏幕坐标 y 向下，NDC y 向上。

### 关键提示词（原文）
> 我的 WebGL 绘图板点击后图形上下颠倒：点左上角却画在左下角。我暂时去掉了 `yNDC=1-2*yCanvas/canvas.height` 的翻转来复现。请列出点击位置偏移的常见原因和排查步骤，尤其 Y 轴与 CSS/像素尺寸不一致的情况。

### AI建议与逐项测试
AI 给出三类可能：① Y 轴未翻转；② 未用 `getBoundingClientRect()` 而直接用 `clientX/Y`；③ CSS 尺寸≠canvas 像素尺寸时未按比例缩放。逐项测试：
1. 恢复 Y 翻转 `yNDC=1-2*yCanvas/canvas.height` → 位置不再上下颠倒；
2. 加入 `getBoundingClientRect()` 结果 → 平移正确，点击不再整体偏移一个页边距；
3. 用 `*canvas.width/rect.width` 与 `*canvas.height/rect.height` 做缩放 → 在窗口放大缩放、改变窗口尺寸后点击画布中心仍准确。

### 最终原因及修复证据
根因是**注入的 Y 未翻转**（叠加未做 CSS/像素缩放）。恢复正确实现后，我在画布四角附近各点一个点核对 Y 方向正确；切换窗口尺寸后再点中心，位置准确；点、线、矩形可叠加共存，切换工具会清空未完成状态，清空后旧图形消失。人为错误已恢复，最终提交为正确版本。

---

## AI协作3 · 主题整合方案比较（Task E）

### 主题及预期效果
主题词：**节律**。希望用一个“像心搏/呼吸一样脉动”的曼陀罗来表达节律感：Koch 边界在内旋转，外面有同心环与随节拍伸缩的辐条和节点。

### 两个方案的AI提示词（原文）
> 用基础 WebGL 图元（POINTS/LINES/LINE_LOOP）表达“节律”主题，请给出两种不同方案：(1) 以同心波纹环为主；(2) 以径向辐条节拍为主。分别说明图元数量、交互难度、可解释性，并指出哪种更容易复用已有的 Koch 生成、uniform 旋转与鼠标定位。

### 方案比较、取舍理由
| 维度 | 方案A：同心波纹环 | 方案B：径向辐条款 |
|---|---|---|
| 图元数量 | 中（多条 LINE_LOOP 圆） | 中（LINES + POINTS） |
| 交互难度 | 低（改半径/层数即可） | 中（节拍数需重建几何） |
| 可解释性 | 强，“涟漪=节律”直观 | 强，“节拍点”直观 |
| 复用度 | 主要复用 B 的边界 | 可同时复用 B/C/D |

**取舍**：两者都保留——把方案A 作为“新增几何组成1（双层同心外环）”，方案B 作为“新增几何组成2（脉动辐条+端点节点）”；旋转继续复用 Task C 的 `uTheta`，点击移动中心复用 Task D 的坐标转换。这样满足“至少两个新增几何组成 + 至少两种交互”。
**拒绝的建议**：AI 曾建议“把环也用逐帧重建 Buffer 来做呼吸”，我判断外环半径用 uniform `uScale` 缩放即可，无须每帧重建；逐帧重建只用于真正改变**顶点数量**的“节拍数”交互。

### 实际实现、测试与结果
- 复用：`buildKoch()`（Task B）、`theta` 逐帧累加并写入 `uTheta`（Task C）、鼠标→NDC 移动 `center`（Task D）。
- 新增几何：`makeRing` 双环；`makeSpokes/makeNodes`（数量=节拍数）。
- 新增交互：`#beats` 滑块改节拍数并**重建几何/重传 Buffer**；`#breath` 复选框切换呼吸脉动。
- 验证：拖动节拍数 6→24，辐条与节点数量随之变化；关闭呼吸后外环与辐条恒为基准半径；点击画布中心可平移整幅图案；开始/暂停旋转正常，暂停后图案静止。

---

## 其他AI使用（若有）
- 用 AI 解释了 `gl.LINES / LINE_STRIP / LINE_LOOP` 的顶点组织差异，最终 Task B 选择“只存每段起点 + LINE_LOOP 自动闭合”，使 GPU 顶点数恰为 `3×4^n`，与显示线段数一致。
- 用 AI 核对了 Task C 的 `requestAnimationFrame` 时间戳用法，确认用 `dt=min((t-lastT)/1000,0.1)` 换算角速度可降低不同刷新率设备的差异。
- 所有 AI 给出的代码均在本地浏览器实际运行并对照 Console 与页面状态栏数值验证后才采用。