Les 5 - Honderd balletjes!

In deze les gaan we echt het grote voordeel van het gebruik van een object zien. We kunnen objecten namelijk opslaan in arrays en daar vervolgens met een for-loop doorheen lopen. Voordat we dat gaan doen moeten we even opfrissen hoe je ook weer willekeurigheid kunt gebruiken (random). Want als we 100 balletjes gaan laten stuiteren willen we niet voor ieder balletje alle gegevens gaan invoeren. Dat laten we willekeurig bepalen!

We voegen de volgende dingen toe:

Maak een array aan bovenin je javascriptbestand
Maak een variabele voor een bal en voor het aantal ballen
In de setup functie maken we in een for-loop alle balletjes
- We voegen de balletjes toe aan het array
In de draw functie maken we een for-loop waarmee we steeds één bal uit het array halen en dat balletje tekenen en bewegen.

Kijk maar eens naar de code hieronder.

...
var bal;
var ballen = []; //Array waar de ballen in komen te staan
var aantalBallen = 100;

function setup(){
  createCanvas(xSize, ySize);

  for (var i = 0; i < aantalBallen; i++){
    bal = new Bal(21, 21, 10, 5, 3); //Maak een nieuwe instantie van Bal()
    ballen.push(bal); //Push voegt de bal aan het einde van het array toe
  }
}

function draw(){
  background(255);

  // ballen.length geeft de lengte van het ballenarray terug
  for (var i = 0; i < ballen.length; i++){
    bal = ballen[i]; //Haal een bal uit het array
    bal.teken();
    bal.beweeg();
  }
}

class Bal{
  ...
}

Als je dit zelf verwerkt zie je nog steeds maar één bal. Dit komt omdat alle ballen precies op dezelfde plek beginnen en precies dezelfde snelheid hebben. Je hebt dus 100 balletjes die allemaal achter het eerste balletje verstopt zitten!

Verschillende startposities en startsnelheden voor de balletjes

Wat kunnen we hier nu aan doen? Het moment waarop we verschil kunnen maken is bijvoorbeeld bij het maken van de balletjes. Laten we bijvoorbeeld bij de beginpositie i optellen. Dan begint ieder balletje iets meer naar rechts. Laten we ook de snelheid steeds aanpassen met 0.1*i.

function setup(){
  createCanvas(xSize, ySize);

  for (var i = 0; i< aantalBallen; i++){
    bal = new Bal(21 + i, 21, 10, 5 + 0.1*i, 3 + 0.1*i);
    ballen.push(bal);
  }
}

See the Pen OxpBdN by Jurjenh (@jurjenh) on CodePen.

Nu ontstaat er al wat variatie!

Willekeur (random)

Er zit nog steeds een patroon in de balletjes. We kunnen ook willekeurige getallen gaan gebruiken met behulp van de random() functie in P5. Javascript zelf heeft ook een functie om willekeurige getallen te kiezen. Math.random() is een functie in JavaScript die een getal geeft tussen 0 en 1. Hierbij kun je wel het getal 0 terugkrijgen, maar niet het getal 1. Wat we gaan doen is ieder balletje op een willekeurige plek laten beginnen aantal pixels laten opschuiven. Daarom willen we niet alleen een getal tussen 0 en 1 hebben maar eigenlijk tussen elke twee getallen die we zelf kiezen.

Let wel op dat we er bij het detecteren van de randen van uit gaan dat het balletje in het veld zit. We moeten er dus voor zorgen dat het getal dat we kiezen niet kleiner is dan de straal van de balletjes.

random() kan meerdere argumenten meekrijgen, of helemaal geen. Wij willen het gaan gebruiken door er twee argumenten aan mee te geven: de kleinste en de grootste waarde waartussen hij een getal gaat kiezen. Let hierbij op dat de kleinste waarde wel gekozen kan worden (inclusive) maar de grootste niet (exclusive).

In de code hieronder zal je dus 60 keer per seconde een getal tussen de 2 en 4 zien verschijnen. 2 kan wel voorkomen, maar 4 niet.

function draw(){
  console.log(random(2, 4));
}

Mooi! Nu kunnen we deze functie natuurlijk gebruiken om balletjes op willekeurige plekken laten beginnen. We passen de code aan op de plek waar nieuwe balletjes gemaakt worden.

function setup(){
  createCanvas(xSize, ySize);

  for (var i = 0; i< aantalBallen; i++){
    x = random(12, 200);
    y = random(12, 100);
    radius = random(10, 12);
    xSpeed = random(3, 4);
    ySpeed = random(2, 3);
    bal = new Bal(x, y, radius, xSpeed, ySpeed);
    ballen.push(bal);
  }
}

Opdracht

Zorg dat je veel balletjes laat bewegen met willekeurige beginpositie, snelheid en kleur.

Les 5 - Honderd balletjes!