In de cursus programming principles hebben we gezien dat je variabelen kan gebruiken om informatie tijdens de looptijd van je programma op te slaan, zoals de positie van bepaalde zaken. Dat is precies wat we in de vorige voorbeelden hebben gedaan. De positie van de muis wordt door P5js in een variabele opgeslaan, en die gebruiken wij vervolgens om vormen relatief aan die positie te tekenen. Maar dat betekent wel dat we de hele tijd met de muis moeten bewegen als we willen dat er wat op het scherm gebeurd.
Gelukkig kunnen we ook zelf variabelen declareren en initiëren, zodat we zaken kunnen automatiseren. Als we nog een keer naar het voorbeeld kijken met de rode cirkel, die we op een vast plaats steeds opnieuw tekenen:
Als de deze cirkel willen laten bewegen, zullen de eerste 2 getallen van de functie ellipse() moeten aanpassen. Deze bepalen immers de x en y coordinaat waarop de cirkel wordt getekend. In vorige voorbeelden hebben we hier de coordinaten van de muis ingevuld, maar nu willen we variabelen gaan gebruiken.
We herinneren ons dat we variabelen steeds moeten declareren (of aanmaken) en initiëren (of vullen). Dat zullen we eerst doen. Een declareren 2 globale variabelen, want we willen deze in ons hele programma kunnen gebruiken. Het aangeven van een type hoeft niet in P5js. We willen 1 variabele voor de x coordinaat, en 1 variabele voor de y coordinaat. Als naam kiezen we x en y.
Bij het runnen van deze code zien we geen verschil. Logisch, want de waarde in de variabelen x en y blijft steeds hetzelfde. Elke keer als de draw loop wordt uitgevoerd, kijkt het programma in de “emmers” x en y en haalt daar 50 uit. Zo lang we deze waarden dus onveranderd laten, blijft de cirkel op dezelfde plaats.
Variërende variabelen
Stel dat we willen dat onze cirkel naar rechts beweegt. Door ontleden toe te passen komen we tot een aantal vragen:
- Welke variabelen zijn er aanwezig in het programma?
- Welke waarde van welke variabele moeten we veranderen ?
- Welke verandering moet deze dan ondergaan ?
- Hoe vaak moet dat gebeuren ?
Er zijn 2 variabelen aanwezig in ons programma: x en y. Als we naar rechts willen bewegen, moeten we kijken naar de x-as. De variabele in ons programma die daar bij hoor is de variabele x. Wanneer we naar rechts willen bewegen zal de waarde van de variabele moeten toenemen. Dit doen we liefst elke keer als de draw loop wordt uitgevoerd.
Om een waarde die zich in een variabele bevindt te vermeerderen of te verminderen, moeten we eerst de huidige waarde van de variabele opvragen, daar 1 bij optellen (of aftrekken) en weer opslaan in de variabele. We herinneren ons dat we door gebruik te maken van 1 = teken de waarde links in de variabele rechts kunnen opslaan. We willen de huidige waarde + 1 opslaan, dat wordt dus
x + 1
Deze waarde moet in x terechtkomen. Dat doen we door
x = x+1;
uit te voeren. Als we dit continu in de draw loop doen krijgen we:
Pas de waarde aan. Maak er eens +2 van, of -1. Wat gebeurt er?
We zien dat de cirkel relatief snel van het scherm verdwijnt. Om dit tegen te gaan moeten we condities gebruiken.