1
00:00:01,109 --> 00:00:03,193
Sok módja van annak, hogy valami animáltnak látszódjon,

2
00:00:03,193 --> 00:00:05,241
az alapelv mégis mindig ugyan az:

3
00:00:05,241 --> 00:00:07,132
Ha van egy köteg rajzod vagy képed

4
00:00:07,132 --> 00:00:09,726
és mindegyik csak egy kicsit tér el a másiktól

5
00:00:09,726 --> 00:00:11,462
és elég gyorsan pörgeted őket

6
00:00:11,462 --> 00:00:13,267
mozgóképnek fog látszódni.

7
00:00:13,267 --> 00:00:16,167
A régi időkben ezeket a rajzokat kézzel készítették

8
00:00:16,167 --> 00:00:19,696
és NAGYON sokáig tartott egy három másodperces animáció elkészítése.

9
00:00:19,696 --> 00:00:22,877
Szerencsénkre mi a jövőben élünk.

10
00:00:22,877 --> 00:00:26,130
Nagyon könnyű kódolással egy egyszerű animációt elkészíteni.

11
00:00:26,130 --> 00:00:27,998
Meg is mutatom, hogyan kell!

12
00:00:27,998 --> 00:00:31,468
A jobb oldalon látsz egy édes kisautót szép sárga háttérben.

13
00:00:31,468 --> 00:00:34,965
És igen, én magam terveztem ezt az autót, köszi!

14
00:00:34,965 --> 00:00:38,575
Mindegy, itt állítottuk be ezt a szép hátteret

15
00:00:38,575 --> 00:00:42,531
és az autónak nincsenek körvonalai, azaz noStroke() parancsot használunk.

16
00:00:42,531 --> 00:00:47,471
Azután készítünk egy új változót (x) az autó pozíciójának, és adunk neki egy értéket, ez 10 lesz.

17
00:00:47,471 --> 00:00:49,456
Ha ezt az értéket megváltoztatjuk,

18
00:00:49,456 --> 00:00:52,105
akkor az autó előre-hátra mozogni fog.

19
00:00:52,105 --> 00:00:53,531
Legyen 10

20
00:00:53,531 --> 00:00:57,594
Itt beállítjuk az autó kitöltési színét és két négyszöget rajzolunk testnek.

21
00:00:57,594 --> 00:01:00,063
Az első négyszög lesz az alja

22
00:01:00,063 --> 00:01:02,483
a második a teteje.

23
00:01:02,483 --> 00:01:05,027
Itt a kerekekkel ugyanezt csináljuk

24
00:01:05,027 --> 00:01:06,979
Beállítjuk a kitöltő színt és rajzolunk két ellipszist:

25
00:01:06,979 --> 00:01:08,648
egy az x+25-nél,

26
00:01:08,648 --> 00:01:10,191
és egy az x+75-nél

27
00:01:10,191 --> 00:01:12,828
Végre rátérünk az újdonságra.

28
00:01:12,828 --> 00:01:15,169
Ezt a dolgot itt úgy hívják, hogy funkció definíció

29
00:01:15,169 --> 00:01:16,691
Erről később még fogsz tanulni.

30
00:01:16,691 --> 00:01:19,566
Most csak nézzünk rá és jegyezzük meg, hogy fest.

31
00:01:19,566 --> 00:01:24,292
Ami a fontos, az a "draw" és ezek a zárójelek.

32
00:01:24,292 --> 00:01:25,190
Ez a nyitó zárójel

33
00:01:25,190 --> 00:01:26,750
Ez a záró.

34
00:01:26,750 --> 00:01:30,530
Ezt az egész dolgot együtt rajzolási, vagy animációs ciklusnak hívjuk.

35
00:01:30,530 --> 00:01:35,295
Minden, amit a zárójelek közé teszel ismétlődni fog, úgymond lefut újra meg újra nagyon gyorsan

36
00:01:35,295 --> 00:01:36,702
Ezért hívjuk ciklusnak (angolul loop)

37
00:01:36,702 --> 00:01:41,792
Minden, ami a zárójeleken kívül van csak egyszer fut le, a program kezdetén.

38
00:01:41,792 --> 00:01:45,529
Első lépés tehát, hogy a rajzainkat betesszük a zárójelek közé

39
00:01:45,529 --> 00:01:47,833
Így a képeket újra és újra rajzolja a program.

40
00:01:47,833 --> 00:01:51,661
Ezt csináljuk meg. Ezt kijelölöm

41
00:01:51,661 --> 00:01:54,261
és lehúzom a ciklusomba.

42
00:01:54,261 --> 00:02:02,471
Hogy jól látszódjon, hogy ez a kód a zárójelben van, egy behúzással beljebb viszem, kijelölöm és megnyomom a tab gombot

43
00:02:02,471 --> 00:02:05,746
Már tudom, hogy a zárójelben van a kódom.

44
00:02:05,746 --> 00:02:10,208
Minden ugyanolyan maradt, semmi nem változott.

