处理RGB Wheel以控制Arduino RGB LED

时间:2013-05-05 12:30:34

标签: arduino processing rgb

我想将RGB车轮作为GUI处理,以控制连接到Arduino Board的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

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

祝你好运

1 个答案:

答案 0 :(得分:3)

请注意,色轮不能实现色轮。它只是“相同的颜色,进入”。外圆是你的标准颜色混合,纯角度为R ......,角度为纯G + 2/4 * pi,角度为纯B + 4/3 * pi。出于激活目的,构造一个颜色楔形对象并使用:

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%的话,那应该会让你顺利。