3

Estou fazendo um teste com canvas para inserir aleatoriamente varias bolinhas dentro de um retângulo.

Eu uso uma posição aleatória para cada bolinha, desde que o limite seja menor que a largura do retângulo. Até aí tudo bem, mas as vezes algumas bolinhas ficam sobrepostas à outras.

Como posso fazer para evitar que uma bolinha fique sobreposta à outra?

Segue abaixo meu código

//SETUP
var tx = 400; //LARGURA TOTAL
var ty = 300; //ALTURA TOTAL
var t = 1; //TAMANHO DE CADA PONTO

//CARINHA
var tam = 4; //TAMANHO DA BOLINHA
var tamPopulacao = 150; //TAMANHO DA POPULAÇÃO
var visao = 5;

function desenha() {
    var canvas = document.getElementById("canvas");
    var desenho = canvas.getContext("2d");

    //MAPA *************************************************
    desenho.beginPath();
    desenho.rect(0, 0, tx, ty);
    desenho.fillStyle = "white";
    desenho.fill();  
    //MAPA *************************************************

    //BOLINA ***********************************************
    for(p=1;p<=tamPopulacao;p++){
        //POSIÇÃO
        var px = Math.floor(Math.random() * tx-tam);
        var py = Math.floor(Math.random() * ty-tam);
        var startAngle = 0;
        var endAngle = 3.5 * Math.PI;
        //DESENHAR
        desenho.beginPath();
        desenho.arc(px, py, tam, 0, Math.PI * 2, true);
        desenho.fillStyle = "#e87e04";
        desenho.fill();
    }
    //BOLINA ***********************************************
}
<html>
    <head>
        <script type="text/javascript" src="desenha.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Movimento</title>
        <style type="text/css">
            body{
                padding:20px;
                background:#ccc;
                margin:0;
            }
        </style>
    </head>
    <body onload="desenha()">
        <canvas id="canvas" width="400" height="300" style="border:1px solid #aaa;"></canvas>
    </body>
</html>

1
  • Quero ver quem comentou pra baixo resolver.
    – TiagoA
    Commented 7/05/2020 às 19:27

2 Respostas 2

7

Para detectar a colisão entre duas geometrias é preciso implementar um teste de colisão.
Existe um algoritmo específico para o teste de colisão entre duas figuras de geometria arbitrária que se chama SAT e é baseado no Teorema de Stein que para esse caso é uma ferramenta muito complexa a se implementar.

Então eu optei por uma solução mais simples, já que todas as figuras são círculos.

Primeiro eu criei um modelo dos círculos a serem desenhados que constitui-se no ponto (x,y) que é o seu centro e um escalar, o seu raio. Antes de cada círculo ser desenhado eu o comparo o seu modelo como os modelos de todas os outros círculos já desenhados verificando aos pares se a distancia entre eles é menor que a soma de seus raios utilizando a fórmula...

inserir a descrição da imagem aqui

...para calcular a distância ente os centros, caso a distancia seja menor que soma dos raios implica em uma colisão o que faz a posição da bolinha ser recomputada. Caso não haja colisão o modelo do círculo é armazenada em um lista de círculos já desenhadas e então conclui-se o desenho.

Para aplicar o teste de colisão em massa utilizei o método Array.prototype.some() que testa se algum do elemento no array passa no teste implementado pelo callback.

PS: Dei uma enxugada no algorítimo tirando umas partes desnecessárias ao teste de colisão e troquei o for por um while para facilitar quando necessário o recalculo da posição da bolinha.

//Diminui o tamanho do canvas para aumentar as chances de colisão
var tx = 150;
var ty = 150;

var tam = 4;
var tamPopulacao = 125; //Aumentei o tamanho da população para aumentar as chances de colisão

//Onde serão armazenadas as informações geométricas dos cículos
let circulos = [];

//Testa a colisão entre dois circulos
function colisão(a, b) {
  let dx = b.x - a.x;
  let dy = b.y - a.y;
  let distancia = Math.sqrt(dx * dx + dy * dy);
  return distancia < (a.raio + b.raio);
}

function desenha() {
  var canvas = document.getElementById("canvas");
  var desenho = canvas.getContext("2d");

  desenho.clearRect(0, 0, tx, ty);

  
  let p = 1;
  while (p <= tamPopulacao) {
    var px = Math.floor(Math.random() * tx - tam);
    var py = Math.floor(Math.random() * ty - tam);

    //Modela geometricamente um círculo
    let circulo = {
      x: px,
      y: py,
      raio: tam
    };

    //Faz o teste de colisão do circulo atual com os seus predecessores
    if (
      circulos.some(item => {
        return colisão(circulo, item);
      })
    ) continue; //Se houver colisão computa nova posição

    p++;
    circulos.push(circulo);

    desenho.beginPath();
    desenho.arc(px, py, tam, 0, Math.PI * 2);
    desenho.fillStyle = "black";
    desenho.fill();
  }
}

desenha();
<canvas id="canvas" width="150" height="150"></canvas>

No caso se quiser fazer um teste para verificara eficacia do detector de colisões, basta adicionar um id e um vetor direção a cada círculo e animar o resultado.

