FabLab Oldenzaal Wiki

Deze week gaan we verder met een aantal nieuwe concepten. Je kunt na deze week eenvoudig iets doen met de muis en het toetsenbord en je weet wat variabelen zijn en kunt condities gebruiken.

Sheets van week 2

- https://www.youtube.com/watch?v=4JzDttgdILQ. Kijk in de inhoudsopgave naar de juiste stukken.

- https://processing.org/tutorials/gettingstarted. De eerste stappen in geschreven vorm.

- https://processing.org/reference/text_.html. Hier staat hoe je tekst op het scherm kunt schrijven.

- https://processing.org/reference/#image. Hier vind je uitleg over het inladen van een plaatje.

We gaan een programma maken waarmee je heel eenvoudig kunt tekenen. Dat doen we om te beginnen door in de draw() methode elke keer een cirkel te tekenen op de muispositie (zie voorbeeldcode hieronder).

Pas het programma nu zo aan dat je na een keer klikken met de muis begint met tekenen en als je dan weer opnieuw klikt dat hij weer stopt met tekenen. Als je dan weer klikt begint hij weer, etc.

Tip: Gebruik een variable van het type boolean waarin je opslaat of je aan het tekenen bent of niet.

Iedereen is dol op Pinguins! En vooral op hun loopje! Daarom gaan we beginnen met een lopende pinguin. We noemen 'm Chilly. In de sheets van deze week heb je al gezien hoe je eenvoudig een furby heen en weer kan laten lopen. Onze pinguin kan straks vier kanten op lopen.

1. Download het plaatje voor de achtergrond van het spel hier: background.png
2. Download de plaatjes van de pinguin en zet die in de map data van je project. Download ze hier: penguinimages.zip. Je hebt nu vier plaatjes: penguin-left, penguin-right, penguin-up, penguin-down.
3. Begin met het maken van een programma dat 'penguin-left' elke keer tekent in de draw methode (vergeet niet de achtergrond telkens leeg te maken).
4. Voeg nu een int variabele toe voor de X coordinaat van de penguin. Zorg dat deze wordt aangepast als je de letters A (pinguin beweegt naar links) of D (pinguin beweegt naar rechts) indrukt. Dit kun je overnemen uit het voorbeeld uit de slides.
5. Voeg nu toe dat de pinguin ook omhoog en omlaag kan lopen met de toetsen W en S.
6. We willen nu dat de pinguin goed om staat in de richting waarin hij loopt. Als je omhoog loopt wil je dus penguin-up tekenen, als je naar links loopt penguin-left, etc. Het handigst is waarschijnlijk om in een String variabele de richting bij te houden, die aan te passen als je op W,S,A,D drukt en op basis van de tekst in die string het juiste plaatje te laden.

Je hebt nu een basis voor een spelletje. Als je het makkelijk vond kun je nog wat speciale dingen toevoegen:

Pinguins lopen meestal op ijs en ijs is glad. Om dat te simuleren kun je je code aanpassen door het volgende te doen:

1. Maak twee variabelen: float speedx en float speedy. Hierin houd je de snelheid van de penguin in de X en Y richting bij.
2. Tel in de draw() methode elke keer de speedx bij de X coordinaat op en speedy bij de Y coordinaat. Zo zorg je ervoor dat Chilly elke keer als er getekend wordt met de snelheid van speedx (of speedy) verplaatst.
3. Het enige wat je nu nog moet doen is zorgen dat je niet de X en Y coördinaat aanpast als je W,S,A,D indrukt, maar de speedx of speedy coordinaat. Speel een beetje met wat de juiste waardes zijn.

Het kan zijn dat Chilly nu heel erg snel rondglijd. Maak eventueel een 'noodstop' door te zorgen dat als je op een bepaalde toets drukt dat dan beide snelheden teruggezet worden op 0.

Zorg ervoor dat de waardes van de X en de Y coordinaat van Chilly nooit onder 0 kunnen komen of boven de breedte en/of hoogte van het scherm.

Je kent waarschijnlijk het spelletje boter,kaas en eieren wel. Deze week kun je dat zelf maken, maar het is wel een uitdaging. Een paar tips:

• Maak 9 variabelen van het type String, voor elk vakje 1. Zet in die variabele welk symbool er getoond moeten worden (X, O of niks, daarvoor kun je een lege string gebruiken).
• Teken de 4 lijnen, zodat je 9 vakken krijgt.
• Teken op basis van de inhoud van de 9 variabelen een kruisje, nulletje of niets op de juiste plek.
• Detecteer een muisklik en bepaal in welk vak die zit. Pas op dat moment de variabele bijbehorend bij dat vak aan aan een kruisje of een nulletje.
• Zorg dat er om en om een kruisje of een nulletje geplaatst wordt. Hiervoor heb je een variabele nodig die bijhoud of er een X of O geplaatst moet worden.