AI 协作日志

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

# 实验二 AI协作记录

> 使用工具：TraeCode 内置 AI 助手（对话式）。以下记录均包含本人先行的判断、保留原文的提示词、AI 关键建议、本人测试方法与最终是否采纳的结论。

## AI协作1 · Koch算法

### 我的目标与初步判断
在 Task B 中独立实现 Koch 雪花的分段替换。我的判断：每条线段被替换为 4 条，初始有 3 条边，所以第 n 层线段数应为 `3×4ⁿ`，即 Level 3 = 3×64 = **192** 条，顶点输出也应为 192 个（每个子段只输出起点）。突起方向未知，我先用底部那条边（`A=(-0.82,-0.43)→B=(0.82,-0.43)`）手算，推测“逆时针绕行时突起应朝外（向下）”。

### 关键提示词（原文）
“用 WebGL/JS 实现 Koch 雪花：给定一条有向线段 A→B，如何由三等分点 P、Q 求出向外的等边三角形顶点 R？初始三角形顶点按逆时针排列，如何确认旋转 +60° 还是 −60° 才能让凸起朝轮廓外侧？另外请解释为什么 Level 3 的线段数是 192 而不是别的数。”

### AI关键建议摘要
1. 用点 P、Q 计算向量 `v = Q − P`，把 `v` 旋转 ±60° 后加到 `P` 即得候选顶点 `R = P + Rot(±60°)·(Q−P)`；旋转正负号对应两个相反方向。
2. 由初始三角形的**绕行方向**决定符号：逆时针边界用“右转（顺时针）60°”，即 `R = (P.x + v.x·cos60 + v.y·sin60, P.y − v.x·sin60 + v.y·cos60)`。
3. 数量关系：每段变 4 段，初始 3 段 ⇒ `3×4ⁿ`；因此 Level 3 = 192。
4. 输出顺序按 A→P→R→Q→B 递归，且**每段只 push 起点**，末段末点交给 `LINE_LOOP` 自动闭合，顶点天然连续且首尾连通。

### 我的测试方法与结果
- 先在纸上用底边计算：`P=(-0.273,-0.43)`、`Q=(0.273,-0.43)`，顺时针旋转后 `R=(0,-0.903)`，`y < -0.43` 确为**轮廓外侧**；逆时针旋转得到 `R=(0,0.043)`（朝内），被否定。
- 代码中用 `console.log` 打印 Level 1 首段替换后的 4 个起点，确认顺序为 A、P、R、Q 且坐标连续。
- 计数验证：Level 0/1/2/3/4 的输出点数分别为 **3/12/48/192/768**，与 `3×4ⁿ` 完全一致；页面显示与实际 `bufferData` 顶点数吻合。

### 采纳情况及修正结论
采纳“逆时针边界用顺时针旋转 60°”的方案，并在代码注释中写明符号依据。**拒绝**了 AI 附带建议“先把 Q−P 单位化再乘边长”：因为三等分后 `|Q−P|=|B−A|/3` 已是正确边长，单位化属于多余运算。修正后 Level 0—4 形态正确、凸起全部朝外。

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

### 具体错误现象
Task D 一次基本可用，故按实验要求**人为注入**一个小错误做 Bug Hunt：把 Y 翻转去掉，`yNDC` 由 `1−2·yCanvas/H` 改成 `2·yCanvas/H−1`。现象——点击画布左上角，图形却出现在左下角，Y 方向上下颠倒。

### 我的初步排查
我先写出三条猜想：(1) 没收 `getBoundingClientRect()`，CSS 缩放导致偏移；(2) 直接用了 `clientX/clientY` 未换算 Canvas 像素尺寸；(3) 忘了把 Canvas 像素 Y 转成 NDC 时翻转。矩形方向与两次点击状态也一并检查。

### 关键提示词（原文）
“WebGL 画布里点击位置总是上下颠倒/有偏移，可能有哪些原因？请给出按优先级排列的排查步骤与验证方法，并说明 `clientX/clientY → getBoundingClientRect → canvas 像素 → NDC` 每一步该注意什么。”

