PRIMER KOSOG HICA U PROCESSING-U. FUDBAL IGRICA

Da bi prethodno kreiranu animaciju kosog hica iskoristila i napravili kretanje lopte za "fudbal igricu", potrebno je da dodamo slike u scatch. Potrebno je preuzeti slike pozadine npr. sliku stadiona i slika koja će predstavljati loptu(fudbal). Slike možete preuzeti sa sajta:
pixabay.com/

Posle ovih promena animacija fudbal igrice bi trebalo da izgleda kao što je prikazano u nastavku:

Animacija ne radi? Učitajte stranicu ponovo(refresh)

Dodavanje slika unutar scatch-a u processing-u

Slike je najbolje kreirati unutar foldera pod imenom "data", a koji treba da se nalazi unutar korenog foldera aplikacije. Možete kreirati ovaj folder samostalno unutar file explorer-a ili iz PDE okruženja:

Slika 1: Dodavanje slika u processing-u

Dodaćemo dve slike unutar "data" foldera i dati im prikladno ime:

Slika 2: Dodavanje slika u processing-u. Data folder

Ove slike će unutar scatch-a biti kao objekti klase PImage.
Dodajmo prvo sliku pozadine. Unutar glavnog scatch-a treba prvo deklarisati objekat koji će predstavljati pozadinsku sliku, a klase PImage (pozadina). Zatim ćemo dovršiti kreiranje ovog objekta unutar setup metode, a pomoću processing-ove metode loadImage("stadion.jpg) kojoj treba proslediti naziv fajla pozadinske slike sa odgovarajućom ekstenzijom i na kraju postaviti sliku unutar draw metode pomoću processingove metode background(pozadina), kao što se može videti na sledećoj slici (podvučeno crvenom linijom):

Slika 3: Dodavanje pozadinske slike u processing-u

Veličina slike treba da bude ili ista kao i veličina okvira definisanog metodom size, ili ako nije ista, onda metodom resize podesiti da veličina slike bude ista kao veličina okvira. U ovom primeru su obe veličine, slike i okvira, podešene na 1200 * 654 pixela.

Dodavanje slike lopte(fudbala)

Slično kao i za sliku pozadine, potrebno je deklarisati PImage objekat, kreirati objekat unutar setup metode korišćenjem processingove loadImage() metode i na kraju, unutar draw metode, podesiti veličinu slike, a zatim i iscrtati sliku.
Kreiranje slike lopte najbolje je uraditi unutar klase Lopta, tako da se kod za iscrtavanje slike lopte u ovom slučaju piše u render metodi klase Lopta, a poziva iz glavnog scatch-a, iz draw metode. Nov kod, u klasi Lopta je podvučen zelenim linijama, što se može videti na slici ispod:

Slika 4: Dodavanje slika u processingu - slika lopte

Nože se uočiti da je mod za crtanje slike, postavljen na CENTER, , a u pozivu image() metode, prosleđena prva dva parametra odgovaraju x i y koordinati položaja, što znači da će to u ovom slučaju biti centar slike,. Širina i visina okvira slike će biti jednaki prečniku kruga, što je definisano 3. i 4. parametrom koji se prosleđuje metodi image().

Pomeranje linije tla

Vidimo da je kao pozadinska slika stavljena slika stadiona koja predstavlja stadion u 3D prostoru, dok mi kreiramo igricu u 2D, pa lopta koja opisuje kosi hitac to izvršava u ravni normalnoj na tlo terena. Lopta se odbija o donju ivicu okvira , a ne u liniji koja bi prolazila na onoj visini na kojoj se nalaze golovi. Zbog toga, da bi delovalo da lopta leti ka golu, pomerićemo liniju tla da ide po sredini gola. Uvešćemo konstantu VISINA_TLA i ovu vrednost postaviti na 180px. Ova vrednost se po potrebi može menjati. Promenićemo graničnu vrednost za odbijanje tako da se lopta odbija kad dođe na visinu linije tla. Slika animacije bi izgledala kao na slici ispod:

Slika 5: Fudbal igrica u processing-u. Pomeranje linije tla

Kod koji treba promeniti obojen je crvenom bojom i prikazan ispod. Unutar glavnog scatch-a:

Slika 6: Fudbal igrica u processing-u. Dodavanje visine tla

Promena unutar klase Lopta:

Slika 7: Fudbal igrica u processing-u. Promena graničnih uslova

Simulacija šuta lopte. Definisanje slučajne vrednosti intenziteta i pravca vektora početne brzine lopte

Da bi simulirali šut lopte, definisaćemo vrednost intenziteta vektora početne brzine, kao i pravac pomoću random funkcije.
Pravac možemo da definišemo preko nagiba vektora početne brzine u odnosu na pravac x ose.
Random funkcija je objašnjena na web strani: processing.org/reference/random_.html

X komponenta brzine i vrednost ugla se dobijaju kao slučajne vrednosti, a y komponenta brzine se može odrediti iz trougla koji zaklapa vektor brzine sa svojim komponentama, a preko tangensa ugla.(videti u kodu, na slici ispod). Ove vrednosti se računaju dva puta: prvi put unutar setup metode, a drugi put unutar reset metode u klasi Lopta. Na sledećim slikama su prikazane ove izmene i podvučene su crvenim linijama:

Slika 8: Fudbal igrica u processing-u. Promena vektora početne brzine. Upotreba random metode.

Unutar klase Lopta se menjaju reset metoda i metoda granicniUslovi, što se može videti na sledećoj slici:

Slika 9: Fudbal igrica u processing-u. Promene u klasi Lopta

Sada, kada lopta dođe do granice okvira levo ili desno, umesto da se odbije, simulira se novi šut, pozivom reset() metode. Ove granice su pomerene za 100px izvan vidljivog dela aplikacije.

Translacija i rotacija koordinatnog sistema u processing-u

U primeru kosog hica lopte, slika lopte je iscrtana na rastojanju definisanom vektorom položaja u odnosu na koordinatni početak O, koji se nalazi u gornjem levom uglu ekrana, kao što se može videti na slici ispod(slika 10). Pomeranje objekata koji se iscrtavaju se mogu izvršiti i tako što se koordinatni sistem translatorno pomeri za određene vrednosti x i y u ravni za iscrtavanje(x1-O1-y1), a da se onda položaj objekta definiše u odnosu na novi koordinatni sistem. To se takođe može videti na sledećoj slici(slika 10).

Slika 10: Translacija koordinatnog sistema u Processing-u

Translacija koordinatnog sistema u Processing-u se izvršava pozivom translate metode processinga, gde se kao parametri prosleđuju x i y koordinate položaja centra lopte. U našem primeru koordinate položaja se čuvaju u promenljivoj "polozaj" i ovu translaciju treba izvršiti u metodi render() u našem slučaju, kao što je prikazano u kodu na slici 11.

Slika 11: Fudbal igrica -Translacija i rotacija u Processingu-kod.

imageMode je postavljeno na CORNER, što znači da će vrednosti koje se šalju kao prva dva parametra metodi image(), predstavljati koordinate ugla slike. S obzirom da je koordinatni početak premešten u centar lopte (polozaj.x, polozaj.y), onda je ugao slike pomeren za r i po x i po y osi. Širina i visina okvira slike su jednake prečniku lopte(2*r), što je predstavljeno 3. i 4. parametrom u pozivu image() metode processing-a. Ove promene položaja koordinatnog sistema su privremene, tj. važile bi samo za iscrtavanje slike lopte, a ne i za eventualno dalja iscrtavanja unutar render metode. To je obezbeđeno pozivima pushMatrix(), na početku promena, a popMatrix() na kraju, tako da se koordinatni sistem posle poziva popMatrix() vraća u početno stanje. Više objašnjenja o upotrbi pushMatrix() i popMatrix() pročitajte na web lokaciji: learningprocessing.com/examples/chp14/example-14-17-nested-push-pop

Da bi kretanje lopte što vernije bilo prikazano, potrebno je uvesti rotaciju lopte tokom vremena za neki ugao(fi). Kao što se koordinatni sistem može translirati, privremeno(upotreba pushMatrix() i popMatrix()) ili do kraja izvršenja draw metode, može se takođe, koordinatni sistem u kojem se lopta iscrtava, rotirati za neki ugao pre nego što dođe do samog iscrtavanja. To radi metoda rotate() kojoj se kao parametar prosleđuje ugao rotacije(fi) u radijanima. Lopta će se onda rotirati oko ose normale na 2D ravan u kojoj se iscrtava animacija, a koja prolazi kroz trenutni koordinatni početak. Dodatak koda u render() metodi koji vrši rotaciju se vidi na slici 11, a položaj koordinatnog sistema koji je zarotiran, je prikazan u nastavku, na slici br. 12.

Slika 12: Rotacija koordinatnog sistema u Processing-u

Ukoliko se pre rotacije, ne translira koordinatni sistem, onda bi se rotacija izvršila oko ose koja prolazi kroz tačku u gornjem levom uglu ekrana, jer bi onda to bio koordinatni početak, ako u međuvremenu ne bi bio premešten nekom drugom translacijom.
Promena, ugla fi se vrši u metodi kretanje, a početna vrednost zadaje u konstruktoru, što se može viditi na sledećoj slici:

Slika 13: Processing -Dodavanje ugaone brzine, ugla rotacije i njihove promene

Promena ugla je za vrednost ugaone brzine u rad/s, definisane kao promenljiva w. Izračunavanje ugaone brzine w će se izvršiti kad se lopta odbije o tlo, jer je potrebna vrednost vektora v u tom trenutku. Kod je prikazan na slici 14.

Slika 14: Processing -Fudbal igrica, Izračunavanje ugaone brzine.

Ugaona brzina se izračunava tako što se posmatra da sve tačke na lopti rotiraju oko jedne nepokretne tačke(trenutni pol rotacije), a to je tačka dodira lopte sa tlom(vidi ravno kretanje krutog tela).

Animacija fudbal igrice bi sada trebalo da izgleda kao što je prikazano u nastavku:

Prethodno
|< Kosi hitac u Processing-u