Arrays

---

1. Arrays aanmaken
2. Arrays uitlezen
3. Arrays vullen
4. Arrays bewerken
5. Overige array-functies

Een array is een variabele die een rij waarden kan bevatten, een soort genummerde lijst. Je kunt het zien als een straat met huisnummers. De naam van de straat is de naam van het array. Het huisnummer bepaalt het vakje van het array. Het voordeel van een array ten opzichte van één losse variabele is dat je in een variabele meerdere waarden kan opslaan. Het is wel handig als deze waarden een relatie tot elkaar hebben. Dus allemaal midi-waarden, geluidsbestanden of afbeeldingen.

1. Array's aanmaken

Voorbeeld:

let LeidseStraat  = [];

Dit maakt een nieuwe, lege, array. Hierin kan je met een indexnummer (bv. 0, 1, 2, 3) aangeven naar welk element in het array je wijst. In Javascript en bijne elke andere programmeertaal krijgt het eerste element als index 0.

In de volgende code krijgt elk element een waarde:

LeidseStraat[0] = "Familie Janssen";
LeidseStraat[1] = "de verse bakker";
LeidseStraat[2] = "Familie De Bruin";
LeidseStraat[3] = "Kees van den Berg";

⬆️

---

2. Arrays uitlezen

Om de inhoud van een element op te vragen gebruik je ook de haakjes [ ] met daartussen het nummer (de index) van het element:

let huisnummer = 2;
let bewoner = LeidseStraat[huisnummer];
console.log("Op nummer " + huisnummer + " woont " + bewoner);

Met length kun je opvragen uit hoeveel elementen een array bestaat, bijvoorbeeld zo:

let aantalWoningen = LeidseStraat.length;

Dit geeft aan hoeveel plaatsen deze array beschikbaar heeft. Het wil echter niet zeggen dat alle vakjes gevuld zijn. Er kunnen ook plaatsen zijn die null bevatten, wat betekent dat het geen inhoud heeft.

Met een for-loopje kun je alle waarden laten zien:

for(let i = 0; i < LeidseStraat.length; i++) {
  console.log(LeidseStraat[i]);
}

Nog een voorbeeld:

let trackDuration  = [];

trackDuration[0] = 24.5;
trackDuration[1] = 247.9;
trackDuration[2] = 200.0;
trackDuration[3] = 86.3;

for(let i=0; i < trackDuration.length; i++) {
  console.log(trackDuration[i]);
}

⬆️

---

3. Arrays vullen

Door middel van een for-loop kan je een lijst op bepaalde manieren vullen. Hierbij kan je array.length gebruiken om te bepalen hoe vaak de for-loop moet worden herhaald. Daarna kan je op verschillende manieren de inhoud van een lijst aanpassen.

random

de random()-functie van P5js geeft een willekeurig getal tussen de 0 en het getal dat je invult. Dit is een floating-point getal. Als je het wil omzetten naar een integer kan je int() of floor() gebruiken. Als je twee getallen invult in random() kiest deze een getal tussen deze twee waarden: random(25,50) geeft een getal tussen 25.000 en 49.9999.

let lijst = [1,2,3,4,5];

for (let i = 0; i < lijst.length; i++) {
    //zet een getal tussen de 1 en 6 op de i-de positie in de lijst
    lijst[i] = floor(random(1,6));
}

gewogen random

Met gewogen random kan je aangeven hoe groot de kans is dat iets gaat gebeuren. Dit doe je door een willekeurig getal te kiezen tussen de 0 - 100 en dan te kijken of dat getal kleiner is dan de kans in procenten dat je wil dat iets gaat gebeuren:

//aantal stappen:
let steps = 16;
//lege lijst om te vullen met een 1 of 0 
let lijst = [];
//lijst met kans-percentage
let weight = [80,25,25,25,80,25,25,25,80,25,25,25,80,25,25,25];

for (let i = 0; i < steps; i++) {
    //als het willekeurige getal kleiner is dan het percentage:

    if (random(100) < weight[i]) {
        //zet 1 op positie i in de lijst
        lijst[i] = 1;
    }
    else {
        //anders zet 0 op positie i in de lijst
        lijst[i] = 0;
    }
}

de lijst met gewogen random kan je ook vullen door middel van een for-loop:

let steps = 16;
let lijst = [];
let weight = [];

for (let i = 0; i < steps; i++) {
    //elke vierder stap is het percentage tussen 75 en 100
    if (i % 4 === 0) {
        weight[i] = floor(random(75,100));
    }
    else {
        //elke andere stap tussen 0 en 25
        weight[i] = floor(random(25));
    }
}

for (let i  = 0; i < steps; i++) {
    if (random(100) < weight[i]) {
        lijst[i] = 1;
    }
    else {
        lijst[i] = 0;
    }
}

