第六单元：绘制与函数 · 用代码画出图形

前面的单元里，你把编程用来指挥军队、寻路、找目标。这一单元画风一转——你要拿到花之戒指，把英雄当成一支魔法画笔，用代码在大地上画出圆、方，乃至任何你想要的图案！这是一次把数学、循环、函数融会贯通的创意实践，也让你真切体会到"编程不只是解题，更是创造"。

6.1.1 英雄就是一支画笔（The Hero Is a Pen）

6.1.1.1 走到哪，花开到哪 Flowers bloom where the hero walks

代码绘图的核心心智模型很简单：英雄走过的路径，就是画出来的线条。当"绘花"开启时，英雄每移动一步，脚下就绽放花朵，连成线；当"绘花"关闭时，英雄照样移动，但不留痕迹——相当于提起画笔在纸上空移。想画什么图形，本质就是算出图形轮廓上一连串的点，让英雄依次走过它们。

6.1.2 花之戒指的三件工具（Three Tools of the Flower Ring）

6.1.2.1 移动、开关、上色 Move, toggle, color

6.2.1 toggleFlowers 开关（The Drawing Toggle）

6.2.1.1 先移动到起点，再落笔 Move to the start, then start drawing

toggleFlowers(True/False) 就是画笔的"落/提"开关。这个开关有一个非常重要的用法：在移动到图形起点的途中，要先关掉绘花，免得从旧位置到起点的这段"空移"也画上多余的线；到了起点再打开绘花，正式开始画。观察 drawCircle 的开头就是这个套路。

# 提笔 → 走到起点 → 落笔，避免画出多余连线
hero.toggleFlowers(False)   # 提笔（空移不留痕）
hero.moveXY(startX, startY)   # 移动到图形起点
hero.toggleFlowers(True)    # 落笔，开始正式作画

6.2.2 setFlowerColor 上色（Setting the Color）

6.2.2.1 换一种颜色，画下一个图形 Change color before the next shape

hero.setFlowerColor("颜色") 决定接下来画的花是什么颜色，可选 "pink"、"red"、"blue"、"purple"、"yellow"、"white"，还有随机的 "random"。设色是"持续生效"的——设一次，之后所有花都是这个色，直到你再次改它。所以画多个不同色的图形时，在每个图形开画前先设好颜色。

hero.setFlowerColor("red")      # 先设红色
drawCircle(redX.x, redX.y, 10)  # 这个圆是红的

hero.setFlowerColor("purple")   # 改成紫色
drawSquare(whiteX.x, whiteX.y, 10)  # 这个方是紫的

6.3.1 圆是无数个点（A Circle Is Many Points）

6.3.1.1 用一圈密集的点近似圆 Approximating a circle with points

计算机画不出"真正光滑"的圆，它的办法是：沿着圆周取足够多的点，用短直线段把它们连起来——点够密，看起来就是圆滑的圆。这正是第五单元"极坐标转直角坐标"的直接应用：圆上任意一点，都由"圆心 + 半径 × (cos角度, sin角度)"确定。让角度从 0 转到一整圈（2π），描过的点就连成一个圆。

6.3.2 角度递增取点（Incrementing the Angle）

6.3.2.1 while 让角度一圈转到底 The while loop sweeps the angle

drawCircle 的核心是一个 while 循环：让角度 angle 从 0 开始，每次循环加一点点（+= 0.2），直到转满一整圈（angle <= Math.PI * 2）。每一步都用 cos、sin 算出当前角度对应的圆周点坐标，再 moveXY 过去。角度像时针一样扫过一圈，英雄的足迹就描出了整个圆。

def drawCircle(x, y, size):
    angle = 0
    hero.toggleFlowers(False)   # 先提笔移到起点
    while angle <= Math.PI * 2:   # 转满一整圈（360°）
        newX = x + (size * Math.cos(angle))   # 当前角度的圆周点
        newY = y + (size * Math.sin(angle))
        hero.moveXY(newX, newY)            # 走过去，连成弧
        hero.toggleFlowers(True)          # 到第一个点后落笔
        angle += 0.2                        # 角度递增一步

6.3.3 步长决定精细度（Step Size Controls Smoothness）

6.3.3.1 加得越小，圆越圆 Smaller steps, smoother curve

那句 angle += 0.2 里的 0.2 是步长，它决定了圆的精细度。步长越小，一圈取的点越多，线段越短，圆看起来越光滑；步长越大，点越稀疏，圆会变成带棱角的多边形。这是"用离散的点近似连续曲线"时永恒的权衡：更精细 vs 更省步数。

angle += 0.1
# 一圈约 63 个点
# 圆润顺滑

angle += 1.0
# 一圈仅约 7 个点
# 更像多边形

