Skip to content

Collision Detection

Collision Detection is de term die gegeven wordt aan de berekeningen die bepalen of twee punten/vormen een overlap hebben. Als we kunnen bepalen of er overlap is tussen vormen dan kunnen we daar op inspelen door o.a. objecten in games te laten botsen/omkeren/etc…

Cirkel-Cirkel collision detection

Een botsing tussen twee cirkels kan worden gedetecteerd door de afstand tussen de twee middelpunten te berekenen en te vergelijken met de som van de twee stralen. Als de afstand kleiner is dan de som van de stralen, dan is er een botsing.

Probeer het zelf:

In p5 kan je de afstand tussen twee punten berekenen met de functie dist(x1, y1, x2, y2).

// Circle-Circle collision detection
let distance = dist(centerX1, centerY1, centerX2, centerY2);
if (distance < radiusCircle1 + radiusCircle2) {
    // collision detected
}

Als je de afstand tussen twee punten wilt berekenen zonder de dist() functie te gebruiken, dan kan je de volgende formule gebruiken: \(d=\sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}\)

Waarbij:

  • \(x_1\) en \(y_1\) de x en y coördinaten van het eerste punt zijn
  • \(x_2\) en \(y_2\) de x en y coördinaten van het tweede punt zijn

Misschien herken je de formule wel. Dit is namelijk de stelling van Pythagoras.

AABB collision detection

AABB staat voor Axis Aligned Bounding Box. Dit betekent dat de bounding boxes altijd evenwijdig aan de assen van het assenstelsel staan.

x y ellipse bounding box

Dit maakt de berekeningen een stuk eenvoudiger. Hieronder kan je zien hoe AABB collision detection werkt:

Probeer het zelf:

Door variabelen te maken voor de linker, rechter, boven en onderkant van de bounding box kunnen we de collision detection eenvoudig uitvoeren.

let left = x - width / 2;
let right = x + width / 2;
let top = y - height / 2;
let bottom = y + height / 2;

// AABB collision detection
if (x > left && x < right && y > top && y < bottom) {
    // collision detected
}

Oefening

Maak een p5 sketch waarin je twee cirkels en twee vierkant over je scherm laat bewegen.

  • Laat de 2 cirkels met de randen en elkaar botsen.
  • Laat de 2 vierkanten met de randen en elkaar botsen.

Bronnen

Meer leren

Gerelateerde onderwerpen