← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达
← 编程学习中心
📖

Preparation

8 个课程
1
如何学习编程
2
计算机基础
3
键盘初识与基准键位
4
字母与数字基础
5
Shift键魔法
6
编程符号专精
7
功能键与修饰键
8
键盘学习总结与进阶
📚

Basics

22 个课程
1
什么是编程?
2
Hello World - 你的第一个程序
3
变量基础概念 - 给信息贴标签
4
变量赋值和操作 - 变量的高级用法
5
数据类型基础 - 数字和字符串
6
基础运算符 - 数字运算王国
7
布尔类型与比较运算符 - 程序的判断基础
8
条件判断基础 - 让程序学会做决定
9
变量作用域 - 变量的生存范围
10
条件语句进阶 - 复杂判断与嵌套结构
11
逻辑运算符 - 简化复杂条件判断
12
循环语句 - 程序的重复机器
13
循环进阶 - break、continue与循环控制
14
嵌套循环与作用域
15
循环调试实战技巧
16
循环不变量 - 理解循环的数学规律
17
数组基础 - 数据的收纳盒
18
数组操作方法 - 添加、删除和管理
19
数组高级 - 探索数组的强大功能
20
引用概念 - 变量的不同行为
21
函数基础 - 解决重复代码的秘密武器
22
函数实践与应用 - 巩固基础,实战应用
🚀

Intermediate

11 个课程
1
从控制台到画布 - p5.js初体验
2
图形绘制工具箱 - 基础图形函数
3
让世界多彩 - 颜色系统详解
4
文字的艺术 - 文本绘制与样式
5
球体动起来 - 动画基础入门
6
球体的交互魔法 - 鼠标与条件判断
7
面向对象编程 - Class类与实例
8
球的家族 - 循环与数组应用
9
球的个性 - 函数封装与参数化
10
球的变身 - 形状模式与高级绘制
11
球的世界 - 综合创作项目
🎯

Advanced

6 个课程
1
对象类型
2
对象类型应用
3
自定义类型
4
函数进阶 - 箭头函数与高级编程技巧
5
内置方法 - 字符串与数组的魔法工具
6
Switch语句与字符串模板 - 更优雅的代码表达

让世界多彩 - 颜色系统详解

概念介绍

欢迎来到彩色的编程世界!之前的课程中,我们的图形都是黑白的,就像老照片一样。今天我们要学会给图形添加色彩,让你的作品变得绚丽多彩!

学习目标

  • 掌握RGB颜色系统的基本概念
  • 学会使用 fill(), stroke(), background() 控制颜色
  • 理解描边控制:strokeWeight(), noStroke(), noFill()
  • 学习透明度的应用
  • 理解函数重载的概念

🎨 RGB颜色系统

在数字世界中,所有颜色都是由**红(Red)、绿(Green)、蓝(Blue)**三种颜色混合而成的。这就是RGB颜色系统。

颜色值的范围

  • 每种颜色分量的值范围:0 - 255
  • 0 = 最暗(没有该颜色)
  • 255 = 最亮(该颜色最饱和)

常见颜色示例

加载代码编辑器...

🖌️ 颜色控制函数详解

background(r, g, b) - 设置背景色

设置整个画布的背景颜色。

fill(r, g, b) - 设置填充色

设置图形内部的填充颜色。

stroke(r, g, b) - 设置描边色

设置图形轮廓线的颜色。

🔄 与基础课程的连接

还记得基础课程中的函数重载概念吗?颜色函数就是很好的例子!

加载代码编辑器...

💻 实践练习

练习1:颜色实验 🧪

尝试不同的颜色组合:

加载代码编辑器...

练习2:彩虹圆 🌈

创建彩虹色的圆形序列:

加载代码编辑器...

新概念:

  • 使用数组存储颜色数据(基础课程学过!)
  • 用循环遍历数组绘制图形
  • 每个颜色值是一个包含3个数字的数组

练习3:描边艺术 ✏️

学习描边控制:

加载代码编辑器...

函数工具箱:

  • ✅ stroke(color) - 设置描边颜色
  • ✅ strokeWeight(width) - 设置描边宽度
  • ✅ noStroke() - 取消描边
  • ✅ noFill() - 取消填充

练习4:透明效果 🌟

学习使用透明度:

加载代码编辑器...

透明度概念:

  • 第四个参数控制透明度(0 = 完全透明,255 = 完全不透明)
  • 透明图形会显示出下面的背景或其他图形
  • 这在创建重叠效果时非常有用

练习5:彩色房子 🏠

给之前的房子添加色彩:

加载代码编辑器...

练习6:彩色心情脸 😊😢😡

用不同颜色制作简单的表情脸:

加载代码编辑器...

⚠️ 常见错误与解决方法

错误1:颜色值超出范围

加载代码编辑器...

错误2:忘记设置颜色

加载代码编辑器...

🎯 本课重点总结

颜色核心概念

  • ✅ RGB系统:红(0-255)、绿(0-255)、蓝(0-255)
  • ✅ 函数重载:同一个函数名,不同参数数量
  • ✅ 透明度:第四个参数控制不透明度(0-255)

颜色控制函数

  • ✅ background(r, g, b) - 背景色
  • ✅ fill(r, g, b, alpha) - 填充色
  • ✅ stroke(r, g, b, alpha) - 描边色
  • ✅ strokeWeight(width) - 描边宽度
  • ✅ noFill(), noStroke() - 取消填充/描边

与基础课程的连接

  • ✅ 函数重载:颜色函数展示了函数重载的实际应用
  • ✅ 数据类型:颜色值就是数字类型的应用
  • ✅ 数组应用:存储和操作颜色数组
  • ✅ 循环结构:用循环创建渐变和重复效果

🚀 下一步

太棒了!现在你的作品已经不再黑白了,而是五彩斑斓的!

下一课我们将学习文本绘制:

  • 📝 文本显示:text() 函数显示文字
  • 🔤 文字样式:textSize(), textAlign() 设置文字样式
  • 🎨 创意文字:结合颜色创建漂亮的文字效果
  • 🏷️ 图形标注:用文字说明你的作品

准备好让你的作品不仅有色彩,还有文字表达了吗?

p5.js官方参考

  • Reference: fill()
  • Reference: stroke()
  • Reference: background()
  • Reference: strokeWeight()
  • Reference: noFill()
  • Reference: noStroke()
  • Reference: Color
  • Reference: Setting
Previous lesson
Previous
图形绘制工具箱 - 基础图形函数
Next
文字的艺术 - 文本绘制与样式
Next lesson