U2 LA2.1 Raken met Collide2D

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.

Op Replit de bibliotheek inhangen

In de files sidebar links, als je die uitklapt, kies index.html. Voeg toe in de head van de index, net voor </head>

<script defer src="https://unpkg.com/p5.collide2d"></script>

Starter code op p5js editor

Starter Code. Check dat ook hier de index al is aangepast en de collide2d library heeft.

Hoe werkt de collide2d?

Check de vid

Meer Bronnen

https://github.com/bmoren/p5.collide2D De officiële documentatie
Starter code bij de opdracht
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>

Bouw de volgende drie opdrachten in dezelfde REPL.

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 gaat

De opdracht is natuurlijk om de ander vormen in deze sketch op soortgelijke manier van een dikkere strokeWeight te voorzien, als de vorm wordt geraakt.