Há duas formas de fazer isso.
1. Chutando
A forma mais simplista é chutar coordenadas (px, py)
e verificar se elas estão dentro da área desejada.
Para fazer essa verificação, faça assim:
- Calcule a distância do ponto gerado em relação ao centro
(cx, cy)
:
d = raiz((px - cx)² + (py - cy)²)
- Verifique se a distância
d
está dentro do menor e do maior raio permitido (r1
, r2
):
- Para verificar se o ponto gerado está no quadrante desejado, verifique se as coordenadas são maiores* que as coordenadas do centro:
* No caso do eixo y
, considerando que o plano cartesiano original, o correto seria py
< cy
. Porém, geralmente esse eixo é invertido nos sistemas gráficos que usamos nos computadores.
2. Calculando raio e ângulo
A segunda forma é um pouco mais complicada de início, mas resultará num ponto que se sabe estar dentro da área desejada.
- Calcule um raio
r
aleatório entre o menor e do maior raio permitido (r1
, r2
):
r = r1 + (r2 - r1) * rand
- Calcule um ângulo
a
dentro do quadrante desejado da circunferência:
- Calcule as coordenadas
(px, py)
resultantes:
px = r * cosseno(a)
py = r * seno(a)
* Fórmula usando o sistema de coordenadas invertido
Colocando em prática o Cenário #2
O script abaixo implementa o método #2 apresentado acima. O cálculo da coordenada é basicamente o que o @bfavaretto implementou, porém com uma apresentação visual dos resultados.
var data = {
cx: 150,
cy: 150,
r: 100,
r1: 40,
r2: 70
};
function desenharAlvo(ctx) {
//alvo completo
ctx.beginPath();
ctx.fillStyle = '#DDEEFF';
ctx.arc(data.cx, data.cy, data.r, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
//coordenadas
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(data.cx, data.cy - data.r);
ctx.lineTo(data.cx, data.cy + data.r);
ctx.moveTo(data.cx - data.r, data.cy);
ctx.lineTo(data.cx + data.r, data.cy);
ctx.stroke();
ctx.closePath();
//raio menor
ctx.beginPath();
ctx.strokeStyle = '#8899AA';
ctx.arc(data.cx, data.cy, data.r1, 0, Math.PI * 2, false);
ctx.stroke();
ctx.closePath();
//raio maior
ctx.beginPath();
ctx.strokeStyle = '#8899AA';
ctx.arc(data.cx, data.cy, data.r2, 0, Math.PI * 2, false);
ctx.stroke();
ctx.closePath();
}
function desenharDardo(ctx, x, y) {
//alvo completo
ctx.beginPath();
ctx.fillStyle = '#F00';
ctx.arc(data.cx + x, data.cy + y, 1, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
}
function aremessarDardo() {
//passo 1
var r = data.r1 + (data.r2 - data.r1) * Math.random();
//passo 2
var a = Math.PI / 2 * Math.random();
//passo 3
var x = r * Math.cos(a);
var y = r * Math.sin(a);
desenharDardo(ctx, x, y);
}
var canvas = document.getElementById('alvo');
var ctx = canvas.getContext('2d');
desenharAlvo(ctx);
setInterval(aremessarDardo, 250);
<canvas id="alvo" width="300" height="300"></canvas>