< Return to Video

Intro to Animation (Video Version)

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

more » « less
Video Language:
English
Duration:
05:11

Danish subtitles

Revisions