Processing ColorWheel

I wanted to create a sliced color wheel in Processing. This is not easy to do with the build in functions. You can draw PieCharts with Processing with the arc() function. However its impossible to make a ring chart like effect, without masking parts with an ellipse. In the code below is shown how to draw an arc shape with a bezierVertex. The code is based on code from the book Processing 2: Creative Coding and Generative Art

// draw a "sliced" colorwheel 
// mouseX controls the weight/thickness of the arcs
// mouseY controls the amount of slices
// 
// kasperkamperman.com - 05-07-2014


void setup() {
  size(620, 620);
  colorMode(HSB,360,255,255);
  noStroke();
  frameRate(20);
  
  // draw once
  background(0,255,0);
  drawColorCircle(300, 50, 16, 1.5);
} 

void draw()
{ 

  int thickness = (int) map(mouseX,0,width,5,100);
  int slices    = (int) map(mouseY,0,height,6,128);

  // only draw when parameters are changed (so previous mouse position was different)
  if(mouseX != pmouseX || mouseY != pmouseY) 
  { background(0,255,0);
    drawColorCircle(300, thickness, slices, 1.5);
  } 
}

void drawColorCircle(int radius, int weight, int slices, float degreesInBetween)
{ 
  float halfDegreesInBetween = degreesInBetween/2;
  float sliceAngle = (360.0/(float) slices); 
  
  // make piece a bit smaller because of the degreesInBetween margin
  float slicePieceAngle = sliceAngle - halfDegreesInBetween;
 
  int innerRadius = radius - weight;
  
  translate(width/2, height/2);
  
  rotate(radians(-90+halfDegreesInBetween));
  
  for(int i=0; i< slices; i++)
  { 
    fill(int(map(i, 0, slices, 0, 359)),255,255);
    
    arcPiece(slicePieceAngle, radius, innerRadius); 
    rotate(radians(sliceAngle));
  }
  
}

void arcPiece(float angleDegrees, float radius, float iRadius) {
  
  // Based on Bezier Ellipse example - p137/138
  // Processing: Creative Coding and Generative Art in Processing 2
  // Ira Greenberg, Dianna Xu, Deepak Kumar
  
  float cx1 = 0;
  float cy1 = 0;
  float cx2 = 0;
  float cy2 = 0;
  
  float ax = 0;
  float ay = 0;
  
  // startpoint
  float sx = cos(0)*radius;
  float sy = sin(0)*radius;
  
  // with two points an arc can be 90 degrees at a maximum
  if(angleDegrees>90) angleDegrees = 90;
  
  float angle = radians(angleDegrees); 
  
  float controlTheta1 = angle/3.0;
  float controlTheta2 = controlTheta1*2.0;
  float controlRadius = radius/cos(controlTheta1);
  
  beginShape();
  
      // start point vertex point
      vertex(sx, sy);
      
      // calculate control points of the bezier
      cx1 = cos(controlTheta1)*controlRadius;
      cy1 = sin(controlTheta1)*controlRadius;
      cx2 = cos(controlTheta2)*controlRadius;
      cy2 = sin(controlTheta2)*controlRadius;
      
      // next point down
      ax = cos(angle)*radius;
      ay = sin(angle)*radius;
    
      // draw curve with control points
      bezierVertex(cx1, cy1, cx2, cy2, ax, ay);
      
      // go to inner point
      ax = cos(angle)*iRadius;
      ay = sin(angle)*iRadius;
      
      vertex(ax,ay);
      
      // go to inner point up
      ax = cos(0)*iRadius;
      ay = sin(0)*iRadius;
      
      // set controlRadius to the innerradius
      controlRadius = iRadius/cos(controlTheta1);
      
      // calculate control points of the bezier
      cx1 = cos(controlTheta1)*controlRadius;
      cy1 = sin(controlTheta1)*controlRadius;
      cx2 = cos(controlTheta2)*controlRadius;
      cy2 = sin(controlTheta2)*controlRadius;
      
      // switch the points compared with the other arc
      // because we draw the other way round
      bezierVertex(cx2, cy2, cx1, cy1, ax, ay);
  
  endShape(CLOSE);
}