Convert angle to value and value to angle

34 Views Asked by At

I have an "arc" react component and I'm struggling with the math to convert the angle (in degrees) to a value, and the value to an angle.

This arc has a "handle" which represents a "slider" and the handle can be dragged to any position along the arc, what I'm trying to do is determine the respective "value" on the arc based on it's current position/rotation.

const minValue = 6;
const maxValue = 30;
const value = 6;
const minRotation = 50; 
const maxRotation = 130; // 50-130 is restricted, meaning the rotation can be below 50, but not between 50-130deg

If the above is the limitations between the value and the rotations, I need to convert the value to an angle, and the angle to a value.

An example of the expected output is something like this:

50deg - 6 // the minimum rotation, so the minimum value
-1deg - 11
-90deg - 21
-173deg - 27
130deg - 36  // the maximum rotation, so the maximum value

I'm struggling with the math for the other two functions I need (angleToValue and valueToAngle), any help would be great!