Js Basics

Hieronder worden een aantal basiselementen behandeld die voor JavaScript, en dus ook voor P5.js gelden.

Commentaar

Binnen elke programmeertaal is het belangrijk om tussen de regels code aan te geven hoe bepaalde code werkt en hoe dit bijdraagt aan de algehele functionaliteit van de code. Dit doe je door commentaar bij de code te typen. Commentaar wordt in JavaScript opgeschreven door twee forward slashes // voor een regel code te schrijven. Deze code wordt niet geïnterpreteerd door de browser en kan dus gewoon tekst bevatten. Als je over meerdere regels commentaar wilt plaatsen kan je dit doen door te beginnen met /* en te eindigen met */ zie het voorbeeld hieronder:

function setup() {
    //hier staat een regel commentaar
    createCanvas(800,600);
    background(255);
}
function draw() {
    /*in deze functie wordt de code continu herhaald
      dit gebeurt met een frameRate van 60x
      per seconde. Dat is sneller dan je ogen
      het kunnen verwerken. 
      */
}

Naast het gebruik van commentaar om aan te geven hoe code werkt kan je door regels code in commentaar te zetten snel uitzoeken waar een eventuele fout in je code zit. In alle code-editors doe je dit snel door de cursor op een regel te zetten en cmd of ctrl + / te typen. Als je meerdere regels selecteert zal de editor deze in block-commentaar zetten.

; (puntkomma)

Bijna elke regel wordt in JavaScript afgesloten met een puntkomma ;. Hiermee geef je aan dat die regel geëindigd zodat het programma dat de code vertaalt weet dat het de volgende regel als nieuwe code kan interpreteren. Een regel hoeft echter niet altijd afgesloten worden door een ;. Als dat het geval is dan zal dat in de voorbeelden hieronder duidelijk worden aangegeven.

Variabelen

Een variabele is een stukje geheugen (in het RAM-geheugen) dat gerserveerd wordt om data in op te slaan. De data die in een variabele wordt opgeslagen kan vanalles zijn: een getal, een stukje tekst, een lijst, een functie of een geluidsfragment. Het doel van het opslaan van data in een variabele is het later weer op kunnen roepen van de data om deze bijvoorbeeld aan te passen of te gebruiken op verschillende plaatsen in de code. Je maakt in JavaScript op de volgende manier een variabele aan: 

let x = 42;
let y = 45.6;
let tekst = "stukje tekst";

het woordje let geeft aan dat je een variabele wil gaan aanmaken. De x, y of tekst is de naam die je geeft aan de variabele. Dit mag een naam zijn die je zelf verzint. Zorg hierbij dat de naam duidelijk aangeeft wat de informatie die in de variabele is opgslagen betekent. Met het =-teken geef je aan dat de inhoud van de variabele gelijk wordt aan de informatie achter dit =-teken.


In bovenstaande code is variabele x gelijk aan het hele getal (integer) 42, de variabele y aan het kommagetal (floating point) 45,6. De variabele tekst is gelijk aan de woorden stukje tekst. Door deze tussen dubbele quotes te plaatsen geef je aan dat deze woorden niet als code, maar als leesbare tekst moet worden geïnterpreteerd.

Scope

Variabelen zijn binnen een bepaald gebied van de code bekend en geldig. Dit heet de scope van de variabele. Deze kan globaal of lokaal zijn. Als de scope globaal is dan is deze door het gehele bestand te gebruiken. Is de scope lokaal, dan kan je deze variabele alleen binnen een bepaald blok code gebruiken. Zie het voorbeeld hieronder voor meer informatie hierover.

/*onderstaande variabelen zijn globaal, 
 *deze kan je zowel in de setup- als de 
 *draw-functie gebruiken en aanpassen.
 */
let x = 40;
let y = 50;

function setup() {
    //onderstaande variabele is lokaal, 
    //en daarmee alleen bruikbaar in de setup-functie
    let start = 50;
    //de code hieronder kan worden uitgevoerd, 
    //alle variabelen zijn bekend
    console.log(x,y,start); 
}

