WEBVTT

00:00:00.960 --> 00:00:03.029
Laten we kijken wat we nog meer kunnen tekenen

00:00:03.029 --> 00:00:05.270
Wat kunnen we maken behalve rechthoeken?

00:00:05.270 --> 00:00:07.716
We kunnen ovalen maken met het woord ellipse,

00:00:07.716 --> 00:00:09.966
wat ook een commando is wat de computer kent.

00:00:09.966 --> 00:00:12.775
We hebben zelfs een speciaal woord voor commando's

00:00:12.775 --> 00:00:14.751
We noemen ze vanaf nu functies

00:00:14.751 --> 00:00:17.780
Ik zal het woord functie vanaf nu gebruiken als ik commando bedoel

00:00:17.780 --> 00:00:20.646
Laten we functienaam ellipse opschrijven,

00:00:20.646 --> 00:00:22.630
en dan () en een ;

00:00:22.630 --> 00:00:24.005
Het werkt niet!

00:00:24.005 --> 00:00:25.125
We krijgen een foutboodschap

00:00:25.125 --> 00:00:26.205
die praat over parameters,

00:00:26.205 --> 00:00:27.367
wat dat ook mogen zijn.

00:00:27.367 --> 00:00:29.011
Kan je zien wat we missen,

00:00:29.011 --> 00:00:30.895
door te vergelijken met wat we bij rect gedaan hebben?

00:00:30.895 --> 00:00:33.291
Toen we alleen maar ellipse typten, gaven we geen nummers,

00:00:33.291 --> 00:00:35.030
zoals we deden bij de rechthoek.

00:00:35.030 --> 00:00:37.440
Deze nummers heten parameters.

00:00:37.440 --> 00:00:40.500
We zeggen dat we de parameters meegeven aan de functie,

00:00:40.500 --> 00:00:45.120
en zij controleren hoe de functie zich gedraagt.

00:00:45.120 --> 00:00:46.293
Zonder de parameters,

00:00:46.293 --> 00:00:48.716
weet het programma niet waar je de ellipse wilt,

00:00:48.716 --> 00:00:50.221
of hoe groot hij moet zijn.

00:00:50.221 --> 00:00:52.530
Nou begrijpen we de foutboodschap al een beetje beter.

00:00:52.530 --> 00:00:54.717
Late we doorgaan en weer 4 parameters meegeven,

00:00:54.717 --> 00:00:58.505
om te besturen hoe ver naar rechts, hoe ver naar beneden, hoe breed,

00:00:58.505 --> 00:01:00.763
en hoe lang we de ellipse willen hebben.

00:01:00.763 --> 00:01:03.771
Net als eerder, kunnen we wat lol maken en de ellipse heen en weer bewegen,

00:01:03.771 --> 00:01:07.225
en we kunnen het zelfs laten groeien en krimpen.

00:01:07.225 --> 00:01:09.437
Nu we de basis gezien hebben,

00:01:09.437 --> 00:01:11.269
laten we proberen een grote ellipse te tekenen

00:01:11.269 --> 00:01:13.752
precies in het midden van het canvas.

00:01:13.752 --> 00:01:15.934
De eerste vraag die je misschien hebt is,

00:01:15.934 --> 00:01:17.626
waar was het midden ook al weer?

00:01:17.626 --> 00:01:19.527
Om je te helpen herinnneren,

00:01:19.527 --> 00:01:21.418
we hebben bovenaan links, 0,

00:01:21.418 --> 00:01:23.382
and rechts is, als je het hebt onthouden, 400,

00:01:23.382 --> 00:01:25.646
en beneden is ook 400.

00:01:25.646 --> 00:01:27.761
Dus als we denken: "waar zou het midden zijn?"

00:01:27.761 --> 00:01:29.170
Zouden we antwoorden,

00:01:29.170 --> 00:01:31.429
"het zou halfweg van 400 moeten liggen, dus bij 200."

00:01:31.429 --> 00:01:34.049
Dan halfweg van 400 naar beneden, dus 200

00:01:34.049 --> 00:01:35.314
We kunnen dat proberen.

00:01:35.314 --> 00:01:36.746
Laten we de ellipse functie maken,

