AI 协作日志

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

# 实验二 AI协作记录

> 说明：本记录使用 AI 编程助手（Trae CN / Claude 类模型）辅助完成实验二。
> 所有 AI 建议均先提出个人判断，再通过“控制台打印 / 独立脚本复算 / 浏览器实际运行”逐项验证，
> 采纳的结论与修改后的代码均在本机浏览器中验证通过。

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

### 我的目标与初步判断
按 `A→P→R→Q→B` 的替换规则把等边三角形三条边递归细分。我先做的判断是：
1. 三条边界顶点 `[-0.82,-0.43] → [0.82,-0.43] → [0,0.99]` 在 NDC（y 向上）里是**逆时针**绕行，沿边行走时内部在左侧，因此“向外”应取**顺时针旋转 60°**（即旋转 −60°）。
2. 每层每条线段替换为 4 条，所以 Level n 的线段数应为 `3×4ⁿ`：Level 3 应为 `3×4³ = 192` 段。
3. 若用 `LINE_LOOP` 绘制，则每个 `level===0` 的子段只需压入**起点**，靠首尾相连闭合，缓冲区顶点数就等于线段数。

### 关键提示词（保留原文）
> “Koch 雪花的线段替换是 A→P→R→Q→B，我用 P=A+(B-A)/3、Q=A+2(B-A)/3。
> 请问：已知初始三角形顶点为 (-0.82,-0.43)、(0.82,-0.43)、(0,0.99)，
> 怎样判断把向量 PQ 旋转 +60° 还是 −60° 才是向轮廓外侧突起？给出旋转公式。
> 另外为什么 Level 3 是 192 段、Level 4 是 768 段？”

### AI关键建议摘要
- 旋转公式：θ 角旋转 `(x,y)` 得 `(x·cosθ − y·sinθ, x·sinθ + y·cosθ)`。取 `θ=−60°` 时
  `cosθ=0.5, sinθ=√3/2`，即 `R = P + (0.5·dx + (√3/2)·dy, −(√3/2)·dx + 0.5·dy)`，其中 `(dx,dy)=Q−P`。
- 判断符号的通用方法：把某条边**单独**取出来测试（例如先只用最底边 A=(−0.82,−0.43)→B=(0.82,−0.43)），
  打印 R 的坐标，看它是否落在三角形外侧；不要凭截图朝向猜。
- 线段数推导：每条线段 → 4 条，呈等比数列，故 `N(n)=3·4ⁿ`。
- 提醒：递归输出点时要保证**连续**，`LINE_LOOP` 的顶点数与几何段数一致。

### 我的测试方法与结果
1. **单边测试**：取底边做一次替换，手工算得 `R = (0, −0.903)`，确实落在三角形**下方**（外侧），说明顺时针旋转方向正确。
2. **独立脚本复算**：把 JS 算法用 Python 原样重写，统计各层顶点数与“突起是否朝外”：
   ```
   Level 0: 顶点=3   期望线段数=3   匹配=True
   Level 1: 顶点=12  期望线段数=12  匹配=True
   Level 2: 顶点=48  期望线段数=48  匹配=True
   Level 3: 顶点=192 期望线段数=192 匹配=True
   Level 4: 顶点=768 期望线段数=768 匹配=True
   Level1 分类: 严格内部=0 严格外侧(突起顶点)=3 边上=9
   突起朝外且无顶点落在三角形内部: True
   ```
   即 Level 1 的 12 个顶点中恰好有 3 个突起顶点在三角形外侧、0 个落入内部，方向正确。
3. **浏览器实测**：`task-b.html` 统计行依次显示
   `Level 0 · 线段 3 · GPU顶点 3`、`Level 2 · 线段 48 · GPU顶点 48`、`Level 4 · 线段 768 · GPU顶点 768`，
   与验证表完全一致；Level 4 截图为一个向外凸起的闭合雪花轮廓，无向内凹陷。

### 采纳情况及修正结论
- **采纳** 顺时针 −60° 的旋转公式与 `LINE_LOOP` 只压入起点的组织方式。
- **修正**：AI 最初给的一种写法是在 `level===0` 时同时压入 `a` 和 `b`。我实际测试发现那样会让缓冲区比线段数多出重复端点、用 `LINE_LOOP` 时反而多画一条边，因此改为**只压入起点 a**，并用自己的顶点计数脚本确认 `GPU顶点数=3·4ⁿ`。
- 结论：`subdivideSegment` 末尾按 `A→P→R→Q→B` 顺序四次递归，输出顺序连续，绘制用 `gl.LINE_LOOP`，顶点数等于线段数。

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

### 具体错误现象
绘图板第一次可用，但点击位置与图形**上下颠倒**：在画布左上角点击，绘制的点却出现在左下角。
按老师建议，我人为复现了这个错误（把 Y 轴翻转前的 `yCanvas` 直接当 NDC 的 y 使用），再修正回来。

### 我的初步排查
我猜测原因是：Canvas 像素坐标 y 向下增大，而 NDC 的 y 向上增大，二者方向相反；
代码里少了 `1 − 2·yCanvas/canvas.height` 这一步翻转。

### 关键提示词（保留原文）
> “我把 event.clientX/clientY 经 getBoundingClientRect 转成画布像素后再换算 NDC，
> 结果在画布左上角点击，点却画在左下角，上下颠倒。
> 我的猜想是漏掉了 Y 轴翻转。请列出 clientX/clientY → NDC 的完整正确步骤，
> 并给出逐步验证的方法；另外矩形两次点击顺序相反时会不会出问题？”