⬆️

---

4. Arrays bewerken

Je kan de inhoud van een array op verschillende manieren bewerken. Hieronder een tweetal functies die in p5js zijn ingebouwd en in het volgende hoofdstuk een overzicht met de verschillende standaard-JavaScript basisfuncties, daarnaast zijn er nog vele standaard JavaScript functies om arrays aan te passen. Zie hiervoor de officiele JavaScript handleiding

shuffle

Door een lijst te shuffelen kan je de inhoud van de lijst door elkaar husselen. Dus de waardes die in de lijst zitten blijven hetzelfde, maar ze staan op een andere plek. In JavaScript zal je zelf een functie moeten schrijven om dit te doen. In P5js is daar echter een functie voor: shuffle. Zie de website van P5js voor informatie over de shuffle-functie.

let lijst = [1,2,3,4,5,6,7,8,9,10];
console.log((shuffle(lijst, true)); // komt uit -> [3,1,9,5,8,2,10,7,6,4]

Als je true gebruikt als tweede argument, wordt de array die je als eerste argument invult overschreven. Als daar geen true invult, dan zal hij een nieuwe lijst teruggeven en de originele intact houden:

let lijst = [1,2,3,4,5];
console.log(lijst); //komt uit -> [1,2,3,4,5]
shuffle(lijst,false); //de lijst wordt geshuffeld, maar niet aangepast
console.log(lijst); //hier komt nog steeds [1,2,3,4,5] uit.
shuffle(lijst,true); //nu wordt de lijst wel overschrijven
console.log(lijst); //nu komt er bijvoorbeeld [2,3,1,5,4] uit

reverse

Met reverse kan je een lijst omkeren, dus dat wat op de 1e plaats staat, komt op de laatste plaats te staan. Ook hier is geen standaard JavaScript-functie voor, maar binnen P5js wel: reverse zie ook hiervoor weer de website van P5js.

let lijst = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(reverse(lijst)); // -> komt uit: [10,9,8,7,6,5,4,3,2,1]

De reverse-functie heeft geen tweede argument. De oorspronkelijke lijst wordt dus altijd aangepast.

5. Overige array-functies

array.shift()

array.shift() verwijdert het eerste element uit een lijst en geeft dit terug:

let lijst = [1, 2, 3, 4, 5];
console.log(lijst.shift(),lijst) // resultaat: 1, [2, 3, 4, 5]
console.log(lijst.shift(),lijst) // resultaat: 2, [3, 4, 5]

De lijst wordt dus aangepast door het eerste element te verwijderen. Als je het dus maar vaak genoeg uitvoert, dan is de lijst leeg.

array.pop()

array.pop() doet hetzelfde als shift() maar dan met het laatste element van de lijst:

let lijst = [1, 2, 3, 4, 5];
console.log(lijst.pop(),lijst); // resultaat: 5, [1, 2, 3, 4]
console.log(lijst.pop(),lijst); // resultaat: 4, [1, 2, 3]

ook hier wordt de lijst aangepast en dit zal dus resulteren in een lege lijst.

array.push()

met array.push() voeg je een element toe aan het eind van een lijst:

let lijst = [1, 2, 3, 4, 5];
lijst.push(6);
console.log(lijst); // resultaat: [1, 2, 3, 4, 5, 6]

array.unshift()

met array.unshift() voeg je een element toe aan het begin van een lijst:

let lijst = [1, 2, 3, 4, 5];
lijst.unshift(0);
console.log(lijst); //resultaat: [0, 1, 2, 3, 4, 5]

array.splice()

met array.splice() kan je een x aantal elementen verwijderen of toevoegen aan een array: array.splice() heeft minimaal twee argumenten en geen maximum. Argumenten zijn: (startpunt, verwijderaantal, toevoeging1, toevoeging2 ...)

• het startpunt beschrijft het indexnummer van waaruit je wil verwijderen en/of toevoegen
• het verwijderaantal geeft aan hoeveel elementen je wil verwijderen. bij 0 of een negatieve getal wordt er niets verwijderd.
• daarna kan je, gescheiden door komma's elementen opgeven die je wil toevoegen

verwijderen:

let lijst = [1, 2, 3, 4, 5];
//vanaf positie 2 worden 2 elementen verwijderd:
lijst.splice(2, 2); 
console.log(lijst); //resultaat: [1,2,5]

toevoegen:

let lijst = [1, 2, 3, 4, 5];
//vanaf positie 2 worden 0 elementen verwijderd
//en 2 elementen toegevoegd.
lijst.splice(2, 0, 3.25, 3.5, 3.75); 
console.log(lijst); //resultaat: [1, 2, 3, 3.25, 3.5, 3.75, 4, 5]

⬆️

---