How to make an ellipse follow the edge of a circle using Mouse Dragged?

iXShadow

Hi forum users,

I've been assigned some work for class that involves making a colour wheel. So far it looks good, but I'm trying to make a selector move along another circle inside the colour wheel, but so far I can only make it move in a line. Here is my code: float colour_wheel;

float theta;
float r;
float x;
float y;

void setup(){
  size(1000, 500);
  smooth();
  x = 600;
  y = 250;
  theta = 0;
  r = 150;
}
void draw(){
background(255);
  //colour area
noFill();
rect(750, 100, 50, 50);
  //draw colour wheel
for(theta = 0; theta < TWO_PI; theta += TWO_PI/270){ 
  colorMode(HSB); 
  colour_wheel = map(theta, 0, TWO_PI, 0, 255); 
  fill (colour_wheel, 255, 255); 
  arc(width/2, height/2, r*2, r*2, theta-PI/30, theta+PI/30);
  }
  //selector guideline
noFill();
ellipse(500, 250, 200, 200);
  //selector
fill(64, 64, 64, 50);
ellipse(x, y, 25, 25);
}


void mouseDragged(){
  //drag selector along circle
  if(pointInCircle(mouseX, mouseY, x, y, 125 / 2)){
    x = 600;
    y = mouseY;
  }
}
boolean pointInCircle(float x, float y, float a, float b, float r) {
  if (dist(x, y, a, b) <= r) {
    return true;
  } else {
    return false;
  }
}

Chrisir

here...

this reacts to x-direction movement of the mouse

float colour_wheel;

float theta; 
float r; 
float x; 
float y;

void setup() { 
  size(1000, 500); 
  smooth(); 
  x = 600; 
  y = 250; 
  theta = 0; 
  r = 150;
} 
void draw() { 
  background(255); 

  //colour area 
  noFill(); 
  rect(750, 100, 50, 50); 
  //draw colour wheel 
  for (theta = 0; theta < TWO_PI; theta += TWO_PI/270) { 
    colorMode(HSB); 
    colour_wheel = map(theta, 0, TWO_PI, 0, 255); 
    fill (colour_wheel, 255, 255); 
    float r2=7;
    arc(width/2, height/2, r2, r2, theta-PI/30, theta+PI/30);
  }

  //selector guideline 
  noFill(); 
  ellipse(500, 250, 200, 200);

  //selector
  fill(64, 64, 64, 50); 
  ellipse(x, y, 25, 25);
}

void mouseDragged() { 
  //drag selector along circle 
  //  if (pointInCircle(mouseX, mouseY, x, y, 125 / 2))
  { 
    //   x = 600; 
    //   y = mouseY;
    //
    float angle=map(mouseX, 40, width-40, 0, 2+PI+.8);
    float d=100;
    x=d*cos(angle)+500;
    y=d*sin(angle)+250;
  }
} 
boolean pointInCircle(float x, float y, float a, float b, float r) { 
  if (dist(x, y, a, b) <= r) { 
    return true;
  } 
  else { 
    return false;
  }
}
//

iXShadow

That's close, but it appears to be inverted.

I want the selector to move with the mouse in the same direction.