Collision Detection¶

Intro¶

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…
Hieronder is een overzicht te vinden van bronnen die je daarbij kunnen helpen.

Hulpbronnen¶

P5js voorbeeld¶

Een voorbeeld van de P5js website die collision met de randen van het scherm laat zien.

P5 Bounce vs screen sides

Een voorbeeld van de P5js website die collision tussen stuiterende ballen laat zien.

P5 Bouncing balls advanced

2D Collision Detection website van Jeffrey Thompson¶

Op deze website is een overzicht te vinden om de overlap van verschillende en vergelijkbare 2D vormen uit te rekenen/bepalen.

2D Collision Detection - Jeffrey Thompson

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

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(x1, y1, x2, y2);
if (distance < r1 + r2) {
    // collision detected
}

Als je de afstand tussen twee punten wilt berekenen zonder de dist() functie te gebruiken, dan kan je de volgende formule gebruiken:

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

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

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

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
}