Python/Pygame: Leermodule 1
Inleiding tot Do-It-Yourself programmeren

Een vergelijking om mee te starten... Je leert fietsen... door op het zadel te kruipen.
Je leert programmeren... door aan je computer te gaan zitten. Gaat die vergelijking op? Er is immers een verschil tussen een fiets gebruiken en een fiets maken, net zoals er een verschil is tussen elektronica gebruiken en er software voor schrijven. Maar je zal wel veel moeten oefenen, dat klopt alvast!

Misschien moeten we het meer zoeken in de vergelijking met het leren van een taal. De enige taal die je leert schrijven voor ze te lezen is... een programmeertaal. Juist ja. En dat is jammer. Want zo moet je het warme water telkens weer uitvinden. In een theoriecursus leer je dan wel de grammatica van een (programmeer-)taal, pas bij het lezen van andermans teksten krijg je appreciatie voor de mogelijkheden en de poëzie van die taal.

Dus dat gaan we hier doen: we geven jullie enkel de basisregels van de grammatica, en geven je dan teksten van verschillende moeilijkheidsgraad en stijlgehalte. Aarzel niet om de eerste stukken code gewoon over te tikken (neen, met copy-paste leer je niets, moest dat gedacht opgekomen zijn...) en uit te proberen. Wil je weten wat een bepaalde regel code doet, dan verander je er iets aan of laat je hem weg. Veel plezier op je ontdekkingstocht!

Voor wie zin heeft in meer vergelijkingen tussen taal en programmeertaal: Waarom we best praten tegen onze computer.

1. Installatie van Pygame en runnen van programma

1. Zorg dat je Visual Studio Code geïnstalleerd hebt staan, zoals voorgeschreven in het vak Informatica.
2. Maak op je computer een map aan voor het vak Ingenieursproject (als dat er al niet staat), en maak daarin een map met de naam LESSEN_PYGAME (of iets dergelijks). Gebruik geen spaties in de namen van mappen en bestanden, dat is om problemen vragen.
3. Download vbn_pygame.zip. Unzip deze map. Dat vraagt meer actie dan gewoon dubbelklikken op de map, let op! Kopieer dan alle bestanden uit deze map naar jouw map LESSEN_PYGAME.
4. Open de map LESSEN_PYGAME in VS Code (zoals beschreven bij het vak Informatica).
5. Daarna open je een Terminal window in VS Code.

   

6. Controleer eerst of het pad dat er staat, overeenkomt met het pad naar de map waar je nu in bezig bent. Als dat niet zo is, dan vraag je er even de lesgevers bij.

   

7. Tik in deze terminal nu de tekst

   pip install pygame

   en druk op enter.

   

   Op een mac typ je:

   pip3 install pygame

8. Open het bestand oef1.py, en laat het lopen. Als dat niet lukt met de groene pijl helemaal rechtsboven in het venster waar de code in staat, dan tik je onderstaande opdracht in in de Terminal:

   python oef1.py

9. Nu zal het programma lopen: er verschijnt een klein scherm, en een cirkel. Als de cirkel van het scherm verdwenen is, zal het programma blijven lopen. Sluit het programma af door Ctrl-C te klikken in de Terminal (maak deze eerst actief, door in het Terminal-venster te klikken).
10. Nu heb je al gezien wat het eindproduct is van oef1.py. Tijd om de tekst te lezen.

"pygame.event.post(pygame.QUIT) TypeError: argument must be an Event object".

1. Klik CTRL+SHIFT+P in Visual Studio
2. In het tekst-/zoekveld bovenaan tik je open sett in.

   

3. Kies "Preferences: Open Settings (JSON)" uit het lijstje.
4. In het .json-bestand dat dan opent, staat er een paar accolades met daarbinnen verschillende regels code, gescheiden door een spatie. Voeg onderaan dat lijstje (na een komma) deze code toe:
   "python.linting.pylintArgs": ["--generate-members"]
5. Bewaar de .json-file (CTRL+S)

2. Eerste programma lezen

Bekijk nu de code van oef1.py in VS Code. De grote hoeveelheid commentaar (of uitleg) die bij de code staat, is goed voor didactische doeleinden. Als je zelf code schrijft komt er ook commentaar, maar dan vooral bij de code die niet vanzelfsprekend is.

