In dit hoofdstuk gaan we zelf een functie bouwen. We beginnen simpel: Een functie die een zwarte cirkel tekent is ons doel.

Waar moeten we beginnen met het bouwen van onze functie ? We willen immers dat deze functie enkel wordt uitgevoerd op het moment dat we ze aanroepen. Ze aanmaken in het setup() blok is dus geen optie, want dan wordt ze al direct 1 keer uitgevoerd bij het opstarten van mijn programma. De draw() loop is nog minder geschikt, want dan maken we 60x per seconde een nieuwe functie aan.

Een functie bouwen doen we dus buiten de setup() en draw() blok. Een nieuwe functie krijgt zijn eigen codeblok:.

void setup(){
     size(500,500);
}

void draw(){
     // nog niets
}

void drawBlackCircle(){
     fill(0);
     ellipse(50,50,20,20);
}

Dat codeblok bestaat uit

1. het type informatie dat de functie teruggeeft:
   Onze functie moet enkel een zwarte cirkel tekenen. Dat wil zeggen dat er geen informatie UIT de functie komt. Als dit het geval is, is het type informatie dat de functie teruggeeft “void”. Dit herken je van “void draw()” en “void setup()”
2. de naam van de functie:
   de naam van de functie moet, net zoals bij de naam van een variabele, betekenisvol zijn. Aangezien functies iets doen, is een naam in de vorm van een werkwoord vaak aangewezen. Ik opteer in ons geval voor “drawBlackCircle”. Merk op dat ik ook hier camelCase gebruik.
3. twee “gewone” haakjes: ( )
   de twee haakjes komen erachteraan
4. en twee accolades { } waarbinnen de code komt te staan die bij de functie hoort
   in ons geval code die een zwarte cirkel tekent op een bepaalde plaats

Onze functie is gebouwd, maar wordt niet uitgevoerd. Daarvoor moeten we ze aanroepen. We doen dit in de draw() loop, door de naam van de functie te plaatsen, met daarachter een open en sluit haak ().

void setup(){
     size(500,500);
}

void draw(){
     background(255);
     drawBlackCircle();
}

void drawBlackCircle(){
     fill(0);
     ellipse(50,50,20,20);
}

De code die in onze functie zit, hoeft natuurlijk niet statisch te zijn. Als we code vervangen met het voorbeeld waar de cirkel zich verplaatst en tegen de randen aan botst, is dit het resultaat:

int x = 0;
int speed = 1;

void setup(){
size(500,500);
}

void draw(){
background(255);
drawBlackCircle();
}

void drawBlackCircle(){
     x = x + speed;

     if(x > width || x < 0){
          speed = -speed;
     }

     stroke(0);
     fill(175);
     ellipse(x,100,32,32);
}

Dezelfde code live:

We zien dus dat een functie onderaan moet worden aangemaakt, en vervolgens op de gewenste plaats in de code moet worden aangeroepen.

 

Oefening 1 (20 min)

Nu gebeurt alles in één functie. Het is een stuk handiger als we dit verder opbreken. Dit maakt de structuur van het programma leesbaarder én het debuggen later makkelijker.

We willen een functie voor:

• x die de hele tijd veranderd (suggestie naam: update)
• te checken of x de rand heeft geraakt + dan van richting veranderd (suggestie naam: test)
• alles te tekenen (een cirkel in ons geval) (suggestie naam: teken)

Met andere woorden, de draw() loop gaat er zo uit zien:

void draw(){

     update();

     test();

     teken();

}

Oefening 2 (30 min)

Voeg nu een test toe. Elke 3de keer dat de cirkel de rand raakt, veranderd deze van een cirkel naar en vierkant (en weer terug na 3 keer)

te gebruiken:

• een teller
• een boolean
• een functie tekenCirkel()
• een functie tekenVierkant()

Functies mét parameters >