function draw() {
    //de code hieronder kan niet goed worden uitgevoerd, 
    //de variabele start is onbekend
    console.log(x,y,start); 
}

//merk op dat de accolades niet worden afgesloten met een puntkomma, 
//bij de meeste accolades is dit niet nodig in javascript

Arrays

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.

Voorbeeld:

let LeidseStraat  = [];

Dit maakt een nieuwe array. Hierbij geef je met de index (bv. 0, 1, 2, 3) aan naar welk element in het array je wijst. In Javascript krijgt het eerste element als index 0.

In het volgende stukje code krijgt elk element een waarde:

LeidseStraat[0] = "Familie Jansen";
LeidseStraat[1] = "Bakker Bard, de muzikale bakker";
LeidseStraat[2] = "Familie De Bruin";
LeidseStraat[3] = "Kees van den Berg";

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 loopje kun je alle waarden laten zien:

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

Nog een voorbeeld:

let trackDuration  = [];

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

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

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 opverschillende 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++) {
    lijst[i] = floor(random(1,6)) //zet een getal tussen de 0 en 1 op de i-de positie in de lijst
}

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:

let steps = 16;
let lijst = [];
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++) {
    if (random(100) < weight[i]) {
        lijst[i] = 1;
    }
    else {
        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++) {
    if (i % 4 === 0) {
        weight[i] = floor(random(75,100));
    }
    else {
        weight[i] = floor(random(25));
    }
}

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

arrays bewerken

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.

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 oorspronkele lijst wordt dus altijd aangepast.

rotate

Ook is het mogelijk een lijst te roteren. Hiervoor is geen standaard P5-functie, maar in javascript is dit redelijk makkelijk te doen, daarvoor behandelen we kort een aantal 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]

Door deze vier functies te combineren kan je een lijst twee kanten op roteren:

let lijst = [1,2,3,4,5];
lijst.push(lijst.shift());
let lijst = [1,2,3,4,5];
lijst.unshift(lijst.pop());

Functies

Waarom functies?

Ze verhogen het overzicht

Wanneer je een programma schrijft in een programmeertaal als C++, PHP of Javascript dan kun je alle code onder elkaar in een grote file zetten en al die code vervolgens van boven tot beneden door de computer laten uitvoeren.

Voor een klein programmaatje gaat dat vaak nog wel, maar als je meer dan een pagina code schrijft wordt het al gauw onoverzichtelijk. In dat geval loont het de moeite om gedeelten uit je code die functioneel gezien bij elkaar horen in aparte brokken te stoppen. Zo'n brok geef je een naam die aangeeft wat het doet en je hebt daarmee de eenvoudigste vorm van een functie gemaakt.

Die functie kun je dan vanuit het hoofdprogramma aanroepen, waardoor je in het hoofdprogramma duidelijk de verschillende stappen in je programma kunt onderscheiden.

Hergebruik van stukken code

Als je een programma schrijft waarin meerdere keren ongeveer hetzelfde gebeurt dan is het vaak lonend om uit te zoeken of die herhaling altijd exact hetzelfde is en zo niet, op welke punten het verschilt.
In het eerste geval kun je de code die telkens herhaald wordt in een functie opnemen zodat je het maar 1 keer hoeft te maken en je kunt die functie dan zo vaak aanroepen als je wilt.
In het tweede geval ga je op zoek naar de grootste gemene deler van het stuk code dat met kleine verschillen telkens herhaald wordt. Goede kans dat je die code in een functie kunt stoppen en bij het aanroepen aangeven wat er anders is dan de vorige keer dat je de functie aanriep. Hoe je dat dan aangeeft bespreken we later.

Gebruik door anderen

