Khan Academy ProcessingJS opdracht voor HVA-SKC

script.js

// De tafel
background(186, 145, 20);

// Het bord
ellipse(200, 200, 350, 350);
ellipse(200, 200, 300, 300);

// De dikte van onze frieten
strokeWeight(5);

// De minimale/maximale grens waarbij een friet geplaatst kan worden
var minGrens = 75;
var maxGrens = 325;

// Het aantal frieten wat geplaatst wordt
var aantalFrieten = 50;

// De kleur van onze frieten
stroke(255, 230, 0);

// Het plaatsen van de frieten
for (var i = 0; i < aantalFrieten; i++) {
  line(
    random(minGrens, maxGrens),
    random(minGrens, maxGrens),
    random(minGrens, maxGrens),
    random(minGrens, maxGrens)
  );
}

// De "saus" knop
noStroke();
fill(255, 255, 255);
ellipse(30, 30, 40, 40);

// Tekst op de knop
fill(0, 0, 0);
text('Saus', 16, 32);

// Een handler voor de click event
mouseClicked = function () {
  // Hier berekenen we de afstand van de muis tot het middelpunt van de knop
  // en vergelijken we die met de straal van de knop
  var afstand = dist(mouseX, mouseY, 30, 30);
  if (afstand <= 20 /* de straal van de knop */) {
    // Geel (mayo/mosterd)
    fill(255, 255, 0);
    ellipse(75, 120, 50, 50);

    // Rood (ketchup)
    fill(255, 0, 0);
    ellipse(95, 95, 50, 50);
  }
};