1
00:00:01,109 --> 00:00:03,193
Postoji nekoliko nacina da se nesto animira,

2
00:00:03,193 --> 00:00:05,241
ali osnovni princip je uvek isti:

3
00:00:05,241 --> 00:00:07,132
ako uzmes nekoliko crteza

4
00:00:07,132 --> 00:00:09,726
gde je svaki malo drugaciji od prethodnog

5
00:00:09,726 --> 00:00:11,462
i prelistas ih jako brzo

6
00:00:11,462 --> 00:00:13,267
izgledace kao da se slika pomera.

7
00:00:13,267 --> 00:00:16,167
U stara dobra vremena, svi crtezi su crtani rukom.

8
00:00:16,167 --> 00:00:19,696
I trebalo je jako dugo da se napravi animacija od 3 sekunde.

9
00:00:19,696 --> 00:00:22,877
Na nasu srecu, mi zivimo u buducnosti.

10
00:00:22,877 --> 00:00:26,130
U sustini je vrlo lako da se kodiranjem napravi jednostavna animacija.

11
00:00:26,130 --> 00:00:27,998
Pokazacu vam kako!

12
00:00:27,998 --> 00:00:31,468
Na levoj strani, mozete videti slatki mali auto na lepoj zutoj pozadini.

13
00:00:31,468 --> 00:00:34,965
Tacno, ja sam dizajnirala taj auto, hvala.

14
00:00:34,965 --> 00:00:38,575
U svakom slucaju, ovde mi odredjujemo boju pozadine.

15
00:00:38,575 --> 00:00:42,531
I auto nema obod, tako da pisemo noStroke() funkciju.

16
00:00:42,531 --> 00:00:47,471
I onda ovde pravimo novu varijablu "x", pozicija auta, i dajemo joj vrednost 10.

17
00:00:47,471 --> 00:00:49,456
Mozete videti da ako promenimo ovu vrednost,

18
00:00:49,456 --> 00:00:52,105
to pomera auto napred nazad.

19
00:00:52,105 --> 00:00:53,531
Stavimo 10.

20
00:00:53,531 --> 00:00:57,594
Ovde odredjujemo boju auta, i crtamo pravougaonike koji predstavljaju auto.

21
00:00:57,594 --> 00:01:00,063
Izgleda da je prvi pravougaonik za donji deo auta

22
00:01:00,063 --> 00:01:02,483
a ovaj za gornji.

23
00:01:02,483 --> 00:01:05,027
I onda ovde radimo istu stvar za tockove

24
00:01:05,027 --> 00:01:06,979
Odredimo boju i nacrtamo dva kruga:

25
00:01:06,979 --> 00:01:08,648
jedan na x + 25

26
00:01:08,648 --> 00:01:10,191
i x + 75

27
00:01:10,191 --> 00:01:12,828
Konacno smo dosli do novih stvari.

28
00:01:12,828 --> 00:01:15,169
Ovo se zove definicija funckije.

29
00:01:15,169 --> 00:01:16,691
Naucicete o tome kasnije.

30
00:01:16,691 --> 00:01:19,566
Za sada, samo pogledajte i zapamtite kako izgleda.

31
00:01:19,566 --> 00:01:24,292
Vazne stvari da primetite su rec "draw" i ove zagrade.

32
00:01:24,292 --> 00:01:25,190
Ova otvorena zagrada

33
00:01:25,190 --> 00:01:26,750
I ova zatvorena zagrada ovde.

34
00:01:26,750 --> 00:01:30,530
Za ovo kazemo da se crtez vrti u krug, ili animacija se vrti u krug.

35
00:01:30,530 --> 00:01:35,295
I sve sto stavite izmedju ovih zagrada se neprekidno vrti u krug vrlo, vrlo brzo.

36
00:01:35,295 --> 00:01:36,702
Zato se zove loop - sto znaci da se bez prestanka vrti u krug.

37
00:01:36,702 --> 00:01:41,792
A sve sto je van ovih zagrada se izvrsi samo jednom na pocetku programa.

38
00:01:41,792 --> 00:01:45,529
Prvi korak u animaciji je da pomerite sve kodove crteza unutar zagrada.

39
00:01:45,529 --> 00:01:47,833
Tako da ce crtez da bude nacrtan uzastopno nekoliko puta.

40
00:01:47,833 --> 00:01:51,661
Hajmo uraditi to. Ja cu da povucem ceo ovaj kod crteza.

41
00:01:51,661 --> 00:01:54,261
I ubacim ga ovde, izmedju zagrada

42
00:01:54,261 --> 00: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.

43
00:02:02,471 --> 00:02:05,746
I sada znam da je ovaj kod unutar zagrada.

