We gaan de robot van kleur laten veranderen als je de muis beweegt. Hiervoor introduceren we 3 eigen variabelen. Een variabele gebruiken gaat in 3 stappen, die we hier laten zien:
Stap 1: declareren
let mijnR;
let mijnG;
let mijnB;Door let buiten de setup() en draw()te zetten, maken we de variabelen beschikbaar in het hele programma. Niet netjes, maar wel zo makkelijk. Deze stap noemen de het declareren van de variabelen: een geheugenruimte reserveren. Zie het als een brooddoos klaarzetten met je naam erop, maar er zit nog niks in.
Stap 2: Een eerste waarde geven
We geven de variabelen gelijk een eerste waarde in de setup(), zodat het nooit mis kan gaan als we ‘m ineens gebruiken voordat ie een waarde heeft.
function setup() {
createCanvas(400, 400);
strokeWeight(5);
mijnR = 0; // Initialise - een eerste waarde
mijnG = 0;
mijnB = 0;
}Stap 3: de variabele gebruiken
Nu zijn de variabelen klaar voor gebruik.
mijnR = 255 - mouseX; // omkeren
mijnG = mouseY; // overnemen
mijnB = (mouseX + mouseY) / 2; // optellen en delen door 2
fill(mijnR, mijnG, mijnB); // gebruik de 3 variabelenOpdracht 1. Vervang de codes in je robot
Maak weer een duplicate van je robot uit de vorige opdracht. We gaan proberen alle mouseX en mouseY uit de ellipse() en rect() -aanroepen te houden. In plaats hiervan gaan we de nieuwe variabelen gebruiken mijnX en mijnY.
- declareer en initialiseer mijnX en mijnY zoals nodig is.
- vervang alle mouseX en mouseY door mijnX en mijnY
- aan het begin van de draw geef je mijnX en mijnY de waarde van mouseX resp. mouseY.
- nu heb je weer precies dezelfde robot als na de vorige opdracht, alleen met je eigen variabele.
- Check dat ie werkt
Opdracht 2. Ontdek de kracht van deze eigen variabele.
Op de ene plek bovenaan je draw() heb je iets staan als:
mijnX = mouseX;
mijnY = mouseY;Het werkt goed, maar op deze manier heb je er niks aan. Je had het net zo goed niet kunnen doen.
Laten we de robot maar eens op zijn kop zetten. Vervang alleen deze regel.
mijnY = height - mouseY ;