Uvod u Animaciju (Video Verzija)

Ovo je samo slika erkana od naseg interaktivnog predavanja o kodiranju, pripremljen za lakes prevodjenje. Bolje je da gledate nase predavanje ovde:
https://www.khanacademy.org/cs/programming/

Postoji nekoliko nacina da se nesto animira,

ali osnovni princip je uvek isti:

ako uzmes nekoliko crteza

gde je svaki malo drugaciji od prethodnog

i prelistas ih jako brzo

izgledace kao da se slika pomera.

U stara dobra vremena, svi crtezi su crtani rukom.

I trebalo je jako dugo da se napravi animacija od 3 sekunde.

Na nasu srecu, mi zivimo u buducnosti.

U sustini je vrlo lako da se kodiranjem napravi jednostavna animacija.

Pokazacu vam kako!

Na levoj strani, mozete videti slatki mali auto na lepoj zutoj pozadini.

Tacno, ja sam dizajnirala taj auto, hvala.

U svakom slucaju, ovde mi odredjujemo boju pozadine.

I auto nema obod, tako da pisemo noStroke() funkciju.

I onda ovde pravimo novu varijablu "x", pozicija auta, i dajemo joj vrednost 10.

Mozete videti da ako promenimo ovu vrednost,

to pomera auto napred nazad.

Stavimo 10.

Ovde odredjujemo boju auta, i crtamo pravougaonike koji predstavljaju auto.

Izgleda da je prvi pravougaonik za donji deo auta

a ovaj za gornji.

I onda ovde radimo istu stvar za tockove

Odredimo boju i nacrtamo dva kruga:

jedan na x + 25

i x + 75

Konacno smo dosli do novih stvari.

Ovo se zove definicija funckije.

Naucicete o tome kasnije.

Za sada, samo pogledajte i zapamtite kako izgleda.

Vazne stvari da primetite su rec "draw" i ove zagrade.

Ova otvorena zagrada

I ova zatvorena zagrada ovde.

Za ovo kazemo da se crtez vrti u krug, ili animacija se vrti u krug.

I sve sto stavite izmedju ovih zagrada se neprekidno vrti u krug vrlo, vrlo brzo.

Zato se zove loop - sto znaci da se bez prestanka vrti u krug.

A sve sto je van ovih zagrada se izvrsi samo jednom na pocetku programa.

Prvi korak u animaciji je da pomerite sve kodove crteza unutar zagrada.

Tako da ce crtez da bude nacrtan uzastopno nekoliko puta.

Hajmo uraditi to. Ja cu da povucem ceo ovaj kod crteza.

I ubacim ga ovde, izmedju zagrada

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.

I sada znam da je ovaj kod unutar zagrada.

Kao sto mozete videti sve izgleda isto, nista se nije promenilo.

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

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

I onda, "napravi novu promenljivu x, stavi vrednost 10, nacrtaj…" Identicna stvar

Nista se nije promenilo, necete videti nikakvu animaciju.

Samo crta identicne pravougaonike i krugove jedan preko drugog.

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

Tako da ako zelite da se kola pomeraju unapred

trebala bi da promenim vrednost od x promenljive, zar ne?

Da, hajmo da napravimo…11

Oh! Ne! Sada ce biti 11 svaki put.

Kako mogu da napravim da se vrednost od x menja kada kompjuter vrti samo isti kod?

Dobro, gledaj ovaj magicni trik:

Secas se, ova "var x" napravi novu promenljivu.

Kada to imamo unutar ovog kruga, svaki put pravi novu promenljivu "x".

Sta treba uraditi je staviti ovu promeljivu van ovog kruga. Tako ce je napraviti samo jednom.

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

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

I svaki put kad naidje na tu promenljivu x koristice istu. Trenutno poslednja vrednost sto smo joj odredili je "11".

Tako da ce uvek biti 11. I sada magija nastupa.

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.

Radi!

Osim sto je zamazan. Ako se pitate zasto izgleda ovako, razlog je sto smo zaboravili da nacrtamo pozadinu unutar ovog ciklusa.

Crta haute ali mozete videti da su stari auti ispod novih.

Ako premestim ovu liniju na vrh ovog ciklusa, evo ovako,

I pritisnem "restart" da mogu opet da vidim moj auto…

Perfektno!

Ako hocemo da auto ide brze, samo promenimo za koliko cemo povecati vrednost od x svaki put.

Ako stavimo 10, wow! Nestade sa ekrana! Mogu da napravim cak i negativno, "x - 10" i…

Evo dolazi! Stavim pozitivno opet, ups…evo.

Sta je vazno da se zapamti:

Ova stvar ovde se zove "draw loop". Treba da unutar toga stavite kod crteza kako bi se uzastopno crtao.

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

I onda unutar "draw loop", tacno ovde, promenicemo promenljive za malo.

obicno koristeci njihovu staru vrednost, plus neki broj, pozitivan ili negativan broj.

I na kraju, koristite vasu promenljivu negde u kodu crteza, tako da crtez svaki put izgleda drugacije.

I to je sve!