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.