Colour wheel with text inside

SimplyEnvision

Hey there everyone,

So I'm trying to draw a colour wheel with one colour per musical note, and then print the name of the note inside of it's corresponding wheel piece. This is the relevant code:

  int numColors = 12;
  int wheelDiameter = 600;
  float colorSpacing = 1;
  int wheelThickness = 120;
  arrayNotes = { "Do C", "Do# Reb C# Bb", "Re D", "Re# Mib D# Eb", "Mi E", "Fa F", "Fa# Solb F# Gb", 
                   "Sol G", "Sol# Lab G# Ab", "La A", "La# Sib A# Bb", "Si B" };

  if ((runMode == 7)) {

    colorMode(HSB, 360, 100, 100);
    background(0);

    strokeWeight(wheelThickness);
    noFill();
    strokeCap(SQUARE);

    int colorAngle = 360/numColors;

    pushMatrix();
    translate(width/2, height/2);


    for (int i = 0; i < numColors; i++) {

      float startAngle = i * colorAngle + colorSpacing;
      float stopAngle = (i + 1) * colorAngle - colorSpacing;

      //Colour
      stroke(startAngle, 80, 90);
      arc(0, 0, wheelDiameter, wheelDiameter, radians(startAngle), radians(stopAngle));

      textSize(28);

      text(arrayNotes[i], (wheelDiameter/2 + wheelThickness/2) * cos(i*PI/6 + PI/12), 
      (wheelDiameter/2 + wheelThickness/2)* sin(i*PI/6 + PI/12));

    }

    popMatrix();

  }  

But for some reason even though the order is right, I paint the wheel piece first and then the text, the text appears behind the wheel. What am I doing wrong? Once I get this right then I want to make sure the text fits inside the wheel. Also, the font seems to be blurry, but I guess that's because I didn't set up a font with PFont?

Any suggestions will be greatly appreciated!

koogs

Change numColors in line 23 to 2. What do you see?

koogs

ok, that wasn't the problem i thought it was - that the words and the boxes were out of step.

but the problem is exactly what you thought - that you're drawing the colour after you're drawing the text. it only shows at the very top though, because that's the only one where the text overlaps the next square.

i made your example into runnable version which shows the problem:

int numColors = 12;
int wheelDiameter = 600;
float colorSpacing = 1;
int wheelThickness = 120;
String[] arrayNotes = { 
  "Do C", "Do# Reb C# Bb", "Re D", "Re# Mib D# Eb", "Mi E", "Fa F", "Fa# Solb F# Gb", "Sol G", "Sol# Lab G# Ab", "La A", "La# Sib A# Bb", "Si B"
};

void setup() {
  size(800, 800);
  noLoop();
} 

void draw() {
  colorMode(HSB, 360, 100, 100);
  background(0);

  strokeWeight(wheelThickness);
  noFill();
  strokeCap(SQUARE);
  int colorAngle = 360/numColors;

  pushMatrix();
  translate(width/2, height/2);

  for (int i = 0; i < numColors; i++) {
    float startAngle = i * colorAngle + colorSpacing;
    float stopAngle = (i + 1) * colorAngle - colorSpacing;

    //Colour
    stroke(startAngle, 80, 90);
    arc(0, 0, wheelDiameter, wheelDiameter, radians(startAngle), radians(stopAngle));

    textSize(28);
    text(arrayNotes[i], (wheelDiameter/2 + wheelThickness/2) * cos(i*PI/6 + PI/12), 
    (wheelDiameter/2 + wheelThickness/2)* sin(i*PI/6 + PI/12));
  }
  popMatrix();
}  

the solution is to draw ALL the boxes then draw ALL the text - have two loops.

SimplyEnvision

Hi there! Thank you for your help. What I don't understand is how this could happen. I mean, processing is sequential right? So if text() is after arc() then what is going on?

Edit: Changed the code, still doesn't work. Also, for some reason the code you posted is sharper and the font isn't pixelated. For some reason mine is, check out the picture below.

if ((runMode == 7)) {

    colorMode(HSB, 360, 100, 100);
    background(0);

    strokeWeight(wheelThickness);
    noFill();
    strokeCap(SQUARE);

    int colorAngle = 360/numColors;

    pushMatrix();
    translate(width/2, height/2);

    //arrayNotes = { "Do C", "Do# Reb C# Bb", "Re D", "Re# Mib D# Eb", "Mi E", "Fa F", "Fa# Solb F# Gb", 
                   //"Sol G", "Sol# Lab G# Ab", "La A", "La# Sib A# Bb", "Si B" };

    for (int i = 0; i < numColors; i++) {

      float startAngle = i * colorAngle + colorSpacing;
      float stopAngle = (i + 1) * colorAngle - colorSpacing;

      //Colour
      stroke(startAngle, 80, 90);
      arc(0, 0, wheelDiameter, wheelDiameter, radians(startAngle), radians(stopAngle));

    }
    for (int i = 0; i < numColors; i++) {
      textSize(28);
      //fill(360);
      //text(arrayNotes[i], wheelDiameter/2 + wheelThickness/2 * cos( ((2*i+1)/2)*colorAngle ), 
      //     wheelDiameter/2 + wheelThickness/2 * sin( ((2*i+1)/2)*colorAngle ));  
      text(arrayNotes[i], (wheelDiameter/2 + wheelThickness/2) * cos(i*PI/6 + PI/12), (wheelDiameter/2 + wheelThickness/2)* sin(i*PI/6 + PI/12));
    }  

    popMatrix();

  }  

This is the result:

koogs

if i change mine to match yours then it is fine - all text is in front of the colours.

what does your size() say?

(processing 1.5.1, windows 7)

SimplyEnvision

This is what I have in setup() that could maybe influence this:

size(1920, 1080, P3D);
//size(1280, 720, P3D);
smooth();  

I'm running processing 2.2.1 on Windows 7 64 bit.

GoToLoop

Why would you need the P3D renderer? Isn't JAVA2D enough for some pie-like chart? :-?
https://processing.org/reference/size_.html

SimplyEnvision

Well, this is just part of my sketch. I was under the impression I need P3D if I want to use toxiclibs for vector math? I'm also using the Minim music library and the examples use P3D.