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

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

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.

Nu gaan we niet de kleur aanpassen, maar de StrokeWeight van de vormen, op het moment dat de muis de vorm raakt. Hier zijn de codes uit de video voor de lijn. Maar de code voor de andere vormen moet je opzoeken in de documentatie van de Collide2D library.

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.