6.4.1 四角坐标（The Four Corners）

6.4.1.1 用"中心 ± 半边长"算出四个角 Corners from center ± half-side

正方形不用循环——它只有四个角，直接顺序走过去连线即可。诀窍是先算半边长 cornerOffset = size / 2，再以中心 (x, y) 为基准，用"加减半边长"的四种组合得到四个角：左下 (x-半, y-半)、右下 (x+半, y-半)、右上 (x+半, y+半)、左上 (x-半, y+半)。

6.4.2 依次连线成方（Connecting the Corners）

6.4.2.1 提笔到起点，落笔绕一圈回到起点 Pen up to start, then trace the loop

画法很直接：先提笔移到第一个角（左下），落笔，再依次 moveXY 到其余三个角，最后回到起点闭合。四条边就画好了。注意最后一定要走回第一个角，否则正方形会缺一条边、闭不上口。

def drawSquare(x, y, size):
    hero.toggleFlowers(False)
    cornerOffset = size / 2            # 半边长
    hero.moveXY(x - cornerOffset, y - cornerOffset)  # 提笔到左下角
    hero.toggleFlowers(True)             # 落笔
    hero.moveXY(x + cornerOffset, y - cornerOffset)  # → 右下
    hero.moveXY(x + cornerOffset, y + cornerOffset)  # → 右上
    hero.moveXY(x - cornerOffset, y + cornerOffset)  # → 左上
    hero.moveXY(x - cornerOffset, y - cornerOffset)  # → 回左下，闭合

6.5.1 中心与大小（Center and Size）

6.5.1.1 一个函数，画到任意位置、任意大小 One function, any place and size

drawCircle(x, y, size) 和 drawSquare(x, y, size) 都带三个参数：x、y 是图形中心，size 是图形大小（圆的半径 / 方的边长）。这就是参数的威力——同一个函数，换不同的参数，就能在任意位置画出任意大小的图形，不必为每个图形重写一遍绘图逻辑。

drawCircle(28, 36, 10)   # 在(28,36)画半径10的圆
drawCircle(50, 50, 5)    # 同一函数，换个位置画个小圆
drawSquare(44, 36, 20)   # 画个大方块

这一节聚焦关卡的策略、思路与算法设计，只展示用于说明的关键片段，完整通关程序请你自己动手完成。

关卡 · 花的几何学

🌷 花的几何学 —— 画圆、画方，随心创作

图2：花的几何学——手握花之戒指，在红 X 处画圆、白 X 处画方，尽情用花朵作画

策略：先按要求画两图，再自由发挥

本关是一个轻松的创意练习关，没有敌人。通关要求很明确：在 redX 坐标处画一个大小为 10 的圆，在 whiteX 坐标处画一个大小为 10 的方。关卡已经把 drawCircle 和 drawSquare 两个函数写好给你，你只需正确地设色并调用它们；完成后还可以随意画任何你喜欢的图案。

思路拆解：设色 + 调用

算法思路非常简单，就四步。第一，选颜色：hero.setFlowerColor("red")。第二，画圆：把 redX 的 x、y 和大小 10 传给 drawCircle(redX.x, redX.y, 10)。第三，换颜色：hero.setFlowerColor("purple")。第四，画方：drawSquare(whiteX.x, whiteX.y, 10)。关键点是记得在每个图形前先设好颜色，以及正确地从坐标对象里取出 .x、.y。

# 关键片段：设色 → 调用绘图函数
redX = {"x": 28, "y": 36}
whiteX = {"x": 44, "y": 36}

hero.setFlowerColor("red")          # 选红色
drawCircle(redX.x, redX.y, 10)       # 红 X 处画圆

hero.setFlowerColor("purple")       # 换紫色
drawSquare(whiteX.x, whiteX.y, 10)   # 白 X 处画方

进阶创作思路：通关后不妨试试组合玩法：用 while 循环+取余在一排画好几个不同颜色的圆；把 drawCircle 的 size 由小到大循环，画出同心圆；或在一个大圆的圆周上，每隔一段角度画一个小圆，拼出一朵"花"。关卡也建议你去 Mountain Flower Grove 继续练习绘画技巧。

把图形当积木：复杂图案都是简单图形的组合。想画一张笑脸？就是"一个大圆（脸）+ 两个小圆（眼）+ 一段圆弧（嘴）"。学会用 drawCircle、drawSquare 这些"积木"和参数控制位置大小，你就能搭出无穷无尽的图案——这就是用函数组合去构建复杂事物的编程思维。

6.7.1 绘图与循环的典型坑（Pitfalls）

6.7.1.1 画图相关的常见问题 Typical issues with drawing & loops

图3：忘递增导致死循环、忘落笔画不出线、忘换色、坐标取值错，是本单元最常见的失误