45
00:02:10,208 --> 00:02:17,788
Amikor először fut le a kód, a gép azt mondja: "oké, legyen egy új változónk x, legyen 10, rajzolj két négyszöget és két ellipszist".

46
00:02:17,788 --> 00:02:24,289
Aztán visszamegy az elejére és azt mondja: "oké, legyen egy új változónk x, legyen 10, rajzolj két négyszöget és két ellipszist".

47
00:02:24,289 --> 00:02:28,213
Aztán azt mondja: "oké, legyen egy új változónk x, legyen 10, rajzolj két négyszöget és két ellipszist". Teljesen ugyanazt.

48
00:02:28,213 --> 00:02:31,151
Semmi sem változott, ezért nem is fogsz animációt látni.

49
00:02:31,151 --> 00:02:34,660
Csak ugyanazokat a négyszögeket és ellipsziseket fogja egymásra rajzolni.

50
00:02:34,660 --> 00:02:40,395
Ne feledd, ha valamit animáltnak szeretnénk látni, időnként apróságokat változtatni kell rajta.

51
00:02:40,395 --> 00:02:42,761
Szóval ha azt szeretném, hogy az autóm előre mozogjon,

52
00:02:42,761 --> 00:02:45,361
az x értékét kell változtatnom, igaz?

53
00:02:45,361 --> 00:02:48,052
Oké, akkor legyen 11.

54
00:02:48,052 --> 00:02:51,117
De akkor minden alkalommal 11 lesz!

55
00:02:51,117 --> 00:02:57,564
Hogy kellene megoldanom, hogy az x értéke változzon minden alkalommal, amikor a kód újra lefut?

56
00:02:57,564 --> 00:02:59,707
Nézd ezt a bűvös trükköt:

57
00:02:59,707 --> 00:03:02,789
Emlékszel, a var x egy új változót készít.

58
00:03:02,789 --> 00:03:08,061
Ha a cikluson belül hagyjuk, minden egyes alkalommal készít egy új x nevű változót

59
00:03:08,061 --> 00:03:13,467
Nekünk az kell, hogy a változót a cikluson kívül hozzuk létre. Így csak egyszer készül el.

60
00:03:13,467 --> 00:03:22,770
Minden alkalommal, mikor a kód lefut, és látja a gép, hogy az x már létezik és azt az értékét fogja használni, amelyet mi adunk neki.

61
00:03:22,770 --> 00:03:31,295
Tehát az lesz, hogy a változót kitesszük a cikluson kívülre, így csak egyszer "gyártódik" le

62
00:03:31,295 --> 00:03:38,291
és minden alkalommal mikor az x-szel találkozik, ugyanazt az egy változót fogja használni és az értéke is az lesz, amit utoljára adtunk, azaz 11

63
00:03:38,291 --> 00:03:41,757
azaz ezentúl mindig 11 lesz.

64
00:03:41,757 --> 00:03:52,984
valahol a rajzolás ciklusban megváltoztatjuk az x értékét, mondjuk legyen az x az x előző értéke +1

65
00:03:52,984 --> 00:03:54,931
Juhé! Működik!

66
00:03:54,931 --> 00:04:02,823
Kivéve hogy.. valahogy furcsa. Ha szeretnéd tudni, azért ilyen, mert a hátteret elfelejtettük a cikluson belülre tenni.

67
00:04:02,823 --> 00:04:07,147
Tehát lerajzolja az autót újra meg újra, de az összes eddigi autót is látod a mostani alatt.

68
00:04:07,147 --> 00:04:12,190
Ezért ha ezt a sort ide húzom a ciklusom elejére,

69
00:04:12,190 --> 00:04:15,984
és megnyomom az újraindítás gombot, látom az autómat...

70
00:04:15,984 --> 00:04:18,269
Hurrá! Tökéletes!

71
00:04:18,269 --> 00:04:22,386
És ha szeretnénk, hogy az autónk gyorsabban menjen, növelhetjük az x szorzóját,

72
00:04:22,386 --> 00:04:28,862
ha 10, húha! Lement a képről! Állíthatom negatívra is, így x-10, és...

73
00:04:28,862 --> 00:04:34,552
Itt jön! Legyen pozitív, upsz... ott megy!

74
00:04:34,552 --> 00:04:36,550
Tehát ezekre kell emlékeznünk:

75
00:04:36,550 --> 00:04:43,513
Ezt itt rajzolási ciklusnak hívjuk. Tedd bele a rajzolási kódodat és újra és újra megrajzolja.

76
00:04:43,513 --> 00:04:52,015
Azután a változóidat a cikluson kívül definiáld, ez nagyon fontos, így tudjuk ugyanazt a változót újra és újra használni.

77
00:04:52,015 --> 00:04:55,854
Azután a ciklusban megváltoztatjuk a változó értékét egy picit

78
00:04:55,854 --> 00:05:02,315
általában hozzáadunk az eredeti számhoz, vagy elveszünk belőle egy számot

79
00:05:02,315 --> 00:05:07,934
És végül a változókat használjuk a rajzolási kódon belül, így a rajzunk változni fog időről időre.

80
00:05:08,479 --> 00:05:10,010
És kész!