Processing 006 颜色和不透明度

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);

此时第二个圆覆盖在第一圆上，处于半透明状态，所以可以看到第一个圆。