00:01:36.746 --> 00:01:38.914
we geven de parameters mee

00:01:38.914 --> 00:01:41.082
en maken het lekker groot.

00:01:41.082 --> 00:01:43.250
Zo!

00:01:43.260 --> 00:01:46.252
Alleen voor de lol, laten we ook een rechthoek toevoegen.

00:01:46.252 --> 00:01:48.503
We zeggen rect(200,200)

00:01:48.503 --> 00:01:50.003
net als bij de ellipse en maken

00:01:50.003 --> 00:01:51.503
de rechthoek een beetje kleiner. 100, 100);

00:01:51.503 --> 00:01:53.005
Hm, dit is interessant.

00:01:53.005 --> 00:01:55.323
Wat toont ons dit kleine experiment?

00:01:55.323 --> 00:01:58.000
Juist, we kunnen zien dat het 200,200 punt

00:01:58.000 --> 00:02:01.767
hier aangeeft waar het midden van de ellipse komt.

00:02:01.767 --> 00:02:03.271
Maar voor rechthoeken is dat anders,

00:02:03.275 --> 00:02:05.951
omdat voor rechthoeken de 200, 200 aangeeft

00:02:05.951 --> 00:02:09.139
waar de linker bovenhoek van de rechthoek komt.

00:02:09.139 --> 00:02:11.677
Dat is echt belangrijkt te onthouden

00:02:11.677 --> 00:02:14.365
als we proberen onze figuren te positioneren.

00:02:14.365 --> 00:02:17.005
Laten we nu overgaan naar eenvoudige lijnen.

00:02:17.005 --> 00:02:19.498
Die functienaam is "line"

00:02:19.498 --> 00:02:21.773
We kunnen weer 4 parameters meegeven,

00:02:21.773 --> 00:02:23.590
maar een lijn heeft toch

00:02:23.590 --> 00:02:25.407
niet dezelfde grootte als een rechthoek, toch?

00:02:25.407 --> 00:02:27.745
Dus wat gaan deze nummers besturen?

00:02:27.745 --> 00:02:29.719
De eerste en de tweede parameter

00:02:29.719 --> 00:02:31.407
vertellen, net als eerder,

00:02:31.407 --> 00:02:33.745
hoe ver naar rechts en naar beneden

00:02:33.745 --> 00:02:35.153
het startpunt van de lijn ligt.

00:02:35.153 --> 00:02:37.171
Terwijl de twee andere parameters

00:02:37.171 --> 00:02:40.257
, oh sorry, de tweede set van parameters, de 90 en de 200

00:02:40.257 --> 00:02:44.533
aangeven waar de lijn eindigt.

00:02:44.533 --> 00:02:48.242
Nu we begrijpen hoe het werkt,

00:02:48.242 --> 00:02:52.718
laten we kijken naar iets wat eerst raar zal lijken.

00:02:52.718 --> 00:02:56.757
Wat gebeurt als de rechthoek linksboven start,

00:02:56.757 --> 00:03:00.673
en opnieuw aangeef waar de linker bovenhoek van de rechthoek moet komen?

00:03:00.673 --> 00:03:04.021
En dan echt groot.

00:03:04.021 --> 00:03:07.787
We kunnen het zelfs zo groot maken, maar dat is een beetje te.

00:03:07.787 --> 00:03:11.610
We zien dat het langzamerhand de ellipse laat verdwijnen

00:03:11.610 --> 00:03:14.710
We kunnen het zelfs helemaal laten verdwijnen

00:03:14.710 --> 00:03:17.423
Nou vragen we ons af waar hij is gebleven.

00:03:17.423 --> 00:03:19.509
Wat het programma doet is,

00:03:19.509 --> 00:03:21.895
figuren tekenen in volgorde van opdracht.

00:03:21.895 --> 00:03:23.280
Eerst tekent het de ellipse,

00:03:23.280 --> 00:03:24.965
dan tekent het de rechthoek er overheen,

00:03:24.965 --> 00:03:26.502
en dan tekent het de lijn.

00:03:26.502 --> 00:03:27.834
Dus de ellipse is er nog steeds.

00:03:27.834 --> 00:03:30.160
Het ligt alleen onder de andere figuur.