44
00:02:05,746 --> 00:02:10,208
Kao sto mozete videti sve izgleda isto, nista se nije promenilo.

45
00:02:10,208 --> 00: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."

46
00:02:17,788 --> 00: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."

47
00:02:24,289 --> 00:02:28,213
I onda, "napravi novu promenljivu x, stavi vrednost 10, nacrtaj…" Identicna stvar

48
00:02:28,213 --> 00:02:31,151
Nista se nije promenilo, necete videti nikakvu animaciju.

49
00:02:31,151 --> 00:02:34,660
Samo crta identicne pravougaonike i krugove jedan preko drugog.

50
00:02:34,660 --> 00:02:40,395
Secate li se sta smo rekli: ako zelimo da nesto izgleda animirano, vi morate pomalo menjati crtez.

51
00:02:40,395 --> 00:02:42,761
Tako da ako zelite da se kola pomeraju unapred

52
00:02:42,761 --> 00:02:45,361
trebala bi da promenim vrednost od x promenljive, zar ne?

53
00:02:45,361 --> 00:02:48,052
Da, hajmo da napravimo…11

54
00:02:48,052 --> 00:02:51,117
Oh! Ne! Sada ce biti 11 svaki put.

55
00:02:51,117 --> 00:02:57,564
Kako mogu da napravim da se vrednost od x menja kada kompjuter vrti samo isti kod?

56
00:02:57,564 --> 00:02:59,707
Dobro, gledaj ovaj magicni trik:

57
00:02:59,707 --> 00:03:02,789
Secas se, ova "var x" napravi novu promenljivu.

58
00:03:02,789 --> 00:03:08,061
Kada to imamo unutar ovog kruga, svaki put pravi novu promenljivu "x".

59
00:03:08,061 --> 00:03:13,467
Sta treba uraditi je staviti ovu promeljivu van ovog kruga. Tako ce je napraviti samo jednom.

60
00:03:13,467 --> 00:03:22,770
I onda, kada kompjuter izvrsava ovaj kod i vidi promenljivu x, upotrebice istu promenljivu koristeci poslednju vrednost koju smo joj odredili.

61
00:03:22,770 --> 00:03:31,295
I ja cu to uraditi, uzecu ovu promenljivu, i stavicemo izvan ovog ciklusa, i sada ce praviti tu promenljivu samo jednom,

62
00:03:31,295 --> 00:03:38,291
I svaki put kad naidje na tu promenljivu x koristice istu. Trenutno poslednja vrednost sto smo joj odredili je "11".

63
00:03:38,291 --> 00:03:41,757
Tako da ce uvek biti 11. I sada magija nastupa.

64
00:03:41,757 --> 00: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.

65
00:03:52,984 --> 00:03:54,931
Radi!

66
00:03:54,931 --> 00:04:02,823
Osim sto je zamazan. Ako se pitate zasto izgleda ovako, razlog je sto smo zaboravili da nacrtamo pozadinu unutar ovog ciklusa.

67
00:04:02,823 --> 00:04:07,147
Crta haute ali mozete videti da su stari auti ispod novih.

68
00:04:07,147 --> 00:04:12,190
Ako premestim ovu liniju na vrh ovog ciklusa, evo ovako,

69
00:04:12,190 --> 00:04:15,984
I pritisnem "restart" da mogu opet da vidim moj auto…

70
00:04:15,984 --> 00:04:18,269
Perfektno!

71
00:04:18,269 --> 00:04:22,386
Ako hocemo da auto ide brze, samo promenimo za koliko cemo povecati vrednost od x svaki put.

72
00:04:22,386 --> 00:04:28,862
Ako stavimo 10, wow! Nestade sa ekrana! Mogu da napravim cak i negativno, "x - 10" i…

73
00:04:28,862 --> 00:04:34,552
Evo dolazi! Stavim pozitivno opet, ups…evo.

74
00:04:34,552 --> 00:04:36,550
Sta je vazno da se zapamti:

75
00:04:36,550 --> 00:04:43,513
Ova stvar ovde se zove "draw loop". Treba da unutar toga stavite kod crteza kako bi se uzastopno crtao.

76
00:04:43,513 --> 00: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.

77
00:04:52,015 --> 00:04:55,854
I onda unutar "draw loop", tacno ovde, promenicemo promenljive za malo.

78
00:04:55,854 --> 00:05:02,315
obicno koristeci njihovu staru vrednost, plus neki broj, pozitivan ili negativan broj.

79
00:05:02,315 --> 00:05:07,934
I na kraju, koristite vasu promenljivu negde u kodu crteza, tako da crtez svaki put izgleda drugacije.

80
00:05:07,934 --> 99:59:59,999
I to je sve!