Als programmeur kun je je lekker uitleven en mooie software schrijven waar je heel erg trots op bent en die jij helemaal begrijpt. Wanneer iemand anders met jouw software moet werken of jij wilt een stuk software van iemand anders gebruiken, dan zul je zien dat het niet meevalt om software uit te wisselen. Onderschat ook niet dat je over een maand alweer veel vergeten bent van wat je nu bedenkt, dus zorg dat je je eigen code over een tijdje nog begrijpt.

Programmeurs zijn in het algemeen vrij eigenwijs en hebben vaak een eigen stijl van programmeren. De een gebruikt HoofdLetters Voor AlleVariabelen, de ander gebruikt liever underscores. De plaatsing van haakjes en het gebruik van tabs en spaties is ook vaak een kwestie van voorkeur en zo zijn er allerlei redenen om de code van iemand anders als slecht leesbaar te bestempelen.

Verder heb je niet altijd de tijd om je te verdiepen in alle details van andermans software maar wil je het gewoon gebruiken zonder te weten hoe het werkt.

Hier komen functies weer om de hoek kijken. Maak je nette functies die een bepaald gedeelte van jouw programma uitvoeren dan hoef je aan anderen alleen maar te vertellen hoe ze die functie moeten aanroepen om jouw functionaliteit in hun eigen programma te gebruiken. Je geeft als het ware een stuk gereedschap en vertelt erbij hoe je het moet gebruiken maar niet hoe het werkt.

Het maken en aanroepen van een functie

In het algemeen ziet een functie er zo uit:

function foo(argumentenlijst) {
    /*
    * hier komt jouw code
    */
    return result;
}

Deze functie heeft de naam foo. De argumentenlijst bevat nul of meer variabelen. Je kunt de argumentenlijst leeg laten. De haakjes () moet je wel altijd gebruiken om aan te geven dat het om een functie gaat.

Een eenvoudige functie

De simpelste vorm van een functie is zonder argumenten en zonder returnwaarde:

function zegEensHallo() {
    console.log("Hallo");
}

Je kunt deze functie bijvoorbeeld zo gebruiken:

console.log("Demonstratie van een simpele functie, we roepen de functie een paar keer aan");
zegEensHallo();
zegEensHallo();
zegEensHallo();

Let erop dat de naam die je gebruikt om de functie aan te roepen exact hetzelfde is als de naam van de functie. Gebruik daarom bij voorkeur "camel case": vanaf het tweede deel van een woord beginnen met een hoofdletter en verder kleine letters gebruiken.

Teken een vorm, in dit geval een oog

Stel dat je een oog nodig hebt in jouw code dan kan je die zelf tekenen met behulp van een aantal ellipses:

function oog() {
    fill('white');
    ellipse(width/2,height/2,60,40);
    fill('lightblue');
    ellipse(width/2,height/2,30,30);
    fill('black');
    ellipse(width/2,height/2,10,10);
}

function draw() {
    oog();
}

Dit was nogal beperkt want het kan alleen maar een oog op een bepaalde positie en met een bepaalde grootte tekenen.

Het volgende voorbeeld maakt het al iets flexibeler:

function oog(x,y) {
    fill('white');
    ellipse(x,y,60,40);
    fill('lightblue');
    ellipse(x,y,30,30);
    fill('black');
    ellipse(x,y,10,10);
}

function draw() {
    oog(100,100);
    oog(200,100);
    oog(300,100);
    oog(400,100);
}

Probeer zelf maar een functie te maken met een rechtdoor-kijkend oog, maar ook een oog dat naar links of naar rechts kan kijken.

Optionele argumenten

Naast dat je argumenten mee kan geven aan een functie kan je ook argumenten gebruiken die een standaardwaarde hebben. Dus zolang je niets invult neemt hij de standaard waarde, als je wel een argument meegeeft, dan gebruikt hij deze waarde. Zie het voorbeeld hieronder:

function oog(x,ykleur = 'lightblue') {
    fill('white');
    ellipse(x,y,60,40);
    fill(kleur);
    ellipse(x,y,30,30);
    fill('black');
    ellipse(x,y,10,10);
}

