0:00:01.109,0:00:03.193
Postoji nekoliko nacina da se nesto animira,

0:00:03.193,0:00:05.241
ali osnovni princip je uvek isti:

0:00:05.241,0:00:07.132
ako uzmes nekoliko crteza

0:00:07.132,0:00:09.726
gde je svaki malo drugaciji od prethodnog

0:00:09.726,0:00:11.462
i prelistas ih jako brzo

0:00:11.462,0:00:13.267
izgledace kao da se slika pomera.

0:00:13.267,0:00:16.167
U stara dobra vremena, svi crtezi su crtani rukom.

0:00:16.167,0:00:19.696
I trebalo je jako dugo da se napravi animacija od 3 sekunde.

0:00:19.696,0:00:22.877
Na nasu srecu, mi zivimo u buducnosti.

0:00:22.877,0:00:26.130
U sustini je vrlo lako da se kodiranjem napravi jednostavna animacija.

0:00:26.130,0:00:27.998
Pokazacu vam kako!

0:00:27.998,0:00:31.468
Na levoj strani, mozete videti slatki mali auto na lepoj zutoj pozadini.

0:00:31.468,0:00:34.965
Tacno, ja sam dizajnirala taj auto, hvala.

0:00:34.965,0:00:38.575
U svakom slucaju, ovde mi odredjujemo boju pozadine.

0:00:38.575,0:00:42.531
I auto nema obod, tako da pisemo noStroke() funkciju.

0:00:42.531,0:00:47.471
I onda ovde pravimo novu varijablu "x", pozicija auta, i dajemo joj vrednost 10.

0:00:47.471,0:00:49.456
Mozete videti da ako promenimo ovu vrednost,

0:00:49.456,0:00:52.105
to pomera auto napred nazad.

0:00:52.105,0:00:53.531
Stavimo 10.

0:00:53.531,0:00:57.594
Ovde odredjujemo boju auta, i crtamo pravougaonike koji predstavljaju auto.

0:00:57.594,0:01:00.063
Izgleda da je prvi pravougaonik za donji deo auta

0:01:00.063,0:01:02.483
a ovaj za gornji.

0:01:02.483,0:01:05.027
I onda ovde radimo istu stvar za tockove

0:01:05.027,0:01:06.979
Odredimo boju i nacrtamo dva kruga:

0:01:06.979,0:01:08.648
jedan na x + 25

0:01:08.648,0:01:10.191
i x + 75

0:01:10.191,0:01:12.828
Konacno smo dosli do novih stvari.

0:01:12.828,0:01:15.169
Ovo se zove definicija funckije.

0:01:15.169,0:01:16.691
Naucicete o tome kasnije.

0:01:16.691,0:01:19.566
Za sada, samo pogledajte i zapamtite kako izgleda.

0:01:19.566,0:01:24.292
Vazne stvari da primetite su rec "draw" i ove zagrade.

0:01:24.292,0:01:25.190
Ova otvorena zagrada

0:01:25.190,0:01:26.750
I ova zatvorena zagrada ovde.

0:01:26.750,0:01:30.530
Za ovo kazemo da se crtez vrti u krug, ili animacija se vrti u krug.

0:01:30.530,0:01:35.295
I sve sto stavite izmedju ovih zagrada se neprekidno vrti u krug vrlo, vrlo brzo.

0:01:35.295,0:01:36.702
Zato se zove loop - sto znaci da se bez prestanka vrti u krug.

0:01:36.702,0:01:41.792
A sve sto je van ovih zagrada se izvrsi samo jednom na pocetku programa.

0:01:41.792,0:01:45.529
Prvi korak u animaciji je da pomerite sve kodove crteza unutar zagrada.

0:01:45.529,0:01:47.833
Tako da ce crtez da bude nacrtan uzastopno nekoliko puta.

0:01:47.833,0:01:51.661
Hajmo uraditi to. Ja cu da povucem ceo ovaj kod crteza.

0:01:51.661,0:01:54.261
I ubacim ga ovde, izmedju zagrada

0:01:54.261,0:02:02.471
I da podsetim sebe da ceo ovaj kod ide unutar zagrada, malo cu da ga uvucem tako sto cu celog da ga selektujem i pritisnem tab.

0:02:02.471,0:02:05.746
I sada znam da je ovaj kod unutar zagrada.

0:02:05.746,0:02:10.208
Kao sto mozete videti sve izgleda isto, nista se nije promenilo.

0:02:10.208,0:02:17.788
Kada prvi put pokrenemo draw lookp, kompjuter ce da kaze "dobro, napravi novu promenljivu x, stavi vrednost 10, nacrtaj dva pravougaonika, nacrtaj dva kruga."

