Programski jezici → Processing → Osnove: oblici i animacija

Osnove Processinga – oblici, boje i animacija

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):

void setup() {
    size(600, 600); //veličina ekrana
    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
}

Detalnije o crtanju osnovnih oblika pročitajte u originalnom tutorijalu za processing:

https://processing.org/tutorials/overview/#overview

Posle pokretanja:

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.

float x;
int frameRate = 20;
float brzina = 1;                     // m/s
static final float RAZMERA = 40;      // 40 px = 1 m

void setup() {
  size(400, 400);                     // 10 m × 10 m u prirodi
  x = 0;
  frameRate(frameRate);
}

void draw() {
  background(0);
  stroke(255, 0, 0);
  strokeWeight(2);
  ellipse(width / 2 + x, height / 2, 50, 50);
  // x += 2;
  x += (brzina / frameRate) * RAZMERA;
}

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/colorU 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:

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.

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:

float x;
int frameRate = 20;
float brzina = 5;                     // m/s
static final float RAZMERA = 40;      // 40 px = 1 m

void setup() {
  size(400, 400);                     // 10 m × 10 m u prirodi
  x = 1;
  frameRate(frameRate);
}

void draw() {
  background(0);
  fill(255, 0, 0);
  stroke(255);
  strokeWeight(2);
  ellipse(x + 25, height / 2, 50, 50);
  fill(0, 0, 255);
  ellipse(0, 0, 100, 100);

  x += (brzina / frameRate) * RAZMERA;

  /* Dodavanje uslova */
  if (x > width - 50 || x < 0) {      // r = 25
    brzina *= -1;
  }
}

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 programiranjaUnutar 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() {
    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:

class Lopta {
  float rC;
  float xC;
  float yC;
  color boja;
  PVector v;

  public Lopta(float r, float x, float y) {
    rC = r;
    xC = x;
    yC = y;
    boja = color(255, 0, 0);
    // v = 0;
  }

  public void kretanje() {
    xC += (v.x / frameRate) * RAZMERA;
  }
}

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:

int frameRate = 20;
PVector brzina;                       // m/s
static final float RAZMERA = 40;      // 40 px = 1 m
Lopta lopta1;

void setup() {
  size(400, 400);                     // 10 m × 10 m u prirodi
  brzina = new PVector(5, 0);
  lopta1 = new Lopta(25, 0, height / 2);
  lopta1.v = brzina;
  frameRate(frameRate);
}

void draw() {
  background(0);
  fill(255, 0, 0);
  stroke(255);
  strokeWeight(2);
  ellipse(lopta1.xC + 25, height / 2, 2 * lopta1.rC, 2 * lopta1.rC);
  fill(0, 0, 255);
  ellipse(0, 0, 100, 100);

  lopta1.kretanje();

  if (lopta1.xC > width - 50 || lopta1.xC < 0) {   // r = 25
    lopta1.v.x *= -1;
  }
}

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.

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

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:

Proveri znanje