function draw() {
    oog(100,100);
    oog(200,100,'brown');
    oog(300,100);
    oog(400,100,'purple');
}

Je zult hierbij zien dat er twee lichtblauwe ogen verschijnen en twee in een andere kleur.

Verder werken met het resultaat van een functie

Uitrekenen van de oppervlakte van een rechthoek. Zoals je weet kun je de oppervlakte berekenen door de breedte en hoogte met elkaar te vermenigvuldigen. Dat gaan we nu eens met een functie doen. Eerst zie je de functie calcSurface(), daarna een paar verschillende manieren om de functie te gebruiken.

De functie calcSurface() heeft twee argumenten en een return-waarde. Met een argument wordt hier bedoeld een variabele die de functie in gaat. Er wordt ook wel gezegd dat je die variabelen "aan de functie meegeeft". In deze functie zijn dat de breedte en hoogte (Eng: width en height).

De return-waarde is een variabele die uit de functie komt. Er wordt ook wel gezegd dat de functie die waarde teruggeeft.

// Hier wordt de functie calcSurface() gemaakt
function calcSurface(w,h) {
    let surface = w * h;
    return surface;
}

/*
* Hieronder wordt de functie calcSurface() op
* een aantal verschillende manieren gebruikt
*/

// Aanroep met getallen
console.log("Breedte: 4");
console.log("Hoogte: 5");

let surface = calcSurface(4,5);
console.log("Oppervlakte: " + surface);

// Aanroep met variabelen
let breedte=3;
let hoogte=5;

console.log("Breedte: " + breedte);
console.log("Hoogte: " + hoogte);
console.log("Oppervlakte: " + calcSurface(breedte,hoogte) );

Stel dat je de oppervlakten van twee rechthoeken bij elkaar wilt optellen en alleen het totaal laten zien, dan doe je dat zo:

let totalSurface = calcSurface(4,5) + calcSurface(7,7);
console.log("Totale oppervlakte: " + totalSurface);

Classes en objecten

"Classes en objecten - de manier om dingen makkelijk te maken."

Een class is een manier om bepaalde functies en variabelen die samenhangen in één keer te beschrijven. Dit doe je zodat je er makkelijk heel veel van kunt maken zonder daar steeds allerlei nieuwe variabelen voor te declareren.

Binnen programmeertalen zijn objecten taalconstructies waarmee je groepen van verschillende elementen kunt maken. Dat doe je niet achteraf door elementen toe te voegen aan een groep, maar van te voren door een klasse te beschrijven en vervolgens dingen te maken die de eigenschappen van die klasse hebben. Die dingen noem je objecten. Binnen JavaScript bestaat er nog een andere vorm van objecten. Als we het in dit hoofdstuk over objecten hebben bedoelen we de hierboven beschreven vorm.

Voorbeeld

Als we in P5.js een blokje op het scherm willen tekenen dan kunnen we de functie rect aanroepen om een rechthoek te tekenen. We moeten elke keer bedenken waar de rechthoek moet staan (x- en y-positie) en hoe groot hij is (breedte en hoogte (b,h)) Verder moeten we aangeven in welke kleur hij getekend moet worden, of er een rand omheen moet en als we hem willen verplaatsen of laten knipperen moet daar ook code voor worden geschreven.

Dat is voor één blokje nog wel te doen, maar als je meerdere blokjes wil tekenen die elkaar onderling beïnvloeden, dan wordt de code al gauw onoverzichtelijk.

Dat kan ook anders: we beschrijven eerst het algemene gedrag van een blokje in een object en daarna kunnen we zo veel van die blokjes maken als we nodig hebben.

Ontwerp: een object beschrijven

Vraag jezelf van te voren af: welke algemene eigenschappen heeft een blokje en welke functionaliteiten moet deze krijgen? In dit geval zijn de eigenschappen positie, afmeting, kleur, omlijning. De belangrijste functionaliteit is dat het blokje getekend moet worden. 