### AI建议及逐项测试
AI 给出的映射步骤：
```javascript
const rect = canvas.getBoundingClientRect();
const xCanvas = (event.clientX - rect.left) * canvas.width  / rect.width;
const yCanvas = (event.clientY - rect.top ) * canvas.height / rect.height;
const xNDC = 2 * xCanvas / canvas.width  - 1;
const yNDC = 1 - 2 * yCanvas / canvas.height;   // 关键：Y 翻转
```
并建议矩形用 `min/max` 归一化两个对角点，使任意点击顺序都成立。
逐项测试：
1. **施加错误版本**（去掉 `1 −`）：在 DOM 断点中读取点击坐标，左上角点击得到 `yNDC ≈ +0.9`（应为负），
   浏览器截图显示点画在**左下角** —— 与猜想一致，确认根因就是 Y 翻转缺失。
2. **恢复正确版本**：左上角点击得 `yNDC ≈ −0.9`、右下角点击得 `yNDC ≈ +0.9`，
   截图确认屏幕上方点击的点渲染在上方，方向正确。
3. **矩形任意顺序**：`a=(−0.6,−0.6), b=(0.4,0.4)` 与 `a=(0.4,0.4), b=(−0.6,−0.6)` 都得到
   `[[loX,loY],[hiX,loY],[hiX,hiY],[loX,hiY]]` 的 `LINE_LOOP`，渲染结果相同。

### 最终原因及修复证据
根因：缺少 Y 轴翻转，且 `getBoundingClientRect()` 的偏移量没有参与运算。
修复后浏览器实测：点模式下左上与右下各点一次，状态显示 `共 2 个对象`，
上方点击的点确实在上方；线段工具两次点击生成可见线段（`共 3 个对象`）；
矩形工具两次点击生成线框矩形（`共 4 个对象`）；已画对象不会消失；
点击“清空”后状态回到 `等待点击；共 0 个对象` 且画布清空。

## AI协作3 · 主题整合（Task E）

### 主题及预期效果
主题词取“**绽放**”：以 Koch 雪花为花心，外圈由放射线连接向外打开的花瓣与一圈圈扩散的波纹，
整个作品按“中心—外环—花瓣—波纹”的层次表达“由中心向外层层开放”的节律。
预期复用 Task B 的 Koch 算法、Task C 的 uniform 旋转、Task D 的鼠标定位，并**新增几何与交互**。

### 两个方案的AI提示词（原文）
> “请用基本 WebGL 图元（点/线段）为‘绽放’主题设计两种方案：
> 方案一偏向放射线条与节点；方案二偏向曲线花瓣与同心圆。
> 请分别说明每种方案需要的新增几何组成部分、大致图元/顶点数量、
> 交互实现难度和可解释性，并给出各自的取舍建议。”

### 方案比较、取舍理由
- **方案一（放射线 + 节点）**：实现简单、顶点少（每条射线 2 个顶点），
  但纯直线视觉信息量低，和已有“放射线”重复，**新增感不足**。
- **方案二（菱形花瓣 + 同心波纹）**：花瓣用 `LINE_LOOP` 画菱形（每枚 4 顶点），波纹用圆环（每环 ~72 顶点）；
  顶点更多但都能由参数生成，几何含义清晰，交互（花瓣数量、滚轮缩放）直观。
- **取舍**：采用**方案二为主**，保留方案一的外环与节点作为连接层；
  即新增几何 = “花瓣” + “呼吸波纹”，新增交互 = “花瓣数量滑块”（改变几何顶点数）+“滚轮缩放”（只改变换参数）。
  拒绝方案一的理由：单纯增加直线数量无法体现‘绽放’的层次，且与参考框架重复。

### 实际实现、测试与结果
- 新增几何① **花瓣**（`drawPetals`）：数量为 `petalCount`，每枚由 4 个顶点构成 `LINE_LOOP` 菱形，随旋转一同转动。
- 新增几何② **呼吸波纹**（`drawRipples`）：3 层同心圆环，半径按 `正弦(phase)` 起伏，表现持续“节律”。
- 新增交互① 花瓣数量滑块：把滑块由 8 调到 3、12，状态行从 `花瓣 8` 变为 `花瓣 3` / `花瓣 12`，
  画面花瓣数量随之变化（几何数据重建）。
- 新增交互② 画布滚轮：`缩放` 由 `0.62` 变为 `0.66`，图案整体放大（仅更新 `uScale`，不重建几何）。
- 复用交互：点击画布把中心移到点击处，状态 `中心` 由 `(0.00, 0.00)` 变为 `(0.45, 0.19)`；按钮控制旋转。
- 浏览器实测：`task-e.html` 控制台**无报错**，上述所有状态串与画面变化均按要求出现。

## 其他实际使用的AI协作

- **算法复算**：请 AI 帮助把 JS 的 Koch 算法用 Python 复写为独立校验脚本，用于核对顶点数与突起方向（对应 AI协作1）。
  该脚本仅用于验证，未随实验提交；结论已写入 AI协作1 的测试结果。
- **运行环境说明**：AI 提示本实验应通过本地静态服务器打开（否则 `common/` 库或相对路径可能加载失败）。
  我按此启动 `python -m http.server`，逐页打开 A—E 并用浏览器开发者工具 Console 检查，
  确认无阻断性错误后才提交；这属于对“排错顺序：页面与JS加载 → WebGL2与Shader → …”的实践。