Arrays inleiding¶

Arrays zijn lijsten waarin je meerdere waarden kunt opslaan in één variabele. In p5.js gebruik je ze bijvoorbeeld om de posities, kleuren of snelheden van meerdere objecten te bewaren.

Voorbeeld: kleuren tekenen uit een array

let kleurenText ;
let kleuren;

function setup() {
  createCanvas(300, 100);

  kleurenText = ["rood", "groen", "blauw"];
  kleuren = [color(255,0,0), color(0,255,0), color(0,0,255)];
}

function draw() {
  background(255);
  for (let i = 0; i < kleuren.length; i++) {
    fill(kleuren[i]);
    rect(i * 100, 0, 100, 80);
    fill(0);
    text(kleurenText[i], i * 100, 92);
  }
}

Uitleg: elke index verwijst naar een kleur. Met een loop teken je automatisch meerdere vlakken.

Probeer zelf: voeg nog twee kleuren toe aan de array en pas de loop aan zodat ze ook worden getekend.

basisconcepten¶

Een array heeft elementen en een index. De eerste index is altijd 0. Gebruik .length om te weten hoeveel elementen er zijn.

Voorbeeld: lengte en indices van een array

let cijfers = [10, 20, 30, 40];

function setup() {
  createCanvas(200, 200);
  print('Aantal elementen:', cijfers.length);
  print('Eerste element:', cijfers[0]);
  print('Laatste element:', cijfers[cijfers.length - 1]);
}

Probeer zelf: wijzig de array en voeg nieuwe getallen toe met cijfers.push(50).

gebruiken in p5.js¶

In p5.js gebruik je setup() om arrays te initialiseren en draw() om ze per frame bij te werken.

Voorbeeld: posities bijwerken per frame

let xs = [];
let ys = [];

function setup() {
  createCanvas(400, 200);
  for (let i = 0; i < 20; i++) {
    xs.push(random(width));
    ys.push(random(height));
  }
}

function draw() {
  background(220);
  for (let i = 0; i < xs.length; i++) {
    xs[i] += random(-1, 1);
    ys[i] += random(-1, 1);
    circle(xs[i], ys[i], 10);
  }
}

Probeer zelf: laat de cirkels van kleur veranderen door een extra array kleuren[] toe te voegen.

Array-methodes en iteratie¶

Je kunt arrays aanpassen met ingebouwde methodes zoals push(), pop() en splice().

Voorbeeld: array-methodes push en pop

let waarden = [1, 2, 3];

function setup() {
  print('Start:', waarden);
  waarden.push(4); // Voeg toe aan einde
  print('Na push:', waarden);
  waarden.pop();   // Verwijder laatste
  print('Na pop:', waarden);
}

Itereren met for…of:

Voorbeeld: itereren met for…of

let namen = ["Jan", "Sam", "Lotte"];

for (let naam of namen) {
  print('Hallo', naam);
}

Probeer zelf: gebruik splice(i, 1) om een element in het midden te verwijderen.

Als lookup-tables¶

Gebruik arrays om waarden op te zoeken in plaats van een reeks if of switch.

Voorbeeld: lookup-table voor kleuren

let kleuren = [color('red'), color('green'), color('blue')];
let keuze = 1;

function setup() {
  createCanvas(100, 100);
  background(kleuren[keuze]);
}

Probeer zelf: voeg een extra kleur toe en verander de waarde van keuze.

Voor animatie-logica¶

Arrays kunnen de toestand van meerdere objecten opslaan, zoals positie en snelheid.

Voorbeeld: animatie met positie en snelheid

let x = [], y = [], vx = [], vy = [];

function setup() {
  createCanvas(400, 200);
  for (let i = 0; i < 10; i++) {
    x.push(random(width));
    y.push(random(height));
    vx.push(random(-2, 2));
    vy.push(random(-2, 2));
  }
}

