OSNOVE PROCESSINGA SA JAVA PROGRAMSKIM JEZIKOM
Crtanje osnovnih geometrijskih oblika u processing-u
Da bi ste nacrtali osnovne oblike: liniju, elipsu(krug) i pravougaonik, potrebno je kreirati novi sketch , dodati metode setup i draw, a zatim uraditi sledeće sledeće:
Podesiti u setup metodi(izvršava se jedan put) veličinu ekrana, boju pozadine, boje za crtanje linija konture( može i u draw metodi):
Podesiti u setup metodi(izvršava se jedan put) veličinu ekrana, boju pozadine, boje za crtanje linija konture( može i u draw metodi):
void setup()
{
{
size(600,600); //veličina ekrana
background(200,50,30); //boja pozadine
stroke(255); //boja linije
}background(200,50,30); //boja pozadine
stroke(255); //boja linije
Unutar metode za crtanje(draw) definisati boje ispune za krug i pravougaonik a zatim ih nacrtati:
void draw()
{
{
line(125,100,300,400); //crta liniju između tački A(125,100) i B(300,400)
fill(color(200,45,255)); //boja ispune za krug
ellipse(200,200,50,50); //crta krug
fill(25,45,200); //boja ispune za pravougaonik
rect(300,300,100,50); //crta pravougaonik
}fill(color(200,45,255)); //boja ispune za krug
ellipse(200,200,50,50); //crta krug
fill(25,45,200); //boja ispune za pravougaonik
rect(300,300,100,50); //crta pravougaonik
Detalnije o crtanju osnovnih oblika pročitajte u originalnom tutorijalu za processing:
https://processing.org/tutorials/overview/#overview
Posle pokretanja:
https://processing.org/tutorials/overview/#overview
Posle pokretanja:
Slika 1: Processing Java - kreiranje osnovnih geometrijskih oblika
Kreiranje osnovnih geometrijskih oblika od početka
Video-tutorijal
Pokrenimo processing 4 i kreirajmo novi sketch pod imenom „HorizontalnoKretanjelopte“ i dodajmo dve prepravljene metode setup i draw.
Unutar setup metode inicijalizovaćemo promenljivei postaviti početna podešavanja. Veličina ekrana je postavljena na 400,400.
Da bi mogli da pomeramo loptu duž X ose uvešćemo promenljivu x i dati joj početnu vrednost nula.
Unutar setup metode inicijalizovaćemo promenljivei postaviti početna podešavanja. Veličina ekrana je postavljena na 400,400.
Da bi mogli da pomeramo loptu duž X ose uvešćemo promenljivu x i dati joj početnu vrednost nula.
Slika 2: Processing Java primer - Horizontalno Pomeranje Lopte
S obzirom da se setup metoda poziva samo jednom, a metoda draw na svakih frameRate sekundi unutar setup metode samo postavljamo početna podešavanja, dok se sve ono što treba da se ponavlja stavlja unutar draw metode.
Pre iscrtavanja kruga metodom ellipse, iscrta se boja pozadine(background(0), u ovom slučaju crna, podesi se boja linija(crvena) kao i debljina linija na(2 px). Više o bojama pročitajte na webstrani processing-a: processing.org/tutorials/color
Pre iscrtavanja kruga metodom ellipse, iscrta se boja pozadine(background(0), u ovom slučaju crna, podesi se boja linija(crvena) kao i debljina linija na(2 px). Više o bojama pročitajte na webstrani processing-a: processing.org/tutorials/color
U ovom primeru je definisana promenljiva frameRate, mada postoji i processing-ova(definisana u nasleđenoj PApplet) klasi i njena vrednost zavisi od računara, a obično ima vrednost 30 ili 60, što znači da se, ukoliko se promeni na 20, kao što je u prikazanom primeru, broj poziva metode draw 20 puta u sekundi(vreme promene dt=0.05s).
Početno iscrtavanje kruga je na sredini okvira tj. na koordinati (width/2, height/2). Ako dodamo vrednost promenljive x na width/2, kao u primeru, lopta će se pomeriti još za onoliko kolika bude vrednost te promenljive u tekućem pozivu draw metode.
Da bi se ova lopta pomerala, moramo menjati x promenljivu tokom vremena(x +=2).
Ako pokrenemo aplikaciju videćemo pomeranje lopte u pravcu x i to pozitivnom smeru, kao što je pokazano na sledečoj slici:
Početno iscrtavanje kruga je na sredini okvira tj. na koordinati (width/2, height/2). Ako dodamo vrednost promenljive x na width/2, kao u primeru, lopta će se pomeriti još za onoliko kolika bude vrednost te promenljive u tekućem pozivu draw metode.
Da bi se ova lopta pomerala, moramo menjati x promenljivu tokom vremena(x +=2).
Ako pokrenemo aplikaciju videćemo pomeranje lopte u pravcu x i to pozitivnom smeru, kao što je pokazano na sledečoj slici:
Slika 3: Processing Java primer - Horizontalno Pomeranje Lopte pokretanje
Da bi kretanje realnije predstavilo kretanje, kakvo je u prirodi, uvedena je RAZMERA, koja predstavlja odnos broja piksela koji predstavljaju širinu okvira sa brojem metara u prirodi koji bi bio prikazan ovom animacijom. Red
x += 2
je zamenjen
x +=(brzina/frameRate)*RAZMERA
Ako se uvede promenljiva koja predstavlja brzinu kretanja npr 1m/s onda bi promena dužine bila za 1, ali za 1s, a pošto je vreme između 2 poziva draw metode frameRate puta manje onda je promena dužine x za brzina/frameRate.
Ovo bi bila promena u metrima, a da bi dobili u pikselima treba ovu vrednost pomnožiti sa RAZMERA.
x += 2
je zamenjen
x +=(brzina/frameRate)*RAZMERA
Ako se uvede promenljiva koja predstavlja brzinu kretanja npr 1m/s onda bi promena dužine bila za 1, ali za 1s, a pošto je vreme između 2 poziva draw metode frameRate puta manje onda je promena dužine x za brzina/frameRate.
Ovo bi bila promena u metrima, a da bi dobili u pikselima treba ovu vrednost pomnožiti sa RAZMERA.
Dodavanje uslova
Da bi se lopta odbila o desni i levi "zid", kada dođe do kraja okvira i promenila smer kretanja, potrebno je dodati uslove
if(x>width-50 || x<0)
{
{
brzina *= -1;
}Dakle kod sada treba da bude:
Slika 4: Processing Java primer - Horizontalno Pomeranje Lopte sa uslovima
Programiranje kretanja lopte u XY ravni na objektno orijentisani način
Video-tutorijal
Transformišimo sada prethodni primer sa upotrebom klasa i objekata, odnosno sledeći principe objektno orijentisanog programiranja
Unutar setup metode inicijalizovaćemo objekte i postaviti početna podešavanja. Kreiraćemo objekat loptice. Deklaracija objekta l1(lopte)je van metode.
float x;
int frameRate=20;
float brzina=5;//m/s
static final float RAZMERA=40;//40px=1m
Lopta lopta1;
void setup (){
int frameRate=20;
float brzina=5;//m/s
static final float RAZMERA=40;//40px=1m
Lopta lopta1;
void setup (){
size(400,400);//10m * 10m u prirodi
}
Otvorimo nov tab i kreirajmo nov skatch pod nazivom „Lopta“. Unutar njega kreiramo klasu sa istim nazivom:
Kreirajmo klasu Lopta i tamo ćemo prebaciti sve podatke i metode koji se tiču lopte:
Kreirajmo klasu Lopta i tamo ćemo prebaciti sve podatke i metode koji se tiču lopte:
Slika 5: Processing Java primer - Horizontalno Pomeranje Lopte. Klasa Lopta
Ovde vidimo atribute, konstruktor kao i metodu "kretanje", koja služi za pomeranje loptice u jednoj iteraciji( promene stanja između dva frejma). Metoda kretanje se može dodati kasnije kada se bude prešlo na implementaciju pomeranja lopte.
Unutar glavnog sketcha treba dodati unutar metode draw poziv funkcija kretanje kao što se može videti u sledećem kodu:
Unutar glavnog sketcha treba dodati unutar metode draw poziv funkcija kretanje kao što se može videti u sledećem kodu:
Slika 6: Processing Java primer - Horizontalno Pomeranje Lopte. KretanjeKrugaXYObjektno
Lopta se kreira pozivanjem konstruktora sa parametrima i prosleđivanjem poluprečnika i koordinata položaja kvadrata u koji je upisana lopta.
U daljem kodu nema bitnih izmena osim što se atributima objekta lopta pristupa preko objekta l1.
Čitaocu je ostavljeno da samostalno doda kretanje i po Y osi, kao i potrebne uslove, tako da se lopta odbija od gornje i donje ivice okvira.
U daljem kodu nema bitnih izmena osim što se atributima objekta lopta pristupa preko objekta l1.
Čitaocu je ostavljeno da samostalno doda kretanje i po Y osi, kao i potrebne uslove, tako da se lopta odbija od gornje i donje ivice okvira.
Eksportovanje aplikacije u processing-u
Da bi se aplikacija mogla startovati izvan PDE okruženja, potrebno je da se eksportuje, a to se može uraditi sledećon komandom:
File -> Export Application
File -> Export Application
Igrica "Pong"
Povezivanje processinga, kretanje lopte i pomeranje pravougaonika, čije se kretanje može uraditi pomoću događaja tastature, ali i vezom sa mikro:bit-om najbolje ilustruje igrica "Pong".
Pogledajte kako se kreira igrica, u videu, koji se prikazuje u nastavku:
Pogledajte kako se kreira igrica, u videu, koji se prikazuje u nastavku:
|
Prethodno
|< Processing - uvod |
Sledeće
Processing i mikrobit >| |