AI 协作日志

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

# 实验二 AI协作记录

使用工具：OpenAI Codex（GPT）。AI用于解释、排错建议和测试协助；最终判断依据是代码检查与本地浏览器实际运行结果。

## AI协作1：Koch算法

### 我的目标与初步判断

我先判断初始三角形按逆时针排列，因此轮廓外侧在每条有向边的右侧，应把向量 `Q-P` 旋转 -60°。每一段替换成四段，所以线段数应从3开始逐层乘4。

### 关键提示词（原文）

“初始三角形顶点逆时针排列时，如何确认 Koch 突起使用正60度还是负60度？请只解释方向判断、坐标公式和验证方法。”

### AI关键建议摘要

AI建议先用水平边测试：从左向右时右侧是下方；顺时针旋转公式为 `(x',y')=(c*x+s*y,-s*x+c*y)`，其中 `c=1/2`、`s=√3/2`。递归终止时只输出线段起点，配合 `LINE_LOOP` 可避免重复端点。

### 我的测试方法与结果

先检查 Level 0 的三个点是否按逆时针连续闭合，再在浏览器依次运行 Level 0、1、2、4。页面分别显示3、12、48、768段，GPU顶点数完全一致；Level 4 图案未裁切，截图在 `evidence/task-b-level-4.png`。

### 是否采纳、修正后的结论

采纳 -60°公式和“每段只存起点”的组织方式。为防止外凸后贴边，我把初始三角形缩小到安全范围，而不是在高层级裁剪图案。

## AI协作2：交互绘图调试

### 具体错误现象

坐标换算最容易把浏览器的向下Y轴直接当成WebGL向上Y轴，结果会使点击位置上下镜像；另一个风险是切换工具后仍保留旧的第一次点击。

### 我的初步排查

我先单独用错误式 `2*y/height-1` 计算上、下位置，确认画布顶部会得到 -1，与WebGL顶部应为 +1 相反。随后检查工具 `change` 事件是否把 `firstPoint` 设回 `null`。

### 关键提示词（原文）

“WebGL绘图板在CSS缩放后点击偏移、Y方向相反、切换工具后两次点击串线，应该按什么顺序排查？请给验证步骤，不要重写整个程序。”

### AI建议及逐项测试

AI建议依次核对 `getBoundingClientRect()`、CSS尺寸到Canvas像素的缩放、NDC公式、Y轴翻转和跨事件状态。浏览器实测创建了红点、绿线和蓝色矩形，共3个对象；在线段第一次点击后切换矩形，状态由“等待第二次点击”恢复为“等待点击”；清空后对象数变为0。

### 最终原因与修复证据

正确Y公式为 `1-2*yCanvas/canvas.height`。工具切换和清空都会重置 `firstPoint`。共存结果见 `evidence/task-d-three-objects.png`。

## AI协作3：主题化整合

### 主题与预期效果

选择“连接”，希望中心递归边界像网络核心，外围几何表现信号范围和连接通道，鼠标点击能真正加入新的连接对象。

### 提示词（原文）

“请比较两个只用WebGL基本图元的主题方案：A是Koch核心+同心环+辐射节点+点击锚点；B是Koch花瓣+递归枝条+鼠标改变生长方向。比较图元数量、交互难度和可解释性。”

### AI提出的可选方案

方案A以 `LINE_LOOP` 画环和Koch、`LINES` 画连接、`POINTS` 画节点，状态清晰且点击结果可持久保存。方案B视觉更像植物，但递归枝条要额外处理深度、方向和性能上限，验证成本更高。

### 方案取舍与理由

采用方案A，因为它能明确复用Task B的算法、Task C的动画和Task D的鼠标坐标转换，并且每一种新增几何都有直观含义。拒绝方案B，因为本实验重点是整合与可解释性，不需要再引入第二套递归算法。

### 实际实现与验证结果

实现了三层信号环、12条辐射连接、12个端点和最多16个外部锚点。浏览器实测把Level调到3、尺度调到0.72并添加2个锚点后，状态显示“Koch线段192、锚点2、旋转中”；初始和交互后截图均在 `evidence/`。

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

AI协助补全事件绑定并建议用浏览器逐页核验。实际检查包括五个JS文件的语法、所有页面Console错误、A/B数量、C开始/暂停/反向/速度、D状态重置/清空、E锚点与动画。发现问题时只修改对应逻辑，没有用图片、Canvas 2D或SVG代替WebGL绘制。

## Challenge：对象级编辑扩展

我选择了“对象级编辑”方向，在 Task D 的对象数组基础上新增独立页面 `challenge.html` 和脚本 `js/challenge.js`。对象统一保存为 `{id, type, vertices, color}`；矩形命中函数先从四个顶点求 NDC 包围盒，再用 0.015 容差判断点击是否落入。为了符合画面层级，选择时从 `objects` 末尾向前查找，因此重叠区域会选中最后绘制的矩形。

实际验证使用两个重叠矩形：先创建蓝色矩形 #1，再创建绿色矩形 #2；点击重叠区选中 #2，将其改为红色后 #1 仍保持蓝色；执行“撤销最后一个对象”后 #2 被删除，只剩 #1。页面状态、对象数量、选中编号和颜色均与预期一致，截图保存在 `evidence/challenge-object-editing.png` 和 `evidence/challenge-after-undo.png`。