Vandaag gaan we leren programmeren met TinyTurtle. TinyTurtle is een schildpadje wat we kunnen besturen, daarvoor heeft de schildpad een aantal commando's:
forward( stapjes )
laat de schildpad lopen forward(100)
voor 100 stapjes, forward(50)
voor 50.
right( hoek )
laat de schildpad een bocht naar rechts maken.
0 = rechtdoor, 90 = naar rechts, 180 is omkeren, enzovoort.
Kan je de code hieronder aanpassen zodat de schildpad een vierkantje loopt van 100 bij 100 stapjes?
Maak het plaatje hiernaast na. Je kunt ook het commando left( hoek )
te gebruiken om linksaf te slaan.
En deze?
Hierboven maakten we tekeningen met een vast formaat. Stel dat we makkeijk de grootte van een vierkant willen kunnen aanpassen, bijvoorbeeld een vierkant van 50 bij 50 stapjes. Dan kunnen we natuurlijk vier keer de 100 in een 50 veranderen, maar dat wordt snel vervelend. We hebben dan iets nodig in plaats van het getal, wat we makkelijk kunnen aanpassen zonder telkens elke plek langs te gaan. Zoiets noemen we een variabele. Je kunt een variabele zien als bakje met een naam waar je iets in kunt bewaren, bijvoorbeeld het getal 50. Overal waar je dan de naam van de variabele gebruikt, wordt door de computer de waarde 50 ingevuld.
Kun je hieronder met de variabele stapjes
de schildpad een vierkant laten tekenen?
Verandert het vierkant van vorm als je de waarde van stapjes
aanpast?
Kun je ook drie vierkanten tekenen (50, 75 en 100 stapjes)?
Verder oefenen? Probeer een van de volgende plaatjes na te maken.
Nu kunnen we makkelijk de grootte van het vierkant aanpassen, maar er staat nog steeds een hoop herhaling. Mensen zijn niet zo goed in dingen veel herhalen: je maakt snel een foutje. Computers kunnen dat wel heel goed.
Je kunt een verzameling commando's herhalen door ze in een soort receptje te stoppen. Zo'n recept lijkt zelf ook weer op een commando, en noemen we een functie.
Hieronder staat function vierkant (stapjes) { «commandos» }
, wat betekent:
- een functie/commando met de naam vierkant
- het commando krijgt 1 variabele mee met de naam stapjes
- «commandos»
wordt uitgevoerd als we het commando uitvoeren.
Kun je het zo aanpassen dat er twee vierkanten (50, 100 stapjes) worden getekend?
Alle vierkanten van eerder zijn een beetje saai geworden, kunnen we ook driehoeken maken?
Je hebt hierboven gezien dat je meerdere commando's achter elkaar kunt geven, maar wat als je niet precies weet hoe vaak je iets wilt herhalen?
Of je wilt iets bijvoorbeeld 100 keer herhalen, dat is wel erg veel type-werk.
Gelukkig is daar iets op bedacht, namelijk een loop. Daarmee kunnen we een setje commando's meerdere keren uitvoeren.
In het voorbeeld hieronder staat de code for (var i = 0; i < 3; i++) { «commandos» }
, wat betekent:
- Geef variabele i
de waarde 0
.
- Tel door tot i
niet meer kleiner dan 3 is.
- Tel elke keer 1 op bij i
Dus eerst is i=0
(wat kleiner is dan 3), dus worden de «commandos»
uitgevoerd.
Dan tellen we 1 op bij i, dus is i=1
(wat kleiner is dan 3), dus worden de «commandos»
uitgevoerd.
Dan tellen we 1 op bij i, dus is i=2
(wat kleiner is dan 3), dus worden de «commandos»
uitgevoerd.
Dan tellen we 1 op bij i, dus is i=3
(wat niet kleiner is dan 3), dus stoppen we.
Kun je na de 3- en 4-hoek ook een 5, 6, en 7-hoek maken? En een 12-hoek?
Als je de hoeken van een rechthoek bij elkaar optelt krijg je 90 + 90 + 90 + 90 = 360. De hoeken van een driehoek bij elkaar opgeteld: 120 + 120 + 120 = 360. Wat denk je dat de hoek van een vijfhoek is?
Ok, nu hebben we een vijfhoek. Maar de 6-, 7- en 12-hoek dan? Kan je het voorbeeld hieronder zo aanpassen dat er niet twee vijfhoeken staan, maar een 5- en een 12-hoek.
De 12-hoek hierboven lijkt al een beetje op een cirkel. Hoeveel hoeken moet je de veelhoek geven tot je geen verschil meer ziet met een cirkel?
Kun je dit voorbeeld na maken?
Kan je deze ongeveer namaken, zodat hij er elke keer anders uitziet?
De functie Math.random()
is een soort dobbelsteen:
hij levert elke keer een nieuw willekeurig getal tussen 0 en 1.
bijvoorbeeld 0.23, 0.46 of 0.91
Maak voor deze opdracht eerst een functie die een cirkel tekent.
Met het commando penUp()
tekent de schildpad even niet, met penDown()
tekent de schildpad weer verder.
Een Koch-sneeuwvlok is gemaakt van 3 Koch-krommen. Hier is de functie voor het maken van een koch-kromme gegeven, kan jij de sneeuwvlok na maken?
Dit is een leuke om mee te spelen: deze boom wordt gemaakt door de schildpad.
Als je het leuk vindt kun je de broncode van de schildpad bekijken: tiny-turtle.js.