//Diminui o tamanho do canvas para aumentar as chances de colisão
var tx = 150;
var ty = 150;

var tam = 4;
var tamPopulacao = 25;


let circulos = [];

function colisão(a, b) {
  if (a.id == b.id) return false; //Se são o memso elemento não testa
  let dx = b.x - a.x;
  let dy = b.y - a.y;
  let distancia = Math.sqrt(dx * dx + dy * dy);
  return distancia < (a.raio + b.raio);
}

function desenha() {
  var canvas = document.getElementById("canvas");
  var desenho = canvas.getContext("2d");

  desenho.clearRect(0, 0, tx, ty);


  let p = 1;
  while (p <= tamPopulacao) {
    var px = Math.floor(Math.random() * tx - tam);
    var py = Math.floor(Math.random() * ty - tam);

    let circulo = {
      id: p,
      x: px,
      y: py,
      vx: Math.random(),
      vy: Math.random(),
      raio: tam
    };

    if (
      circulos.some(item => {
        return colisão(circulo, item);
      })
    ) continue;

    p++;
    circulos.push(circulo);

    desenho.beginPath();
    desenho.arc(px, py, tam, 0, Math.PI * 2);
    desenho.fillStyle = "black";
    desenho.fill();
  }
}

desenha();

function anima() {
  var canvas = document.getElementById("canvas");
  var desenho = canvas.getContext("2d");
  desenho.clearRect(0, 0, tx, ty);

  for (let p = 1; p < circulos.length; p++) {
    let a = circulos[p];
    //Testes para detectar se saiu fora da tela..
    if (a.x < 0 || a.x > tx) a.vx *= -1; //Se escapou na horizontal inverte o vetor direção na coordenada X
    if (a.y < 0 || a.y > tx) a.vy *= -1; //Se escapou na horizontal inverte o vetor direção na coordenada Y

    //Adiciona movimento vetorial
    a.x += a.vx;
    a.y += a.vy;


    circulos.some(b => {
      //Se houver uma colisão apenas reflita o vetor direção
      if (colisão(a, b)) {
        a.vx *= -1;
        a.vy *= -1;
      }
    });

    desenho.beginPath();
    desenho.arc(a.x, a.y, a.raio, 0, Math.PI * 2);
    desenho.fillStyle = "black";
    desenho.fill();
  }
  window.requestAnimationFrame(anima)
}

window.requestAnimationFrame(anima)
<canvas id="canvas" width="150" height="150"></canvas>

1
  • Perfeito, era exatamente o que eu precisava, obrigado!! Commented 11/05/2020 às 12:18
0

O que você precisa é de um detector de colisão:

O que eu fiz:

  • salvei a posição de cada bolinha desenhada num array;
  • criei um método que percorre o array das bolinhas desenhadas e testa as posições de todas até encontrar uma que não colida.

Veja o exemplo no JSFiddle.

//SETUP
var tx = 400; //LARGURA TOTAL
var ty = 300; //ALTURA TOTAL
var t = 1; //TAMANHO DE CADA PONTO

//CARINHA
var tam = 4; //TAMANHO DA BOLINHA
var tamPopulacao = 150; //TAMANHO DA POPULAÇÃO
var visao = 5;

var bolinhaDesenhadas = [];

function getP() {
  var x = Math.floor(Math.random() * tx - tam);
  var y = Math.floor(Math.random() * ty - tam);
  var x1 = x - tam;
  var x2 = x1 + tam * 2;
  var y1 = y - tam;
  var y2 = y1 + tam * 2;

  for (var i = 0; i < bolinhaDesenhadas.length; i++) {
    var b = bolinhaDesenhadas[i];
    var colisaox = x1 > b.x1 && x1 < b.x2 || x2 > b.x1 && x2 < b.x2;
    var colisaoy = y1 > b.y1 && y1 < b.y2 || y2 > b.y1 && y2 < b.y2;
    if (colisaox && colisaoy) {
      return getP();
    }

  }

  bolinhaDesenhadas.push({
    x1,
    x2,
    y1,
    y2
  });

  return {
    x,
    y
  };
}

function desenha() {
  var canvas = document.getElementById("canvas");
  var desenho = canvas.getContext("2d");

  //MAPA *************************************************
  desenho.beginPath();
  desenho.rect(0, 0, tx, ty);
  desenho.fillStyle = "white";
  desenho.fill();
  //MAPA *************************************************

  //BOLINA ***********************************************
  for (i = 1; i <= tamPopulacao; i++) {
    //POSIÇÃO
    var p = getP();
    var startAngle = 0;
    var endAngle = 3.5 * Math.PI;
    //DESENHAR
    desenho.beginPath();
    desenho.arc(p.x, p.y, tam, 0, Math.PI * 2, true);
    desenho.fillStyle = "#e87e04";
    desenho.fill();
  }
  //BOLINA ***********************************************
}
body {
  padding: 20px;
  background: #ccc;
  margin: 0;
}
<body onload="desenha()">
  <canvas id="canvas" width="400" height="300" style="border:1px solid #aaa;"></canvas>
</body>

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 .