Variabelen en Literals¶

Wat is een variabele?¶

Een variabele is een naam die verwijst naar een plek in het geheugen waar een waarde wordt opgeslagen. Je kunt het zien als een gelabeld doosje waarin je iets bewaart. In code gebruik je de naam van het doosje om de inhoud te lezen of te veranderen.

Voorbeeld: variabele gebruiken voor positie

let x = 50; // we maken een variabele x en geven er de waarde 50 aan
ellipse(x, 100, 40, 40); // gebruikt de waarde van x om de cirkel te tekenen

In dit voorbeeld wordt de waarde van x gebruikt om de horizontale positie van de cirkel te bepalen. Als je later x aanpast, verandert ook de positie van de cirkel.

Voorbeeld: waarde van variabele aanpassen

x = x + 10; // verhoog x met 10

Declareren en Initialiseren¶

Declareren betekent dat je een variabele aanmaakt (je vertelt de computer dat die bestaat).
Initialiseren betekent dat je de variabele een eerste waarde geeft.

Voorbeeld: declareren en initialiseren

let snelheid; // declareren
snelheid = 3; // initialiseren

Of allebei in één stap:

Voorbeeld: declareren en initialiseren in één stap

let snelheid = 3;

Als je een variabele gebruikt vóórdat je ze initialiseert, is de waarde undefined.

Typen variabelen¶

In JavaScript (en dus ook in p5.js) zijn er verschillende datatypes:

Type	Voorbeeld	Beschrijving
Number	`let leeftijd = 18;`	Een getal, kan ook met decimalen.
String	`let naam = "Sofie";`	Een tekstwaarde tussen aanhalingstekens.
Boolean	`let klaar = true;`	Waar of niet waar.
Array	`let kleuren = ["rood", "groen", "blauw"];`	Een lijst met waarden.
Object	`let bal = {x: 50, y: 100, kleur: "wit"};`	Een verzameling eigenschappen.

In p5.js gebruik je deze types voortdurend, bijvoorbeeld om kleuren, posities of toestanden te onthouden.

Voorbeeld: variabelen in p5.js draw() gebruiken

let x = 0;
let snelheid = 2;
function draw() {
  background(220);
  ellipse(x, 100, 50, 50);
  x = x + snelheid; // x verandert per frame
}

Hier veranderen de waarden van x telkens, wat beweging oplevert.

Const, Let en Var¶

let: moderne manier om variabelen te maken. Geldig binnen het blok ({}) waarin ze zijn gedeclareerd.
const: zoals let, maar de waarde mag niet opnieuw toegewezen worden.
var: oudere manier, geldt voor de hele functie of het hele script.

Voorbeeld: const en let gebruiken

const PI = 3.14; // constante waarde
let straal = 40;
let omtrek = 2 * PI * straal;

Gebruik const als een waarde niet zal veranderen.

Wat is een literal?¶

Een literal is een vaste waarde die letterlijk in de code staat. Bijvoorbeeld:

Voorbeeld: literals in JavaScript

5          // number literal
"rood"     // string literal
true       // boolean literal

Voorbeeld in p5.js:

Voorbeeld: literals toepassen in p5.js

fill("red"); // de string literal "red" bepaalt de vulkleur
ellipse(50, 50, 20, 20); // de getalliterals 50 en 20 bepalen positie en grootte

Operatoren en datatypes¶

Operatoren kunnen zich verschillend gedragen afhankelijk van het datatype.

Voorbeeld: operator + met verschillende datatypes

let a = 5;
let b = "5";
print(a + b); // uitvoer: "55" (string concatenatie)
print(a + Number(b)); // uitvoer: 10 (optelling)

De + operator voegt samen bij strings en telt op bij numbers.

Scope – waar leeft een variabele?¶

De scope bepaalt waar een variabele geldig is. Variabelen met let bestaan alleen binnen het blok ({}) waarin ze gedeclareerd zijn.

Voorbeeld: block scope met let

{
  let x = 10;
}
print(x); // Error: x is not defined

Variabelen buiten het blok hebben geen toegang tot x.

Voorbeelden uit p5.js¶

Een paar voorbeelden die laten zien hoe variabelen en literals samenwerken in p5.js:

Bewegende bal:

Voorbeeld: bewegende bal met variabelen

let x = 0; // variabele voor positie
let snelheid = 3;

function setup() {
  createCanvas(400, 200);
}

function draw() {
  background(200);
  ellipse(x, 100, 50, 50);
  x = x + snelheid; // variabele verandert
}

Kleur veranderen op basis van boolean:

Voorbeeld: kleur wisselen op basis van boolean

let rood = true;

function draw() {
  if (rood) {
    fill("red");
  } else {
    fill("blue");
  }
  ellipse(50, 50, 50, 50);
}

Belangrijke begrippen¶

Variabele – naam die een waarde bewaart in het geheugen.
Literal – vaste waarde (zoals 42 of "tekst").
Declareren – aangeven dat een variabele bestaat (let x;).
Initialiseren – een eerste waarde geven (x = 5;).
Datatype – het soort waarde (number, string, boolean, etc.).
Operator – symbool dat een bewerking uitvoert (+, -, *, ==).
Scope – de context waarin een variabele geldig is.
Const / Let / Var – manieren om variabelen te maken met verschillende regels.
Concatenatie – samenvoegen van strings met +.
Undefined – speciale waarde voor een variabele zonder waarde.