4

Procuro uma função em Javascript que retorne um valor aleatório dentro de um intervalo na área de um circulo. O intervalo iria ser ao longo do raio com distâncias equivalentes ao ponto central e o ponto final do raio, considerando também um intervalo de graus dentro deste circulo.

inserir a descrição da imagem aqui

Dada a imagem. A área azul: distância do ponto central ao inicio do intervalo e distância da borda ao final do intervalo; área laranja: intervalo permitido à função aleatória.

2 Respostas 2

4

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:

  1. Calcule a distância do ponto gerado em relação ao centro (cx, cy):
    • d = raiz((px - cx)² + (py - cy)²)
  2. Verifique se a distância d está dentro do menor e do maior raio permitido (r1, r2):
    • r1 < d < r2
  3. Para verificar se o ponto gerado está no quadrante desejado, verifique se as coordenadas são maiores* que as coordenadas do centro:
    • px > cx
    • py > cy

* 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.

  1. Calcule um raio r aleatório entre o menor e do maior raio permitido (r1, r2):
    • r = r1 + (r2 - r1) * rand
  2. Calcule um ângulo a dentro do quadrante desejado da circunferência:
    • a = pi / 2 * rand *
  3. 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>

3
  • 2
    Belo exemplo :)
    – bfavaretto
    Commented 21/01/2015 às 19:00
  • O Cenário do exemplo foi brilhante, com certeza, mas ainda falta uma questão... As áreas não são exatamente dividias em quadrantes, podem variar, por exemplo, na imagem da questão o arco era dividido a quatro, mas e se fosse dividido, por exemplo, em 20? Como seria pra utilizar apenas um segmento desse circulo com a sua equação? Commented 22/01/2015 às 10:57
  • @GabrielMaia para variar em relação ao arco, você precisa ajustar apenas uma linha de código, a saber, a linha que calcula o ângulo a. No caso, eu gero um valor entre 0 e PI/2, que corresponde ao primeiro quadrante. Considerando que 2*PI corresponde a toda a circunferência, você só precisa definir qual é o ângulo inicial e final, calculando então um valor aleatório entre esses dois valores.
    – utluiz
    Commented 22/01/2015 às 12:10
3

Com um possível erro de off-by-one nos meus números aleatórios, acho que é isto aqui:

// Ângulos mínimo e máximo no círculo, em radianos
var minDeg = Math.PI;
var maxDeg = Math.PI * 5/4;
// Ângulo sorteado
var ang = minDeg + ((maxDeg - minDeg) * Math.random());

// Valor do raio onde começa a área laranja
var minRaio = 10;
// Valor do raio onde termina a área laranja
var maxRaio = 20;
// Trecho sorteado do raio
var raio = minRaio + ((maxRaio - minRaio) * Math.random());

// Posição calculada
var x = raio * Math.cos(ang);
var y = raio * Math.sin(ang);

Nota: esta solução se baseia no sistema de coordenadas invertido e é uma implementação do segundo método explicado na resposta do @utluiz.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .