Choose jour language!

---

|

ANALIZA KLIZANJA TELA NIZ STRMU RAVAN - PRIMER U PROCESSING-U

Primer treba da izgleda kao što je prikazano na animaciji ispod:

Moving body trough inclined plaine

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

← scroll horizontal →

Prethodno opisanoj osnovnoj animaciji klizanja tela niz strmu ravan, gde korisnik može samo da posmatra, a ne i da utiče na animaciju, sada je pridodata mogućnost da se pomeranjem kvadratića u vrhu strme ravni povećava ili smanjuje visina iste, samim tim se menja i ugao nagiba. Takođe su dodate i sledeće funkcionalnosti: mogućnost resetovanja za varijantu desktop i mobilnog uređaja, kao i prikaz osnovnih veličina, pomoću iscrtavanja teksta na ekranu. Da bi se animacija ugradila u web stranu, dodat je i javascript kod koji poboljšava funkcionalnost. Kod koji je opisan u osnovnoj varijanti animacije, preuređen je za prevođenje u javascript pomoću javascript fajla: processing.js .

Opis za upotrebu prikazane animacije:

1) Selektovanje i deselektovanje kvadratića. Klikom mišem(događaj mouseClick) ili pritiskom prsta(događaj touchStart) na kvadratić u uglu strme ravni, isti postaje selektovan i tada je obojen crvenom bojom. Klikom bilo gde na animaciju, van kvadratića, isti će se deselektovati. 
2) Pomeranje kvadratića(promena visine strme ravni). Posle selektovanja, kvadratić  se može pomeriti na nekoliko načina u zavisnosti od uređaja: Na desktop računaru ili tabletu, ako se koristi miš, može se prevući(mouseDragged) mišem po Y osi i promeniti položaj, a samim tim i visina strme ravni, ili jednom kliknuti iznad ili ispod prethodnog položaja kvadratića. Ako je podržan rad sa tastaturom, klikom na strelice UP ili DOWN, takođe se može menjati visina H, strme ravni. 
Na mobilnim uređajima i tabletima može se nakon selektovanja prstom pomerati kvadratić(događaj touchMove).
Kako se menja položaj kvadratića, menja se visina H strme ravni, kao i nagib. U podrazumevanom položaju, za definisane veličine:

F_tr = μ * N;

gde je
koeficijent trenja μ = 0,2 i
masa m = 1kg
sila trenja F_tr = μ * N;
ne dozvoljava da se telo kreće, jer za početni nagib od α = 4,^o
koji se dobija pomoću formule
α = atan(H/L);
sila gravitacije duž kose ravni nije dovoljno velika da savlada silu trenja

Povećavanjem visine strme ravni, menja se i intenzitet ove komponente sile gravitacije(težine tela), tako da će u jednom trenutku ona postati veća od sile trenja i tada će telo početi da kliza niz strmu ravan. Dakle uslov pri kome dolazi do klizanja je: 

F_a >= F_tr,
gde je F_a komponenta sile gravitacije duž strme ravni

3) Resetovanje. Animacija se može resetovati ili klikom na 'r' dugme na tastaturi(desktop i tablet), ili duplim klikom prstom na animaciju(mobilni uređaji i tableti). Prilikom resetovanja, veličine će se vratiti na početne i ponovo pokrenuti petlja za iscrtavanje, ali se će visina ravni ostati ona poslednje promenjena. Da podsetimo, kada se telo spusti do graničnog položaja na dnu strme ravni, petlja se zaustavlja.
4) Ispis teksta. Da bi se iscrtao tekst, prvo je potrebno kreirati font f(PFont). Zatim metodom textFont(f) (iz osnovne biblioteke processing-a) treba postaviti prethodno kreirani font, prosleđujući ga kao parametar metodi textFont(). Na kraju se ispisivanje vrši takođe processingovom metodom text(textZaIspis, x,y) , gde se kao parametri prosleđuju tekst koji treba da bude ispisan i položaj tog teksta na ekranu, dat poslatim koordinatama x i y.

Analiza kod-a

S obzirom da PShape objekat i sve vezano za iscrtavanje oblika na ovaj način nije podržano u javascript-u, ovo je moralo da se uradi na drugi način, što će biti prikazano u narednim slikama. Stari kod je samo iskomentarisan da bi se mogla napraviti razlika sa novim kodom. U slučaju upotrebe aplikacije na desktop računarima, može se koristiti PShape. Posmatrajmo, prvo, promene u klasi Telo, koje su prikazane na slici ispod:

Slika 1: Analiza klizanja tela niz strmu ravan primer koda -klasa Telo(1)

Vidimo da je objekat tela deklarisan kao PShape iskomentarisan, jer kao što je već pomenuto, ovaj kod će biti otpremljen na website i tamo iskompajliran kao javascript, a PShape u tom slučaju nije podržan, Umesto toga telo će se kreirati koristeći beginShape() - vertex- endShape(). Kako se kreira sopstveni(custom) shape objekat, pročitajte na strani:
 processing.org/reference/beginShape_.html

U glavnom delu scatch-a deklarisane su promenljive: ugao nagiba strme ravni fi, vektori položaja, brzine v, ubrzanja a, komponenta sile težine tela duž kose ravni Tx, Normalna sila kojom telo deluje na podlogu N, rezultantna sila Fr, masa m i koeficijent trenja. U konstruktoru su kreirani vektori do kraja i postavljene početne vrednosti sa komponentama čiji su intenziteti jednaki nuli.
.

Slika 2: Analiza klizanja tela niz strmu ravan primer koda -klasa Telo(2)

Unutar metode sile() kreiraju se vektori sila koji utiču na kretanje tela. Definišu se: Tx - komponenta sile u x pravcu, tj. pravcu paralelnom kosoj ravni, reakcija podloge N, sila trenja tr i na kraju rezultanta Fr. Sila trenja ima pravac vektora brzine, zbog toga se prvo kreira na osnovu tog vektora. Funkcija normalize() svodi taj vektor na jedinični. Zatim se skalarno vektor množi sa -1 funkcijom mult, jer ima smer suprotan smeru vektora brzine. Na kraju se množi sa intenzitetom, koji se računa kao proizvod koeficijenta trenja i intenziteta normalne sile na podlogu. Više o vektorima i funkcijama klase PVector možete pročitati na strani: Vektori u Processing-u

Rezultanta Fr se izračunava, kada je zadovoljen uslov da telo počinje da se kreće, a to će se desiti kad komponenta sile trenja u x pravcu postane veća od sile trenja Tx.mag()>trenjeInt

Slika 3: Analiza klizanja tela niz strmu ravan primer koda -klasa Telo(3)

U nastavku klase Telo vide se još 3 metode na slici 3: kretanje(), render() i reset().
Metoda kretanje() definiše promene ubrzanja, brzine i položaja tela između dva poziva draw() metode tj. na svakih 1/FrameRate sekundi. 
Promena ubrzanja je izazvana promenom rezultantne sile, koja ovo ubrzanje izaziva: a=PVector.div(Fr/m) tj. (a=Fr/m - 2. Njutnov zakon).
S obzirom da su mere u px a ne u metrima, koristi se razmera da bi animacija bila realnija.
Promena ubrzanja, dalje izaziva promenu brzine, a promena brzine, dalje promenu položaja, čije se izračunavanje vidi u nastavku metode kretanje().
metoda granicniUslovi nije promenjena u odnosu na osnovnu varijantu zadatka.
Metoda reset(), vraća fizičke veličine na početne vrednosti, onako kako su bile definisane i u konstruktoru.
Glavni deo scatch-a se može videti na slikama 4-11.

Slika 4: Analiza klizanja tela niz strmu ravan primer koda -glavni scatch(1)

