AI 协作日志

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

# 实验二 AI协作记录

> 使用工具：TraeCode（AI 编程助手）。
> 说明：三次关键协作均按“我先判断 → AI 建议 → 我在浏览器 / 控制台验证 → 修正结论”的闭环记录，结论以实际运行结果为准。

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

### 我的目标与初步判断
目标：把线段 `A→B` 替换为 `A→P→R→Q→B`，且凸起必须朝轮廓外侧。
我的初步判断：初始三角形 `[[-0.82,-0.43],[0.82,-0.43],[0,0.99]]` 是逆时针排列，沿逆时针行走时轮廓内侧在行进方向的左侧，所以“外侧”应是行进方向的右侧，突起顶点 `R` 应由 `Q−P` **顺时针旋转 60°（即 −60°）** 得到。但我不确定符号，担心画出来向内凹。

### 关键提示词（原文）
> 初始三角形顶点逆时针排列，边沿逆时针行走。用 PQ 构造等边三角形时，R = P + rot(±60°)(Q−P)，请问选 +60° 还是 −60° 才能让凸起朝外？为什么？请只解释方向判定，不要给我完整代码。

### AI关键建议摘要
AI 指出：对逆时针（正定向）多边形，沿边界行进时内部在左侧、外部在右侧；把向量 `Q−P` 顺时针旋转 60°（即 −60°）得到的 `R` 落在 `P→Q` 的右侧，因此外凸；若取 +60° 会凹向内部。并给出 rot(−60°) 的分量式：
`x' = 0.5·dx + (√3/2)·dy`，`y' = −(√3/2)·dx + 0.5·dy`。

### 我的测试方法与结果
1. 先只用 Level 0 输出三条边，检查三条边的顺序与首尾闭合。
2. 取底边 `A=(-0.82,-0.43)`、`B=(0.82,-0.43)`，打印三个新顶点：`P=(-0.273,-0.43)`、`Q=(0.273,-0.43)`、`R=(0,-0.903)`。`R` 在底边下方，即轮廓外。
3. 故意把旋转符号改成 +60° 重跑：`R` 变为落在三角形内部（y=−0.43 附近），雪花出现向内凹的凹陷，与教材排错表“Koch雪花向内凹”的现象一致。
4. 恢复 −60°，逐层统计：Level 0—4 的点数依次为 3、12、48、192、768，包围盒在 Level 1 之后稳定在 x∈[-0.82,0.82]、y∈[-0.903,0.990]，未出现不合理裁切。

### 采纳情况及修正结论
采纳 AI 的方向判定，但保留我自己的推导：**外凸方向取决于初始多边形的绕行方向，不能照搬固定符号**；本题底三角形为逆时针，故用 −60°。为保持线段连续，每条子段只输出“起点”，用 `gl.LINE_LOOP` 让 GPU 自动闭合，因此已上传顶点数 = 线段数 = 3×4ⁿ。

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

### 具体错误现象
首次实现时，点击 Canvas 左上角画出的点出现在左下角，Y 方向上下颠倒；矩形两次点击若第一点在右上、第二点在左下，矩形位置错乱。
（也按实验要求人为注入并恢复了一个小错误：临时去掉 Y 轴翻转 `1-2*yCanvas/canvas.height`，复现偏移后再恢复正确实现。）

### 我的初步排查
怀疑两点：(1) 只用了 `clientY` 而没有减去 `rect.top`，或漏掉 Y 轴翻转；(2) 矩形没有对两个对角点做 `min/max`，直接按顺序取四个角，导致对角顺序不同结果不同。

### 关键提示词（原文）
> WebGL 画布点击位置 Y 轴相反、点落在上下对称的位置。我已经用了 getBoundingClientRect()，公式是 yNDC = 1 - 2*yCanvas/canvas.height，但仍偏移。请列出可能原因并给出逐步验证方法，不要直接重写我的代码。