00:03:30.160 --> 00:03:32.500
Dit is belangrijk om te onthouden

00:03:32.500 --> 00:03:34.506
want wat zou er gebeuren als

00:03:34.506 --> 00:03:36.512
we onze lijn eerst zouden tekenen?

00:03:36.512 --> 00:03:38.520
We zouden de lijn helemaal niet zien, toch?

00:03:38.520 --> 00:03:40.687
Je zou dat in jouw programma kunnen doen

00:03:40.687 --> 00:03:42.027
en denken, "hey, waar is mijn lijn gebleven?"

00:03:42.027 --> 00:03:44.088
Het idee is dat de lijn er nog steeds is,

00:03:44.088 --> 00:03:45.199
hij is alleen verstopt,

00:03:45.199 --> 00:03:49.290
zowel achter de ellipse als achter de rechthoek.

00:03:49.290 --> 00:03:53.501
We bepalen welke figuren worden getekend boven andere figuren

00:03:53.501 --> 00:03:55.174
door de volgorde te veranderen

00:03:55.174 --> 00:03:56.847
waarin we ze opschrijven in ons programma.

00:03:58.521 --> 00:04:01.031
Nu wil ik alleen maar een paar technische termen introduceren

00:04:01.031 --> 00:04:02.970
voordat we eindigen.

00:04:02.970 --> 00:04:04.782
Net zoals je misschien met rekenen geleerd hebt,

00:04:04.782 --> 00:04:07.494
kunnen we een letter X gebruiken die aangeeft hoe ver naar rechts

00:04:07.494 --> 00:04:09.216
net zoals we er over gesproken hebben,

00:04:09.216 --> 00:04:11.528
en de letter Y die aangeeft hoe ver naar beneden.

00:04:11.528 --> 00:04:14.001
Dat lijkt misschien een beetje raar als je er niet aan gewend bent,

00:04:14.001 --> 00:04:15.515
maar het is eenvoudiger dan te moeten zeggen

00:04:15.515 --> 00:04:17.579
"hoe ver naar rechts en hoe ver naar beneden"

00:04:17.579 --> 00:04:19.173
iedere keer dat je dat wilt zeggen.

00:04:19.173 --> 00:04:22.216
De eerste 2 parameters van onze ellips bijvoorbeeld,

00:04:22.216 --> 00:04:27.678
vertellen dat x 200 moet zijn en y 229.

00:04:27.678 --> 00:04:30.250
Daar zie je het.

00:04:30.250 --> 00:04:33.522
Het zegt precies hetzelfde als "200 naar rechts en 229 naar beneden".

00:04:33.522 --> 00:04:36.674
Een tweede echt goede vraag die je mogelijk hebt is,

00:04:36.674 --> 00:04:38.904
"Welke eenheden hebben we gebruikt?

00:04:38.904 --> 00:04:42.763
Bedoelen we 200 centimeters, inches, mile?"

00:04:42.763 --> 00:04:45.260
We gebruiken de eenheid die 'pixel' wordt genoemd

00:04:45.260 --> 00:04:48.487
en een pixel is een kleine punt op jouw scherm.

00:04:48.487 --> 00:04:52.627
Dit canvas is eigenlijk 400 pixels breed.

00:04:52.627 --> 00:04:56.497
Dat is waarom we altijd zeggen dat de bovenste linker hoek 0 is,

00:04:56.497 --> 00:05:01.518
en dat helemaal rechts 400 is, want dat zijn 400 pixels.

00:05:01.518 --> 00:05:05.384
Op dezelfde wijze, als we 200 zeggen, bedoelen we eigenlijk 200 pixels,

00:05:05.384 --> 00:05:07.170
en je zult het nu waarschijnlijk wel door hebben.

00:05:07.180 --> 00:05:08.303
Fantastisch!

00:05:08.303 --> 00:05:11.288
Nou weet je alles over de funties line, ellipse en rect,

00:05:11.288 --> 00:05:12.273
en hun parameters.

00:05:12.273 --> 00:05:13.206
We hebben een hoop geleerd,

00:05:13.206 --> 00:05:15.039
maar blijf het proberen,

00:05:15.039 --> 00:05:16.423
en je zult het snel door hebben.