class Block {
  constructor() {
    this.x = random(width); //x-positie
    this.y = random(height); //y-positie
    this.b = random(10,50); //breedte
    this.h = random(10,50); //hoogte
    this.blockColor = color(random(255),random(255),random(255)); //kleur
  }

  draw() {
    fill(this.blockColor);
    rect(this.x,this.y,this.w,this,h)
  }
}

De hierboven beschreven code is de minimale opzet van een class. Het aanmaken van de class gebeurt met het woord class waarna de naam van de class volgt. Het is een goed gebruik, en in sommige gevallen zelfs verplicht, om deze naam met een hoofdletter te laten beginnen.
let op: in tegenstelling tot bij het maken van een functie volgen er geen () na het maken van een class.

Vervolgens kan je binnen een class met behulp van verschillende functies eigenschappen en gedrag van een object gaan bepalen: let op: in tegenstelling tot bij het maken van een functie hoef je niet het woord function op te schrijven voordat je een functie binnen een class aanmaakt.

Een belangrijke functie is de constructor(). De constructor wordt aangeroepen zodra je vanuit de class-beschrijving een nieuw object aanmaakt. Je kan de constructor vergelijken met de setup()-functie uit P5.js: De plek om algemene eigenschappen te beschrijven.

variabelen die je binnen een class wilt gebruiken definieer je net anders dan in normale JavaScript-code. Dit doe je door this te gebruiken. Met this zorg je ervoor dat de variabele uiteindelijk alleen bekend is binnen het object dat je hebt aangemaakt, en daarmee dus ook exclusief is voor dat object. Zo kan je bij het maken van meerdere objecten uit één class-omschrijving er voor zorgen dat ieder object unieke eigenschappen heeft.

realisatie: een object maken

let myBlock;

function setup() {
  createCanvas(600,800);
  myBlock = new Block();
}

function draw() {
  background(200);
  myBlock.draw();
}

//class-beschrijving:
class Block {
  constructor() {
    this.x = random(width); //x-positie
    this.y = random(height); //y-positie
    this.b = random(10,50); //breedte
    this.h = random(10,50); //hoogte
    this.blockColor = color(random(255),random(255),random(255)); //kleur
  }

  draw() {
    fill(this.blockColor);
    rect(this.x,this.y,this.w,this,h)
  }
}

Een nieuw object wordt doormiddel van new met daaropvolgend de naam van de class, afgesloten met (). Een nieuwe object plaats je in een variabele, zodat je er later nog iets mee kunt.

Zodra je het object hebt gemaakt kan je de functies die je binnen dit object hebt gemaakt aanroepen op de volgende manier: naam van de variabele.naam van de functie()

In het hierboven beschreven voorbeeld wordt het object aangemaakt in de setupfunctie, dit kan niet daarboven omdat de inhoud van de class-beschrijving nog niet bekend is zodra dat deel van de code uitgevoerd wordt. Zodra de setup()-functie wordt uitgevoerd is die beschrijving wel bekend en kan je het object maken.

meerdere objecten maken

let myBlock1;
let myBlock2;
let myBlock3;

function setup() {
  createCanvas(800,600);
  myBlock1 = new Block();
  myBlock2 = new Block();
  myBlock3 = new Block();
}

function draw() {
  background(200);
  myBlock1.draw();
  myBlock2.draw();
  myBlock3.draw();
}

class Block {
  constructor() {
    this.x = random(width); //x-positie
    this.y = random(height); //y-positie
    this.b = random(10,50); //breedte
    this.h = random(10,50); //hoogte
    this.blockColor = color(random(255),random(255),random(255)); //kleur
  }

  draw() {
    fill(this.blockColor);
    rect(this.x,this.y,this.w,this,h)
  }
}

Zoals je hierboven ziet kan je meerder variabelen aanmaken en die vervolgens allemaal vullen met een nieuw object. Op die manier maak je dus met behulp van een class-beschrijving meerdere objecten aan.

Meerdere objecten en arrays

