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