1.2 Je eerste cirkel
Om eenvoudig games te maken in Python, gebruiken we de 'play'-bibliotheek. Deze bibliotheek is een vereenvoudigde laag bovenop 'pygame-ce', waardoor je snel aan de slag kunt zonder je zorgen te maken over de complexere details van 'pygame-ce'.
Tijd om iets op het scherm te tekenen. Bekijk de code hieronder.
Wat denk je dat er gebeurt als je deze code uitvoert?
Klik hier om het antwoord te zien
Als het goed is, zie je een grote zwarte cirkel midden op je scherm. Klik op de ▶ knop hierboven om dit te controleren.
Merk op dat we nergens hebben aangegeven:
- welke kleur de cirkel moet hebben
- hoe groot deze is
- ....
Dat is toch wel gek. Het programma heeft stiekem voor ons al een paar zaken gekozen. Het is toch wel fijn als we het zelf kunnen veranderen.
1.2.1 De kleur aanpassen
We kunnen de kleur aanpassen met het attribuut color. Om bijvoorbeeld de cirkel blauw te maken, kun je het volgende doen.
Ben je benieuwd uit welke kleuren je allemaal kan kiezen? Op deze pagina zie je alle opties.
Je kunt kleuren op verschillende manieren opgeven:
- Kleurnaam:
'red','blue','yellow', etc. - Variaties:
'light blue','light-blue'en'lightblue'werken allemaal. - RGB-waarde:
(255, 0, 0)voor rood,(0, 255, 0)voor groen,(0, 0, 255)voor blauw. Op deze site kun je een kleur kiezen en de RGB-waarde aflezen. - Hex-code (sinds versie 3.3.3):
'#FF0000'voor rood,'#00FF00'voor groen,'#0000FF'voor blauw. Op dezelfde kleurkiezer-site kun je naast de RGB-waarde ook de hex-code aflezen.
Opdracht 1.2.1.a De kleur aanpassen
a) Schrijf een programma waarbij de kleur van de cirkel rood is. Pas de code hieronder aan en voer het uit.
Klik hier voor een tip.
Het attribuut color gebruik je voor de kleur.
Klik hier voor een oplossing.
b) pas het programma aan met een kleur die je gekozen hebt uit de lijst van alle kleuren.
Klik hier voor een tip.
De lijst van opties vind je op deze pagina.
Klik hier voor een oplossing.
c) Hieronder zie je code met een rode cirkel. Pas de kleur aan naar een hex-code naar keuze. Kies bijvoorbeeld een kleur via de kleurkiezer en lees daar de hex-code af.
Klik hier voor een tip.
Een hex-code begint altijd met # gevolgd door 6 tekens (cijfers 0-9 of letters A-F). Vergeet niet om de hex-code tussen aanhalingstekens te zetten, bijvoorbeeld color='#FF8800'.
Klik hier voor een oplossing.
1.2.2 De positie aanpassen
Je kunt de cirkel ook op een andere plek zetten. Hiervoor gebruik je de x (horizontaal) en y (verticaal) attributen.
Het coördinatensysteem
In play werkt het coördinatensysteem als volgt:
- Het midden van het scherm is x=0 en y=0.
- x wordt groter naar rechts en kleiner (negatief) naar links.
- y wordt groter naar boven en kleiner (negatief) naar beneden.
Dit is hetzelfde als het wiskundige assenstelsel dat je kent uit de wiskundeles.
y = 300 (bovenkant)
▲
|
x = -400 ◄─┼─► x = 400
|
▼
y = -300 (onderkant)
Let op: dit is anders dan bij standaard pygame-ce, waar de y-as juist omlaag loopt. In play gaat y omhoog, net zoals in de wiskunde.
Zie je de cirkel in het midden staan?
Opdracht 1.2.2.a: de positie aanpassen
Waar zie je de cirkel verschijnen bij:
a) x=100 en y=0
Klik hier voor het antwoord
De cirkel zou een klein stukje rechts van het midden moeten staan.
b) x=-100 en y=0
Klik hier voor het antwoord
De cirkel zou een klein stukje links van het midden moeten staan.
c) x=0 en y=100
Klik hier voor het antwoord
De cirkel zou een klein stukje boven het midden moeten staan.
d) x=0 en y=-100
Klik hier voor het antwoord
De cirkel zou een klein stukje onder het midden moeten staan.
1.2.3 Wat kan ik aanpassen aan een cirkel?
Hieronder volgt een lijst van attributen voor een cirkel:
- color: Kleur, staat standaard op 'black'. Op deze pagina zie je welke kleuropties er zijn.
- x: x-positie, staat standaard op 0 (het midden). Kleiner dan 0 is naar links, groter dan 0 is naar rechts.
- y: y-positie, staat standaard op 0 (het midden). Kleiner dan 0 is naar beneden, groter dan 0 is naar boven.
- radius: straal, staat standaard op 100. Hoe groter de waarde, hoe groter de cirkel.
- border_color: kleur van de rand, staat standaard op 'light blue'. Let op, als de border_width 0 is, zie je de rand niet.
- border_width: de breedte van de rand. Staat standaard op 0 (geen rand zichtbaar)
- transparency: doorzichtigheid, 0 is onzichtbaar. 100 is volledig zichtbaar.
- angle: de hoek van de cirkel in graden. Staat standaard op 0.
- size: de schaal van de cirkel als percentage. Staat standaard op 100.
Opdracht 1.2.3.a De mooiste cirkel
a) Teken twee cirkels die elkaar niet mogen raken. De eerste cirkel is blauw en heeft geen rand. De tweede is rood en heeft een dunne groene rand.
Vanaf nu is het heel handig om te kijken in de Cheatsheet. Als je in de cheatsheet klikt op Cirkel (play.new_circle), dan zie je wat je kunt veranderen aan een cirkel.
Klik hier voor een tip.
Twee cirkels betekent ook twee keer play.new_circle. Kijk verder goed naar welke attributen je nodig hebt.
Klik hier voor een oplossing.
1.2.4 De achtergrondkleur aanpassen
Standaard is de achtergrond van je scherm wit. Met play.set_backdrop kun je dit veranderen:
Opdracht 1.2.4.a: Achtergrondkleur
Maak een programma met een donkere achtergrond en een lichtgekleurde cirkel.
Klik hier voor een tip.
Probeer eens 'black' als achtergrondkleur en 'yellow' als cirkelkleur.