AI 编程课
完整教案
自学课件
1 课 · 共 1/48

让 RGB 灯亮起来,也弄懂它为什么会变色

课时
待定
器材
ESP32-S3 触摸屏板 + USB 线
前置知识
配套代码
见项目 demo 目录

自学读本:跟着读、照着做,卡住就问 AI

你好,我是吴老师。

这份是给你自己读的——不用等我讲,你一段一段往下看,看到让你停下来的地方,就照着做一遍。看不懂的整段复制给 AI,加一句"请一次只解释一个概念,讲完问我一个小问题"。

读完之后,你应该能:说出 RGB 三个通道各管什么;解释为什么红光加绿光会看到黄色;画出"要求变成灯光"的完整链路;用实验说清"改颜色"和"发出去"是两回事;自己设计一个灯效并验证。

用时:基础实验 60–90 分钟;彩虹灯、呼吸灯另留 30–40 分钟(可分两次做)。准备:板子、数据线、已经接入板卡 Skill 的 WorkBuddy。


一、今天只做一个很小的目标

上一课我们完成了环境检查。今天来完成第一个真正的作品。

先看板子上的小灯——我们今天控制的是板载 RGB 灯,不是屏幕里的彩色圆点,也不是通电就亮的电源指示灯。如果你还分不清,先找吴老师指给你看。

目标很简单:让这颗 RGB 灯安静地亮起红色。

把这个要求发给 WorkBuddy:

请使用课程的 esp32s3-touchboard-hardware-dev Skill,
让触摸屏板上的 RGB 灯一直亮红色,用较低亮度,不闪烁。
帮我新建程序并烧录到连接的板子上,保留原来的示例。
完成后告诉我,我来看看灯是不是一直亮红色。

你看,像平时说话一样,说清楚"哪颗灯、什么颜色、怎么亮"就能开始。引脚、库、烧录参数这些细节,由 AI 按 Skill 处理,不用你先学会一串专业词。

准确,是把想要的效果说清楚。"一直亮红色,不闪烁"就比"做一个好看的灯"更容易检查。提示词没有固定格式,没说完可以继续补。

AI 工作时你会看到"编译"和"上传":编译是把源码变成板子能执行的程序;**上传(烧录)**是把它写进板子的存储器。

二、AI 说"好了",你要看真实的灯

等它报告上传成功,请亲自检查:

  1. 灯是不是持续亮红色至少十秒
  2. 有没有意外闪烁?
  3. 亮起的是不是刚才确认的那颗 RGB 灯?(不用贴着脸看,看清颜色就行)

成功的话,把这句话发给 AI:"我看到板载 RGB 灯持续亮红色,观察了十秒,没有闪烁。"——这才把电脑上的"执行结果"和桌面上的"实验结果"接起来了。

如果灯没亮,别只说"坏了"。参照上一课学过的说法:描述你想要的、AI 报的、你实际看到的、你动过什么。

三、红、绿、蓝,藏在同一颗灯里

现在灯亮了。先别急着加功能,我们看看它到底是什么。

RGB 三个字母代表 Red 红、Green 绿、Blue 蓝。这颗灯珠里有红、绿、蓝三个发光通道,可以分别控制。

你可以先想象三盏很小的彩色灯挤在一起:只让红色通道发光,就看见红色;几个通道一起发光,光进入眼睛,你会看到混合后的颜色。

这个比喻有个地方要修正:真实灯珠里还有负责接收数据、控制发光的电路,并不是把三盏普通小灯直接装在一个壳里。

我们来看一个具体的数字:R=40、G=0、B=0。意思是红色通道有输出,绿色和蓝色关闭。

每个通道用 0 到 255 的整数表示:0 是关闭,255 是这个通道最大的控制值。**这些数字不是电压,也不是百分比。**本课实验用 40 作为低亮度的起点。

如果好奇为什么最大值是 255,可以问 AI:

刚才的红灯用了哪些 RGB 数值?这三个数分别是什么意思?
为什么它们的范围是 0 到 255?请用简单例子解释。
讲完问我怎样改成蓝色,等我回答。

四、先猜一猜,再让灯回答

我把红色和绿色一起打开,蓝色关闭。你猜,会看到什么颜色?

**先把猜测写下来,再看答案。**不要急着让 AI 替你填写观察结果:

