Utilice coordenadas X, Y para trazar puntos dentro de un círculo

Question

¿Hay alguna manera en javascript de trazar las coordenadas x, y para que caigan en un círculo en lugar de en un cuadrado?

Por ejemplo, si tengo el siguiente código:

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

I que averiguar una combinación de x, los valores de y que caerían dentro de un círculo 100 pixel.

Gracias!

Answer 1

1. elegir una X al azar entre -100 y 100
2. un círculo se define por x^2 + y^2 = r^2, que en su caso es igual a 100^2 = 10000
3. De esta ecuación puede obtener ese y^2 = 10000 - x^2, por lo tanto, los puntos con un x elegido y y = +/-sqrt(10000 - x^2) se dejarán caer sobre el círculo.
4. elija una y al azar entre las dos coordenadas que se encuentran en el punto 3
5. ¡Está listo!

EDIT: En JS:

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

Otra edición:a jsFiddle Example

Answer 2

no está seguro de lo que quiere decir para javascript pero

x = R*cos(theta) y y = R*sin(theta) son los puntos cartesianos de un círculo. R es el radio por supuesto y theta es el ángulo que va de 0 a 2 * Pi.

Answer 3

No estoy seguro si esto es correcto código JavaScript, pero algo como esto:

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 4

Si desea equidistributed coordenadas que es mejor ir a

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); 

Si desea mor e puntos cerca del centro luego use

var r = radius*Math.random(1) 

en su lugar.

Answer 5

Estoy publicando esto como una solución porque esta pregunta fue el único resultado relevante en Google.

Mi pregunta/problema era cómo agregar coordenadas cartesianas dentro de un círculo donde x y y no excedían r.

Ejemplos:

1. parcela: (45,75) dentro de un círculo con un radio de 100 (esto sería normalmente caen dentro del círculo, pero no la posición correcta)
2. parcela: (100100) dentro de un círculo con un radio de 100 (esto sería normalmente caer fuera del círculo

Solución

// 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);