3.1 Processing中的颜色基础

1,458 阅读3分钟

stroke函数,fill函数,灰度表示法

颜色在Processing中必须用数值表示(正如在像C一样的较底层的语言中一样),而我们首先会从最简单的灰度值表示法开始学习:0表示黑色,255表示白色,介于两者之间的其他数字是从黑色渐变到白色的灰色阴影:

img

通过在绘制对象之前添加stroke()和fill()函数,我们可以这次设置之后所有画图命令所产生的任何形状的颜色效果。还有一个函数background(),在整个窗口里面填满背景色(所以每次draw中,一般先画背景,再画别的啥形状)。下面是一个例子:

background(255)    # 将背景设置为白色
stroke(0)          # 将轮廓设置为黑色 (stroke)
fill(150)          # 将形状的内部设置为灰色(fill)
rect(50,50,75,100) # 画个矩形

从上面这个例子可以看到,fill和stroke分别控制的形状的轮廓颜色和填充颜色。

你还可以选择调用 noStroke()来让轮廓色消失,使用noFill()让填充色消失,但是请不要同时让他们生效,因为这样你就画不出任何东西了~

如果我们需要绘制不同颜色的形状,那么需要在每个形状对应的命令之前调用stroke和fill函数为其选择颜色:(如下图,可以看到每次调用stroke()和fill()函数,都会改变画图形状设置,并对之后的画图应用最新的颜色设置)
img

RGB格式的彩色表示

计算机使用的色彩表示模式不是像蜡笔画一样,各种原色的颜色加一起等于黑的那种色彩模式,而是加一起等于白。这是因为屏幕上混合的东西是光而不是涂料,正如你可以想象一下:将各色的光合并之后会产生白色而不是黑色。

img
正如上面的图片:红色+绿色=黄色,红色+蓝色=紫色,绿色+蓝色=青色(蓝绿色),红色+绿色+蓝色=白色

颜色的混合并不容易掌握,但是熟能生巧。(实在玩不转,还可以使用各种拾色器)下面是一个颜色的例子:

img

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)

设置颜色的透明度

在选择颜色的时候,除了r,g,b三个颜色参数,还有一个隐藏的可选参数,这个参数就是不透明度,又叫“ alpha”。

需要注意的是,并不是像素真的透明了,Processing只是和你完了一个颜色计算的把戏,将一个颜色的值按照百分比加入另外一个颜色中,从而产生一种“混合”或者“透明”的错觉。

Alpha值的范围也从0到255,其中0完全透明(即0%不透明),而255完全不透明(即100%不透明)。

示例:

img

size(200, 200)
background(0)
noStroke()

# 在颜色命令中不设置第四个参数就意味这 100% 的不透明度
fill(0, 0, 255)
rect(0, 0, 100, 200)

# 255 means 100% 不透明度
fill(255, 0, 0, 255)
rect(0, 0, 200, 40)

# 75% 不透明度
fill(255, 0, 0, 191)
rect(0, 50, 200, 40)

# 55% 不透明度
fill(255, 0, 0, 127)
rect(0, 100, 200, 40)

# 25% 不透明度
fill(255, 0, 0, 63)
rect(0, 150, 200, 40)

使用Processing颜色选择器

菜单中:工具→ 颜色选择器,打开后可直观选择想要的颜色,并获得其对应表示值:

在这里插入图片描述