Intro to Animation (Video Version)

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!