I ovde su objekti koji su u osnovnoj verziji bili kreirani kao PShape objekti(iskomentarisano), sada kreirani sa beginShape() i endShape().To su objekti koji predstavljaju tlo i kvadratić (M) pomoću koga se menja visina strme ravni. Ostale promenljive koje su deklarisane kao globalne su redom: visina kose ravni H, Dužina strme ravni L(H i L su katete pravouglog trougla koji predstavlja strmu ravan obojenu zelenom bojom na animaciji, dok je sama ravan hipotenuza trougla).
Dalje su definisani: ugao nagiba-ugao(greška, ovaj red treba obrisati), telo koje kliza-telo, w i h su širina i visina tela,  fi-ugao nagiba strme ravni u radijanima.
Logičke promenljive stop i pritisnuta, govore o tome, da li je telo došlo do dna strme ravni i animacija pri tome zaustavljena, dok se promenljiva pritisnuta odnosi na selekciju kontrolne tačke(kvadratić M), da li je ili nije selektovana. Kada je selektovana, može se pomerati prevlačenjem miša, gore ili dole, i  time povećavati ili smanjivati visina strme ravni.
Konstante G, RAZMERA i BROJ_FREJMOVA definišu gravitacionu konstantu, razmeru(px/m) i broj frejmova u sekundi, redom.
Definisane su još i promenljive f, događaj i pY. Promenljiva f se koristi da definiše font za ispisivanje teksta po ekranu. String promenljiva dogadjaj prikazuje vrstu događaja(npr. mouseClick), koji se kao tekst prikazuje na animaciji(videti u nastavku na slici 6).
Promenljiva pY pamti prethodnu vrednost za Y koordinatu položaja kontrolne tačke M.
Na slici 4 se vidi i deo setup() metode.Ovaj deo je objašnjen u osnovnoj verziji animacije.

Slika 5: Analiza klizanja tela niz strmu ravan primer koda -glavni scatch(2)

U nastavku, na slici 5 se vidi kompletna setup() i deo draw() metode. Ovde takođe vidimo kod koji je iskomentarisan i koji se ranije odnosio na objekte tlo i kontrolnog kvadratića M. U setup() metodi, posle kreiranje tela kao objekta klase Tacka, poziva se metoda ugaoNagiba() koja izračunava ugao nagiba na osnovu visine i dužine tla H i L.
Zatim se kreira font f, definiše tekst za prikaz događaja i izračunava početna vrednost y koordinate na kojoj se nalazi telo.
​Unutar draw() metode, posle postavljanja boje pozadine i boje za ispunu vidi se početak beginShape(TRIANGLE_STRIP). Ovo će kreirati i iscrtati tlo. Ovo se dalje prikazuje u nastavku(slika 6).

Slika 6: Analiza klizanja tela niz strmu ravan primer koda -glavni scatch(3)

Na slici 6. Vidi se deo draw() metode koji kreira i iscrtava tlo, kao i kontrolni kvadratić M. Za tlo se između beginShape(TRIANGLE_STRIP) i  endShape(CLOSE), definiše prvo boja ispune sa metodom fill() i u ovom slučaju je to zelena boja, a zatim se pomoću vertex() metode crtaju linije između tačaka trougla. Koordinate tačaka se definišu kao parametri u pozivu vertex metode. Parametar CLOSE unutar endShape() govori da je reč o zatvorenom poligonu koji se iscrtava i u ovom slučaju je reč o trouglu jer postoje samo 3 tačke. Za razliku od tla za iscrtavanje kvadratića vertex je pozvana 4 puta između beginShape(QUAD) i endShape(CLOSE).
Indikatori TRIANGLE_STRIP i QUAD govore o tome da se površina trougla(tlo) i kvadrata(M) dobijaju spajanjem uzastopnih pravouglih trouglova, odnosno kvadrata. 
Pre crtanja kvadratića M, izvršena je translacija koordinatnog sistema od gornjeg levog ugla ekrana do vrha tla tj. za vrednost height-H-h/2.
To znači da se koordinate za crtanje tačaka kontrolnog kvadratića mere sada u novom koordinatnom sistemu. Ove promene će služiti za iscrtavanje kvadratića, ali će se stanje posle toga vratiti na staro, jer je ovaj kod pisan između pushMatrix() i popMatrix().
Više o tome pročitajte u članku: processing.org/reference/pushMatrix_.html

Slika 7: Analiza klizanja tela niz strmu ravan primer koda -glavni scatch(4)

Na slici 7. je prikazana draw() metoda do kraja. U nastavku se između pushMatrix() i popMatriks() vrši priprema i iscrtavanje tela, kao i iscrtavanje osa trenutnog pokretnog koordinatnog sistema koji se kreće zajedno sa telom i ima koordinatni početak u centru tela.
Priprema se odnosi na rotaciju koordinatnog sistema za ugao fi, a zatim se redom pozivaju metode definisane u klasi telo: sile(), kretanje(), granicniUslovi(). Ove metode su ranije objašnjene. 
Pre iscrtavanja tela, pozivom metode render(), koordinatni sistem se pored prethodne rotacije, sada i dodatno translira do položaja iznad vrha tla, na početku kose ravni, odakle će telo zapravo početi da se kreće, tj. da klizi duž te ravni.
Koordinatni sistem se posle iscrtavanja tela, opet vraća na staro i tada se u nastavku ispisuje tekst na ekranu, pozivima metode text(). Upotreba metode text i postavljanje fonta opisana je u članku processing.org/reference/text_.html

Na kraju se proverava vrednost logičke promenljive stop. Ako je ona prethodno unutar metode granicniUslovi() postavljena na true, to je znak da je telo došlo do podnožja strme ravni i tada se zaustavlja petlja animacije i vrednosti fizičkih veličina postavljaju na početne, unutar metode reset(), koja se odavde poziva.

Slika 8: Analiza klizanja tela niz strmu ravan primer koda -glavni scatch(5). Događaj keyPress

U nastavku glavnog scatch-a definisana je metoda keyPressed() u kojoj su definisani pritisci na tastere 'r' - za resetovanje, UP - za povećanje visine strme ravni i DOWN- za smanjenje visine strme ravni. Sa promenom visine ravni H, menja se i ugao nagiba, pa je zbog toga pozvana istoimena metoda.

Slika 9: Analiza klizanja tela niz strmu ravan primer koda -glavni scatch(6). Događaji mouseClicked, mouseDraged. Metoda handleMove.

Metoda mouseClicked() se poziva kada je kliknut taster miša na desktop računaru ili tabletu ili pritiskom prsta na ekran kod mobilnih uređaja i tableta, ako nije podešeno da se isključi podrazumevano ponašanje pri dodiru ekrana, a to je da se podrazumevano poziva i mouseClicked(). Ovo se može postiće pozivom evt.preventDefault(); u javascript-delu aplikacije, gde je evt ojekat klase TouchEvent.
Više o tome pročitajte u članku: developer.mozilla.org/en-US/docs/Web/API/Touch_events

Deo javascript cod-a će biti prikazan u nastaku ovog članka.
Metoda handleMove(float dH) se poziva iz pomenutog javascript-a. Ona promenu visine strme ravni za vrednost dH koja se kao parametar prosleđuje ovoj metodi, a određuje se takođe unutar javascript-a.

Slika 10: Analiza klizanja tela niz strmu ravan primer koda -glavni scatch(7). Događaji touchStart. Metoda handleDbClick, promeniH(), isPritisnuta().

Na slici 10. se mogu videti metode promeniH(), setPritisnuta() i reset() koje su same po sebi jasne čemu služe. Metoda touchStart() se poziva iz javascript koda kada korisnik pritisne prstom ekran. Vrednosti parametra mx i my su koordinate tačke ekrana koju je korisnik dodirnuo. Unutar metode se određuje da li se ova tačka nalazi u kontrolnom kvadratiću ili ne i prema tome postavlja promenljivu pritisnuta na true ili na false.
Metoda handleDbClick() predstavlja handler metodu koja se poziva iz javascript-a kad korisnik brzo klikne 2 puta za redom. i radi isto što i metoda reset() koja se poziva kad korisnik pritine 'r' tipku na tastaturi.

Javascript kod u aplikaciji koja opisuje animaciju klizanja tela niz strmu ravan: "StrmaRavanObjektno"

Javascript cod se nalazi u fajlu main.js i prikazan je u delovima na slikama 11-14.
​

Slika 11: Analiza klizanja tela niz strmu ravan primer koda -main.js (1).

Unutar startup() metode koja se poziva kad se učita deo stranice i ispali događaj DOMContentLoaded što je prikazano u liniji 19 na slici 11, registruju se događaji: touchStart, touchEnd, touchCancel i touchMove, koji se ispaljuju kada korisnik pritisne (touchStart), završi pritisak na tačku ekrana (touchCancel ), kada pomera prst po ekranu (touchMove) i kada to isto završi (touchEnd).
Više o tome pročitajte u članku: developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented

