Neil Hillman
Neil Hillman

Reputation: 365

Plotting points in a semi-circle

I am trying to plot points, evenly spaced in a semi-circle, using JavaScript.

So far, I have worked out the formula for calculating the Y co-ordinate based on the X co-ordinates, which produces a semi-circle. The problem is, because my X co-ordinates are at regular intervals, the points appear closer together at the apex, and more spaced out at either ends of the arc, (in a sort of parabolic configuration). What I want to produce is evenly spaced points, like the minutes on a clock face.

Here is my code so far:

$radius = 200;
for ($i = -10; $i <= 10; $i++) {
    $pos_x = $i * 20;
    $pos_y = Math.round( Math.sqrt( Math.pow($radius,2) - Math.pow($pos_x,2) ) + $radius );
}

See my JSfiddle for a visual example: https://jsfiddle.net/7Lbqhtme/2/

I think all that I need to change is a multiplier on $pos_x so that the intervals decrease the further from 0 you get, (but I only have GCSE Maths and am struggling with this)...

Can someone please help me adjust this code, so that the output points are more uniformly placed?

PS. It doesn't have to be entirely accurate, (using SIN and COS, etc), it can just be a multiplier which decreases the $x interval the further from 0, so that the points appears more evenly spaced.

Thanks for looking!

Upvotes: 1

Views: 1985

Answers (1)

Felix Castor
Felix Castor

Reputation: 1675

To get a full circle you really need to use the following parametric equations to get the proper x and y coordinates:

x(t) = shift_x + r*Cos(t)

y(t) = shift_y + r*Sin(t)

where t is your angle in radians, r is the radius of the circle and shift allows for centering component wise seen above. For uniformly spaced t's you should get evenly space points around the center point (shift_x,shift_y).

an example usage: Your JS fiddle

$r = 200;
$step = Math.PI/20
for ($i = 0; $i <= 20; $i++) {

  $x = $r * Math.cos($step*$i);
  $y = $r * Math.sin($step*$i);
  $("#point_" + Math.round($i) ).css({ "left": $x + 300 , "bottom": $y-20 });

}

Upvotes: 1

Related Questions