AI 协作日志

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

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

学号：202412211401029　姓名：韦丰华

## AI协作1 · Koch算法
### 我的目标与初步判断
要把每条边替换成四段，关键是把凸起顶点 R 算对。我先自己推了一下：初始三角形三个顶点是逆时针排的，边沿逆时针方向走的时候外侧应该在右手边，所以 PQ 向量大概要顺时针（右转）60 度再加到 P 上。但我不敢确定是右转还是左转 60 度，怕画出来雪花是凹进去的。

### 关键提示词（原文）
> koch雪花每条边要往外凸，旋转60度的那个方向怎么定？跟初始三角形顶点的顺序有关系吗？我的三角形顶点是逆时针的

### AI关键建议摘要
AI 说旋转方向不能孤立地定，要跟顶点绕行方向绑定：外轮廓逆时针走时，外侧在行进方向的右手边，所以用右转（顺时针）60 度；给我推了公式 x = dx*cos60 + dy*sin60、y = -dx*sin60 + dy*cos60。还提醒我别用某张固定截图判断朝向，让我把 P、Q、R 坐标打印出来自己核对。

### 我的测试方法与结果
我先只拿底边测试，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 的 y 比底边还小，也就是在底边下面，确实是朝外凸。再把 Level 1 跑起来看，是 12 段的小雪花，尖角全部朝外，没有凹陷。后来我又故意改成左转 60 度试了一次，算出 R≈(0,0.043)，跑到三角形内部去了，画出来果然是凹的。

### 采纳情况及修正结论
采纳右转 60 度。结论：凸起朝哪个方向是跟顶点绕行方向绑定的，逆时针绕行配右转 60 度才朝外；打印坐标验证比拼截图判断靠谱得多。

## AI协作2 · 绘图板调试
### 具体错误现象（如一次成功，可先人为注入并恢复一个小错误）
我先把 task-d.js 里 NDC 那行的 Y 翻转临时去掉，改成 yNDC = 2*yCanvas/canvas.height - 1，结果在画布左上角点击，点却出现在左下角，整个上下颠倒了。

### 我的初步排查
我怀疑是算 canvas 内像素时忘了减 rect.top，或者最后转 NDC 时忘了用 1 减。对着代码看了一遍，减 rect.top 那步是对的，所以问题应该出在最后一步的 Y 翻转。

### 关键提示词（原文）
> webgl里鼠标点canvas，我直接用clientY转坐标，结果点上面却画到下面，是不是Y轴要翻一下？公式该怎么写

### AI建议与逐项测试
AI 说 Canvas 的 y 轴向下递增，而 WebGL 的 NDC 的 y 轴向上递增，两者方向相反，所以要写成 1 - 2*yCanvas/canvas.height；另外还提醒我 canvas 被 CSS 缩放时，像素换算要乘 canvas.width/rect.width 的比例，不然窗口一动位置就偏。

我逐条测：① 把 yNDC 恢复成 1-2*yCanvas/canvas.height，再点左上角内部 → 点显示在左上角，对了；② 把浏览器窗口拉窄、再点画布中心 → 位置仍然准确，说明 rect.width/rect.height 的比例换算确实有用；③ 顺手把矩形也点了一遍，先点左上再点右下、以及反过来先右下再左上，两种顺序画出来都一样，说明 min/max 那步取对了。

### 最终原因及修复证据
原因是漏了 Y 轴翻转。修复后：左上角点击的点显示在左上角、左下角点击显示在左下角；窗口缩放后点击位置依然准确；Console 没有报错。

## AI协作3 · 主题整合
### 主题及预期效果
主题定“绽放”。想让 Koch 雪花当花心，外面绕一圈花瓣，最外圈再加一圈花冠连线，整体可以旋转、也能跟着鼠标移动。

### 两个方案的AI提示词（原文）
> 我想用WebGL基本图元做个“绽放”主题：中间一个算法图案，外围加花瓣。给我两个方案，分别说下大概要几种图元、交互难度怎么样

### 方案比较、取舍理由
AI 给了两个方案。
方案一：花瓣用 LINE_LOOP 逐个画椭圆环，6 片花瓣再各画一个环，最外面用一个花冠折线环收口。图元量偏大（每片花瓣约 40 个顶点），但形状一眼能认出是花，交互只要复用旋转和点击移动。
方案二：花瓣用 LINE_STRIP 画扇形边界，顶点少一半，但每片花瓣不好闭合，角度参数要反复调，效果也不稳定。

我选了方案一。理由是花瓣形状直观、代码也直白（就一个 makePetal 函数控制角度和长短半轴），交互能直接复用 Task C 的旋转和 Task D 的坐标转换。方案二虽然省顶点，但稀疏的线段看起来不成形，可解释性也差。方案二我放弃了。