实验RGB我预测的颜色我实际看到的颜色
只开红色4000自己填写实验后填写
只开绿色0400自己填写实验后填写
只开蓝色0040自己填写实验后填写
红和绿一起开40400自己填写实验后填写
红和蓝一起开40040自己填写实验后填写
绿和蓝一起开04040自己填写实验后填写
三个一起开404040自己填写实验后填写
三个都关闭000自己填写实验后填写

填好后,把这段话发给 AI:

请让刚才的灯按下面的 RGB 数值依次变化,每组保持 3 秒,一直循环:
(40,0,0)、(0,40,0)、(0,0,40)、(40,40,0)、
(40,0,40)、(0,40,40)、(40,40,40)、(0,0,0)。

帮我修改并烧录,先别告诉我会出现哪些颜色,我想自己观察。

看完一轮,再看一轮。你大概会看到:红+绿 → 黄,红+蓝 → 品红,绿+蓝 → 青,三个一起 → 接近白。

红绿蓝三色混合

你可能会说:"吴老师,我画画时混颜料不是这样的。"

你观察到了一个真区别:灯是把不同颜色的光加在一起,这叫加色混合;颜料靠吸收和反射光形成颜色,不能直接套用灯的混色结果。

最后一组 (0,0,0) 灯会熄灭——它不是发出"黑色的光",而是不再主动发光

如果颜色明显不对(比如只开红色却看见绿色),把现象告诉 AI,请它核对灯珠类型和颜色通道顺序。检查实现,但别为了配合答案修改观察记录。

五、电脑里的话,怎样走到灯里?

现在看一条完整的路:

你提出要求 → WorkBuddy 生成程序 → 电脑编译并通过 USB 烧录 → ESP32-S3 执行程序 → GPIO42 发送颜色数据 → 灯珠内部电路控制三个发光通道 → 你看见颜色。

这里有两个新名字:

  • ESP32-S3:板子的主控芯片,负责执行程序;
  • GPIO42:主控的一个引脚编号,这块板用它向 RGB 灯发送控制数据。

注意,我说的是"一根数据线",不是"整颗灯只需要一根线"。灯还需要电源和地,这些连接已经做在板子上了。数据线告诉灯怎样亮,供电提供发光所需的能量

那一根数据线怎么分别告诉红、绿、蓝三个通道?它不是变成三根线,而是按规定的顺序,把颜色信息一位一位送过去。灯珠内部的控制电路按约定接收,再分别控制三个通道。

库(Adafruit_NeoPixel)帮我们处理了这些细节,今天不用记每个脉冲多长。但要知道:这不是把 GPIO42 简单设成"开",灯就知道要亮红色。

请 AI 帮你检查理解:

为什么一根数据线就能控制红、绿、蓝三种光?电又是从哪里来的?
请结合这块板子的资料,用简单例子和箭头图讲给我听。
一次讲一点,等我用自己的话说一遍,再继续。

六、改了颜色,为什么还要"发出去"?

今天只看两个和现象直接相关的代码名字,不学语法:

  • setPixelColor():先在主控的内存中写好"准备让灯显示的颜色";
  • show():把准备好的数据真正发送给灯。

就像你先写好一条消息,再点发送——写好内容对方收到是两件事。

做个实验验证一下:

请做一个实验:先让灯亮红色 2 秒,
再把内存中的颜色改成绿色,但等 3 秒才发送给灯,
发送后保持 3 秒,再从头循环。亮度和刚才一样。
帮我修改并烧录,我想看看"改颜色"和"发送颜色"有什么不同。

如果程序按预期运行,那 3 秒等待里灯应该还是红色,直到 show() 发出新数据才变绿。看完实验,你就能用自己的话说出:改内存里的颜色,不会自动让灯收到新指令。

七、动手做

任务 1:点亮并验证红灯

完成第一、二节的内容:让灯亮红色,观察十秒,向 AI 报告真实现象。把"我预测 / 实际看到"的差异记录下来——这是你第一份实验记录。

任务 2:八组颜色轮盘

完成第四节的观察表。重点记录两处:

  1. 红+绿是不是黄色?和你画画的经验差在哪?
  2. 最后一组 (0,0,0) 是"黑了"还是"关了"?为什么说它不是"黑色的光"?

任务 3:设置和发送分家实验

