Programski jezici → Processing → Uvod u Processing

Uvod u Processing (Java)

Processing je okruženje koje je napravljeno kao dodatak za programiranje animacija kao i vizuelnih aplikacija, sa dobrom i lakom interakcijom sa korisnikom.

Processing je fleksibilan softverski okvir i razvojno okruženje, dizajniran prvenstveno za olakšavanje vizuelnog umetničkog izraza kroz programiranje. Njegova svrha je približiti programiranje umetnicima, dizajnerima, i ostalima bez prethodnog iskustva u kodiranju.

Pisan je u Javi i može se tretirati kao dodatak koji sadrži podršku tj. API sa funkcijama za kreiranje animacija i vizuelnih aplikacija. Zasniva se na pisanju nacrta-skice(skatch).

Processing je open source.

Ima svoje okruženje PDE(Processing Development Environment) za rad gde se može birati jezik u kome će se pisati kod. Može se i povezati sa Eclipse IDE ili nekim drugim razvojnim alatom za javu(IDE), tako što se biblioteke(library) koje sadrže processing dodaju u postojeće Javine biblioteke. U trenutku pisanja tutorijala koristi se Processing 4

API se sastoji od nekoliko biblioteka koje pored osnovnih funkcija podržavaju: slanje podatataka preko mreže, čitanje slika sa kamere, čuvanje slika u pdf formatu.

Processing je izvorno dizajniran da sa svojom jednostovnom sintaksom i brojnim mogućnostima za kreiranje grafike, slika i animacija, olakša developerima da razvijaju kreativne animirane i interaktivne aplikacije.

Koristi se i dalje u serverskim i desktop aplikacijama, ali ukoliko je potrebno neku animaciju ugraditi u websajt, bolje je koristiti javascript biblioteku za processing p5js.

Do verzije 3. je bilo moguće koristiti i processing verziju u javi, ali je bilo potrebno dodati prosessing.js skriptu unutar sajta. Razvoj i podrška za ovu skriptu je prestala da postoji i ne podržava verzije processing-a od 3 pa nadalje. Tako da, ako kreirate web aplikaciju kao .pde i želite da je ugradite u web stranicu, morate prvo da prepravite kod koji ste pisali u verziji processing 4 npr. pre nego što bi ste ga otpremili na websajt jer nove funkcije nisu podržane, a zatim još i da otpremite processing.js biblioteku, koja će kod napisan u javi prevesti u javascript kod. Zbog toga je pametnije, ukoliko već pravite websajt i želite da ga obogatite nekom animacijom kreiranom u processing-u, koristiti p5js biblioteku za razvoj. Više o tome pročitajte u članku:happycoding.io/tutorials/p5js/which-processing

Karakteristike Processing-a

1.

Jednostavno okruženje: Processing nudi jednostavno razvojno okruženje koje omogućava brzi početak rada. Njegov interfejs je minimalan i fokusiran na olakšavanje kreativnog izraza.

2.

Sintaksa: Processing koristi jednostavnu sintaksu koja je lako razumljiva, čak i onima koji su novi u programiranju. Međutim, ispod haube, Processing se oslanja na Javu, što znači da korisnici imaju pristup punoj moći Java programiranja kada im je potrebna.

3.

Grafika i interaktivnost: Processing je posebno dizajniran za crtanje grafike i kreiranje interaktivnih vizualizacija. Ima ugrađene funkcije za crtanje oblika, rukovanje bojama, animacije i rad sa slikama.

4.

Komunitet i resursi: Postoji veliki broj resursa, uključujući tutorijale, knjige, i online zajednicu koja pruža podršku i deli primere koda.

Programsko okruženje i jezik

1. Programsko okruženje: Processing pruža integrisano razvojno okruženje (IDE) koje je jednostavno i namenjeno početnicima. Ovo okruženje omogućava pisanje, kompajliranje i izvršavanje koda u jednom interfejsu. IDE Processing-a uključuje alate za crtanje, animaciju i interaktivnost, čineći ga idealnim za vizuelne projekte.

2. Jezik: Iako se Processing bazira na Javi, on koristi pojednostavljenu sintaksu koja je prilagođena početnicima i onima koji se bave vizuelnim umetnostima. Kod napisan u Processing-u se prevede u Javu, što omogućava jednostavan prelazak između Processing-a i Jave.

Biblioteka za Javu

Biblioteka: Processing je takođe i Java biblioteka koja može biti korišćena unutar Java projekata. To znači da možete koristiti Processing-ove funkcionalnosti u standardnim Java aplikacijama, omogućavajući vam da kombinujete Processing-ove grafičke mogućnosti sa drugim Java bibliotekama i alatima.

Kako se Processing i Java kombinuju

• Osnova u Javi: Processing je baziran na Javi, što znači da korisnici Processing-a mogu koristiti sve mogućnosti Java jezika. To omogućava kombinaciju jednostavnosti Processing-a sa snagom i fleksibilnošću Jave.
• Korišćenje Java biblioteka: U Processing-u možete koristiti bilo koju Java biblioteku, čime proširujete funkcionalnosti koje Processing nudi.
• Učenje: Processing može biti odličan uvod u programiranje sa Javom, posebno za vizuelne učenike i kreativce, jer omogućava brzo dobijanje vizuelnih rezultata.

Zaključak

Processing je odličan alat za umetnike i dizajnere koji žele da istraže svet programiranja kroz vizuelne projekte, dok Java pruža čvrst temelj za razvoj svih vrsta softverskih aplikacija. Kombinacija oba može pružiti moćno okruženje za kreativni i tehnički razvoj.

Mikrobit radionice su sastavni deo kursa kreativnog programiranja koji organizuje Regionalni Centar za Talente "Mihajlo Pupin" u Pančevu:
Kreativno programiranje

