Използвайте координати 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. Готови сте!

РЕДАКТИРАНЕ: В 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