颜色

灰度颜色(Grayscale Color)

在数字世界中，描述颜色需要精确的数值，而不是“让那个圆变成蓝绿色”这种模糊说法。颜色通常用一组数字来表示。我们先从最简单的情况——黑白（灰度）说起：0 代表黑色，255 代表白色，介于两者之间的任意数值（如 50、87、162、209 等）都表示不同深浅的灰色，数值越大越接近白色，越小越接近黑色。

你可能会觉得 0 到 255 这个范围很随意，其实它背后有计算机存储的原因。

计算机的内存本质上是一串很长的 0 和 1（开关状态），每一个 0 或 1 叫做一个“位”（bit），8 个 bit 组成一个字节（byte）。如果我们有 8 个 bit，可以组合出多少种不同的状态？答案是 256 种，也就是从 0 到 255。

因此，灰度色通常用 8 位（一个字节）来表示，范围就是 0~255。对于全彩色（RGB），每个颜色通道（红、绿、蓝）各用 8 位，总共 24 位（3 字节），这样就能表示丰富的颜色。

在绘制图形之前，通过调用 stroke() 和 fill() 函数，可以分别设置图形的边框色和填充色。另外，还有一个 background() 函数，用于设置窗口的背景色。下面是一个示例：

  background(255)    # Setting the background to white
  stroke(0)          # Setting the outline (stroke) to black
  fill(150)          # Setting the interior of a shape (fill) to grey
  rect(50,50,75,100) # Drawing the rectangle

如果你不想要边框或填充，可以分别使用 noStroke() 和 noFill() 函数来取消。注意，很多初学者会以为 stroke(0) 就是“没有边框”，其实 0 代表的是黑色，不是“无”。同理，fill(0) 也是黑色填充，而不是没有填充。
另外要注意，不要同时用 noStroke() 和 noFill()，否则图形会完全不可见！
还有一点很重要：如果你连续绘制多个图形，Processing 会始终使用最近一次设置的 stroke 和 fill 颜色（代码是从上往下执行的）。也就是说，后面画的图形会继承前面设置的颜色，除非你再次更改。

RGB 颜色(RGB Color)

数字世界里的颜色是由三种原色混合而成，和颜料的混色方式不同。首先，原色本身就变了：变成了红、绿、蓝（也就是“RGB”色彩）。其次，屏幕上的颜色混合其实是“光的叠加”，而不是颜料的混合，所以混色的规则也完全不同。

RGB 颜色是基于红、绿、蓝三种基本颜色混合而成的。每个颜色通道（红、绿、蓝）各用 8 位（一个字节），总共 24 位（3 字节），这样就能表示丰富的颜色。

红 + 绿 = 黄
红 + 蓝 = 品红（紫色）
绿 + 蓝 = 青色（蓝绿色）
红 + 绿 + 蓝 = 白色
无色（全为0）= 黑色

这里假设每种颜色都是最亮的情况，但实际上你可以调节每种颜色的强度。例如，一些红色加上一些绿色加上一些蓝色会变成灰色，而一点红加一点蓝则会变成深紫色。刚开始可能不太习惯，但随着你在编程中不断尝试和实验 RGB 颜色，这种“调色”会变得像小时候用手指混色一样直观。
当然，在代码里你不能说“来点红再加点蓝”，你必须给出精确的数值。和灰度色一样，每个颜色通道的取值范围都是 0（没有该颜色）到 255（最强），顺序是 R、G、B。多试试，你很快就能掌握 RGB 的配色规律。接下来我们会用代码演示一些常见的颜色。

Example: RGB color
background(255)
noStroke()

# Bright red
fill(255, 0, 0)
ellipse(20, 20, 16, 16)

# Dark red
fill(127, 0, 0)
ellipse(40, 20, 16, 16)

# Pink (pale red)
fill(255, 200, 200)
ellipse(60, 20, 16, 16)

RGB 颜色透明度(Color Transparency)

除了每种颜色的红、绿、蓝分量外，还可以有一个可选的第四个分量，叫做“alpha”，也就是颜色的透明度。Alpha 主要用于让你绘制出部分透明、可以叠加的图形。图像的所有 alpha 值合起来，有时也叫做“alpha 通道”。

需要注意的是，像素本身其实并不是真的“透明”，这只是通过颜色混合实现的一种视觉效果。底层实现时，Processing 会把两个颜色按一定比例混合，最终让你看到“叠加”的效果。（如果你想编程实现“玫瑰色眼镜”之类的滤镜，这就是原理。）

Alpha 的取值范围也是 0 到 255，0 表示完全透明（0% 不透明），255 表示完全不透明（100% 不透明）。

Example: Alpha transparency
size(200, 200)
background(0)
noStroke()

# No fourth argument means 100% opacity.
fill(0, 0, 255)
rect(0, 0, 100, 200)

# 255 means 100% opacity.
fill(255, 0, 0, 255)
rect(0, 0, 200, 40)

# 75% opacity.
fill(255, 0, 0, 191)
rect(0, 50, 200, 40)

# 50% opacity.
fill(255, 0, 0, 127)
rect(0, 100, 200, 40)

# 25% opacity.
fill(255, 0, 0, 63)
rect(0, 150, 200, 40)

自定义颜色范围(Custom Color Ranges)

在 Processing 中，RGB 颜色的每个通道取值范围是 0 到 255，但这并不是你能处理颜色的唯一方式。实际上，在计算机内存中，颜色总是以 24 位（如果有 alpha 则是 32 位）来存储的。不过，Processing 允许我们用更直观的方式来理解和设置颜色，然后自动帮我们转换成计算机能识别的数值。例如，您可能更愿意将颜色视为 0 到 100 的范围（如百分比）。您可以通过指定自定义 colorMode（）来做到这一点。

colorMode(RGB,100)

虽然实际开发中很少这样用，但你也可以为每个颜色分量设置不同的范围，比如：

colorMode(RGB, 100, 500, 10, 255)

这表示“红色分量范围是 0~100，绿色是 0~500，蓝色是 0~10，alpha 是 0~255”。

实际上，大多数情况下你只需要 RGB 颜色模式，但 Processing 也支持 HSB（色相、饱和度、亮度）模式。简单来说，HSB 模式的含义如下：

Hue（色相）：表示颜色类型，默认范围 0~255（有时也用 0~360，代表色轮的角度）
Saturation（饱和度）：表示颜色的鲜艳程度，默认范围 0~255（有时用 0~100，代表百分比）
Brightness（亮度）：表示颜色的明亮程度，默认范围 0~255（有时用 0~100，代表百分比）

用 colorMode() 你可以自定义这些范围。有些人喜欢把色相设为 0~360，饱和度和亮度设为 0~100，更直观地对应色轮和百分比。