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

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

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

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

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

Спасибо!


person Rigil    schedule 16.01.2011    source источник
comment
Набор точек (x, y) внутри круга радиуса r задается неравенством x^2 + y^2 ‹ r^2   -  person Tom Crockett    schedule 16.01.2011


Ответы (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

person nico    schedule 16.01.2011
comment
Просто немного поэкспериментируйте с этим: jsfiddle.net/YL6Bj/1 — обратите внимание, группироваться на экстремумах в направлении x из-за того, что для y в этих областях меньше выбора. Если вам нужно много точек, вам может потребоваться исправить это, внося смещение в генерацию координат x. - person nico; 16.01.2011
comment
Да, это дает очень плохое распределение. Я добавил ответ с равнораспределенными результатами. - person Udo Klein; 22.06.2013
comment
Ну, решение работает очень хорошо для большинства ситуаций, не нужно было минусовать... - person nico; 22.06.2013
comment
Я превратил это в скрипку и добавил, что - person Martijn; 15.04.2016

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

x = R*cos(theta) и y = R*sin(theta) — декартовы точки окружности. R — это, конечно, радиус, а тета — это угол от 0 до 2*Pi.

person AbstractDissonance    schedule 16.01.2011

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

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)

вместо.

person Udo Klein    schedule 22.06.2013

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

Я публикую это как решение, потому что этот вопрос был единственным релевантным результатом в 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 );
person b.kelley    schedule 10.03.2015