WEBVTT
00:00:00.359 --> 00:00:03.013
Der er mange måder at få ting
til at se lenvende ud,
00:00:03.013 --> 00:00:05.071
men princippet er altid det samme.
00:00:05.071 --> 00:00:07.132
Hvis du har en masse tegninger eller billeder
00:00:07.132 --> 00:00:09.726
hvor hver er en smule anderledes
end den forrige,
00:00:09.726 --> 00:00:11.392
og bladrer igennem dem hurtigt nok,
00:00:11.392 --> 00:00:13.417
vil det se ud som om tegningen bevæger sig.
00:00:13.417 --> 00:00:14.790
I de gode gamle dage
00:00:14.790 --> 00:00:16.943
plejede man at tegne alle disse
tegninger i hånden,
00:00:16.943 --> 00:00:19.696
og det tog meget lang tid bare at lave
en animation på 3-sekunders.
00:00:19.696 --> 00:00:22.877
Heldigvis lever vi i fremtiden.
00:00:22.877 --> 00:00:26.130
At programmere en simpel animation
er egentlig nemt.
00:00:26.130 --> 00:00:27.568
Og jeg vil vise dig hvordan!
00:00:27.568 --> 00:00:30.270
Her til højre kan du se en
nuttet lille bil
00:00:30.270 --> 00:00:32.012
på en dejlig lysegul baggrund.
00:00:32.012 --> 00:00:34.965
Og ja, det er migselv, der har
designet bilen, tak.
00:00:34.965 --> 00:00:35.977
Nå, men herovre
00:00:35.977 --> 00:00:38.749
kan I se at vi sætter den
smukke baggrundsfarve.
00:00:38.759 --> 00:00:42.531
Vi kalder noStroke()-funktionen for at fjerne
omrids af efterfølgende objekter.
00:00:42.531 --> 00:00:46.039
Og her opretter vi en ny variable, x, der er bilens position,
00:00:46.039 --> 00:00:47.307
og sætter den til 10.
00:00:47.307 --> 00:00:49.456
Du kan se hvad der sker
hvis vi ændrer værdien,
00:00:49.456 --> 00:00:52.105
så vil bilen rykke frem og tilbage.
00:00:52.105 --> 00:00:53.131
Vi sætter ham lige til 10.
00:00:53.131 --> 00:00:55.968
Her sætter vi bilens udfyldningsfarve
00:00:55.968 --> 00:00:58.095
og tegner to rektangler,
der udgør bilens krop.
00:00:58.095 --> 00:01:00.733
Det første rektangel ser ud til
at være bilens bund
00:01:00.733 --> 00:01:02.483
og denne rektangel dens top.
00:01:02.483 --> 00:01:05.027
Og her gør vi det samme med hjulene.
00:01:05.027 --> 00:01:06.979
Vi sætter udfyldningsfarven
og tegner to ellipser:
00:01:06.979 --> 00:01:08.648
En ved "x+25"
00:01:08.648 --> 00:01:10.191
og en ved "x+75".
00:01:10.191 --> 00:01:12.828
Og så kommer vi til noget nyt.
00:01:12.828 --> 00:01:15.099
Dette kaldes en funktionsdefination
00:01:15.099 --> 00:01:17.021
Dem lærer I om senere,
00:01:17.021 --> 00:01:20.206
så for nu, bare kig på den og
husk hvordan den ser ud.
00:01:20.206 --> 00:01:24.012
Det vigtige at lægge mærke til er ordet"draw" og de der paranteser.
00:01:24.012 --> 00:01:26.740
Denne krøllede startparentes her og
slutparentesen her.
00:01:26.750 --> 00:01:30.210
Hele denne blok kaldes tegneløkken,
eller animationsløkken.
00:01:30.210 --> 00:01:32.587
Alt hvad I putter ind mellem
disse krøllede parenteser
00:01:32.587 --> 00:01:35.234
bliver kørt igen og meget hurtigt.
00:01:35.234 --> 00:01:36.702
Derfor hedder det en løkke.
00:01:36.702 --> 00:01:38.734
Og alt udenfor de krøllede parenteser
00:01:38.734 --> 00:01:41.656
bliver kun kørt én gang
ved programmets start
00:01:41.656 --> 00:01:45.479
Så første trin i at animerer er at have al tegne-
koden ind mellem de krøllede parenteser,
00:01:45.479 --> 00:01:47.833
så billedet bliver tegnet igen og igen.
00:01:47.833 --> 00:01:48.875
Så lad os gøre det.
00:01:48.875 --> 00:01:51.027
Jeg klipper lige al tegne-koden ud
00:01:51.247 --> 00:01:54.261
og indsætter det i løkken.
00:01:54.261 --> 00:01:58.089
For at lette overskueligheden
af programmet
00:01:58.089 --> 00:02:01.917
indenterer jeg det hele ved at
markere det og trykke Tab.
00:02:02.237 --> 00:02:05.016
Og nu er det nemt se at denne kode
bliver kørt af løkken.
00:02:05.746 --> 00:02:08.730
Som I kan se er alting det samme
00:02:08.730 --> 00:02:10.034
og intet er ændret.
00:02:10.034 --> 00:02:12.160
Fordi første gang vi kører draw-løkken,
00:02:12.160 --> 00:02:13.496
vil computeren sige:
00:02:13.496 --> 00:02:16.513
"Okay, opret en ny variable x, sæt den
til 10, tegn to rektangler,
00:02:16.513 --> 00:02:17.560
tegn to ellipser."
00:02:17.560 --> 00:02:20.487
Og næste gang den bliver kørt
vil den starte forfra og sige:
00:02:20.487 --> 00:02:24.034
"Opret en ny variable x, sæt den til 10,
tegn to rektangler, tegn to ellipser."
00:02:24.034 --> 00:02:26.986
Og næste gang: "Opret en ny variabel x, sæt den til 10, tegn to rek..."
00:02:26.986 --> 00:02:28.208
helt det samme.
00:02:28.208 --> 00:02:31.301
Intet er ændret, så selvfølgelig vil
I ikke se nogen animation.
00:02:31.301 --> 00:02:34.660
Den tegner bare de samme rektangler og
ellipser ovenpå de gamle.
00:02:34.660 --> 00:02:37.770
Husk hvad vi sagde: Hvis noget skal se levende ud,
00:02:37.770 --> 00:02:40.360
skal vi ændre tegningen en lille
smule ad gangen.
00:02:40.360 --> 00:02:42.761
Så hvis jeg vil have min bil
til at køre fremad,
00:02:42.761 --> 00:02:45.361
skal jeg ændre værdien af x, ikk'?
00:02:45.361 --> 00:02:48.052
Så lad os bare sætte den til... 11.
00:02:48.052 --> 00:02:51.117
Åh nej! Nu kommer den bare til
at være 11 hver gang.
00:02:51.117 --> 00:02:54.220
Hvordan skal jeg få værdien af x til
at ændre sig hele tiden
00:02:54.220 --> 00:02:57.253
når computeren bare kører den samme kode
om og om igen?
00:02:57.253 --> 00:02:59.707
Okay se lige det her trick.
00:02:59.707 --> 00:03:02.479
Husk at dette var x opretter
en ny variable.
00:03:02.479 --> 00:03:04.748
Når vi har det inde i funktionen som her,
00:03:04.748 --> 00:03:07.737
bliver der oprettet en ny
variable x hver gang.
00:03:07.737 --> 00:03:10.764
Det vi skal gøre er at flytte variablen
udenfor draw-løkken.
00:03:10.764 --> 00:03:13.261
På den måde vil den kun blive
oprettet én gang.
00:03:13.261 --> 00:03:17.492
Og hver gang computeren kører dette
kode og ser variablen x,
00:03:17.492 --> 00:03:22.483
vil den genbruge den samme variabel med
den værdi vi satte den til sidst.
00:03:22.483 --> 00:03:25.079
Så det gør jeg lige; jeg tager
denne variabel
00:03:25.079 --> 00:03:27.483
og placerer den udenfor draw-løkken.
00:03:27.483 --> 00:03:30.267
Lige nu bliver variablen kun sat én gang.
00:03:31.227 --> 00:03:33.483
Og hver gang den møder x
00:03:33.483 --> 00:03:35.479
vil x have den samme værdi.
00:03:35.479 --> 00:03:38.117
Og lige nu er den sidst sat til 11
00:03:38.117 --> 00:03:39.492
så den vil altid være 11.
00:03:39.492 --> 00:03:41.487
Og her kommer tricket.
00:03:41.487 --> 00:03:44.385
Vi ændrer værdien af x, et
sted inde i draw-løkken,
00:03:44.385 --> 00:03:46.717
så den bliver lidt større end før, såden her:
00:03:46.717 --> 00:03:51.989
x bliver sat til den gamle værdi af x
plus, lad os sige, 1.
00:03:52.749 --> 00:03:54.271
Jaa! Det virker!
00:03:54.761 --> 00:03:56.893
Men, det er helt udtværet.
00:03:56.893 --> 00:03:59.157
Og hvis I undrer jer over hvorfor
det ser sådan ud,
00:03:59.157 --> 00:04:02.381
så er det fordi vi glemte at tegne
baggrunden inde i draw-løkken.
00:04:02.381 --> 00:04:04.447
Så den tegner bilen igen og igen,
00:04:04.447 --> 00:04:07.073
men man kan stadig se de gamle biler bag den nye.
00:04:07.073 --> 00:04:11.740
Så hvis jeg lige putter denne linje ind
i toppen af løkken, sådan her,
00:04:12.040 --> 00:04:15.984
and trykker "Restart" så jeg
kan se min bil igen...
00:04:15.984 --> 00:04:18.029
Jaa! Det er bare helt perfekt!
00:04:18.029 --> 00:04:19.970
Og hvis bilen skal køre hurtigere,
00:04:19.970 --> 00:04:22.631
kan vi bare ændre hvor meget vi
forøger x med hver gang.
00:04:22.631 --> 00:04:24.834
Så hvis vi sætter det til 10, whoo!
Den er ude af skærmen!
00:04:24.834 --> 00:04:28.727
Og jeg kan endda gøre den negativ,
så x-10 og...
00:04:28.727 --> 00:04:29.778
Her kommer den!
00:04:30.018 --> 00:04:32.195
Lav den positiv igen, ups...
00:04:33.485 --> 00:04:34.542
Der var den.
00:04:34.542 --> 00:04:36.550
Så her er de vigtige ting at huske:
00:04:36.550 --> 00:04:39.157
Dette her kaldes tegneløkken.
00:04:39.157 --> 00:04:41.251
I skal placere jeres tegnekode herinde,
00:04:41.251 --> 00:04:43.487
så det bliver tegnet igen og igen.
00:04:43.487 --> 00:04:46.292
Og så skal I oprette en variabel
udenfor tegneløkken.
00:04:46.292 --> 00:04:49.249
Det er meget vigtigt at oprette variablen
udenfor tegneløkken
00:04:49.249 --> 00:04:51.496
så vi kan genbruge den samme
variabel hver gang.
00:04:51.496 --> 00:04:53.519
Inde i tegneløkken her,
00:04:53.519 --> 00:04:56.032
ændrer vi variablen en lille smule,
00:04:56.032 --> 00:04:58.242
normalt ved at sætte den til
dens gamle værdi,
00:04:58.242 --> 00:05:01.492
plus et tal -- plus eller minus et tal.
00:05:01.952 --> 00:05:05.504
Og til sidst vil du også gerne bruge
din variabel et sted i tegnekoden,
00:05:05.504 --> 00:05:07.740
så din tegning ser forskellig ud hver gang.
00:05:07.740 --> 00:05:10.051
Og... Det er det!