Der er mange måder at få ting til at se lenvende ud,
men princippet er altid det samme.
Hvis du har en masse tegninger eller billeder
hvor hver er en smule anderledes end den forrige,
og bladrer igennem dem hurtigt nok,
vil det se ud som om tegningen bevæger sig.
I de gode gamle dage
plejede man at tegne alle disse tegninger i hånden,
og det tog meget lang tid bare at lave en animation på 3-sekunders.
Heldigvis lever vi i fremtiden.
At programmere en simpel animation er egentlig nemt.
Og jeg vil vise dig hvordan!
Her til højre kan du se en nuttet lille bil
på en dejlig lysegul baggrund.
Og ja, det er migselv, der har designet bilen, tak.
Nå, men herovre
kan I se at vi sætter den smukke baggrundsfarve.
Vi kalder noStroke()-funktionen for at fjerne omrids af efterfølgende objekter.
Og her opretter vi en ny variable, x, der er bilens position,
og sætter den til 10.
Du kan se hvad der sker hvis vi ændrer værdien,
så vil bilen rykke frem og tilbage.
Vi sætter ham lige til 10.
Her sætter vi bilens udfyldningsfarve
og tegner to rektangler, der udgør bilens krop.
Det første rektangel ser ud til at være bilens bund
og denne rektangel dens top.
Og her gør vi det samme med hjulene.
Vi sætter udfyldningsfarven og tegner to ellipser:
En ved "x+25"
og en ved "x+75".
Og så kommer vi til noget nyt.
Dette kaldes en funktionsdefination
Dem lærer I om senere,
så for nu, bare kig på den og husk hvordan den ser ud.
Det vigtige at lægge mærke til er ordet"draw" og de der paranteser.
Denne krøllede startparentes her og slutparentesen her.
Hele denne blok kaldes tegneløkken, eller animationsløkken.
Alt hvad I putter ind mellem disse krøllede parenteser
bliver kørt igen og meget hurtigt.
Derfor hedder det en løkke.
Og alt udenfor de krøllede parenteser
bliver kun kørt én gang ved programmets start
Så første trin i at animerer er at have al tegne- koden ind mellem de krøllede parenteser,
så billedet bliver tegnet igen og igen.
Så lad os gøre det.
Jeg klipper lige al tegne-koden ud
og indsætter det i løkken.
For at lette overskueligheden af programmet
indenterer jeg det hele ved at markere det og trykke Tab.
Og nu er det nemt se at denne kode bliver kørt af løkken.
Som I kan se er alting det samme
og intet er ændret.
Fordi første gang vi kører draw-løkken,
vil computeren sige:
"Okay, opret en ny variable x, sæt den til 10, tegn to rektangler,
tegn to ellipser."
Og næste gang den bliver kørt vil den starte forfra og sige:
"Opret en ny variable x, sæt den til 10, tegn to rektangler, tegn to ellipser."
Og næste gang: "Opret en ny variabel x, sæt den til 10, tegn to rek..."
helt det samme.
Intet er ændret, så selvfølgelig vil I ikke se nogen animation.
Den tegner bare de samme rektangler og ellipser ovenpå de gamle.
Husk hvad vi sagde: Hvis noget skal se levende ud,
skal vi ændre tegningen en lille smule ad gangen.
Så hvis jeg vil have min bil til at køre fremad,
skal jeg ændre værdien af x, ikk'?
Så lad os bare sætte den til... 11.
Åh nej! Nu kommer den bare til at være 11 hver gang.
Hvordan skal jeg få værdien af x til at ændre sig hele tiden
når computeren bare kører den samme kode om og om igen?
Okay se lige det her trick.
Husk at dette var x opretter en ny variable.
Når vi har det inde i funktionen som her,
bliver der oprettet en ny variable x hver gang.
Det vi skal gøre er at flytte variablen udenfor draw-løkken.
På den måde vil den kun blive oprettet én gang.
Og hver gang computeren kører dette kode og ser variablen x,
vil den genbruge den samme variabel med den værdi vi satte den til sidst.
Så det gør jeg lige; jeg tager denne variabel
og placerer den udenfor draw-løkken.
Lige nu bliver variablen kun sat én gang.
Og hver gang den møder x
vil x have den samme værdi.
Og lige nu er den sidst sat til 11
så den vil altid være 11.
Og her kommer tricket.
Vi ændrer værdien af x, et sted inde i draw-løkken,
så den bliver lidt større end før, såden her:
x bliver sat til den gamle værdi af x plus, lad os sige, 1.
Jaa! Det virker!
Men, det er helt udtværet.
Og hvis I undrer jer over hvorfor det ser sådan ud,
så er det fordi vi glemte at tegne baggrunden inde i draw-løkken.
Så den tegner bilen igen og igen,
men man kan stadig se de gamle biler bag den nye.
Så hvis jeg lige putter denne linje ind i toppen af løkken, sådan her,
and trykker "Restart" så jeg kan se min bil igen...
Jaa! Det er bare helt perfekt!
Og hvis bilen skal køre hurtigere,
kan vi bare ændre hvor meget vi forøger x med hver gang.
Så hvis vi sætter det til 10, whoo! Den er ude af skærmen!
Og jeg kan endda gøre den negativ, så x-10 og...
Her kommer den!
Lav den positiv igen, ups...
Der var den.
Så her er de vigtige ting at huske:
Dette her kaldes tegneløkken.
I skal placere jeres tegnekode herinde,
så det bliver tegnet igen og igen.
Og så skal I oprette en variabel udenfor tegneløkken.
Det er meget vigtigt at oprette variablen udenfor tegneløkken
så vi kan genbruge den samme variabel hver gang.
Inde i tegneløkken her,
ændrer vi variablen en lille smule,
normalt ved at sætte den til dens gamle værdi,
plus et tal -- plus eller minus et tal.
Og til sidst vil du også gerne bruge din variabel et sted i tegnekoden,
så din tegning ser forskellig ud hver gang.
Og... Det er det!