Zodra je meerdere objecten wil gaan aanmaken vanuit één class-beschrijving dan wil je natuurlijk niet voor elk object een aparte variabele moeten maken. Dat is nog wel te doen bij 3 objecten, maar als je er 100 wil aanmaken wordt dat al snel lastig. Om dat probleem op te lossen kan je objecten ook in een array opslaan en met een for-loop een x-aantal keer een nieuw object op een array-positie plaatsen.

let blockAmount = 10;
let blockArray = [];

function setup() {
  createCanvas(800,600);
  for (let i = 0; i < blockAmount; i++) {
    blockArray[i] = new Block();
  }
}

function draw() {
  background(200);
  for (let i = 0; i < blockAmount; i++) {
    blockArray[i].draw();
  }
}

class Block {
  constructor() {
    this.x = random(width); //x-positie
    this.y = random(height); //y-positie
    this.b = random(10,50); //breedte
    this.h = random(10,50); //hoogte
    this.blockColor = color(random(255),random(255),random(255)); //kleur
  }

  draw() {
    fill(this.blockColor);
    rect(this.x,this.y,this.w,this,h)
  }
}

eigenschappen meegeven aan een object

Soms is het nodig om vanuit de setup()-functie een of meerdere eigenschappen mee te geven aan een object, bijvoorbeeld als je de positie wilt laten afhangen van het aantal objecten dat je maakt. Dat kan door argumenten mee te geven bij het aanmaken van het object. Deze argumenten worden vervolgens in de constructor()-functie in de class binnengehaald. 

let blockAmount = 10;
let blockArray = [];

function setup() {
  createCanvas(800,600);
  for (let i = 0; i < blockAmount; i++) {
    blockArray[i] = new Block((width/blockAmount)*i);
  }
}

function draw() {
  background(200);
  for (let i = 0; i < blockAmount; i++) {
    blockArray[i].draw();
  }
}

class Block {
  constructor(x) {
    this.x = x; //x-positie
    this.y = random(height); //y-positie
    this.b = random(10,50); //breedte
    this.h = random(10,50); //hoogte
    this.blockColor = color(random(255),random(255),random(255)); //kleur
  }

  draw() {
    fill(this.blockColor);
    rect(this.x,this.y,this.w,this,h)
  }
}

In de bovenstaande code zijn twee dingen aangepast ten opzichte van de code daarboven:

Console en foutmeldingen

Een belangrijk hulpmiddel bij het schrijven van code is de Javascript-console die standaard bij de browser zit inbegrepen. In deze console kun je foutmeldingen lezen, maar je kunt ook berichten sturen naar de console zodat je weet wat de code precies doet. Zorg dat je tijdens het ontwikkelen van jouw software de console altijd open hebt staan, zo zie je direct of er iets fout gaat of niet. De console zal bij foutmeldingen altijd aangeven in welk bestand deze foutmelding zit en in op welke regel deze foutmelding te vinden is, zo kan je hem snel vinden in de code-editor.

De console openen

Chrome

In Chrome (en Chromium / Brave / Edge) kun je de console tevoorschijn halen met behulp van de volgende toetsencombinatie:

Firefox

In Firefox kun je de console tevoorschijn halen met behulp van de volgende toetsencombinatie:

Safari

In Safari is de console standaard verborgen. Je moet eerst zorgen dat je deze te zien krijgt:

Berichten sturen naar de console

Als je de waarde van bepaalde variabelen naar de console wilt sturen om te kijken of de code ook echt doet wat jij denkt dat de code moet doen gebruik je de volgende code:

    let x = 50; 
    let y = 100; 
    console.log("variabele x is: " + x + ", variabele y is: " + y);

De console zal nu het volgende weergeven:

variabele x is: 40, variabele y is: 100

Denk er bij het gebruik van console.log() aan dat als je dit in de draw()-loop gebruikt bij een frameRate van 60, er 60 keer per seconde een bericht naar de console gestuurd wordt. Dit kan de browser soms slecht hebben, waardoor deze vast kan lopen.