0:00:01.109,0:00:03.193
Sok módja van annak, hogy valami animáltnak látszódjon,

0:00:03.193,0:00:05.241
az alapelv mégis mindig ugyan az:

0:00:05.241,0:00:07.132
Ha van egy köteg rajzod vagy képed

0:00:07.132,0:00:09.726
és mindegyik csak egy kicsit tér el a másiktól

0:00:09.726,0:00:11.462
és elég gyorsan pörgeted őket

0:00:11.462,0:00:13.267
mozgóképnek fog látszódni.

0:00:13.267,0:00:16.167
A régi időkben ezeket a rajzokat kézzel készítették

0:00:16.167,0:00:19.696
és NAGYON sokáig tartott egy három másodperces animáció elkészítése.

0:00:19.696,0:00:22.877
Szerencsénkre mi a jövőben élünk.

0:00:22.877,0:00:26.130
Nagyon könnyű kódolással egy egyszerű animációt elkészíteni.

0:00:26.130,0:00:27.998
Meg is mutatom, hogyan kell!

0:00:27.998,0:00:31.468
A jobb oldalon látsz egy édes kisautót szép sárga háttérben.

0:00:31.468,0:00:34.965
És igen, én magam terveztem ezt az autót, köszi!

0:00:34.965,0:00:38.575
Mindegy, itt állítottuk be ezt a szép hátteret

0:00:38.575,0:00:42.531
és az autónak nincsenek körvonalai, azaz noStroke() parancsot használunk.

0:00:42.531,0: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.

0:00:47.471,0:00:49.456
Ha ezt az értéket megváltoztatjuk,

0:00:49.456,0:00:52.105
akkor az autó előre-hátra mozogni fog.

0:00:52.105,0:00:53.531
Legyen 10

0:00:53.531,0:00:57.594
Itt beállítjuk az autó kitöltési színét és két négyszöget rajzolunk testnek.

0:00:57.594,0:01:00.063
Az első négyszög lesz az alja

0:01:00.063,0:01:02.483
a második a teteje.

0:01:02.483,0:01:05.027
Itt a kerekekkel ugyanezt csináljuk

0:01:05.027,0:01:06.979
Beállítjuk a kitöltő színt és rajzolunk két ellipszist:

0:01:06.979,0:01:08.648
egy az x+25-nél,

0:01:08.648,0:01:10.191
és egy az x+75-nél

0:01:10.191,0:01:12.828
Végre rátérünk az újdonságra.

0:01:12.828,0:01:15.169
Ezt a dolgot itt úgy hívják, hogy funkció definíció

0:01:15.169,0:01:16.691
Erről később még fogsz tanulni.

0:01:16.691,0:01:19.566
Most csak nézzünk rá és jegyezzük meg, hogy fest.

0:01:19.566,0:01:24.292
Ami a fontos, az a "draw" és ezek a zárójelek.

0:01:24.292,0:01:25.190
Ez a nyitó zárójel

0:01:25.190,0:01:26.750
Ez a záró.

0:01:26.750,0:01:30.530
Ezt az egész dolgot együtt rajzolási, vagy animációs ciklusnak hívjuk.

0:01:30.530,0:01:35.295
Minden, amit a zárójelek közé teszel ismétlődni fog, úgymond lefut újra meg újra nagyon gyorsan

0:01:35.295,0:01:36.702
Ezért hívjuk ciklusnak (angolul loop)

0:01:36.702,0:01:41.792
Minden, ami a zárójeleken kívül van csak egyszer fut le, a program kezdetén.

0:01:41.792,0:01:45.529
Első lépés tehát, hogy a rajzainkat betesszük a zárójelek közé

0:01:45.529,0:01:47.833
Így a képeket újra és újra rajzolja a program.

0:01:47.833,0:01:51.661
Ezt csináljuk meg. Ezt kijelölöm

0:01:51.661,0:01:54.261
és lehúzom a ciklusomba.

0:01:54.261,0: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

0:02:02.471,0:02:05.746
Már tudom, hogy a zárójelben van a kódom.

0:02:05.746,0:02:10.208
Minden ugyanolyan maradt, semmi nem változott.

0:02:10.208,0: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".

0:02:17.788,0: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".

0:02:24.289,0: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.

0:02:28.213,0:02:31.151
Semmi sem változott, ezért nem is fogsz animációt látni.

0:02:31.151,0:02:34.660
Csak ugyanazokat a négyszögeket és ellipsziseket fogja egymásra rajzolni.

0:02:34.660,0:02:40.395
Ne feledd, ha valamit animáltnak szeretnénk látni, időnként apróságokat változtatni kell rajta.

0:02:40.395,0:02:42.761
Szóval ha azt szeretném, hogy az autóm előre mozogjon,

0:02:42.761,0:02:45.361
az x értékét kell változtatnom, igaz?

0:02:45.361,0:02:48.052
Oké, akkor legyen 11.

0:02:48.052,0:02:51.117
De akkor minden alkalommal 11 lesz!

0:02:51.117,0:02:57.564
Hogy kellene megoldanom, hogy az x értéke változzon minden alkalommal, amikor a kód újra lefut?

0:02:57.564,0:02:59.707
Nézd ezt a bűvös trükköt:

0:02:59.707,0:03:02.789
Emlékszel, a var x egy új változót készít.

0:03:02.789,0:03:08.061
Ha a cikluson belül hagyjuk, minden egyes alkalommal készít egy új x nevű változót

0:03:08.061,0: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.

0:03:13.467,0: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.

0:03:22.770,0: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

0:03:31.295,0: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

0:03:38.291,0:03:41.757
azaz ezentúl mindig 11 lesz.

0:03:41.757,0: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

0:03:52.984,0:03:54.931
Juhé! Működik!

0:03:54.931,0: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.

0:04:02.823,0:04:07.147
Tehát lerajzolja az autót újra meg újra, de az összes eddigi autót is látod a mostani alatt.

0:04:07.147,0:04:12.190
Ezért ha ezt a sort ide húzom a ciklusom elejére,

0:04:12.190,0:04:15.984
és megnyomom az újraindítás gombot, látom az autómat...

0:04:15.984,0:04:18.269
Hurrá! Tökéletes!

0:04:18.269,0:04:22.386
És ha szeretnénk, hogy az autónk gyorsabban menjen, növelhetjük az x szorzóját,

0:04:22.386,0:04:28.862
ha 10, húha! Lement a képről! Állíthatom negatívra is, így x-10, és...

0:04:28.862,0:04:34.552
Itt jön! Legyen pozitív, upsz... ott megy!

0:04:34.552,0:04:36.550
Tehát ezekre kell emlékeznünk:

0:04:36.550,0:04:43.513
Ezt itt rajzolási ciklusnak hívjuk. Tedd bele a rajzolási kódodat és újra és újra megrajzolja.

0:04:43.513,0: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.

0:04:52.015,0:04:55.854
Azután a ciklusban megváltoztatjuk a változó értékét egy picit

0:04:55.854,0:05:02.315
általában hozzáadunk az eredeti számhoz, vagy elveszünk belőle egy számot

0:05:02.315,0: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.

0:05:08.479,0:05:10.010
És kész!