AI 协作日志

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

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

## AI协作1 · Koch算法

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

实现 Koch 雪花递归细分，希望线段向外凸起。一开始我不确定向量旋转 60° 的 sin 符号，猜测 s 取正值可以向外凸起，担心符号写反雪花会向内凹陷。需要确认线段 A‑B 沿着三角形边界行走时，向外等边三角形顶点 R 的正确计算方式。

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

Koch 雪花，线段 A‑B 逆时针走向，使用旋转矩阵计算向外凸起 R 点，sin (-60°) 符号，如何区分向内向外。

### AI关键建议摘要

初始三角形顶点为逆时针排列，沿着边行走，向外凸起需要右转‑60°，`s=-Math.sqrt(3)/2`；如果 s 取正数会向左旋转 60°，三角形会凹进雪花内部。可以打印 P、Q、R 坐标，观察 Level1 图案来验证方向。

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

把 s 改为正数运行，生成的图形向内凹陷；再改回`s=-Math.sqrt(3)/2`，Level1 出现向外的三角凸起。同时核对线段数量，Level=2 得到 48 段，符合公式`3*4^level`。

### 采纳情况及修正结论

采纳建议，将`s`设置为`‑Math.sqrt(3)/2`，递归顺序 A→P→R→Q→B 保持不变。图案向外正常，各 level 线段计数与理论值匹配。

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

### 具体错误现象（如一次成功，可先人为注入并恢复一个小错误）

人为制造 bug：把鼠标 NDC 转换中 Y 翻转代码注释掉`yNDC = 1‑2 * yCanvas / canvas.height`，直接写`yNDC = 2 * yCanvas / canvas.height‑1`。现象：鼠标点击画布，绘制出来的图形和鼠标位置上下颠倒。修复后再测试矩形绘制，一开始矩形只生成同一个点，矩形无法展开。

### 我的初步排查

怀疑 canvas 坐标缩放、`getBoundingClientRect()`使用问题；矩形问题怀疑顶点数组没有使用计算完成的 verts。

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

WebGL 绘图板，鼠标 Y 轴颠倒，NDC Y 翻转原理；矩形对角点生成轴对齐矩形，返回顶点数组错误。

### AI建议与逐项测试

1. 检查`getBoundingClientRect()`获取画布偏移；
2. NDC 中 WebGL Y 轴向上，屏幕 Y 轴向下，必须做`1‑2*yCanvas/canvas.height`翻转；
3. 矩形需要把 min/max 计算好的 verts 数组返回，不要重复返回同一个点。
     逐项测试：恢复 Y 翻转代码，鼠标坐标位置正确；修改 createObject 返回 verts 数组，矩形正常绘制。

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

人为删除 Y 轴翻转导致鼠标上下颠倒；矩形 bug 是 return 时没有使用 verts，重复使用对角点 a。修复后点、线段、矩形绘制正常，切换工具会清空未完成第一点击点，清空按钮功能正常。

## AI协作3 · 主题整合

### 主题及预期效果

主题：绽放。复用 Task‑B 的 Koch 雪花分形与 Task‑C 的 requestAnimationFrame 旋转动画；希望增加额外几何图形，支持鼠标点击移动图案中心，做一个动态交互作品。

### 两个方案的AI提示词（原文）

WebGL 实验 E 主题绽放，给出两套实现方案，评估图元数量，交互难度。

### 方案比较、取舍理由

- 方案 1：生成大量小型 Koch 子花环绕主雪花模拟花瓣。
  缺点：level 较高顶点数量爆炸，性能容易卡顿，顶点量大调试麻烦。
- 方案 2：主 Koch 雪花 + 外圈圆环 + 放射线条 + 圆周节点标记；鼠标点击修改图案中心，滑块控制层级、缩放，旋转动画。
  优点：复用 B、C 已有代码，新增几何清晰，顶点数量可控，交互简单容易验证，完全满足实验 E“至少 2 个新增几何、新增交互” 的硬性要求。

取舍：拒绝方案 1，选用方案 2。

### 实际实现、测试与结果

实现圆环、放射线条、圆周节点；修复 drawShape 重复上传 VBO 缓冲区导致图形被覆盖的 bug。交互：滑块调整雪花层级、缩放；按钮控制动画启停；鼠标点击画布移动图案中心为新增交互。点击复位回到初始状态；主题说明文字不超过 200 字。初始截图与点击移动中心后的截图对比，全部几何可以同时渲染，运行控制台无报错。

## 其他AI使用（若有）

工具：豆包 AI
提示词：WebGL 挑战任务 1 绘图板拓展，实现图形选中、修改选中对象颜色、撤销上一个绘制对象，不使用离屏拾取。
关键修改记录：

1.每个绘图对象增加`selected`布尔标记；

2.编写点‑线段距离函数`distancePointSegment`，`pickObject`做简易拾取；

3.渲染时对选中对象做颜色提亮高亮；

4.新增撤销、取消选中、修改选中颜色按钮事件；

5.修复 bug：point、line 对象一开始缺少`selected:false`字段；清空同步置空选中对象引用。
  测试结果：可以鼠标选中点 / 线段 / 矩形，高亮显示；撤销逐个删除图形；选中后可以修改图形颜色，全部功能正常，完成挑战任务 1。