# Processing ColorWheel

Example code to draw a sliced color wheel with the bezierVertex() function in Processing.

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;

translate(width/2, height/2);

for(int i=0; i< slices; i++)
{
fill(int(map(i, 0, slices, 0, 359)),255,255);

}

}

// 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

// with two points an arc can be 90 degrees at a maximum
if(angleDegrees>90) angleDegrees = 90;

float controlTheta1 = angle/3.0;
float controlTheta2 = controlTheta1*2.0;

beginShape();

// start point vertex point
vertex(sx, sy);

// calculate control points of the bezier

// next point down

// draw curve with control points
bezierVertex(cx1, cy1, cx2, cy2, ax, ay);

// go to inner point

vertex(ax,ay);

// go to inner point up

// calculate control points of the bezier Was this article useful to you? Buy me a coffee!