Processing 006 颜色和不透明度
1 颜色 HSB 模式
HSB 代表 Hue (色度) Saturation(饱和度) Brightness(亮度)
H代表不同的颜色:
colorMode(HSB);
1.1 色度
for(int x = 100; x < 900; x+= 50){ //16
for(int y = 50; y <= 800; y +=50){
fill(i,255,255);
circle(x, y, 30);
i++;
}
}
不通的色度颜色的变化:
1.2 饱和度
饱和度表示颜色的饱满程度,其实就是不同颜色之间的差异,饱和度越大,颜色的差异越大,看起来更鲜艳
for(int x = 100; x < 900; x+= 50){ //16
for(int y = 50; y <= 800; y +=50){
fill(255,i,255);
text(i, x - 10, y - 20);
circle(x, y, 30);
i++;
}
}
1.3 亮度
亮度比较容易理解,可以理解为光线的强度。
for(int x = 100; x < 900; x+= 50){ //16
for(int y = 50; y <= 800; y +=50){
fill(255,255,i);
text(i, x - 10, y - 20);
circle(x, y, 30);
i++;
}
}
1.4 随机颜色
用HSB随机更容易产生某种类型的颜色,比如饱和度高的亮的随机颜色
for(int x = 100; x < 900; x+= 50){ //16
for(int y = 50; y <= 800; y +=50){
fill(random(255),255,255);
text(i, x - 10, y - 20);
circle(x, y, 30);
i++;
}
}
不透明度
对于多个图形叠加的时候就会涉及到不透明度的概念,默认颜色时不透明的,要想达到透明效果,在设置颜色时,可以设置不透明度
fill(#00FF00, 255); // 颜色 , 不透明度
circle(width / 2, height / 2, 200);
fill(#0000FF, 255); // 颜色 , 不透明度
circle(width / 2, height / 2, 300);
此时第二个圆覆盖在第一圆上,且完全不透明,所以看不到第一个圆。
fill(#00FF00, 255); // 颜色 , 不透明度
circle(width / 2, height / 2, 200);
fill(#0000FF, 128); // 颜色 , 不透明度
circle(width / 2, height / 2, 300);
此时第二个圆覆盖在第一圆上,处于半透明状态,所以可以看到第一个圆。