Bij de opdrachten hierna heb je deze Collide2D library nodig. Nou ja, het moet niet. Maar dan moet je die code zelf bouwen. Beter die van hun gebruiken.
Starter code op p5js editor
Starter Code voor Collide2d in het algemeen. Check dat ook hier de index al is aangepast en de collide2d library heeft.
Hoe werkt de collide2d?
- https://github.com/bmoren/p5.collide2D De officiële documentatie
- Starter Project P5JS met Collide2D ingelinkt in index.html, in de <head>, zoals in onderstaande HTML code.
<!-- Includes the p5.collide2D addon library -->
<script defer src="https://unpkg.com/p5.collide2d"></script>Opdracht 1. Oefenen met Collide2D
In de gegeven Starter Code staan de opdrachten als //comment gegeven. Daar kun je deze hints nog verwerken.
if (collidePointRect(mouseX, mouseY, 20, 50, 110, 110)) {
rect1Color = color(100, 200, 50);
} else {
rect1Color = color(50, 100, 200);
}
//Rect 1
fill(rect1Color);
rect(20, 50, 110, 110);
Hierboven zie je de essentie van de code voor Collide2d. Zo doe je het. Zorg dat je dit eerste voorbeeld aan de gang krijgt.
Opdracht 2. Collide2D cirkels en rechthoeken
Voeg code toe aan je bestaande project.
Maak nu ook de fills van de ander rechthoeken en cirkels uit het voorbeeld. Check de documentatie om het juiste commando te zoeken.
Opdracht 3. Collide2D met andere vormen
Je raadt het: we gaan werken met andere vormen dan ellipsen en rechthoeken. Kies ofwel een cirkel, een driehoek of een lijn. Check de API Interface (hoe het commando moet) en maak m werkend.
var lWeight; // line Stroke Weight definieer bovenaan
lWeight = 5; // in setup()
// in draw:
if(collidePointLine(mouseX,mouseY,25,20,155,70,0.3)) {
console.log("hier")
} else {
console.log("daar")
}
// coördinaten aflezen in de code bij de vorm waar het om gaatDe opdracht is natuurlijk om de ander vormen in deze sketch op soortgelijke manier van een dikkere strokeWeight te voorzien, als de vorm wordt geraakt.