### 实际实现、测试与结果
新增了 makePetal，画出 6 片花瓣环，再加一个花冠连线环，这两处是我的新增几何（代码在 js/task-e.js 的 E1、E2 位置）。交互上除了复用点击移动图案中心，还新增了滚轮缩放，滚轮只改 scale 这个变换状态、不重新生成几何。实际跑起来确认：图案持续旋转、点画布左上角图案中心会移过去、滚轮能放大缩小、层数滑块拉到 1 和 3 图案细节明显不同，“复位”能回到居中状态，Console 全程没有报错。

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

做每道题之前我基本都先让它帮我把题目过一遍，主要是想搞清楚“这题到底要我交什么东西、大概从哪下手”，然后自己写代码。五次大概记一下：

- Task A（Sierpinski 参数化）：我不太确定控件要接到哪一步，就让它先帮我理一遍这题的结构。得到的思路是层次滑块一变就重新生成顶点、重新传 Buffer，颜色只改 uniform、不用动顶点数据，再配一个重置按钮；还提醒我滑块读出来是字符串，别直接当数字算。我就照这个写，值先 Number 再 Math.round、用 Math.min/max 卡到 0~5，自己另外补了句 Number.isFinite 兜底。最后 Level 1 出 3 个三角形、Level 4 出 81 个，跟 3ⁿ 对得上。

- Task B（Koch 雪花）：这题我问的是大概分几步、难点在哪。给的思路是把每条边三等分后换成 A→P→R→Q→B 四段再递归，难点是算向外的凸起点 R，把 PQ 向量转 ±60 度加回 P 就行，方向得看初始三角形顶点的绕行顺序；线段数应该是 3×4ⁿ，可以先把数组长度打印出来核对。我先把底边的 P/Q/R 坐标打出来确认凸起朝外（这步单独记在上面协作 1），再核对 0~4 层长度，得到 3/12/48/192/768。

- Task C（旋转动画与控件）：我问的是动画这部分该怎么组织、几个控件怎么接进去。思路是几何数据别再动、Buffer 只传一次，把角度做成 uniform 每帧只更新它，用 requestAnimationFrame 驱动、一个 paused 开关管暂停、反向就是把方向乘 -1；速度最好用时间戳算帧间隔，别每帧加固定值。我按这个做的，角度用 dt 积分、度数乘 PI/180 转弧度，最后开始/暂停/反向/速度归零/复位都验证过。

- Task D（交互绘图板）：主要问鼠标点击怎么变成图形、两次点击的状态存哪。思路是先把 clientX/clientY 换算成 NDC（要减 canvas 的位置、按 CSS 缩放比例换算、最后 Y 翻转），第一个点存到一个跨事件的变量里；点一次就成，线和矩形等第二次点击，对象统一塞进数组最后重画；切换工具和清空时把没画完的第一个点清掉。我按这个做的，中间漏了 Y 翻转还单独调了一轮（记在上面协作 2）。

- Task E（主题整合）：我问的是这题要交什么、从哪改起。思路是先定一个主题词，从前面的任务里复用至少两样能力，再自己加至少两个新的几何组成部分和一种新交互，最后配一段设计说明，可以直接拿现成的“绽放”框架改。我就按这个改的，新增花瓣环和花冠连线两组几何，交互上加了滚轮缩放，方案比较记在上面协作 3。

## 挑战任务（选做）· 对象级编辑
挑战我选了对象级编辑那个，没选算法拓展。原因是改动都集中在 Task D 一个页面里，不用另开新页面，而且这题要求写得比较清楚（选中矩形、改选中对象的颜色、撤销最后一个对象），我知道自己要干什么，也好测。

做之前我问了两句：第一句是这题大概怎么做、给点提示；第二句是命中判断和“当前选中”这个状态该怎么存、撤销要注意什么。

提示大概是：矩形本来就是我们自己存在数组里的，不用做离屏颜色 ID 拾取，直接用数学判断；选中的对象拿一个变量记着，别去改数组结构；撤销就是把数组最后一个弹出去。更具体的部分：命中判断要从数组末尾往前找，因为后画的在上面，最先命中的就是最上层那个；判断用包围盒，矩形四个角的 x、y 各取最小值和最大值，点落在里面就算命中；选中的对象直接存引用比存下标省事；撤销时要是弹掉的正好是选中的那个，得把选中状态一起清掉，不然就指向一个已经不在数组里的对象了；切换工具和清空的时候也要把选中清掉。

我实际加了三个东西：工具下拉框多了个“选择矩形（挑战）”，配一个 hitTestRect() 做包围盒判断，点中了就把它记在 selected 里；颜色选择器加了监听，有选中对象时改颜色就改它的 color，为了看得出选中了谁，render() 里给选中的矩形四角补画了橙色点；再加了个“撤销上一个”按钮，pop 掉数组最后一个。对象结构没动，还是 {type, vertices, color}，命中判断只对矩形做。代码都在 task-d.html 和 js/task-d.js 里。

效果实测：选中后状态栏会写“已选中矩形，改颜色即可换色”，选中矩形四角有橙点；改颜色只影响选中的那个，别的对象不变；撤销两次对象数从 2 → 1 → 0，画布清空；在空白处点一下选中就取消了；Console 没报错。