Finding point n% away from the centre of a semicircle in Javascript?

I'm sorry to say that Math really isn't my strong suit. Normally I can get by, but this has got me totally stumped.

I'm trying to code up a quiz results screen in HTML/CSS/Javascript.

On my interface, I have a semicircle (the right hemisphere of a target).

I have a range of 'scores' (integers out of 100 - so 50, 80, 90 etc.).

I need to plot these points on the semicircle to be n% away from the centre, where n is the value of each score - the higher the score, the closer to the centre of the target the point will appear.

I know how wide my semicircle is, and have already handled the conversion of the % values so that the higher ones appear closer to the centre while the lower ones appear further out.

What I can't wrap my head around is plotti开发者_运维百科ng these points on a line that travels out from the centre point (x = 0, y = target height/2) of the target at a random angle (so the points don't overlap).

Any suggestions are gratefully received!

---

Do you have an example of what you want this to look like? It sounds like you want to divide up the circle into N slices where N is the number of points you need to display, then plot the points along each of those radii. So you might have something like:

Edit: code was rotating about the origin, not the circle specified

var scores = [];
//...
//assume scores is an array of distances from the center of the circle
var points = [];
var interval = 2 * Math.PI / N;
var angle;
for (var i = 0; i < N; i++) {
    angle = interval * i;
    //assume (cx, cy) are the coordinates of the center of your circle
    points.push({
        x: scores[i] * Math.cos(angle) + cx,
        y: scores[i] * Math.sin(angle) + cy
    });
}

Then you can plot points however you see fit.

---

After much headscratching, I managed to arrive at this solution (with the help of a colleague who's much, much better at this kind of thing than me):

(arr_result is an array containing IDs and scores - scores are percentages of 100)

for (var i = 0; i < arr_result.length; i++){

     var angle = angleArray[i]; // this is an array of angles (randomised) - points around the edge of the semicircle

     var radius = 150; // width of the semicircle

     var deadZone = 25 // to make matters complicated, the circle has a 'dead zone' in the centre which we want to discount
     var maxScore = 100
     var score = parseInt(arr_result[i]['score'], 10)

     var alpha = angle * Math.PI
     var distance = (maxScore-score)/maxScore*(radius-deadZone) + deadZone
     var x = distance * Math.sin(alpha)
     var y = radius + distance * Math.cos(alpha)

     $('#marker_' + arr_result[i]['id'], templateCode).css({ // target a specific marker and move it using jQuery
         'left' : pointX,
         'top': pointY
     });
 }

I've omitted the code for generating the array of angles and randomising that array - that's only needed for presentational purposes so the markers don't overlap.

I also do some weird things with the co-ordinates before I move the markers (again, this has been omitted) as I want the point to be at the bottom-centre of the marker rather than the top-left.