完成第六节的实验。观察:灯在"内存里已改成绿色、但还没发送"的 3 秒里,是什么颜色?

看完告诉 AI 你的发现,请它把程序里的这两行指给你看——哪一行是"写好",哪一行是"发送"。

挑战:你的第一件作品——桌面状态灯

自己设计一盏灯:绿色表示准备好了,黄色表示正在思考,蓝色表示休息。把空白补好发给 AI:

帮我做一盏桌面状态灯,按下面的顺序自动循环:
____色表示____,保持____秒;
____色表示____,保持____秒;
____色表示____,保持____秒。
用较低亮度,帮我做好并烧录,我来检查颜色、顺序和时间。

完成后只改一个条件再试一次:比如颜色不变,只把每种状态的时长从 2 秒改成 4 秒。改之前先说出预测:哪些会变,哪些不会变?

如果你想研究亮度:保持绿蓝为 0,只把红色从 10 改到 40。注意——控制值变成 4 倍,不代表眼睛感觉亮了 4 倍。

八、进阶:两盏"活"的灯

基础实验做完,还有两个经典灯效,可以留到第二次实践。

进阶一:彩虹灯(颜色慢慢走一圈)

状态灯是一种颜色停一会再换下一种。现在试试:让红色慢慢变成黄色,再变成绿色,中间不突然跳。

把这段话发给 AI:

帮我把板上的 RGB 灯做成彩虹灯:
红、黄、绿、青、蓝、品红,再回到红色,一直循环。
每种颜色用 1 秒慢慢变成下一种,一圈约 6 秒,不要突然跳色。
用较低亮度,另存一个版本并烧录,保留前面的实验。

关键不在颜色本身,而在"渐变"是怎么做到的。以红→黄这一段为例:

变化位置RGB变化方法
红色起点4000先只打开红色通道
向黄色过渡40200红色不动,绿色逐渐增加
到达黄色40400红绿都打开
向绿色过渡20400绿色不动,红色逐渐减少
到达绿色0400只留绿色

规律是:**每次只动一个通道,慢慢加或慢慢减,数值一小步一小步地走。**程序大约每 20 毫秒算一次新颜色、发送一次,人眼就看到了"连续变化"。

观察时注意两件事:从品红回到红色那一段,有没有也在慢慢过渡?有没有某一段你觉得更亮?(多个通道一起亮时,人眼感觉的亮度会变——这条路线不保证看起来一样亮。)

然后只改一个条件:完整一圈从 6 秒改成 12 秒。预测一下:渐变会更细腻,还是只是走得更慢?

进阶二:蓝色呼吸灯(明暗慢慢起伏)

彩虹灯改颜色,呼吸灯改明暗:颜色一直是蓝色,但 2 秒内慢慢亮起来,再用 2 秒慢慢暗下去,循环。

帮我把板上的 RGB 灯做成蓝色呼吸灯:
用 2 秒从熄灭慢慢变亮,再用 2 秒慢慢变暗到熄灭,连续循环。
始终保持蓝色,最亮时也不要刺眼,不要突然亮灭。
另存一个版本并烧录,保留刚才的彩虹灯。我来观察效果。

观察三轮(约 12 秒),回答三个问题:它一直保持蓝色吗?是慢慢变暗还是突然熄灭?最暗时真的回到熄灭了吗?

两个进阶放一起比较:**彩虹灯改变的是三个通道之间的比例,呼吸灯改变的是蓝色通道的强度。**它们都在不断"算颜色、设置颜色、发送颜色",只是规则不同——这就是程序里"规则"的力量。

九、自检小测

先自己想,再点开对答案。

1. RGB 分别代表什么?一颗灯珠里有几个发光通道?

Red 红、Green 绿、Blue 蓝。灯珠里有三个发光通道,可以分别控制。

2. 红光和绿光一起亮,通常会看到什么颜色?为什么?

黄色。因为光是加色混合——不同颜色的光一起进入眼睛,会看到混合后的颜色。这和混颜料(减色)不是一回事。

3. RGB 每个通道的取值范围是多少?本课为什么用 40 而不是 255?

0 到 255。0 是关闭。本课用较低亮度(40)保护眼睛;数值不是电压也不是百分比。

4. 主控通过哪个引脚把颜色数据送给灯?