• De eerste 17 lijnen zorgen voor de correcte initialisatie van pygame - lees vooral de uitleg.
• Vanaf lijn 19 begint het eigenlijke programma.
• Lees Basisregels Python 10.a. en 10.b. Zoek in de eerste 23 lijnen de variabele(n) die gedeclareerd zijn als constante, en dus niet meer zullen gewijzigd worden in de rest van de code.

Je zag het eindresultaat van de code al. Vraag jezelf af of je de noodzaak en de werking van elke regel code begrijpt. Doe daarna volgende kleine aanpassingen, zodat de code leesbaarder wordt.

1. De kleur van het canvas en de kleur van de cirkel zijn nu gecodeerd aan de hand van getallen. Dat is moeilijk leesbaar. Declareer bovenaan in het programma, op regel 5, de constante kleuren WIT en ZWART. Lees puntjes 9.a. en 10.b. van Basisregels Python.
   Gebruik de constanten op elke plaats waar er nu een drietal getallen staat. Je mag ook meteen twee andere kleuren naar keuze definiëren, die kan je dan later gebruiken. Zoek de (R,G,B)-waarden op.
2. De cirkel wordt getekend met de functie draw.circle. Deze functie heeft 5 parameters, die het scherm, de tekenkleur, de positie (x,y), de straal en de dikte van de omtrek beschrijven. Er worden vier variabelen gebruikt die op voorhand gedeclareerd en ook geïnitialiseerd zijn (lijn 20-23).
   Er is echter maar één variabele die ook echt verandert in de code: de x-coördinaat. Doe de nodige aanpassingen zodat het direct duidelijk is dat de drie andere variabelen nergens zullen wijzigen, en dus constant blijven. Lees nog eens Basisregels Python 10.b.
3. Vanaf lijn 26 start een lus. In de lus beschrijf je de vorm(en) die moeten getekend worden. Met pygame.display.update() wordt het scherm volledig hertekend.
4. Op lijn 41 bepaal je de snelheid waarmee de cirkel opschuift.
5. Laat de cirkel drie keer zo snel opschuiven zonder de snelheid van de klok aan te passen.
6. Verander de code nu zo dat de cirkel van rechts naar links beweegt.

3. Vragen staat vrij?

Vragen staat niet vrij.
Vragen is een must.

• jezelf

  "Heb ik het goed begrepen dat..."

  een studiegenoot

  "Ik heb dat zo opgelost. Hoe deed jij dat?"

  het internet

  "how to shrink image in pygame"

  de begeleiders

  "Ik heb deze werkwijze geprobeerd. Het beoogde effect (nl...) blijft uit, en ik vermoed dat het hieraan ligt... Klopt dat?"

Als toegift, eentje om even bij stil te staan...
Why do kids ask so many questions - but more importantly why do they stop?

4. Tweede programma lezen en aanpassen

1. Enkele regels code hebben nu geen commentaar meer. Weet je nog wat deze regels code doen?
2. Bekijk de lus op regel 23. De variabele done kan gebruikt worden om de lus te stoppen (zie verder).
3. Kijk nu naar de regels 39-42. Uit de benamingen van de functies (draw.rect, draw.line, draw.ellipse) kan je al afleiden dat er bepaalde gekende figuren zullen getekend (draw) worden.
   Om de positie en de afmetingen van de figuren te begrijpen, moet je de betekenis van de parameters opzoeken. Gebruik de zoekwoorden pygame draw rect en haal uit de resultatenlijst de sites die pygame in hun naam dragen. Dan kom je bijvoorbeeld uit op de site pygame.org/docs. Ga daar zoeken naar de betekenis van alle parameters. Kan je voorspellen waar de drie figuren getekend zullen worden?

   Een tip: de Y-as van het assenkruis in een tweedimensionaal vlak wijst in de wiskundelessen naar boven. In de informaticalessen wijst die as naar beneden. De oorsprong van het vlak zit helemaal linksboven. Alle x- en y-coördinaten van het (zichtbare) tekenvlak zijn positief.

4. Wat doen onderstaande regels code?

   d += 5
   d = min(d, 300)

   Als je het niet weet, dan zet je die regels even in commentaar, en kijk je wat er daardoor wijzigt aan de loop van het programma.

   Als je meer wil weten over de betekenis van += dan gebruik je de zoekwoorden meaning of += in python. Als je dan op een website komt die niet onmiddellijk het antwoord lijkt te geven, zoek je op die website met de sneltoetsen Ctrl-F naar +=.