function draw() {
  background(240);
  for (let i = 0; i < x.length; i++) {
    x[i] += vx[i];
    y[i] += vy[i];
    if (x[i] > width) x[i] = 0;
    circle(x[i], y[i], 10);
  }
}

Probeer zelf: voeg vy[i]-beweging toe en laat de cirkels stuiteren op de onderrand.

Debugging en controle¶

Gebruik console.log() en visuele signalen om fouten te vinden.

Voorbeeld: off-by-one fout bij iteratie

let data = [1, 2, 3];

function setup() {
  createCanvas(200, 100);
  noLoop();
  for (let i = 0; i <= data.length; i++) {
    console.log('Index', i, 'waarde', data[i]);
  }
}

Uitleg: de laatste iteratie geeft undefined door een off-by-one fout.

Probeer zelf: herstel de fout door de conditie i < data.length te gebruiken.

Best practices en conventies¶

Gebruik duidelijke namen: xPositions, speeds, colors.
Houd arrays gesynchroniseerd: gebruik dezelfde index voor gekoppelde eigenschappen.
Gebruik objecten als het aantal eigenschappen groeit.

Voorbeeld: objecten in een array

let ballen = [];

function setup() {
  createCanvas(400, 200);
  for (let i = 0; i < 5; i++) {
    ballen.push({x: random(width), y: random(height), r: random(10, 30)});
  }
}

function draw() {
  background(255);
  for (let b of ballen) {
    circle(b.x, b.y, b.r);
  }
}

Probeer zelf: geef elke bal een willekeurige kleur en beweeg ze horizontaal.

Woordenlijst van begrippen bij arrays¶

Array – Een verzameling van meerdere waarden die samen in één variabele worden opgeslagen.

Element – Een individuele waarde binnen een array.

Index – De positie van een element in de array. De eerste index is altijd 0.

Length – Een eigenschap die het aantal elementen in een array teruggeeft.

Iteratie (loop) – Een herhaling van instructies, bijvoorbeeld met een for-loop, om alle elementen van een array te doorlopen.

Zero-based indexing – Het principe dat de eerste index van een array 0 is, niet 1.

Push() – Methode om een nieuw element toe te voegen aan het einde van een array.

Pop() – Methode om het laatste element te verwijderen en terug te geven.

Splice() – Methode om elementen te verwijderen of toe te voegen op een specifieke index.

Unshift() – Methode om een element aan het begin van een array toe te voegen.

Shift() – Methode om het eerste element uit de array te verwijderen.

Lookup-table – Een array die wordt gebruikt om een waarde te koppelen aan een betekenis, bijvoorbeeld een kleurcode of naam.

Out of bounds – Een fout die optreedt wanneer een niet-bestaande index wordt aangesproken.

Referentietype – Arrays zijn geen primitieve waarden; ze verwijzen naar data in het geheugen.

For-loop – Een klassieke iteratiestructuur die een index gebruikt om door een array te lopen.

For…of-loop – Loop die direct de waarden van een array doorloopt zonder index te gebruiken.

For…in-loop – Loop die de indices (eigenschapsnamen) van een array doorloopt.

Parallelle arrays – Twee of meer arrays waarbij de waarden met dezelfde index bij elkaar horen, bijvoorbeeld x[i] en y[i].

Scope – De zichtbaarheid of geldigheid van variabelen in de code; bijvoorbeeld een let-variabele is alleen zichtbaar binnen zijn blok.

Lookup – Het proces van het opzoeken van een waarde aan de hand van een index of sleutel.

Animatielus – Het herhaaldelijk uitvoeren van draw() in p5.js om beweging te creëren.

Toestand (state) – De verzameling waarden (zoals positie of snelheid) die de huidige situatie van objecten in een animatie beschrijven.

Debugging – Het proces van het opsporen en corrigeren van fouten in de code.

Off-by-one error – Een veelvoorkomende fout waarbij een lus één element te veel of te weinig doorloopt.