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

Question

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

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

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

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

Спасибо!

Answer 1

1. выберите х случайным образом от -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

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

вместо.

Answer 3

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

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

Answer 4

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

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

Примеры:

1. сюжет: (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 );

Answer 5

Не уверен, что это правильный код 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.
    }          
  }
}