Используйте координаты X,Y для построения точек внутри круга

есть ли способ в javascript построить координаты x,y, чтобы они попадали в круг, а не в квадрат?

например, если у меня есть следующий код:

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

Мне нужно выяснить комбинацию значений x, y, которые попадут внутрь круга из 100 пикселей.

спасибо!

7
circle coordinates javascript plot

5 ответов

  1. выберите x наугад между -100 и 100
  2. круг определяется x^2 + y^2 = r^2, что в вашем случае равно 100^2 = 10000
  3. из этого уравнения вы можете получить это y^2 = 10000 - x^2, поэтому точки с выбранными x и y = +/-sqrt(10000 - x^2) будет щелок на круг.
  4. выберите y случайным образом между двумя координатами, найденными в точке 3
  5. все готово!

EDIT: В JS:

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

другой редактировать: пример jsFiddle

6

не уверен, что вы имеете в виду для javascript, но

x = R*cos(theta) и y = R*sin(theta) являются Декартовыми точками для круга. R-радиус, конечно, и тета-угол, который идет от 0 до 2 * Pi.

2

Если вы хотите равнораспределенные координаты, вам лучше пойти на 

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

Если вы хотите больше точек, близких к середине, используйте 

var r = radius*Math.random(1)

вместо.

1

Не уверен, что это правильный код JavaScript, но что-то вроде этого:

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.
    }          
  }
}
0

я публикую это как решение, потому что этот вопрос был единственным релевантным результатом в google.

мой вопрос / проблема заключалась в том, как добавить декартовые координаты внутри круга, где x и y не превышает r.

примеры:

  1. plot: (45,75) внутри круга с радиусом 100 (это обычно попадает внутрь круга, но не в правильное положение)
  2. участок: (100,100) внутри окружности с радиусом 100 (обычно это выходит за пределы круга

решение

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