I'm working on an interactive pH spectrum in JavaScript! Here is an image of what I have so far EXAMPLE!
What I want to calculate is the startPos and endPos (with offset) of each pH level (the text 0,1,2,...)!
At the moment if you look on the image provided I added the levels customly by giving hard values! However I want to provide a formula that would allow my program to calculate this automatically!
FYI I'm working with a half circle and the starting position is 180 and ends at 360 degrees! That's how JavaScript works!
The values I know:
- The center of the circle!
- The degree of each arc (12.9)
- The startPos and endPos of each arc (eg. x:180, y:192.9)
I want to calculate the X Y position of the black dots in the image!
UPDATE: My program works as expected but I'm not sure if the math matches.
function draw_preferred_ph(minValue, maxValue){
//Font Settings
stroke(0);
strokeWeight(1);
//Original value of theta = 12.9
//FORMULA : input * (theta -1) + 180 + trunc(input)
var startDeg = minValue*11.9+180+Math.trunc(minValue);
var endDeg = maxValue*11.9+180+Math.trunc(maxValue);
//Draw arc representing minimum and maximum pH levels!
squareColor = color(100, 50, 100);
squareColor.setAlpha(100);
fill(squareColor);
//PARAMS: startX,startY, W, H, startDegree, FinishDegree, TYPE:PIE
arc(0,0,r*2,r*2,startDeg,endDeg,PIE);
///DRAW LABELS OF MIN AND MAX VALUES
noStroke();
fill(0, 102, 153);
text("MIN pH: " + minValue, -340,-320)
text("MAX pH: " + maxValue, 160, -320);
}
As Ethan Bolker suggested, this can be done with help of trigonometric functions. Let $\{c_h,c_v\}$ denote be the coordinates of the center and $r$ the radius of the circle. As you need to place $15$ dots, the angular distance between them is $12$, and the position of the $n^{th}$ dot should be $$\{x,y\}=\{c_h+r\cos (180+12 n),c_h+r\sin (180+12 n)\}$$