关于颜色模式RGB 和HSB 的关系

Posted 2023-05-17

参考技术A 如果谈rgb,那就指的是三个通道，不能单纯认为是一种颜色。每个通道可取值0~255.如果用x表示0~255之中一个数字，那么rgb分别为x，0，0的组合都是红色。当然000是黑色，255，255，255是白色。如果三个通道取相同值就是灰色。其它组合就是其它色。如0，255，255就是红色的反转色青色。至于hsb是另一种表示方法，分别表示色相、饱和度和明度。如果把s调到0，再调节b,就是不同浓度的灰色。这里h对彩色种类是决定性的。希望对你有所帮助。

在 HSB 颜色模式中更改不透明度

【中文标题】在 HSB 颜色模式中更改不透明度

【英文标题】：Change Opacity in HSB Colormode

【发布时间】：2019-04-14 17:58:29

【问题描述】：

我正在尝试更改笔画的不透明度，但不确定如何在 HSB 颜色模式下进行更改。或者，如果我切换到 RGB 模式，如何让颜色随时间变化？

这是我的代码：（任何帮助将不胜感激）

float rainbow=0;
int dir=1;

void setup() 
  size(600, 600);
  background(0);
  colorMode(HSB, 255);
  

void draw() 
  if ( rainbow < 255 && dir==1) 
     rainbow++;
  

  if ( rainbow > 0 && dir==-1) 
    rainbow--;
  

  if ( rainbow == 255) 
    dir*= -1;
  

  if ( rainbow == 0) 
    dir*= -1;
  

  stroke(rainbow, 255, 200);
  line(mouseX,mouseY,width/2,height/2); 

  if (mousePressed)
  stroke(rainbow, 255, 200);
  line(mouseX,mouseY,0,mouseX);
  

  if (mousePressed)
  stroke(rainbow, 100, 200);
  line(mouseX,mouseY,600,mouseX);
  

【参考方案1】：

您可以为stroke() 或fill() 函数指定不透明度的第四个参数。这是一个例子：

void setup()
  size(500, 500);
  colorMode(HSB, 255);
  background(255);


void draw()
  fill(0, 255, 200, 100);
  ellipse(mouseX, mouseY, 20, 20);

请注意，您还可以使用 RGB 模式并随着时间的推移修改 R、G 和 B 参数。这比循环 HSB 值要复杂一些，但您可以创建任何您想要的模式。这是一个例子：

float r = 0;
float g = 0;
float b = 0;

float deltaR = 1;
float deltaG = 2;
float deltaB = 4;

void setup()
  size(500, 500);
  background(255);


void draw()
  
  r += deltaR;
  g += deltaG;
  b += deltaB;
  
  if(r < 0 || r > 255)
    deltaR *= -1;
    r = constrain(r, 0, 255);
  
  
  if(g < 0 || g > 255)
   deltaG *= -1;
   g = constrain(g, 0, 255);
  
  
  if(b < 0 || b > 255)
    deltaB *= -1;
    b = constrain(b, 0, 255);
  
  
  fill(r, g, b);
  ellipse(mouseX, mouseY, 20, 20);

【讨论】：

你能解释一下我如何随着时间的推移修改 RGB 参数吗？