交互式渐变

Question

我在处理方面的知识是基础知识，我需要完成任务方面的帮助。

我的目标是创建一个程序，以便每当鼠标在顶部的ROYGBIV栏上按任何色调时，底部画布将显示该特定色调的不同饱和度和亮度值。

我将未完成的代码放在下面。我的代码的问题在于，底部画布显示纯色，这与参考照片不同，在参考照片中，您可以看到渐变从顶部到底部逐渐变暗。

我能否获得有关如何调整代码以获得与参考相似的结果的提示？

我希望我的解释有意义。期待您的帮助！谢谢。

代码：

float RGB_Bar=500; 
float HueValue=RGB_Bar/2;  

void setup() {
  background(255);
  size(500, 500);
  colorMode(HSB);
  stroke(0, 0, 0);
}

void draw() {
  HueValue= MousePointer(0, 0, RGB_Bar, 50, HueValue); 
  fill(HueValue, 255, 255);  
  rect(0, 50, 500, 500);
}

float MousePointer(float xPos, float yPos, float sWidth, float sHeight, float HueVal) {
  fill(255);
  noStroke();
  rect(xPos-5, yPos-10, sWidth+10, sHeight+20);  

  float MousePointerPos=map(HueVal, 0, 255, 0, sWidth); 

  for (int i=0; i<sWidth; i++) {  
    float HueValue=map(i, 0, sWidth, 0, 255);  
    stroke(HueValue, 255, 255);
    line(xPos+i, yPos, xPos+i, yPos+sHeight);
  }
  if (mousePressed && mouseX>xPos && mouseX<(xPos+sWidth) && mouseY>yPos && mouseY <yPos+sHeight) {
    MousePointerPos=mouseX-xPos;
    HueVal=map(MousePointerPos, 0, sWidth, 0, 255);
  }
  stroke(100);
  fill(HueVal, 255, 255);  
  return HueVal;
}

Answer 1

最简单的方法是抛开正方形，改用PImage。 PImage由单个像素的数组组成。一旦有了这些，剩下的就是将正确的像素放在正确的位置。

很幸运，您正在使用HSB，所以这将是在公园散步。

首先，请看您提供的这张非常有用的图像，并注意以下内容：

• H：通过单击鼠标来选择（该代码保持原样）。
• S：饱和度在顶部最饱和
• B：亮度是最左边的白色

现在，在进行繁重的工作之前，让我们做一个简单的步骤：

1. 添加全局变量PImage SaturationBrightnessMap;
2. 通过setup()方法初始化：SaturationBrightnessMap = createImage(500, 500, HSB);
3. 创建void DrawSaturationBrightnessMap()方法以将我们的工作空间隔离在一个地方。
4. 在draw()中，用新的（尚未编写的）DrawSaturationBrightnessMap方法替换绘制矩形的线。

现在我们准备绘制您的渐变（我可能使用了错误的命名法命名为SaturationBrightnessMap，这不是我的专业领域。]]

我们的数组将为500 * 500像素，因为这是我们要填充的矩形的大小（因此也是PImage的大小）。我们将在此数组中循环，同时将颜色分配给每个单像素。

喜欢这个：

for (int i=0; i<SaturationBrightnessMap.pixels.length; i++) {
  // do stuff
}
当我们在HSB中工作时，每个像素的颜色都将像这样被赋予属性：

SaturationBrightnessMap.pixels[i] = color(HValue, SValue, BValue);
我们已经知道，色相已经被用户选择并存储在HueValue中。唯恐是找出另外两个数字。它们都是[0-255]数字，其中255是“最强”值（最亮或最饱和）。

S：最饱和的区域是左边，因此最左端为255，最右端为0。其余为数学。

B：最亮的区域在顶部。如果您的饱和度正确，您就会知道钻头。

但是这不是某些（x，y）坐标模式，它只是一个数组。我们如何知道像素[3471]是左，右还是上或下？

答案再次是数学。您可以使用modulo和integer division来获得我的问题的答案。

一旦将每个像素设置为正确的颜色，只需用SaturationBrightnessMap.updatePixels();刷新PImage并绘制它。

这是完整的代码，您可以将其复制并粘贴到Processing IDE中，然后它将运行。

float RGB_Bar=500;  
float HueValue;
PImage SaturationBrightnessMap;

void setup() {
  background(255);
  size(500, 500);
  colorMode(HSB);
  stroke(0);
  SaturationBrightnessMap = createImage(500, 500, HSB);
}

void draw() {
  HueValue= MousePointer(0, 0, RGB_Bar, 500, HueValue); 
  DrawSaturationBrightnessMap();
}

// THIS IS THE PART WHICH INTERESTS YOU
void DrawSaturationBrightnessMap() {
  // I put these into variables to avoid recalculating them at every iteration of the loop
  float w = (float)SaturationBrightnessMap.width/255f;
  float h = (float)SaturationBrightnessMap.width/255f;

  // Set every pixel in the array
  for (int i=0; i<SaturationBrightnessMap.pixels.length; i++) {
    SaturationBrightnessMap.pixels[i] = color(HueValue, 255-(i%SaturationBrightnessMap.width)/w, 255-(i/SaturationBrightnessMap.height)/h);
  }

  // update the PImage and draw it
  SaturationBrightnessMap.updatePixels();
  image(SaturationBrightnessMap, 0, 50);
}

float MousePointer(float xPos, float yPos, float sWidth, float sHeight, float HueVal) {
  fill(255);
  noStroke();
  rect(xPos-5, yPos-10, sWidth+10, sHeight+20); 

  float MousePointerPos=map(HueVal, 0, 255, 0, sWidth); 

  for (int i=0; i<sWidth; i++) { 
    float HueValue=map(i, 0, sWidth, 0, 255);  
    stroke(HueValue, 255, 255);
    line(xPos+i, yPos, xPos+i, yPos+sHeight);
  }

  if (mousePressed && mouseX>xPos && mouseX<(xPos+sWidth) && mouseY>yPos && mouseY <yPos+sHeight) {
    MousePointerPos=mouseX-xPos;
    HueVal=map(MousePointerPos, 0, sWidth, 0, 255);
  }

  stroke(100);
  fill(HueVal, 255, 255); 
  return HueVal;
}
[如果您有问题要问，我会闲逛一会儿。玩得开心！