1. 项目概述当画笔遇见代码几年前我第一次把一块小小的开发板递到一个孩子手里告诉他这能“画”出屏幕上的彩虹时他眼里的光我至今记得。那是我第一次意识到编程启蒙的钥匙或许不是一行行冰冷的文本而是连接虚拟与现实的“魔法棒”。今天要聊的Scratch 3.0和Circuit Playground Express (CPX)就是这样一套绝佳的“魔法”组合。Scratch 3.0作为目前最主流的可视化编程环境彻底摒弃了传统编程的语法门槛让你像搭积木一样构建逻辑而CPX则是一个集成了灯光、声音、运动传感器的微型硬件平台让代码的触角延伸到物理世界。这个项目的核心就是打通这两者让你亲手制作的“画笔”在屏幕上挥洒创意。我们不再用鼠标拖拽而是通过倾斜、摇晃一块真实的硬件来控制屏幕上的画笔移动、切换颜色和清空画布。这不仅仅是完成一个绘画程序更是一次完整的创意计算思维实践从软件逻辑的构建Scratch编程到硬件行为的定义MakeCode编程再到两者间通信协议的实现键盘鼠标模拟。整个过程你会清晰地看到一个创意是如何被拆解成逻辑模块又如何通过软硬件协作变为现实的。无论你是教育工作者寻找跨学科项目还是编程爱好者想体验物理计算的乐趣亦或是家长希望与孩子进行高质量的互动创作这个项目都能提供一个扎实、有趣且充满成就感的起点。2. 核心工具解析为何是Scratch 3.0与CPX在开始动手前我们有必要深入了解一下手中的“武器”。选择它们并非偶然而是基于其独特的设计理念和功能特性能够完美匹配我们“低门槛、高创意、强交互”的项目目标。2.1 Scratch 3.0可视化编程的集大成者Scratch由MIT媒体实验室终身幼儿园团队开发其3.0版本是一个里程碑式的更新。它的核心价值在于将抽象的编程概念具象化。变量不再是x或score而是一个可以拖动、可以显示/隐藏的盒子循环不是for或while而是一个“C”形的黄色积木块你可以把要重复的动作塞进去。技术架构的进化Scratch 3.0从之前依赖Adobe Flash转向了基于HTML5和JavaScript (React)的全新架构。这个转变意义重大。首先它使得Scratch可以在几乎任何现代浏览器中运行包括平板电脑和手机尽管手机端编辑功能有限极大地扩展了可访问性。其次它为扩展Extensions功能提供了更强大的支持。扩展就像给Scratch安装的“插件”本次项目中用到的“画笔”扩展以及未来可以连接的micro:bit、乐高机器人等硬件支持都是通过这个机制实现的。这意味着Scratch从一个封闭的创作工具变成了一个开放的、可连接真实世界的平台。界面设计的逻辑Scratch的界面分区明确符合创作流。左侧的积木区按功能颜色分类清晰明了中间的脚本区是我们的主战场所有逻辑在这里拼接右侧的舞台区实时呈现结果提供即时的正反馈。这种设计降低了认知负荷让创作者能专注于逻辑本身而非工具操作。2.2 Circuit Playground Express口袋里的物理实验室如果说Scratch是大脑那么CPX就是感知和执行世界的手脚。Adafruit出品的这块开发板是入门物理计算的“瑞士军刀”。丰富的内置传感器与外设这是选择CPX的核心原因。它在一个硬币大小的板子上集成了10颗可编程RGB NeoPixel灯环我们将用它作为可视化的调色板。运动传感器加速度计本项目关键用于检测板子的倾斜角度从而控制鼠标移动。按键与电容触摸引脚两个实体按键A/B和多个触摸引脚我们使用A键来触发换色。声音传感器与蜂鸣器可用于交互反馈本项目未使用但为扩展留足空间。红外收发器、温度传感器、光传感器等。开箱即用的友好性CPX支持USB即插即用被电脑识别为U盘CPLAYBOOT程序文件拖拽进去即可运行无需安装复杂的驱动或IDE这对初学者极其友好。它同时兼容MakeCode块编程、CircuitPython文本编程和Arduino学习路径可以无缝过渡。2.3 MakeCode连接软硬件的桥梁微软开发的MakeCode可以看作是“硬件版的Scratch”。它采用与Scratch极其相似的块编程界面极大降低了硬件编程的门槛。在本项目中它的核心作用是将CPX的物理动作倾斜、按键、摇晃翻译成电脑能理解的“键盘和鼠标事件”。关键扩展键盘与鼠标MakeCode本身并不具备直接控制主机电脑的能力。我们需要为其添加“键盘”和“鼠标”扩展。添加后积木区就会出现诸如键盘 发送按键 “c”和鼠标 移动 x 0 y 0这样的积木。CPX运行了这样的程序后就会通过USB接口模拟成一个标准的HID人机接口设备就像真正的键盘和鼠标一样向电脑发送指令。这是本项目实现软硬件交互的技术基石。注意在使用键盘/鼠标扩展时请确保你的创作环境安全。因为CPX获得了模拟输入设备的能力请避免在编程或测试时让代码意外地向文本编辑器或系统发送大量按键命令。一个好的习惯是在测试时将焦点放在Scratch的浏览器标签页或一个空的文本框中。3. 从零构建Scratch绘画程序理解了工具我们开始构建项目的软件部分——一个由键盘和鼠标控制的数字绘画程序。这个程序本身就是一个完整的Scratch项目即使没有硬件你也可以用键盘和鼠标来体验。3.1 创建与定制画笔精灵在Scratch中一切互动元素都始于“精灵”。我们的画笔也不例外。清空与创建进入Scratch编辑器后默认有一只小猫精灵。在右下角精灵列表将鼠标悬停在小猫图标上点击出现的“X”删除它。然后点击下方“选择一个精灵”按钮中的“绘制”图标画笔形状创建一个全新、空白的精灵。设计画笔笔触点击左上角“造型”标签页。为了获得清晰的绘画点我们绘制一个简单的实心圆。选择“圆形”工具在填充颜色中选择一个你喜欢的颜色比如蓝色将“轮廓”设置为无点击色块上的红斜杠图标。在画布中央拖动绘制一个小圆点。这个圆点将代表画笔的笔尖。命名与初始化在精灵列表区将新精灵的名字从“Sprite1”改为“Pen”或“画笔”。然后在“代码”标签页中我们开始为其编程。首先我们需要让画笔在程序开始时归位并初始化状态。拖入以下积木当 ⚑ 被点击 移到 x:(0) y:(0) // 移动到舞台中心 显示 // 确保画笔是可见的 将笔的颜色设为 [#0000FF] // 设定初始画笔颜色例如蓝色这里移到 x: (0) y: (0)是一个非常重要的初始化操作。它确保了每次程序重启画笔都从画布中心开始提供了可重复的起点。3.2 引入画笔扩展与核心变量设置Scratch的画笔功能默认不显示需要作为扩展添加。添加画笔扩展在积木区左下角点击蓝色齿轮状的“添加扩展”按钮。在弹出的扩展库中选择“画笔”。添加后积木区会多出一组深绿色的“画笔”分类积木。建立控制变量我们需要两个变量来控制绘画的精细度和颜色。步长这个变量决定画笔每次移动的距离直接影响绘画线条的流畅度和对鼠标或后续硬件移动的响应灵敏度。数值越小线条越平滑但可能滞后数值越大响应快但线条可能不平滑。我们初始设为3。颜色编号这是一个计数器用于在几种预设颜色间循环切换。我们初始设为0。 在“变量”分类中点击“建立一个变量”分别创建这两个变量。然后在画笔的初始化代码后添加当 ⚑ 被点击 ... (之前的初始化积木) 将 [步长 v] 设为 (3) // 初始化移动步长 将 [颜色编号 v] 设为 (0) // 初始化颜色索引 全部擦除 // 清空之前的所有画笔痕迹 落笔 // 开始绘画3.3 实现画笔跟随与颜色逻辑核心的绘画逻辑在一个“无限循环”中实现让画笔持续跟随指针并响应按键。构建主循环框架当 ⚑ 被点击 ... (之前的初始化积木和变量设置) 重复执行 面向 [鼠标指针 v] // 画笔始终朝向鼠标指针 移动 (步长) 步 // 朝鼠标指针方向移动“步长”距离 end这两行代码构成了绘画的基础持续转向鼠标并移动。面向 [鼠标指针]确保了画笔的移动方向是追随指针的移动 (步长) 步则控制了追随的速度。实现颜色切换机制我们需要让按下键盘某个键比如‘c’时画笔颜色按预定序列变化。这需要在循环内加入条件判断。假设我们想循环使用红、黄、绿、蓝、紫五种颜色。重复执行 面向 [鼠标指针 v] 移动 (步长) 步 如果 (颜色编号) [0] 那么 将笔的颜色设为 [#FF0000] // 红色 否则 如果 (颜色编号) [1] 那么 将笔的颜色设为 [#FFFF00] // 黄色 否则 如果 (颜色编号) [2] 那么 将笔的颜色设为 [#00FF00] // 绿色 否则 如果 (颜色编号) [3] 那么 将笔的颜色设为 [#0000FF] // 蓝色 否则 如果 (颜色编号) [4] 那么 将笔的颜色设为 [#FF00FF] // 紫色 否则 将 [颜色编号 v] 设为 (0) // 重置循环 结束 结束 结束 结束 结束 end这段嵌套的如果...那么逻辑根据颜色编号的值将画笔切换到对应的颜色。当编号超过4即用完所有颜色则将其重置为0实现循环。绑定键盘事件最后我们需要创建独立的键盘事件处理器来修改变量的值。当按下 [c v] 键 // 切换颜色 将 [颜色编号 v] 增加 (1) 当按下 [e v] 键 // 擦除画布 全部擦除至此一个完整的、可用键盘控制的Scratch绘画程序就完成了。点击绿旗移动鼠标即可绘画按‘c’换色按‘e’清空。你可以先测试一下感受软件的交互逻辑。4. 为硬件注入灵魂MakeCode编程详解软件部分准备就绪现在我们来“教”CPX如何扮演鼠标和键盘的角色。我们将使用MakeCode for Adafruit来编写硬件端的逻辑。4.1 项目初始化与扩展添加创建新项目访问makecode.adafruit.com点击“新建项目”。你会看到一个与Scratch高度相似的界面。添加关键扩展这是至关重要的一步。点击积木区下方的“高级”选择“扩展”。在搜索框中分别搜索并添加以下两个扩展键盘鼠标添加成功后“键盘”和“鼠标”分类会出现在你的积木列表中。这赋予了CPX模拟输入设备的能力。4.2 可视化调色板NeoPixel灯光编程为了让硬件交互更有趣和直观我们利用CPX周围的10颗NeoPixel LED灯制作一个物理调色板灯光颜色与Scratch中的画笔颜色一一对应。当 启动 时 设置灯带 所有 灯 颜色为 红色 暂停(毫秒) 100 设置灯带 所有 灯 颜色为 黄色 暂停(毫秒) 100 设置灯带 所有 灯 颜色为 绿色 暂停(毫秒) 100 设置灯带 所有 灯 颜色为 蓝色 暂停(毫秒) 100 设置灯带 所有 灯 颜色为 紫色 暂停(毫秒) 100 灯带 显示颜色 彩虹这段代码在板子启动时会快速循环点亮我们预设的五种颜色最后变成一个彩虹环既是一个自检也是一个炫酷的提示告诉用户设备已就绪。在实际绘画中你可以编写更复杂的逻辑让LED灯实时显示当前选中的颜色。4.3 将倾斜转化为移动加速度计编程这是硬件控制的核心。CPX内置的加速度计可以测量三个轴X, Y, Z上的加速度单位是毫伽mG。静止时垂直于地面的轴会感受到约1000mG即1G的地球重力。我们的逻辑是检测板子在X左右倾斜和Y前后倾斜方向上的重力分量变化并据此移动鼠标。无限循环 如果 加速度值(mg) x 200 那么 鼠标 移动 x 5 y 0 否则 如果 加速度值(mg) x -200 那么 鼠标 移动 x -5 y 0 结束 如果 加速度值(mg) y 200 那么 鼠标 移动 x 0 y 5 否则 如果 加速度值(mg) y -200 那么 鼠标 移动 x 0 y -5 结束 暂停(毫秒) 50代码解读与参数调优如果 加速度值(mg) x 200判断板子是否向右倾斜X轴正方向重力分量超过200mG。200这个阈值是死区用于忽略微小的抖动或手持时的轻微晃动使控制更稳定。你可以根据手感调整这个值调小更灵敏调大更稳定。鼠标 移动 x 5 y 0当条件满足时命令鼠标向右移动5个像素。这里的移动步长5需要与Scratch中的步长变量协同考虑。如果感觉画笔移动太快或太慢可以调整这里的数值。暂停(毫秒) 50每次循环后等待50毫秒。这个延迟极其重要它控制了鼠标移动指令的发送频率。没有它循环会以极快的速度运行导致鼠标疯狂抖动甚至系统卡顿。50ms是一个比较流畅的间隔你也可以微调。4.4 映射按键与动作事件触发编程接下来我们将硬件的物理动作按按钮、摇晃映射到键盘按键事件。当 按钮 A 被按下 键盘 发送按键 “c” 当 晃动 被感知 键盘 发送按键 “e” 暂停(毫秒) 1000 // 防抖延迟当 按钮 A 被按下当按下CPX上的A键时模拟按下键盘上的‘c’键触发Scratch中的换色功能。当 晃动 被感知当检测到板子被摇晃时模拟按下键盘上的‘e’键触发清屏。后面的暂停是为了防抖避免一次摇晃被误识别为多次触发。5. 软硬件联调与问题排查实录将写好的MakeCode程序通过USB线下载到CPX后最激动人心也最容易出问题的联调阶段就开始了。下面是我在多次实践中总结的完整流程和常见坑位。5.1 烧录与连接标准化流程命名与下载在MakeCode编辑器中为项目起个名字如Scratch_Painter然后点击底部粉色下载按钮。这将下载一个.uf2格式的文件到你的电脑。进入烧录模式用USB线连接CPX和电脑。快速双击CPX板子上的复位按钮RESET。此时板子上的所有NeoPixel LED会变成绿色并循环点亮。这表示它已进入名为CPLAYBOOT的U盘模式。在你的电脑文件资源管理器或Finder中会出现一个名为CPLAYBOOT的驱动器。拖拽烧录将下载好的.uf2文件直接拖拽或复制到CPLAYBOOT驱动器里。驱动器会自动弹出消失表示程序已烧录完成并开始运行。此时板子会执行我们编写的当启动时代码彩虹灯效。5.2 联调操作步骤打开Scratch项目在浏览器中打开你之前创建的绘画程序并点击绿旗运行。进入全屏模式关键点击Scratch舞台区上方的全屏按钮。这一步非常重要它能确保键盘事件被Scratch项目捕获而不是被浏览器地址栏或其他插件干扰。开始体感绘画移动测试缓慢倾斜CPX。你应该能看到屏幕上的画笔开始跟随移动。如果没反应检查CPX的USB连接是否稳固并确认MakeCode程序中的无限循环部分已正确下载。换色测试按下CPX上的A键观察画笔颜色是否按顺序切换同时可以观察Scratch中颜色编号变量的值是否增加。清屏测试用力摇晃几下CPX画布应该被清空。5.3 常见问题与解决方案速查表以下是我在 workshops 中遇到最高频的问题及其排查思路问题现象可能原因解决方案CPX连接电脑后无CPLAYBOOT盘符1. USB线仅供电无数据传输功能。2. 未正确进入烧录模式。3. 驱动问题罕见。1.更换USB数据线这是最常见的原因。2. 确保是双击复位键且LED变绿。3. 尝试换一个USB端口或重启电脑。程序拖入CPLAYBOOT后无反应1. 文件格式或损坏。2. 板子未完全进入烧录模式。1. 重新在MakeCode点击下载确保是.uf2文件。2. 关闭所有可能占用串口的软件如串口监视器重新双击复位。倾斜CPX画笔不动或乱跳1. Scratch中步长或MakeCode中鼠标移动值设置不当。2. 加速度计阈值200不匹配当前操作姿势。3. 鼠标移动频率过快延迟太小。1.协同调整在Scratch中调小步长或在MakeCode中调小鼠标移动的像素值如从5调到2。2.调整死区根据手持姿势尝试将200改为300更稳定或100更灵敏。3.增加延迟将暂停(毫秒) 50增加到80或100。按下A键或摇晃无法换色/清屏1. Scratch未处于全屏模式按键事件被浏览器拦截。2. MakeCode中键盘事件代码块未正确添加扩展。3. Scratch中键盘事件监听的键位不对。1.务必进入全屏模式。2. 检查MakeCode中是否已成功添加“键盘”扩展。3. 核对Scratch中当按下 [c v] 键的字母是否与MakeCode中发送按键 “c”的字母完全一致区分大小写。画笔移动有严重延迟1. 电脑性能或浏览器问题。2. Scratch项目过于复杂。3. USB端口供电不足或干扰。1. 关闭不必要的浏览器标签和后台程序。2. 确保Scratch画布上没有堆积过多画笔痕迹可先按‘e’清空。3. 尝试将CPX连接到电脑主板原生的USB端口。NeoPixel灯不亮或显示异常1. MakeCode中灯带设置代码有误。2. 物理连接问题。1. 检查当启动时中的灯带代码确认“所有灯”和颜色参数正确。2. 重新插拔USB线或下载一个简单的纯灯效测试程序验证硬件。5.4 进阶调试技巧如果上述方法仍无法解决可以尝试更底层的调试串口输出调试在MakeCode的“串行”分类中拖入串行 写入数值 “x:” x加速度等积木将加速度值实时输出到控制台。通过MakeCode的“数据”视图查看可以精确知道板子感知到的数值从而判断是硬件问题还是逻辑阈值问题。简化测试分别测试软硬件。单独测试Scratch程序用真实键盘鼠标操作是否正常。单独测试MakeCode程序可以编写一个让LED灯根据倾斜改变颜色的程序验证加速度计是否工作。电源管理在进行剧烈动作如摇晃时偶尔会出现USB线接触不良导致瞬间断电复位。确保USB线插紧或使用带磁吸接口的优质数据线。6. 创意扩展与项目深化当基础功能跑通后这个项目的真正魅力才刚刚开始。它提供了一个极其灵活的框架供你发挥创意。这里分享几个我实践过或看到过的精彩扩展方向希望能点燃你的灵感。方向一丰富绘画交互维度压力感应CPX的电容触摸引脚如A1-A7可以模拟压力。在MakeCode中用引脚 A1 被触摸的返回值0-1023来映射Scratch中的将笔的粗细设为 ()。触摸越用力画笔越粗。声音控制利用CPX的声音传感器。在MakeCode中检测音量大小当拍手或发出特定声音时通过键盘扩展发送不同按键如‘s’在Scratch中绑定该按键事件切换为“喷枪”特效或随机颜色。光绘画利用光传感器。在暗处移动CPX不绘画当遇到光线如用手电筒照射时开始绘画可以创作出有趣的光迹效果。方向二改造硬件形态制作实体画笔用3D打印笔或纸杯、泡沫将CPX包裹制作成真正的“魔法棒”或“画笔”外形提升沉浸感。将A/B键引出到更容易按下的位置。多人协作画布制作两套甚至多套CPX控制器连接到同一台电脑。在Scratch中创建多个画笔精灵每个精灵监听不同的按键如CPX1发送‘1’ ‘a’ ‘z’ CPX2发送‘2’, ‘s’, ‘x’实现多人同时在一块画布上创作。方向三升级软件逻辑颜色混合在Scratch中不止于切换颜色。可以创建颜色R、颜色G、颜色B三个变量分别用CPX的倾斜X轴、摇晃强度、光线值来控制和改变它们然后使用将笔的颜色设为 (颜色)积木实现无极调色。笔刷库不止是圆形画笔。在Scratch中为画笔精灵创建多个造型如方形、星形、水滴形。通过CPX的按键或倾斜方向来切换造型实现不同笔刷效果。游戏化设定绘画目标比如“画出闭合的圆形”。利用Scratch的“侦测”积木判断画笔是否回到起点附近并结合CPX的蜂鸣器播放成功音效。方向四更换硬件平台micro:bit如果你有micro:bit过程几乎完全一样。在Scratch 3.0中添加“micro:bit”扩展可以直接通过蓝牙与micro:bit通信无需模拟键盘鼠标设置更简单且摆脱了线缆束缚。智能手表/手机一些支持HID的智能手表或手机App如“蓝牙键盘”类App也可以模拟按键你可以探索用移动设备的陀螺仪来控制绘画。这个项目的终点绝不是完成一次作业或演示。它更像一扇门推开后是一个将创意、编程、电子、艺术融合在一起的游乐场。我自己的体会是最让人兴奋的时刻往往发生在“如果……会怎样”的提问之后。不妨就从修改一个参数、尝试一种新的映射开始享受创造工具并用它来创造的完整乐趣。