0:02:17.788,0:02:24.289
I onda ce da ide gore na pocetak i kaze, "napravi novu promenljivu x, stavi vrednost 10, narctaj dva pravougaonika, i dva kruga."

0:02:24.289,0:02:28.213
I onda, "napravi novu promenljivu x, stavi vrednost 10, nacrtaj…" Identicna stvar

0:02:28.213,0:02:31.151
Nista se nije promenilo, necete videti nikakvu animaciju.

0:02:31.151,0:02:34.660
Samo crta identicne pravougaonike i krugove jedan preko drugog.

0:02:34.660,0:02:40.395
Secate li se sta smo rekli: ako zelimo da nesto izgleda animirano, vi morate pomalo menjati crtez.

0:02:40.395,0:02:42.761
Tako da ako zelite da se kola pomeraju unapred

0:02:42.761,0:02:45.361
trebala bi da promenim vrednost od x promenljive, zar ne?

0:02:45.361,0:02:48.052
Da, hajmo da napravimo…11

0:02:48.052,0:02:51.117
Oh! Ne! Sada ce biti 11 svaki put.

0:02:51.117,0:02:57.564
Kako mogu da napravim da se vrednost od x menja kada kompjuter vrti samo isti kod?

0:02:57.564,0:02:59.707
Dobro, gledaj ovaj magicni trik:

0:02:59.707,0:03:02.789
Secas se, ova "var x" napravi novu promenljivu.

0:03:02.789,0:03:08.061
Kada to imamo unutar ovog kruga, svaki put pravi novu promenljivu "x".

0:03:08.061,0:03:13.467
Sta treba uraditi je staviti ovu promeljivu van ovog kruga. Tako ce je napraviti samo jednom.

0:03:13.467,0:03:22.770
I onda, kada kompjuter izvrsava ovaj kod i vidi promenljivu x, upotrebice istu promenljivu koristeci poslednju vrednost koju smo joj odredili.

0:03:22.770,0:03:31.295
I ja cu to uraditi, uzecu ovu promenljivu, i stavicemo izvan ovog ciklusa, i sada ce praviti tu promenljivu samo jednom,

0:03:31.295,0:03:38.291
I svaki put kad naidje na tu promenljivu x koristice istu. Trenutno poslednja vrednost sto smo joj odredili je "11".

0:03:38.291,0:03:41.757
Tako da ce uvek biti 11. I sada magija nastupa.

0:03:41.757,0:03:52.984
Negde u ovom ciklusu cemo promeniti vrednost od x da bude malo vise nego sto je bilo pre, ovako: x ce da bude stara vrednost od x plus, recimo, 1.

0:03:52.984,0:03:54.931
Radi!

0:03:54.931,0:04:02.823
Osim sto je zamazan. Ako se pitate zasto izgleda ovako, razlog je sto smo zaboravili da nacrtamo pozadinu unutar ovog ciklusa.

0:04:02.823,0:04:07.147
Crta haute ali mozete videti da su stari auti ispod novih.

0:04:07.147,0:04:12.190
Ako premestim ovu liniju na vrh ovog ciklusa, evo ovako,

0:04:12.190,0:04:15.984
I pritisnem "restart" da mogu opet da vidim moj auto…

0:04:15.984,0:04:18.269
Perfektno!

0:04:18.269,0:04:22.386
Ako hocemo da auto ide brze, samo promenimo za koliko cemo povecati vrednost od x svaki put.

0:04:22.386,0:04:28.862
Ako stavimo 10, wow! Nestade sa ekrana! Mogu da napravim cak i negativno, "x - 10" i…

0:04:28.862,0:04:34.552
Evo dolazi! Stavim pozitivno opet, ups…evo.

0:04:34.552,0:04:36.550
Sta je vazno da se zapamti:

0:04:36.550,0:04:43.513
Ova stvar ovde se zove "draw loop". Treba da unutar toga stavite kod crteza kako bi se uzastopno crtao.

0:04:43.513,0:04:52.015
I onda, stavite promenljive van vaseg "draw loop" (ciklusa). Vazno je staviti to van "draw loop"da bi mogli da koristimo iste svaki put.

0:04:52.015,0:04:55.854
I onda unutar "draw loop", tacno ovde, promenicemo promenljive za malo.

0:04:55.854,0:05:02.315
obicno koristeci njihovu staru vrednost, plus neki broj, pozitivan ili negativan broj.

0:05:02.315,0:05:07.934
I na kraju, koristite vasu promenljivu negde u kodu crteza, tako da crtez svaki put izgleda drugacije.

0:05:07.934,9:59:59.000
I to je sve!