### AI建议与逐项测试
AI 给出候选原因：① CSS 显示尺寸与 `canvas.width/height` 不一致，未做 `* canvas.width/rect.width` 缩放；② 漏减 `rect.top/left`；③ 漏掉 Y 翻转；④ 混用 `clientY` 与 `rect.top`。
逐项测试：
- 改变窗口大小 / 页面缩放后点击 Canvas 中心，若仍准确，说明缩放项正确；
- 在控制台打印 `rect`、`clientX/Y`、`xCanvas/yCanvas`、NDC 四组值，确认量纲正确；
- 单独去掉 Y 翻转复现“上下颠倒”，恢复后正常 → 证明翻转必需。

### 最终原因及修复证据
最终实现：`xCanvas=(clientX-rect.left)*canvas.width/rect.width`，`yCanvas=(clientY-rect.top)*canvas.height/rect.height`，`xNDC=2*xCanvas/canvas.width-1`，`yNDC=1-2*yCanvas/canvas.height`。
证据：四角与中心点击位置正确；窗口缩放/改尺寸后点击仍准确；矩形改用 `loX/hiX/loY/hiY` 的 `min/max` 后任意对角顺序结果一致；切换工具时把 `firstPoint` 置空，半成品不再被误用。

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

### 主题及预期效果
主题词：**生长**。预期：以 Koch 花冠为主纹样并缓慢自转，叠加年轮环、向上分叉的枝条和末端芽点；点击画布把作品中心移到点击处，移动鼠标使枝条“向光”倾斜。

### 两个方案的AI提示词（原文）
> 请给出两种仅用 WebGL 基本图元（LINES / LINE_LOOP / LINE_STRIP / POINTS）表达“生长”主题的方案，比较图元数量、交互难度和可解释性：方案一以点的扩散为主；方案二以递归枝条 + 环形边界为主。不要写完整实现。

### 方案比较、取舍理由
- 方案一（粒子扩散 / 点云）：图元少、实现简单，但“生长结构”可解释性弱，难以体现分叉与秩序，与 Task B/C 的复用点结合不紧。
- 方案二（递归二叉枝条 + 年轮环 + Koch 花冠 + 芽点）：图元数量适中（`LINES` 画枝条与年轮、`LINE_LOOP` 画花冠、`POINTS` 画芽点），交互可直接作用到旋转 / 几何参数，可解释性最好。
取舍：**采用方案二**，并在其基础上增加“鼠标向光倾斜”这一新增交互；**拒绝方案一**，原因是它无法满足“至少两个可辨识几何组成”的要求。

### 实际实现、测试与结果
- 复用：Task B 的 `subdivideSegment/buildKoch`（花冠）、Task C 的 `requestAnimationFrame + uTheta`（花冠自转、枝条摆动相位）、Task D 的坐标映射（点击移动中心）。
- 新增几何：① 年轮环 `buildRings`（`gl.LINES` 画同心圆）；② 递归枝条 `buildBranches`（`gl.LINES`，由 `depth`/`spread` 两个参数控制）；③ 芽点（`gl.POINTS`，取枝条末端）。
- 新增交互：`canvas mousemove` → 用 `atan2` 求鼠标方位，枝条以 `tilt = clamp(θ − 90°, ±0.7)` 旋转（向光性）。
- 几何与变换分离：花冠层数 / 枝条层级 / 张开角度变化时只重建对应 Buffer；旋转、向光、中心、尺度变化只改 uniform，不重传顶点。
- 验证：分叉层级 3 时芽点数 = 2³ = 8、枝条线段数 = 2³−1 = 7，拖动层级滑块芽点数随之变化，说明几何确实重新生成；暂停后拖动鼠标枝条仍向光倾斜，说明该交互独立于动画循环。

## 其他AI使用（若有）
- 用 AI 统一检查了 A—E 的 WebGL2 / GLSL ES 3.00 规范（`#version 300 es`、`in/out`、显式 `out` 颜色、`initShaders()`）。
- 排错顺序按实验指导进行：页面与 JS 加载 → WebGL2 与 Shader → Buffer 与顶点属性 → Uniform → DrawCall → 事件与状态，未把每个报错直接交给 AI 重写。