AI 协作日志

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

# 实验二 AI协作记录

## AI协作1 · Koch算法

### 我的目标与初步判断
实现 Task B 的 Koch 雪花，关键是确认 `PQ` 向量旋转 ±60° 时取哪个符号才能让凸起顶点 `R` 落在轮廓外侧。我初步判断：初始三角形三顶点逆时针排列，对底边 `A→B`，外侧在行进方向的"下方"，于是先试了左转 60°。

### 关键提示词（原文）
> 在 WebGL 的 NDC 坐标（y 轴向上）下，等边三角形三个顶点按逆时针排列。对其中一条有向边 A→B，递归生成 Koch 雪花时，如何用向量 Q-P 旋转 ±60° 计算向外的凸起顶点 R？请给出具体的旋转矩阵符号（sin 的正负），并说明判断依据。

### AI关键建议摘要
- 以边的行进方向为基准：三角形逆时针绕行时，轮廓外侧位于行进方向的右侧，应把 `PQ` **顺时针旋转 60°**（即 `sin` 取负号），即 `R = P + Rot(-60°, PQ)`。
- 建议用一条水平线单独测试突起方向，不要仅凭某个固定截面的朝向判断。

### 我的测试方法与结果
我先在底边 `A→B` 打印 `R` 的坐标：
- 用左转 60°（sin 取正）得 `R ≈ (0, 0.99)`，落在三角形内部顶点 `C` 附近——凸起方向错误；
- 改用右转 60°（sin 取负）得 `R ≈ (0, -1.85)`，位于底边外侧。
随后把算法扩展到三条边，`Level 0→1→2` 线段数依次为 3、12、48，符合 `3×4^n`。

### 采纳情况及修正结论
采纳"右转 60°"，即代码中的 `r = [p.x + c*dx + s*dy, p.y - s*dx + c*dy]`（`c=0.5, s=√3/2`）。修正后所有 Level 0—4 凸起方向正确、图形连续，线段数核验通过。

## AI协作2 · 绘图板调试

### 具体错误现象（如一次成功，可先人为注入并恢复一个小错误）
绘图板画点时，点在左下角点击却出现在左上角，且整体位置整体偏移。我先人为去掉了 Y 轴翻转复现，确认问题与 Y 方向有关。

### 我的初步排查
怀疑直接把 `event.clientX / clientY` 当成了 WebGL 坐标，既没有用 `getBoundingClientRect()` 做画布换算，也没有做 Y 轴翻转。

### 关键提示词（原文）
> WebGL 画布上监听 click，直接用 event.clientX / clientY 画点为什么会偏移？如何正确换算成归一化设备坐标（NDC）并翻转 Y 轴？请给出标准转换公式。

### AI建议与逐项测试
AI 给出的步骤与课堂公式一致：
1. 用 `getBoundingClientRect()` 得到画布在窗口中的矩形，换算成画布像素坐标；
2. `xNDC = 2 * xCanvas / width - 1`；
3. `yNDC = 1 - 2 * yCanvas / height`（Y 翻转）。

我逐项测试：不加 Y 翻转时点出现在对称的上方位置，加了翻转后四角测试点位置正确。

### 最终原因及修复证据
根因是缺少 `rect` 换算与 Y 轴翻转两处。修复 `pointerToNDC()` 后，Canvas 四角与中心点击位置均正确，窗口缩放后再点击中心仍准确。

## AI协作3 · 主题整合

### 主题及预期效果
主题定为"绽放"。希望图案带旋转动画、能响应鼠标点击改变中心，直观体现花朵从中心展开的视觉含义。

### 两个方案的AI提示词（原文）
> 用基本 WebGL 图元（LINE_LOOP、LINES、POINTS）表达"绽放"这个主题，请给出两种可行方案，并比较各自的图元数量、交互实现难度和可解释性。

### 方案比较、取舍理由
- **方案 A**：花瓣用多个交错的椭圆环（各自 `LINE_LOOP`）拼成。可解释性强，但每个花瓣要单独闭合，点数组之间会产生多余连线，需要按花瓣分段多次 `drawArrays`，交互逻辑偏繁。
- **方案 B**：外圈用 6 个尖瓣（`LINES`，每瓣两段线），中心用螺旋点簇（`POINTS`）表现花蕊。图元数量少、结构简单，配合旋转和"点击移动中心"很直观。
- **取舍**：采纳方案 B——实现简单、可解释性好，且便于叠加旋转动画和鼠标定位交互。

### 实际实现、测试与结果
实现两个新增几何：外圈 6 尖瓣（`LINES`，18 顶点）与 42 点螺旋花蕊（`POINTS`）。新增交互：旋转"开始/暂停"开关、点击画布移动图案中心（复用 Task D 的鼠标 NDC 换算）。运行验证：`level` 与 `scale` 滑块即时更新，旋转、开关与中心移动均正常生效，顶点数随 Koch 层次增长符合预期。

## 其他AI使用（若有）
无。全部关键逻辑（Koch 算法、坐标转换、方案设计）均由上述三次协作完成，其余为对照课程课件与教材代码自行编写。