arduino - 处理 RGB 轮以控制 Arduino RGB LED

Question

我想制作一个 RGB 轮作为 GUI 来控制连接到 Arduino 板的 RGB Led 的 LED 颜色。

到目前为止，我已经在 Processing 中完成了这段代码。

float startFill;
float startAngle;
int step;
float stepLength;

float centerX;
float centerY;

float pSize;
float bValue;

void setup()
{
  size(512, 512);
  colorMode(HSB, 2*PI, 100, 100);
  smooth();
}

void draw()
{
  background(0,0,25);
  ellipseMode(CENTER);
  noStroke();

  step = 120;
  centerX = width/2;
  centerY = height/2;
  startFill = 0;
  startAngle = 0;
  stepLength = PI/step;

  pSize = 400;
  bValue = 200;

  // draw arcs
  for(int i=0; i< 2*step; i++)
  {
     for(int j=0; j< step; j++)
     {
         fill(startFill, bValue, 100,80);
         stroke(0,0,95,20);
         arc(centerX, centerY, pSize, pSize, startAngle, startAngle+stepLength);

         bValue = bValue - 50/step;
         pSize = pSize - 50/step;
      }   
      startFill =  startFill + stepLength;
      startAngle = startAngle + stepLength;
  }  
}

我想使用鼠标在屏幕上前一个滚轮上的位置来映射红色、绿色和蓝色的值。

我找到了一张图片，可以帮助我将 RGB 值写在滚轮上的鼠标位置上，但我不太确定如何制作。

RGB WHEEL PROCESSING

我真的很感激任何帮助或建议。

最好的问候

Answer 1

请注意，该色轮实际上并不是色轮。它只是“相同的颜色，进入”。外圈是您的标准颜色组合，角度为纯 R ...，角度为...+2/4*pi 时为纯 G，角度为 ...+4/3*pi 处为纯 B。出于激活目的，构造一个颜色楔形对象并使用它:

class ColorWedge {
  color c;
  float[] coords;
  ColorWedge(color _c, float[] _coords) {
    c = _c;
    coords = _coords;
  }
  void draw() {
    fill(c);
    noStroke();
    triangle(coords[0],coords[1],coords[2],coords[3],coords[4],coords[5]);
    stroke(0);
    line(coords[2],coords[3],coords[4],coords[5]);
  }
}

然后通过在一个角度上创建楔形来为“所有”颜色构建楔形:

final float PI2 = 2*PI;
ArrayList<ColorWedge> wedges; 

void setup() {
  size(200,200);
  colorMode(HSB,PI2);
  wedges = new ArrayList<ColorWedge>();
  float radius = 90,
        ox = width/2,
        oy = height/2,
        px, py, nx, ny,
        step = 0.01,
        overlap = step*0.6;
  for(float a=0; a<PI2; a+=step) {
    px = ox + radius * cos(a-overlap);
    py = oy + radius * sin(a-overlap);
    nx = ox + radius * cos(a+overlap);
    ny = oy + radius * sin(a+overlap);
    wedges.add(new ColorWedge(color(a,PI2,PI2), new float[]{ox,oy,px,py,nx,ny}));
  }
}

控制颜色只需弄清楚鼠标在哪里，以及它与草图中心的角度是:

color wcolor = 0;

void draw() {
  background(PI2,0,PI2);
  pushStyle();
  for(ColorWedge w: wedges) { w.draw(); }

  strokeWeight(10);
  stroke(wcolor);
  line(0,0,width,0);
  line(width,0,width,height);
  line(width,height,0,height);
  line(0,height,0,0);
  popStyle();
}

void mouseMoved() {
  float angle = atan2(mouseY-height/2,mouseX-width/2);
  if(angle<0) angle+=PI2;
  ColorWedge wedge = wedges.get((int)map(angle,0,PI2,0,wedges.size()));
  wcolor = wedge.c;
}

如果不是 100%，那应该会让你顺利完成。