Slika 12: Analiza klizanja tela niz strmu ravan primer koda -main.js (2). Metode tapEvent i handleStart

Metoda tapEvent se poziva ili kad je korisnik pipnuo ekran jedan put ili dva puta brzo(dvoklik). Ako objekat clickTimer nije null proverava se da li je vreme između dva klika manje od 500ms(dvoklik). Ako je prvi put dodirnut ekran, ovo vreme je sigurno veće od 500 i onda će se izvršiti ugnježdena funkcija u kojoj se postavi objekat clickTimer  na null i pozove handleStart koja je zadužena za reakciju ako je samo jednom dodirnut ekran. U slučaju ponovljenog dodira, s obzirom da je sada clickTimer null objekat, što znači reč je o dvokliku i izvršiće se deo koda pod else. Dalje se kod preusmerava na funkciju handleDbClick koja je ranije objašnjena.
Metoda handleStart kao parametar dobija TouchEvent objekat i u njoj se preispituje da li je logička promenljiva defaultPrevented jednaka true. Ako nije poziva se metoda evt.defaultPrevented() koja će sprečiti podrazumevano ponašanje kada se dodiruje ekran, a to znači da će se pozvati i mouseClick, a prilikom prevlačenja prsta, strana će se scrollovati a kontrolna tačka se neće pomerati i mouseMove događaj neće biti ispaljen. Više o tome pročitajte u članku: blog.mobiscroll.com/working-with-touch-events/

Podrazumevano pozivanje događaja se može regulisati i na druge načine, pomoću osobine cancelable, što se opisuje u članku: developer.mozilla.org/en-US/docs/Web/API/Event/cancelable

Canvas element u kome se izvršava animacija tj. processing kod se dobija u redu 45 na slici 12, metodom getElementById. Zatim se u sledećem redu dobije sam id i na osnovu njega processing instanca u redu 47, pomoću koje se mogu pozivati metode definisane u scatch-u processing-a.
Pomoću objekta evt se dobije niz prethodno dodirnutih tačaka: evt.changedTouches
​Koordinate tačke dodira se određuju u linijama 49 i 50.
S obzirom da je promenljiva touches niz, član niza(jedini) je touches[0], a pageX daje koordinatu x na html stranici, dok PageY daje y koordinatu u odnosu na stranicu. Canvas element može biti pomeren po x osi u odnosu na stranicu za veličinu OffsetLeft po x ili OffsetTop po y osi.
Posle izračunavanja koordinata dodira prsta u odnosu na Canvas, pomoću processing instance se poziva metoda touchStart, koja je ranije objašnjena.

Slika 13: Analiza klizanja tela niz strmu ravan primer koda -main.js (3). Metode handleMove, handleEnd, handleCancel

Unutar metde handleMove koja će biti pozvana kada korisnik "vuče" prst po ekranu, u slučaju da je uređaj tablet ili mobini uređaj, prvo se "pokupi" processing instanca na već opisan način. Zatim se preko nje proveri da li je promenljiva pritisnuta postavljena na true. U ovom slučaju se za pristup koristi getter isPritisnuta().
U slučaju da jeste, iz objekta događaja se preuzmu prethodno dodirnute tačke na canvas-u i smeste u konstantu touches(linija 81).
​Ako y==0 što je slučaj na početku, izračunava se prva vrednost y koordinate kontrolnog kvadratića, koji se koristi da upamti prethodni položaj i to samo y koordinatu.
U nastavku se izračunava promena y koordinate između tekućeg i prethodnog položaja kontrolnog kvadratića M(dH1).
Zatim se ta vrednost koristi kao parametar i prosleđuje pozvanoj  funkciji handleMove definisane u scatch-u aplikacije(.pde).
Processingova instanca se preuzima i unutar handleDbClick() metode i preko te instance poziva istoimena funkcija definisana u scatch-u aplikacije(.pde).
Ostale prikazane funkcije colorForTouch() i copyTouch() se ne koriste u ovoj aplikaciji i mogu se obrisati.

Slika 14: Analiza klizanja tela niz strmu ravan primer koda -main.js (4). Metode handleMove-nastavak, handleDbClick

---

Prethodno
​|< Strma ravan u Processing-u

Sledeće 
Animacija Kružnog kretanja >|

---