Processing RGB Wheel to control Arduino RGB LED

Question

I would like to make a RGB wheel in processing as a GUI to control the LED color of a RGB Led connected to an Arduino Board.

I have done this code in Processing so far.

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

I would like to map the values of Red, Green and Blue using the mouse position on the screen over the previous wheel.

I found a picture that would help me as guide to write the RGB values over the mouse position on the wheel but I'm not very sure how to make that.

RGB WHEEL PROCESSING

I would really appreciate any help or advice.

Best regards

Answer 1

Note that that color wheel is not actuall a color wheel. It's just "the same color, going in". The outer circle is your standard color mix, pure R at angle ..., pure G at angle ...+2/4*pi, and pure B at angle ...+4/3*pi. For activation purposes, construct a color wedge object and use that:

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

And then construct wedges for "all" the colors by creating wedges over an angle:

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

Controlling the color is then simply a matter of figuring out where the mouse is, and that its angle to the center of the sketch is:

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

That should get you well on your way, if not 100% of the way there.