Use X,Y coordinates to plot points inside a circle

Question

Is there a way in javascript to plot x,y coordinates so they fall into a circle rather than a square?

For example if I have the following code:

  circleRadius = 100;
  context.drawImage(img_elem, dx, dy, dw, dh);

I need to figure out a combination of x,y values that would fall inside a 100 pixel circle.

Thanks!

Answer 1

1. choose an x at random between -100 and 100
2. a circle is defined by x^2 + y^2 = r^2, which in your case equals 100^2 = 10000
3. From this equation you can get that y^2 = 10000 - x^2 , therefore the points with a chosen x and y = +/-sqrt(10000 - x^2) will lye on the circle.
4. choose an y at random between the two coordinates found at point 3
5. You're set!

EDIT: In JS:

var radius = 100;
x = Math.random() * 2 * radius - radius;
ylim = Math.sqrt(radius * radius - x * x);
y = Math.random() * 2 * ylim - ylim;

Another edit: a jsFiddle Example

Answer 2

Not sure if this is correct JavaScript code, but something like this:

for (x = -r; x < r; x++) {
  for (y = -r; x < r; y++) {
    if ((x * x + y * y) < (r * r)) {
      // This x/y coordinate is inside the circle.
      // Use <= if you want to count points _on_ the circle, too.
    }          
  }
}

Answer 3

not sure what you mean for javascript but

x = R*cos(theta) and y = R*sin(theta) are the Cartesian points for a circle. R is the radius of course and theta is the angle which goes from 0 to 2*Pi.

Answer 4

I'm posting this as a solution because this question was the only relevant result in google.

My question/problem was how to add cartesian coordinates inside a circle where x and y would not exceed r.

Examples:

1. plot: (45,75) inside a circle with a radius of 100 (this would normally fall inside the circle, but not the correct position)
2. plot: (100,100) inside a circle with a radius of 100 (this would normally fall outside the circle

Solution

// The scale of the graph to determine position of plot
// I.E. If the graph visually uses 300px but the values only goto 100
var scale = 100; 

// The actual px radius of the circle / width of the graph
var radiusGraph = 300; 

// Plot the values on a cartesian plane / graph image
var xCart = xVal * radiusGraph;
var yCart = yVal * radiusGraph;

// Get the absolute values for comparison
var xCartAbs = Math.abs( xCart );
var yCartAbs = Math.abs( yCart );

// Get the radius of the cartesian plot
var radiusCart = Math.sqrt( xCart * xCart + yCart * yCart );

// Compare to decide which value is closer to the limit
// Once we know, calculate the largest possible radius with the graphs limit. 
// r^2 = x^2 + y^2
if ( xCartAbs > yCartAbs ) { // Less than 45°
    diff = scale / xCartAbs;
    radiusMaximum = Math.sqrt( radiusGraph * radiusGraph + Math.pow( yCartAbs * diff, 2) );
} else if ( yCartAbs > xCartAbs ) { // Greater than 45°
    diff = scale / yCartAbs;
    radiusMaximum = Math.sqrt( radiusGraph * radiusGraph + Math.pow( xCartAbs * diff, 2) );
} else { // 45°
    radiusMaximum = Math.sqrt( 2 * ( radiusGraph * radiusGraph ) );
}

// Get the percent of the maximum radius that the cartesian plot is at
var radiusDiff = radiusCart / radiusMaximum;
var radiusAdjusted = radiusGraph * radiusDiff;

// Calculate the angle of the cartesian plot
var theta = Math.atan2( yCart, xCart );

// Get the new x,y plot inside the circle using the adjust radius from above
var xCoord = radiusAdjusted * Math.cos( theta );
var yCoord = radiusAdjusted * Math.sin( theta );

Answer 5

If you want equidistributed coordinates you better go for

var radius = 100
var center_x = 0
var center_y = 0

// ensure that p(r) ~ r instead of p(r) ~ constant
var r = radius*Math.sqrt(Math.random(1))
var angle = Math.sqrt(2*Math.PI)

// compute desired coordinates
var x = center_x + r*Math.cos(angle);
var x = center_y + r*Math.sin(angle);

If you want more points close to the middle then use

var r = radius*Math.random(1)

instead.