1. 项目缘起当图形编程遇上经典符号最近在整理一些图形化编程的教学案例想找一些既有文化内涵又能体现编程逻辑和数学思维的素材。翻来覆去最后把目光落在了“奥林匹克五环”上。这个符号太经典了几乎无人不知它由五个等大的圆环相交而成环环相扣象征着五大洲的团结。乍一看用编程画出来似乎不难不就是画五个圆嘛。但真正动手在Mind这类图形化编程环境里实现时你会发现里面藏着不少门道五个圆环的圆心位置怎么精确计算环与环之间的相交部分如何实现“扣”在一起的效果而不是简单的叠加颜色填充的顺序会不会影响最终效果这些细节恰恰是锻炼编程思维和数学应用能力的绝佳机会。这个项目非常适合编程初学者尤其是对图形、数学和逻辑感兴趣的朋友。通过复现“奥林匹克五环”你不仅能掌握图形化编程中绘制、颜色、坐标等基础模块的使用更能深入理解平面几何中圆的位置关系以及编程里“分而治之”、模块化构建复杂图形的思想。整个过程就像搭积木但每一块“积木”的摆放都需要经过计算和思考。下面我就把自己从构思到实现的完整过程包括中间踩过的坑和总结的技巧毫无保留地分享出来。2. 核心原理拆解环环相扣的几何与色彩在开始动手写代码之前我们必须先把“奥林匹克五环”这个图形从视觉符号翻译成编程和数学语言。这决定了我们后续所有操作的逻辑基础。2.1 图形结构的数学描述奥林匹克五环的标准结构可以分解为以下几个关键几何约束五个等圆五个圆环的半径R必须完全相同。三上两下的两行布局上面一行三个圆下面一行两个圆。上下两行圆的圆心连线是水平的。精确的相交相邻的两个圆环它们的圆心距d是一个固定值这个值决定了环“扣”在一起的紧密程度。标准图形中圆心距略小于圆的直径2R使得两个圆相交形成环环相扣的视觉效果。通常这个比例关系是d R * 1.6到R * 1.8之间我们可以根据画布大小进行调整。对称性整个图形是关于垂直中轴线对称的。这意味着我们只需要计算出一半圆心的位置另一半可以通过对称得到。基于这些约束我们可以建立坐标系。假设画布中心为坐标原点(0, 0)。设圆的半径为R圆心距为dd 2R。那么上排中间圆通常是蓝色环的圆心可以放在(0, -Y_offset)其中Y_offset是一个正数表示上排圆相对于原点的垂直偏移。上排左圆圆心为(-d, -Y_offset)上排右圆圆心为(d, -Y_offset)。下排左圆圆心为(-d/2, Y_offset)下排右圆圆心为(d/2, Y_offset)。这样所有圆心的位置就都可以通过R、d和Y_offset这三个参数计算出来了。Y_offset通常取R的 1.2 到 1.5 倍以保证上下两排圆既有重叠又不至于挤在一起。2.2 颜色填充的逻辑与陷阱五环的颜色顺序从左到右从上到下是蓝、黄、黑、绿、红。这是一个国际惯例必须遵守。在图形化编程中填充颜色常见的做法是画一个圆然后设置其填充色。但这里有一个关键的陷阱如果简单地按照“画圆 - 设置颜色”的顺序从上到下、从左到右画完五个圆会发生什么你会发现后画的圆会覆盖在先画的圆之上。在五环相交的部分后画圆的颜色会“压住”先画圆的颜色这破坏了环环相扣、彼此交叠的视觉效果。在真实的五环标志中环的相交处会呈现出“一上一下”的穿插感颜色不会互相覆盖。因此绘制顺序至关重要。一个可靠的策略是先画所有圆的轮廓不填充然后再按照特定的、能体现交叠关系的顺序进行颜色填充。更高级的做法是利用图层或“遮罩”概念但在基础的图形化编程中我们可以采用一种“近似模拟”的方法调整绘制顺序让视觉上看起来是交错的。例如一种常见的绘制顺序是先画下排左绿、下排右红再画上排左蓝、上排中黄、上排右黑。这样下排的环有一部分会被上排的环挡住模拟出“扣”的效果。但这种方法并不完美对于正中心的交错点模拟可能不准确。注意在Scratch或基于其内核的Mind中角色这里是圆的图层顺序由“移到最前面/最后面”积木控制。我们可以通过编程动态调整五个圆环角色的图层顺序来精确模拟交叠关系这比单纯调整绘制顺序更可控。这是本项目的一个进阶技巧点。2.3 工具选型为什么是MindMind是一款基于Scratch 3.0开发的国产图形化编程软件它完美继承了Scratch低门槛、可视化的特点同时增强了对硬件如Arduino、micro:bit和人工智能模型的支持。选择它来实现这个项目基于以下几点考虑可视化编程聚焦逻辑所有指令都是积木块拖拽即可编程。这让我们能把全部精力集中在“如何用逻辑描述五环图形”上而不是纠缠于语法错误。强大的画笔和图形功能Mind的“画笔”和“外观”模块提供了丰富的绘图指令如“落笔”、“抬笔”、“设置画笔颜色/粗细”、“图章”等足以完成圆形绘制和填充。精确的坐标控制舞台是一个480x360的坐标系中心为(0,0)。我们可以通过“移到x: () y: ()”积木精确控制角色作为我们的“画笔”的位置从而实现前述的几何计算。角色与克隆体我们可以创建一个“圆环”角色作为模板然后通过“克隆”功能生成五个实例分别控制它们的位置和颜色。这样代码结构清晰易于管理。易于教学与分享完成的作品可以导出为可执行文件或直接在Mind社区分享非常适合作为教学案例或兴趣作品。3. 分步实现从零搭建五环模型理论清晰后我们进入实战环节。我会假设你使用的是Mind的最新版本操作界面可能略有不同但核心积木块是一致的。3.1 第一步初始化舞台与参数首先打开Mind创建一个新项目。我们删除默认的小猫角色因为我们不需要它。然后我们需要一个“画笔”角色来绘图。通常我们可以绘制一个非常小的圆形角色或者直接使用“画笔”扩展。更优雅的方法是创建一个“圆环”角色模板。在角色区点击“绘制”新建一个角色。在造型编辑器中用椭圆工具按住Shift键画一个很小的实心圆比如半径5像素。这个圆本身不重要它只是我们后续用来“图章”或作为克隆体本体的一个点。将其颜色设为黑色。将这个角色命名为“RingTemplate”。接下来进行全局初始化。我们点击背景舞台为其编写代码。这里的代码将在绿旗被点击时执行负责设置舞台和全局变量。当绿旗被点击 隐藏 // 隐藏舞台上的所有角色等待我们通过克隆生成 全部擦除 // 清空画笔痕迹 设置画笔颜色为 [#000000] // 初始画笔色用于画轮廓 设置画笔粗细为 (5) // 圆环的线条粗细可以调整然后建立我们之前讨论的核心参数变量。点击“变量”模块创建三个变量半径 R圆心距 d纵向偏移 Y_offset在绿旗代码中继续添加当绿旗被点击 ... 将 [半径 R] 设为 (60) // 根据舞台大小调整60是个不错的起始值 将 [圆心距 d] 设为 ([半径 R] * (1.7)) // 1.7是经验值能产生较好的相交效果 将 [纵向偏移 Y_offset] 设为 ([半径 R] * (1.3)) // 控制上下排间距这些变量将作为我们整个图形的“蓝图”修改它们可以轻松调整五环的大小和疏密。3.2 第二步计算圆心坐标并定位现在我们需要让“RingTemplate”角色计算出五个圆心的坐标并分别到达这些位置去“绘制”圆环。我们通过“克隆”自己来实现。为“RingTemplate”角色编写代码。首先定义一个自定义积木函数来计算圆心坐标这样逻辑更清晰。Mind中可以在“自制积木”里创建。创建一个名为计算圆心坐标的自制积木它需要输入“行索引”和“列索引”或者环的编号然后计算出对应的 (x, y) 坐标。不过更直接的方法是我们根据五个环的固定位置用一个列表来存储它们的坐标和颜色信息。我们先创建两个列表圆心x坐标和圆心y坐标再创建一个环颜色列表。在绿旗代码中初始化这些列表当绿旗被点击 ... 删除 [圆心x坐标 v] 的全部项目 删除 [圆心y坐标 v] 的全部项目 删除 [环颜色 v] 的全部项目然后根据我们第2.1节的公式计算出五个圆心的坐标并加入到列表中。同时按顺序蓝、黄、黑、绿、红加入颜色值。环1上左蓝x -d, y -Y_offset环2上中黄x 0, y -Y_offset环3上右黑x d, y -Y_offset环4下左绿x -d/2, y Y_offset环5下右红x d/2, y Y_offset在Mind中计算过程如下当绿旗被点击 ... 将 [圆心x坐标 v] 的第 (1) 项替换为 (() - ([圆心距 d])) // 上左蓝环x 将 [圆心y坐标 v] 的第 (1) 项替换为 (() - ([纵向偏移 Y_offset])) // 上左蓝环y 将 [环颜色 v] 的第 (1) 项替换为 [#0000FF] // 蓝色 将 [圆心x坐标 v] 的第 (2) 项替换为 (0) // 上中黄环x 将 [圆心y坐标 v] 的第 (2) 项替换为 (() - ([纵向偏移 Y_offset])) // 上中黄环y 将 [环颜色 v] 的第 (2) 项替换为 [#FFFF00] // 黄色 ... // 依次类推填入另外三个环的数据注意Mind的列表索引从1开始。确保你的计算准确无误可以先用“说”积木把计算出的坐标打印出来核对一下。3.3 第三步绘制圆环轮廓与填充坐标准备就绪现在开始绘制。我们让“RingTemplate”角色在接收到一个广播消息例如“开始画环”后执行克隆操作。为“RingTemplate”编写另一段代码当接收到 [开始画环 v] 重复执行 (5) 次 将 [i v] 设为 (1) // 使用变量i作为循环计数器 等待 (0.1) 秒 // 微小延迟避免克隆体处理冲突 克隆 [自己 v] 将 [i v] 增加 (1) 结束当作为克隆体启动时每个克隆体需要做三件事1. 移动到自己的位置2. 画一个圆3. 给自己上色。克隆体的代码是关键当作为克隆体启动时 移动到 x: (圆心x坐标的第 (i) 项) y: (圆心y坐标的第 (i) 项) // 去到指定圆心 面向 (90) 方向 // 确保角色朝向右侧便于画圆 落笔 重复执行 (36) 次 // 画一个正圆360度除以10度步长 移动 (([圆周率 v] * (2) * (半径 R)) / (36)) 步 // 计算圆周长分36步走完 右转 (10) 度 结束 抬笔这段代码利用“画笔”模块通过让角色移动一小段距离并旋转循环36次每次转10度画出一个近似正圆。移动的步长是(2 * π * R) / 36即圆周长被等分为36份。画完轮廓后我们需要填充颜色。这里有一个问题直接用“将画笔颜色设为”并填充会覆盖轮廓线。更好的方法是利用角色的“颜色特效”或“图章”功能。但为了模拟环的“实心”效果我们可以采用一个技巧画一个稍小的同心实心圆作为填充。在克隆体代码中画完轮廓后继续... 抬笔 将画笔颜色设为 (环颜色 的第 (i) 项) // 设置为对应的环颜色 设置画笔粗细为 (([半径 R] * (2)) - (5)) // 粗细设为略小于直径确保填充在轮廓内 落笔 重复执行 (1) 次 // 其实不需要循环移动0步但落笔会在当前点留下一个“点” 移动 (0) 步 结束 抬笔 // 这个“点”会因为画笔很粗而变成一个实心圆点提示移动0步结合很粗的画笔会在原地画出一个以画笔颜色填充的、大小约等于画笔粗细的实心圆。通过精确控制画笔粗细我们可以让这个实心圆刚好填满轮廓内部。(半径 R * 2) - 5中的5是轮廓线的粗细需要根据你之前设置的轮廓粗细进行微调。3.4 第四步处理环的交叠与图层顺序按照上述方法画出的五个环虽然颜色和位置对了但交叠关系是错的——后画的环会完全盖住先画的环。为了解决这个问题我们需要控制克隆体的图层顺序。Mind中每个角色包括克隆体都有“图层”的概念。我们可以使用“移到最前面”和“移到最后面”积木。策略是在画每个环之前就确定它应该在哪一层。一个模拟标准五环交叠关系的顺序是从底到顶下排左环绿下排右环红上排左环蓝上排中环黄上排右环黑我们可以修改克隆体的代码在“当作为克隆体启动时”一开始就根据环的编号i来设定图层。但是Mind的克隆体不能直接使用“移到最前面/最后面”因为这会影响到所有克隆体。一个变通的方法是不依赖克隆体而是创建五个独立的角色。虽然代码量会复制粘贴但图层控制绝对精准。方法B推荐更清晰可控创建五个独立角色复制“RingTemplate”角色四次得到一共五个角色分别命名为“BlueRing”、“YellowRing”、“BlackRing”、“GreenRing”、“RedRing”。为每个角色单独编写代码硬编码其位置、颜色和绘制逻辑。在每个角色的代码中在“当绿旗被点击”后第一时间使用“移到最前面”或“移到最后面”来确定其图层。例如绿环和红环的代码里先执行“移到最前面”蓝环、黄环、黑环的代码里先执行“移到最前面”但通过控制代码执行顺序可以用“等待”积木确保绿、红先画并处于底层蓝、黄、黑后画并处于上层。虽然这种方法代码重复但对于初学者理解图层和绘制顺序的概念非常有帮助。在实际操作中你可以先为“BlueRing”写好完整的绘制代码包括移动、画轮廓、填充然后复制这个角色和代码再修改其他环的坐标、颜色和图层控制语句即可。4. 优化、调试与扩展思考基本的五环画出来后我们还可以让它更完美并思考如何举一反三。4.1 常见问题与调试技巧问题一圆环不圆像多边形。原因在画圆的循环中重复次数太少例如只重复了10次每一步转动的角度太大例如36度。解决增加重复次数减小每次转动的角度。重复执行36次配合右转10度是常用组合。你也可以尝试重复执行72次和右转5度圆会更平滑但计算量稍大。问题二环与环没有相交或者相交太多成了实心块。原因圆心距 d的参数设置不合理。d大于或等于2R则相离或相切d过小则重叠部分过多。解决调整d R * 系数中的系数。反复测试系数在1.6到1.8之间的效果找到视觉上最舒服的值。可以在舞台上创建滑块变量来实时调整系数观察变化。问题三填充色溢出了轮廓或者没填满。原因填充时设置的“画笔粗细”值不对。太粗会溢出太细则填不满。解决填充画笔粗细应略小于圆的直径。公式画笔粗细 (2 * R) - (轮廓线粗细)。如果轮廓线粗细是5那么填充粗细可以设为(2*R)-5。同样可以通过变量来微调。问题四图层顺序混乱交叠效果不对。原因角色代码的执行顺序有随机性或者“移到最前面/最后面”的时机不对。解决如果使用独立角色法确保在“当绿旗被点击”后第一个积木就是图层控制积木。并且通过“等待”积木来严格排序。例如让绿环和红环的代码立即执行蓝环等待0.05秒黄环等待0.1秒黑环等待0.15秒。这样能强制形成绘制顺序。4.2 项目优化让五环动起来静态的五环已经完成但编程的魅力在于让事物互动起来。这里有几个简单的动画思路逐个绘制动画不让五个环同时出现而是让它们按顺序比如按颜色顺序一个个画出来。在每个环的绘制代码前加上“等待”积木即可。颜色渐变/闪烁利用“将颜色特效增加”积木在画完后让五环的颜色循环变化产生霓虹灯效果。可以为每个环设置不同的变化速度和起始点。旋转的五环这不是让单个环自转而是让整个五环图案绕中心点旋转。这需要一些数学知识我们不再直接计算静态的圆心坐标而是计算每个环相对于图案中心的坐标然后在循环中不断更新这个相对坐标的旋转角度再重新定位每个环。这涉及到极坐标转换是很好的进阶练习。交互式五环让鼠标或键盘可以控制五环。例如按左右键调整圆心距 d按上下键调整半径 R实时观察图形变化。这需要用到“当按下某键”的事件并修改变量值然后重新绘制。重新绘制前务必记得“全部擦除”。4.3 从五环到复杂图形思维迁移完成这个项目后你的收获远不止一个五环图案。你掌握了一套用图形化编程构建复杂对称图形的方法论数学建模将视觉图形转化为数学参数坐标、半径、角度、距离。参数化设计使用变量来控制图形属性一点修改全局生效。模块化与克隆将重复元素圆环抽象为模板通过克隆批量生成提高代码复用率。图层与顺序管理理解图形元素的上下关系并通过编程逻辑控制渲染顺序。调试与迭代通过观察输出、调整参数、解决视觉错误不断优化作品。你可以用这套方法去挑战更复杂的图形比如雪花分形、曼陀罗图案、公司Logo甚至是简单的动画角色。核心思想都是一样的分解、计算、定位、绘制、组合。下次当你看到一个有趣的图形时不妨先在心里把它拆解成基本的几何图形和位置关系然后想想如果用今天学到的这些积木该怎么把它“拼”出来。这个过程就是 computational thinking计算思维最生动的体现。