2011-01-16 2 views
7

Есть ли способ в javascript для построения координат x, y, поэтому они попадают в круг, а не в квадрат?Использовать координаты X, Y для построения точек внутри круга

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

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

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

Спасибо!

+3

Множество (x, y) _ точек внутри круга радиуса _r_ задается неравенством _x^2 + y^2

ответ

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

Другой редактировать:a jsFiddle Example

+0

Спасибо! отлично работает :) – Rigil

+1

Просто немного поиграйте с ним: http://jsfiddle.net/YL6Bj/1/ - обратите внимание, что точки имеют тенденцию группироваться по крайностям в направлении x, из-за того, что выбора меньше для y в этих областях. Если вам нужно много очков, вам может потребоваться исправить это, что приведет к смещению в генерации координат x. – nico

+1

Да, это дает очень плохое распространение. Я добавил ответ с равнораспределенными результатами. –

2

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

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

0

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

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

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

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

var r = radius*Math.random(1) 

вместо этого.

0

Я отправляю это как решение, потому что этот вопрос был единственным релевантным результатом в 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); 
Смежные вопросы