Instalacija processing-a

Može se preuzeti sa sajta:

processing.org/download

Okruženje PDE-a

Pokrenite processing 4 dvoklikom na iconicu i startovaće se sledeće okruženje:

Ukoliko ste početnik možete odabrati neki od ponuđenih primera, a zatim transformisati postojeći kod ili pokrenuti aplikaciju od početka. Da bi ste programirali u processingu potrebno je prethodno osnovno znanje JAVA programskog jezika ili nekog od podržanih: javascript, python itd. Ovaj tutorijal se zasniva na Java programski jezik.

Organizacija koda u processing-u

Fajlovi u kojima se piše kod su zapravo sketch-evi i oni se smeštaju u folder koji se naziva sketckbook. Ovaj folder se može promeniti pomoću PDE-a klikom na

File->Sketchbook

To se može videti na sledećoj slici:

Eksportovanje aplikacije se može ostvariti klikom na

File-: Export Application

Od Jave do Processing-a

Ako ste upoznati sa programiranjem u JAVI, osnovama, kao i osnovama objektno orijentisanog programiranja: klasama objektima, nasleđivanjem itd. onda bi uz pretpostavku da su dodate potrebne biblioteke za processing, kod u Eclipse IDE okruženju izgledao npr kao na sledećoj slici:

Na početku glavne klase, da bi ste programirali u processing-u treba importovati osnovnu biblioteku:

import processing.core.*;

Ovo je samo osnovna biblioteka, a po potrebi treba dodati i specifične.

Dakle, početna klasa mora da nasledi PApplet klasu. Takođe treba uočiti prepravljene metode iz PApplet klase: settigs, setup ( na slici 3) i draw(vidi sliku 4).

U navigatoru sa desne strane se vide naslovi ovih metoda i klikom na naslov pozicionira se kursor na odgovarajuću metodu.

Kodiranje sketch-a u PDE okruženju se razlikuje jer je u pozadini već urađeno importovanje osnovnih biblioteka, napisana naslovna linija glavne klase i ubačene metode setup i draw za prepravljanje(overriding engl.),

Dakle nije potrebno pisati: „class Glavna“ npr. i nije potrebno pisati „import processing.core.*;“.(vidi sliku 2).

Metode: settings, setup, draw iz PApplet klase

S obzirom da se animacije dobijaju tako što se prvo kreiraju objekti i inicijalizuju na početno stanje, a zatim se stanje objekata menja kroz Frame-ove na određeni vremenski interval npr. 0,05 sek, potrebne su metode koje s jedne strane vrše kreiranje objekata u početnom stanju i pozivaju se samo na početku pokretanja aplikacije i sa druge strane metoda koja vrši promene ovih stanja i poziva se periodično u skladu sa definisanim vremenskim intervalom(0,05 sek u primeru).Metode settings i setup spadaju u ove prve kojima definišemo početno stanje i pozivaju se samo jednom, dok metoda draw se poziva na svakih dt sekundi.

Ova metoda brine o potrebnim promenama stanja objekata ili promenljivih, a takođe i o iscrtavanju ovih objekata na ekran.

primer na slikama pokazuje kretanje loptica, nasumično određenih i može se uočiti da se pomenute metode ovde koriste za sledeće:

• settings: Postavlja veličinu prikaza na full Screen
• setup: Kreira niz loptice po slučajnom principu
• draw: Vrši se pomeranje i iscrtavanje loptica

Uvod u processing-video

Program u PDE okruženju

Isti ovaj primer u upotrebom u PDE okruženju bi smestili unutar novog scatch-a. Kad se otvori nov scatch preimenovaćemo ga u npr. BouncesGame(vidi sliku). Primer pokazuje kako da se simullra haotično kretanje loptica u processing-u.

Ovde treba ukucati kod koji pripada glavnoj klasi koja će se zvati „BouncesGame“ i posle pokretanja kreiraće se folder pod istim imenom:

Početna klasa se nešto razlikuje od početne klase koja je razvijena u Eclipse IDE okruženju:

Bounce[] bounces;

@Override
public void settings() {
  fullScreen();
}

@Override
public void setup() {
  bounces = new Bounce[100];
  for (int i = 0; i < 100; i++) {
    float x = (float) (width * Math.random());
    float y = (float) (height * Math.random());
    Bounce b = new Bounce(x, y, 5);
    bounces[i] = b;
  }
}

@Override
public void draw() {
  this.background(color(200));
  // dopunjeno – ostatak metode nije bio vidljiv na slici:
  for (Bounce b : bounces) {
    b.move(width, height);
    ellipse(b.center.x, b.center.y, 2 * b.r, 2 * b.r);
  }
}

Ovde sada nema naslova klase, importa osnovne biblioteke, već postoji deklaracija promenljivih i metode settings, setup i draw isto kao i u Eclipse varijanti.

Druga klasa koja opisuje lopticu(Bounce) se neće razlikovati od pisanja u Eclipse IDE okruženju što se može vidti na sledećoj slici:

import processing.core.PVector;

public class Bounce {
  float r;
  PVector center;
  PVector speed;

  public Bounce(float x, float y, float r) {
    super();
    center = new PVector(x, y);
    speed = new PVector((float) (10 * Math.random()), (float) (10 * Math.random()));
    this.r = r;
  }

  public Bounce() {
    super();
  }

  void move(double w, double h) {
    center.x += speed.x;
    center.y += speed.y;
    if (center.x < 0 || center.x > w) {
      speed.x *= -1;
    }
    if (center.y < 0 || center.y > h) {
      speed.y *= -1;
    }
  }
}

Posle pokretanja videće se haotično kretanje loptica na ekranu:

Proveri znanje