5. Kijk nu naar de lijnen 32-35. De functie-oproep pygame.event.get() geeft een lijstje van alle events. We zoeken dit verder uit.
   Gebruik de zoekterm pygame event of zoek direct op de site pygame.org/docs naar de module event. Daar vind je een overzicht van alle methodes uit de module event. Als tweede in de lijst vind je de methode die gebruikt wordt op lijn 32:

   

   Klik nog niet door op pygame.event.get maar scroll eerst verder naar beneden en je vindt de constanten die gebruikt worden voor events, o.a. QUIT.

   

   Die constante is gebruikt op lijn 33.
   Als je het programma uitvoert kan je dit event uitlokken door op het kruisje te klikken van het kader. De oneindige lus zal dan stoppen omdat de variabele done wordt aangepast.
6. We gaan nog wat dieper in op events. Bekijk nu de uitleg voor de functie pygame.event.get; klik nu dus wel door op pygame.event.get, dan kom je halverwege een webpagina terecht waar deze tekst te lezen is:

   

   Merk op: de site pygame.org toon bovenaan allicht een zwarte banner (pygame 4000 book update). Die verstopt soms de hoofding van de tekst waar je naartoe gestuurd werd bij het klikken op een link. Sleep de webpagina dus een beetje naar beneden, zodat je ook de hoofding pygame.event.get() ziet staan. Veel van deze uitleg zal je nog niet verstaan. Dat is niet erg, dat komt met tijd en boterhammen. Deze tip: een queue is een wachtrij, net zoals aan de kassa. Wie als eerste in de wachtrij plaatsneemt, wordt er nadien ook eerst weer afgehaald.

   Keer nu terug naar het overzicht; scroll naar beneden en scan alle andere methodes. Met welke methode kan je een nieuwe event op de wachtrij zetten (place a new event on the queue)? Onthoud deze methode voor (veel) later.

7. Je hebt daarnet gezien dat het programma de figuren telkens groter afbeeldt. Dat stopt van zodra de variabele d een bepaalde waarde aanneemt. Welke waarde dient als bovengrens/stopgetal?
8. Vervang nu de code

   d = min(d, 300)

   In plaats van deze regel code willen we dat het programma stopt als d te groot is. In pseudocode moet er dus komen:

   als d te groot is:
       stop het programma

   Zet deze pseudocode om in echte Python-code, en laat het programma lopen. Stopt het programma vanzelf als d de bovengrens bereikt heeft?

Tips: Als er tik- of syntaxfouten ontdekt worden, zal dat aangegeven worden in de Terminal. Hieronder enkele mogelijke foutmeldingen. Wees dankbaar voor elke foutmelding die je krijgt: het is jouw persoonlijke coach op de weg naar het meesterschap.

	op de plaats die aangeduid wordt met het ^-teken (dus na 100) staat er een syntaxfout (ben je een dubbele punt vergeten na een if of while?)
	op de plaats die aangeduid wordt met het ^-teken (dus in de regel code die hier niet zichtbaar is) wordt er verwacht dat de code meer naar rechts inspringt (ben je dat vergeten na de dubbele punt van een if of while?)

5. Nu zelf aan de slag

Nu ben je klaar om andere bronnen te raadplegen. Je hebt een eerste programma zelf ingetikt en laten lopen, dus je hebt genoeg tools om uitspraken van het wereldwijde web te toetsen op hun waarheidsgehalte. Je kan nu ook zelf je eerste PyGame schrijven.

Opdracht

• Raadpleeg de tutorial en werk je erdoor tot net voor de paragraaf Game Creation - Part 1. Je zal zien dat er een flink stuk herhaling in zit. Maar sommige zaken krijgen ook wat meer uitleg, en dat helpt voor het bredere begrip.
• Maak op een kladpapier een heel eenvoudige (gekleurde) tekening, bestaande uit minimaal drie verschillende soorten figuren (rechthoeken, driehoeken, vijfhoeken, ovalen, cirkels, lijnen,...). Inspireer je op kindertekeningen: een huisje, boom, bloem, ballon, regenboog, kopvoetertje,... Schrijf dan een nieuw Python-programma waarmee je deze tekening namaakt.
• Laat minstens één van die vormen bewegen of groeien.
• Voorzie dat het programma automatisch stopt in een bepaalde situatie.

Je eigen programma zal je volgende week moeten indienen tijdens het labo.