GPIO42。数据线只负责"怎样亮",灯的电源和地已经做在板子上,负责"亮起来需要的能量"。

5. setPixelColor 和 show 有什么区别?

setPixelColor 只在主控内存里"写好"颜色,show 才把数据真正发给灯。只改颜色不发送,灯不会变。

6. 彩虹灯和呼吸灯各自在改变什么?

彩虹灯改变三个通道之间的比例(颜色);呼吸灯保持蓝色不变,只改变蓝色通道的强度(明暗)。两者都在不断更新并发送颜色数据。

7. 烧录完成后关掉电脑上的 WorkBuddy,灯还会继续亮吗?

会。程序已经存在板子的 Flash 里,由 ESP32-S3 执行,不需要 AI 在线指挥。如果拔掉 USB 灯停了,那是没了电源,不是程序没了。

十、还想玩点什么

会换色、会渐变、会呼吸,这颗灯就活了。想想:改变颜色、明暗、时长和顺序,还能组合出什么?

方向可以描述给 AI 的效果值得继续想
心跳灯红灯短亮两次,休息一会,重复这个节奏两次亮的间隔和后面的休息一样长吗?
日出灯从熄灭开始,暗红慢慢变成橙黄,约 20 秒后保持这次同时改了颜色和亮度吗?
倒计时提示灯启动后绿灯 10 秒、黄灯 5 秒、红灯 3 秒后熄灭它该只运行一次,还是自动重复?
秘密灯语不同颜色与长短亮灯组成一段固定信息你和同学要先约定什么规则才读得懂?
烛光灯保持暖色,亮度在较低范围内不规则变化怎么限制幅度,避免变成刺眼的闪烁?

每个效果都用单颗灯就能做。继续保持各通道不超过 40、从缓慢的变化开始,不做快速频闪。

想做"拍手就变色""摸屏幕换灯效"的同学,也把想法记下来——灯自己听不到声音、摸不到屏幕,那些要等后面课程的麦克风和触摸屏。想要一排灯依次追逐,则需要多颗灯珠。

最后,给你的灯效起个名字吧。下一课,我们给它加上"耳朵"——BOOT 按钮,让灯开始听懂你的手指。


本课的配套资源

本节配套的演示程序源码与可烧录固件,已整合到课程页面底部的「配套资源 · 在线烧录」区——插上你的 ESP32-S3 触摸屏板(Chrome / Edge 浏览器),点「在线烧录」即可直接写入,无需安装软件。

给 AI 的第一句话(每次新开对话都先说这句):

请使用课程的 esp32s3-touchboard-hardware-dev Skill,
我现在做第 1 课(RGB 灯),需要你帮我____。
改动前先说清依据的项目文件路径,烧录前先运行 arduino-cli board list 确认端口。

本节配套资源 · 在线烧录

查看全部固件 →

下列演示程序已编译为可烧录固件。把你的 ESP32-S3 触摸屏板 用 USB 接上电脑(需 Chrome / Edge 浏览器),点「在线烧录」即可直接写入,无需安装任何软件。

第 1 课 · 红灯
可烧录

让板载 RGB 灯一直亮红色,不闪烁。第 1 课第一个作品,用来理解 setPixelColor(设置颜色)和 show(发送颜色)是两步。

01 RGB灯 入门
第 1 课 · 混色实验
可烧录

8 组 RGB 数值依次各亮 3 秒并循环。先预测再观察:红+绿、红+蓝、绿+蓝分别会看到什么颜色。

01 RGB灯 混色
第 1 课 · 先设置后发送
可烧录

红灯 2 秒,再把内存里的颜色改成绿色但等 3 秒才发送。观察等待的 3 秒里灯是什么颜色——这是理解 setPixelColor 与 show 的关键实验。

01 RGB灯 原理
第 1 课 · 彩虹灯
可烧录

颜色沿红→黄→绿→青→蓝→品红→红慢慢过渡,每段约 1 秒,一圈约 6 秒,中间不跳色。

01 RGB灯 渐变
第 1 课 · 蓝色呼吸灯
可烧录

颜色一直是蓝色,2 秒慢慢变亮、2 秒慢慢变暗,一轮 4 秒。和彩虹灯对比:一个改的是颜色比例,一个改的是明暗强度。

01 RGB灯 渐变