meer gedoe met witregels (grrr), taalfoutjes en plaatje kleiner.

index.md

@@ -77,11 +77,12 @@ function draw() {
 }
 {{< /highlight >}}  
 
+<br>
 
+Je kunt dat script meteen uitvoeren door linksbovenaan op de wit-met-roze afspeelknop te drukken. Je ziet dan rechts het canvas met een gekleurde achtergrond.
 ![afspeelknop](imgs/play.png)
-Je kunt dat script meteen uitvoeren door linksbovenaan op de afspeelknop te drukken. Je ziet dan rechts het canvas met een gekleurde achtergrond.  
 
-
+<br>
 
 Alle sketches met p5.js hebben die twee functies:
 
@@ -106,6 +107,7 @@ function draw() {
 {{< /highlight >}}
 <!-- <div class="p5js_voorbeeld" id="voorbeeld1"></div> -->
 
+<br>
 
 **Oefening 1**: neem de code over in de editor en kijk of er een draaiend vierkant wordt getekend door op de speelknop te klikken.
 
@@ -118,33 +120,44 @@ We zullen de code regel voor regel uitleggen:
    * `rotate(frameCount / 50)` draait het vierkant iedere keer dat dit wordt uitgevoerd. `frameCount` staat voor hoeveel frames P5 heeft laten zien sinds het script begon. Deze regel bepaalt dus hoe snel het vierkant draait.
    * tenslotte tekent `rect(-26, -26, 52, 52)` het vierkant.  
 
-
+<br>
+<br>
 
 **Oefening 2**: vervang waarde 255 op regel 6 eens met een andere waarde tussen 0 en 256. Wat gebeurt er met een lage waarde? En wat met een hoge?  
 
+<br>
+
 **Oefening 3**: misschien vraag je je af waarom de achtergrond iedere keer opnieuw moet worden getekend? Door `//` voor de regel te zetten, maak je er commentaar van en wordt het niet meer uitgevoerd. Zet `//` voor regel 6. Wat gebeurt er?  
 
+<br>
+
 **Oefening 4**: regel 8 zorgt ervoor dat het vierkant draait. Verander waarde 50 eens door 10. Wat gebeurt er? En bij een waarde van 100?  
 
+<br>
+
 **Oefening 5**: regel 9 tekent het vierkant. De eerste twee getallen -26 verschuiven het draaipunt van het vierkant horizontaal en verticaal. De twee laatste bepalen de hoogte en breedte. Vervang de getallen 52 eens door 75. Wat gebeurt er? En als je één van de twee 52 laat en de ander verandert naar 75?  
 
 <br>
 <br>
+
 ## Cirkels en muis
 
 In dit hoofdstuk gaan we kunst maken met je muis. Beweeg je muis maar eens over het grijze vlak hieronder. 😉
 <div class="p5js_voorbeeld" id="voorbeeld2"></div>  
 
 <br>
-<br>
-Stap voor stap gaan we dit nabouwen.  
+
+Die animatie gaan we nu stap voor stap nabouwen.
 <br>
 <br>
+
 ### Tekenvlak
 
 Ga weer naar <a href="p5.js-widget/p5-widget.html" target="_blank">de editor</a>.
 
-We beginnen met het vlak waarin we de cirkels gaan tekenen:
+We beginnen met het vlak waarin we de cirkels gaan tekenen.
+
+**Oefening 6**: maak de editor leeg en zet onderstaande code erin. Voer het programma uit. Je hebt nu een grijs vlak.  
 
 {{< highlight javascript "linenos=table,hl_lines=2-3,linenostart=1" >}}
 function setup() {
@@ -156,7 +169,6 @@ function draw() {
 }
 {{< /highlight >}}  
 
-**Oefening 6**: haal alle code daar weg en zet onderstaande code ervoor in de plaats. Voer het programma uit. Je hebt nu een grijs vlak.  
 <br>
 <br>
 
@@ -175,9 +187,11 @@ function draw() {
 }
 {{< /highlight >}}
 
-**Oefening 7**: neem regel 7 over in je code en voer het programma uit. Er verschijnt nu een witte cirkel in het grijze  vlak. Wat gebeurt er als je de getallen 300 en 200 veranderd? En als je de getallen 60 veranderd?  
+**Oefening 7**: neem regel 7 over in je code en voer het programma uit. Er verschijnt nu een witte cirkel in het grijze  vlak. Wat gebeurt er als je de getallen 300 en 200 verandert? En als je de getallen 60 verandert?  
+
 <br>
 <br>
+
 ### De cirkel bewegen met de muis
 
 Om de cirkel te bewegen met de muis, moet je er voor zorgen dat de cirkel de positie van de muis volgt:
@@ -192,11 +206,15 @@ function draw() {
     ellipse(mouseX, mouseY, 60, 60);
 }
 {{< /highlight >}}
+
 <br>
 <br>
+
 **Oefening 8**: vervang de getallen 300 en 200 in regel 7 met `mouseX` en `mouseY`. Deze twee variabelen bevatten de horizontale positie (`mouseX`) en verticale positie (`mouseY`) van de muis. Voor je programma uit. Beweegt de cirkel mee?
+
 <br>
 <br>
+
 ### Een kleurtje voor de cirkel
 
 Het voorbeeld heeft een gekleurde cirkel. Laten we eens een kleurtje toevoegen:
@@ -212,22 +230,28 @@ function draw() {
     ellipse(mouseX, mouseY, 60, 60);
 }
 {{< /highlight >}}
+
 <br>
 <br>
+
 **Oefening 9**: voeg regel 7 toe aan je code. Welke kleur heeft de cirkel?
 
 Het commando `fill()` vult het figuur dat erna wordt getekend met de kleur die wordt bepaald door het commando `color()`.
 Het commando `color()` heeft 3 parameters, een voor rood, een voor groen en een voor blauw. Alle drie de kleuren kunnen
 met een getal tussen 0 en 255 worden bepaald. 0 is geen kleur en 255 is maximaal kleur. `color(0, 0, 0)` komt daarmee
 overeen met zwart en `color(255, 0, 0)`  met helder rood.
+
 <br>
 <br>
+
 **Oefening 10**: speel met de kleur van de cirkel door met de getallen 255, 128 en 0 op regel 7 te variëren.
+
 <br>
 <br>
-### De cirkel grootte afhankelijk van de snelheid
 
-Als je de snelheid van de muis berekent, kun je die gebruiken om de grootte van de cirkel ermee aan te passen:
+### Grotere of kleinere cirkel door muis te bewegen
+
+Als je de snelheid van de muis berekent, kun je de grootte van de cirkel veranderen door je muis sneller of langzamer te bewegen:
 
 {{< highlight javascript "linenos=table,hl_lines=7 9,linenostart=1" >}}
 function setup() {
@@ -246,9 +270,11 @@ function draw() {
 
 Op regel 7 wordt de snelheid van de muis berekend. Wil je daar meer over weten, lees dan door in onderstaande grijze
 vak.
+
+<br>
 <br>
-<br><br>
 <br>
+
 {{< verdieping >}}
 #### Hoe bereken je de snelheid van de muis?
 
@@ -270,9 +296,11 @@ hoe groter de snelheid.
 De code bevat een berekening voor de maat van de snelheid (niet 100% correct, maar voldoende voor dit doel). Het telt
 de horizontale verschuiving (`abs(mouseX - pmouseX`) op bij de vertikale verschuiving (`abs(mouseY - pmouseY`)).
 {{< /verdieping >}}
+
 <br>
-<br><br>
 <br>
+<br>
+
 ### De kleur afhankelijk van de snelheid
 
 Naast de grootte van de cirkel is ook de kleur in het voorbeeld afhankelijk van de snelheid van de muis.
@@ -294,26 +322,26 @@ function draw() {
 
 Met het commando `color` op regel 8 kunnen we een kleur maken. Het commando heeft 3 parameters. Het eerste bepaalt de hoeveelheid rood (R), het tweede de hoeveelheid groen (G) en het derde en laatste de hoeveelheid blauw (B). Deze RGB-waarde zorgt samen een mengsel van de drie kleuren. Daarbij zorgt `color(255, 255, 255)` voor wit (alle kleuren maximaal) en `color(0, 0, 0)` voor zwart (alle kleuren uit).  
 
-In het voorbeeld wordt voor rood de snelheid van 255 afgetrokken. Dus, hoe sneller de muis beweegt, hoe minder rood er
-in de kleur zit. Bij de middelste kleur, groen, is hoeveelheid direct afhankelijk van de snelheid. Hoe sneller, hoe meer
-groen er in de kleur zit. Tenslotte zit er bij blauw een minimum van 128 in de kleur en neemt de hoeveelheid blauw toe
-als de snelheid van de muis toeneemt.
+In het voorbeeld wordt voor rood de snelheid van 255 afgetrokken. Dus, hoe sneller de muis beweegt, hoe minder rood er in de kleur zit. Bij de middelste kleur, groen, is hoeveelheid direct afhankelijk van de snelheid. Hoe sneller, hoe meer groen er in de kleur zit. Tenslotte zit er bij blauw een minimum van 128 in de kleur en neemt de hoeveelheid blauw toe als de snelheid van de muis toeneemt.
 
 Tenslotte wordt de cirkel ingekleurd met het commando `fill(kleur)`.
 <br>
 <br>
 **Oefening 12**: wissel de berekening per kleur eens met een andere kleur. Dus bijvoorbeeld `255 - snelheid` voor groen in plaats van voor rood. Welke kleuren krijg je?
 
-
+<br>
+<br>
+<br>
 
 ## Uitdagingen!
 
 Nu kun je proberen om zelf programmeer-kunst te maken. Hieronder vind je een lijst met uitdagingen.  
 
 Hou dit <a href="https://bmoren.github.io/p5js-cheat-sheet/nl.html" target="_blank">spiekbriefje voor P5.js</a> bij de hand.  
+
 <br>
 <br>
-<br>
+
  * Maak een vierkant dat steeds opnieuw getekend wordt op de plek van je muis. Teken steeds een nieuwe achtergrond in draw() met een kleur die verandert met de muispositie.
 
  * Teken een puntje op de plek waar de muis is. Zet geen background() in draw(). Probeer het ook met andere vormen en kleuren, ook met half-doorzichtige. Kun je een tweede vorm maken die in omgekeerde richting beweegt?
@@ -354,20 +382,24 @@ Hou dit <a href="https://bmoren.github.io/p5js-cheat-sheet/nl.html" target="_bla
 
 
 Probeer ook verder te variëren met 
-   * Vormen
-   * Grootte
-   * Kleur (en doorzichtigheid)
-   * Positie
-   * Beweging (snelheid en richting)
-   * Rotatie
-   * Aantal
-   * Blijvend in beeld of niet
-   * Input van het toetsenbord
+ * Vormen
+ * Grootte
+ * Kleur (en doorzichtigheid)
+ * Positie
+ * Beweging (snelheid en richting)
+ * Rotatie
+ * Aantal
+ * Blijvend in beeld of niet
+ * Input van het toetsenbord
+
 <br>
 <br>
+
 Probeer ook tekst, image, video, webcam, muziek en geluid! Zie de voorbeelden op [p5js.org/examples/](https://p5js.org/examples/).
+
 <br>
 <br>
+
 Je kunt ook kijken naar de voorbeelden op deze sites om inspiratie op te doen:
 * [generative-gestaltung.de](http://www.generative-gestaltung.de/2/)
 * [openprocessing.org](https://openprocessing.org/discover/#/trending)
@@ -376,7 +408,7 @@ Je kunt ook kijken naar de voorbeelden op deze sites om inspiratie op te doen:
 <br>
 <br>
 <br>
-<br>
+
 ## Games met P5.js
 We hebben gezien dat we hele mooie kunst kunnen maken. Ook hebben we programma's gemaakt waar we zelf iets kunnen besturen, bijvoorbeeld met de muis. 
 Nu hebben we alle ingrediënten om ook games te gaan bouwen!
@@ -401,6 +433,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 14**
 Om het spel goed te laten verlopen, moeten we verschillende gegevens bijhouden. 
 Zo willen we bijvoorbeeld weten hoeveel levens de speler nog heeft, 
@@ -424,6 +457,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 15**
 Het is handig als de speler weet hoeveel levens hij nog heeft. Laten we dat toevoegen. 
 De tekst wordt 20 pixels van links, en 20 pixels vanaf boven getekend. 
@@ -446,6 +480,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 16**
 Laten we wat doelwitten te voorschijn toveren. 
 Onze doelwitten worden cirkels. 
@@ -484,6 +519,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 17**
 Je zult zien dat er nog niks getekend wordt. 
 Dat komt omdat we nog geen doelwitten hebben toegevoegd aan onze lijst. 
@@ -521,6 +557,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 18**
 Cool! Maar er gebeurt nog steeds niks.
 We voegen een regel toe zodat de doelwitten langzaam krimpen. 
@@ -544,6 +581,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 19**
 Als je het programma nu draait en lang genoeg wacht, dan zullen de cirkels verdwijnen. 
 Maar wacht eens: ze komen daarna weer terug?!
@@ -580,6 +618,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 20**
 In deze stap programmeren we dat we op doelwitten kunnen klikken, om deze te verwijderen.
 Dat doen we als volgt: 
@@ -606,6 +645,7 @@ function mouseClicked() {
 
 <br>
 <br>
+
 **Oefening 21**
 Wat nu? 
 De speler kan nog niet verliezen. 
@@ -637,6 +677,7 @@ function draw() {
 
 <br>
 <br>
+
 **Oefening 22**
 Als laatste: we laten de speler weten wanneer hij verloren heeft, via de volgende code:
 
@@ -677,6 +718,7 @@ function draw() {
 
 <br>
 <br>
+
 **Afronden**
 Als het goed is heb je nu een spel gemaakt. Werkt het niet? Je kan jouw code vergelijken met de uitwerking hieronder. 
 
@@ -750,7 +792,7 @@ function mouseClicked() {
 <br>
 <br>
 <br>
-<br>
+
 ## Verbeter het spel
 We hebben zojuist een spel gemaakt. Kan jij het spel verbeteren?
 Probeer de volgende ideeën toe te voegen:
@@ -764,7 +806,7 @@ Probeer de volgende ideeën toe te voegen:
 <br>
 <br>
 <br>
-<br>
+
 ## Tot slot
 
 De instructie geeft je slechts een introductie van wat er mogelijk is met de p5.js bibliotheek. Naast tekenen kun je ook met geluid werken, of met foto's en filmpjes.
@@ -786,4 +828,5 @@ Dit zijn een aantal voorbeelden die we zelf leuk vinden:
 <br>
 <br>
 <br>
+
 {{< licentie rel="http://creativecommons.org/licenses/by-nc-sa/4.0/">}}