### AI建议与逐项测试
1. **Y 翻转**：NDC 向上为正，浏览器像素向下为正，必须 `yNDC = 1 − 2·yCanvas/H`。测试：恢复该式后点击左上角，点出现在左上角，正确 ⇒ 确认根因。
2. **rect 换算**：先用 `(clientX−rect.left)·canvas.width/rect.width` 抵消 CSS 尺寸与像素尺寸差异。测试：拉宽浏览器窗口后再点画布中心，位置仍准确。
3. **矩形任意对角顺序**：用 `min/max` 或直接取 `a.x/b.x`、`a.y/b.y` 的四种组合即可，不必假设点击先后。测试：左上→右下、右下→左上两种顺序都得到同一矩形。
4. **状态重置**：线段点击第一点后切换成“矩形”再点击，确认 `firstPoint` 被清空、不会错误复用。测试：切换工具后第一次点击重新进入“等待第二次点击”。

### 最终原因及修复证据
根因是**漏掉 Y 轴翻转**（叠加 rect 未换算）。修复后：四角点测试与中心点测试位置均正确；矩形两种对角顺序结果一致；切换工具后未完成状态被清除。**注意：** 依据实验要求，验证完成后已恢复为正确的 `1−2·yCanvas/H` 实现，未保留错误代码。

## AI协作3 · 主题整合

### 主题及预期效果
主题词定为**“生长”**：用分形结构表达“从中心向外、一层层扩展”的秩序。预期：Koch 雪花作为核心并缓慢自转，外围有同心年轮环，中心向八方长出二分叉枝条并在枝端点亮节点；用户点击移动“生长中心”、滚轮缩放、拖动枝条层级让分枝真正生长。

### 两个方案的AI提示词（原文）
“请给出两种只用基本 WebGL 图元（POINTS/LINES/LINE_LOOP）表达‘生长’主题的方案，并比较它们的图元数量、交互难度与可解释性。”

### 方案比较、取舍理由
- **方案A（教师示例式）**：单个外环 + 放射线 + 节点 + 旋转。图元少、易实现，但与教师“绽放”示例重合度高，新增几何与新增交互不足。
- **方案B（采用）**：Koch 核心（复用 B）+ 旋转动画（复用 C）+ 点击移动中心 / 滚轮缩放（复用 D 的鼠标 NDC）；**新增**同心年轮环组、二分叉枝条两个几何组成，**新增**“枝条层级”滑块与滚轮缩放的交互。
- 取舍：B 的图元数量适中（几十条线/点，性能无压力），可解释性强（年轮=时间、枝条=生长、节点=新芽），且能明显区别于示例。故**采纳 B，拒绝 A**。

### 实际实现、测试与结果
实现见 `task-e.html` 与 `js/task-e.js`：`makeRings()` 生成 4 层同心年轮环；`buildBranches(depth)` 递归生成二分叉枝条并收集枝端节点；`canvas` 的 `click` 做「屏幕→NDC」转换移动中心，新增 `wheel` 缩放与 `#branch` 滑块改变分枝层级；`#toggle` 控制旋转。实测：拖动枝条层级由 2→4 时枝条变密、节点增多；滚轮可放大缩小；点击后整个图案随中心平移；开始旋转后 Koch 与枝条同步自转。与初始态相比画面差异清晰，设计说明已写入页面。

## 其他AI使用（若有）
- 用 AI 核对 GLSL ES 3.00 语法要点（`#version 300 es`、`in/out`、`out vec4 fColor`、精度声明），确认无旧语法残留。
- 用 AI 讨论 `gl.LINE_LOOP` 与 `gl.LINE_STRIP` 在“连续边界 + 闭合”上的顶点组织差异：本实验采用“每段只输出起点 + LINE_LOOP”，因此 GPU 顶点数 = 线段数 = `3×4ⁿ`。
- 所有 AI 建议均在本人理解并逐项测试后才写入代码，未直接粘贴未核验的完整程序。