AI 协作日志

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

# 实验二 AI协作记录（请据实际情况填写）

## AI协作1 · Koch算法
### 我的目标与初步判断
完成 Task‑B 科赫雪花细分递归函数，实现线段 A‑B 递归拆分为 A‑P‑R‑Q‑B；一开始猜测向外凸起直接用 + 60° 旋转，担心旋转方向搞错导致雪花向内凹陷；需要理解向量旋转公式，保证图形向外扩张，同时统计线段数量与理论公式 \(3\times4^{level}\) 保持一致。
### 关键提示词（原文）
WebGL 2D Koch 雪花，线段 AB 逆时针走向，怎么旋转向量 PQ 得到向外凸起的 R 点，旋转矩阵。
### AI关键建议摘要
1. 线段三等分得到 P、Q；P 向 B 方向 1/3，Q 向 B 方向 2/3；
2. 轮廓顶点为逆时针顺序，**向外凸起需要对向量 PQ 做‑60°（右转 60°）旋转**；
3. 旋转公式
4. 递归调用顺序必须严格：`subdivideSegment(a,p)`、`subdivideSegment(p,r)`、`subdivideSegment(r,q)`、`subdivideSegment(q,b)`
### 我的测试方法与结果
1. level=0，输出基础三角形，验证基线；
2. level=1、2、4，观察雪花凹凸形态；
3. 页面统计线段数和理论 \(3\times4^n\) 对比校验；
4. 故意写 + 60° 做对比测试，图形向内凹；替换为‑60° 旋转后雪花向外张开。
### 采纳情况及修正结论
全部采纳 AI 给出的三等分点计算、‑60° 旋转矩阵、递归调用顺序；修正后各层级线段计数和理论值匹配，雪花外凸形态正确。

## AI协作2 · 绘图板调试
### 具体错误现象（如一次成功，可先人为注入并恢复一个小错误）
ask‑D 鼠标点击绘图，画出来图形**上下颠倒，Y 轴翻转错误**；鼠标点击画布上方，图形绘制到画布下方。另外挑战功能开发时，HTML 缺少撤销按钮 DOM 元素，JS 撤销逻辑已经写好，页面看不到按钮，点击无效果。
### 我的初步排查
怀疑`pointerToNDC`坐标转换公式问题；猜测 Y 方向没有做翻转；挑战功能怀疑 JS 代码写错撤销逻辑，没有考虑到 DOM 元素缺失也会导致功能完全失效。
### 关键提示词（原文）
canvas getBoundingClientRect 鼠标转 NDC，y 方向颠倒，哪里错；js 写了按钮事件但是页面看不到按钮。
### AI建议与逐项测试
1. 鼠标坐标转换要区分 CSS 布局像素和 canvas 内部真实像素；
2. WebGL NDC 转换 Y 轴翻转公式：`yNDC = 1.0‑2.0*yCanvas/canvas.height`；
3. JS 获取 DOM 元素，**必须 HTML 中存在对应 id 标签，否则事件不会生效**，JS 不会自动生成页面控件。

逐项测试：

1. 补全 Y 翻转公式，测试画布四角点击，图形位置和鼠标位置匹配；
2. 在 HTML 补充撤销、修改选中颜色的控件，刷新页面，按钮正常显示。
### 最终原因及修复证据
1. 原始模板`pointerToNDC`没有 Y 轴翻转，浏览器坐标系 Y 向下，WebGL NDC Y 向上，必须做镜像转换；修复后点击位置与绘制位置完全对应。
2. 挑战任务只修改 JS，忘记增加 HTML 控件，导致按钮不存在；补充 HTML 控件后撤销、修改选中矩形颜色全部可用。

## AI协作3 · 主题整合
### 主题及预期效果
Task‑E 主题：**绽放**；复用 Task‑B 的 Koch 雪花分形、Task‑C 的 requestAnimationFrame 旋转动画；需要新增至少两套自定义几何；实现两套交互：①点击画布移动图案中心；②按钮启停旋转；滑块调节层级与缩放；复位一键恢复全部状态。预期：雪花代表花朵，放射辐条模拟向外绽放光芒，外圈圆环作为装饰边界。
### 两个方案的AI提示词（原文）
WebGL2，主题绽放，复用 Koch 雪花和旋转动画，给出两套方案，对比图元数量，交互难度。
### 方案比较、取舍理由
- 方案 1：Koch 雪花 + 外圈圆环 + 放射辐条与端点节点；交互：滑块缩放、点击移动中心；图元数量可控，性能好，顶点数量不会爆炸，适合实验。
- 方案 2：Koch 雪花 + 多层递归花瓣分支，鼠标拖拽生长；顶点数量指数爆炸，level 高会卡顿，调试复杂。

取舍：选用方案 1，放弃多层花瓣分支；保证性能同时满足题目 “新增两套以上自定义几何” 的硬性要求。
### 实际实现、测试与结果
1. 复用修正完成的`subdivideSegment`科赫细分函数；
2. 新增`makeCircle`生成外圈圆环；循环生成 12 根放射辐条与端点节点；
3. 实现鼠标点击转 NDC，修改`center`偏移实现整体移动；toggle 按钮控制`running`布尔变量启停旋转；
4. 测试：层级滑块、缩放滑块、旋转启停、点击移动、reset 复位全部正常。

>

## 其他AI使用（若有）
工具、提示词及关键修改记录。
> 工具：豆包 AI；

1. Challenge 挑战任务（对象级编辑）：获取实现思路：矩形包围盒命中检测，不使用离屏拾取；对象增加`selected`标记；`objects.pop()`实现单步撤销；
2. 提示词：`Challenge：在Task‑D的基础上支持选择已有矩形、改变被选对象颜色，并实现撤销最后一个对象。须能说明对象数据结构与命中判断；不要求实现离屏颜色ID拾取。`
3. 关键修改记录：
   - 对象结构增加`selected`布尔字段；
   - canvas 点击增加包围盒命中检测；
   - render 渲染实现选中矩形高亮；
   - 新增 undo 撤销、选中矩形改色逻辑；
   - 补充 HTML 页面控件。
4. 测试验证：矩形可选中高亮、单独修改选中矩形颜色、单步撤销功能正常；点和线段不支持选中，满足挑战题目的约束条件。