A tömb nyomon követ egy több darabot/értéket tartalmazó listát, sorrenben. Hogy ezt vizualizálni tudjuk hozzunk létre egy több-dimenziós adat szerekezetet/tömbböt, ami egy tömbökből álló tömböt jelent.

Az egy-dimenziós tömb lényegében egy lista. Pl. ha az ebédre értelmezzük, ezeket az elemeket tartalmazhatja (paradicsom, saláta, sülthús, krumplipüré, süti, kávé). Vagy lehetugyanezt több-dimenziósan is érttelmezni (paradicsom, saláta) és (sülthús, krumplipüré) és (süti, kávé).

 Kóddal ez a két példaígy fest:

egy-dimenziós tömb:

int[] myArray = {0,1,2,3};

két-dimenziós tömb:

int[][] myArray = {{0,1,2,3},{3,2,1,0},{3,5,6,1},{3,8,3,4}};   

Célunk érdekében jobb ha ezt egy mátrixnak képzeljük el, amit rácsosan rendezett számokként értelmezünk. Kódban leírva:

int[][] myArray = {  {0, 1, 2, 3},
                     {3, 2, 1, 0},
                     {3, 5, 6, 1},
                     {3, 8, 3, 4}  };

Ezt az adat típust felhasználhatjuk információk képbe kódolására. Pl.ha ennek a tömbnekaz elemi helyére egy szürkeárnyalatos színértéket írunk akkor ilyen képet kapunk:

int[][] myArray = {  {236, 189, 189,   0},
                            {236,  80, 189, 189},
                            {236,   0, 189,  80},
                            {236, 189, 189,  80}  };

Hogy kiolvassuk az egy-dimenzióstömb elemeit sorrendben, egy for ciklust használunk.:

int[] myArray = new int[10];
for (int i = 0; i < myArray.length; i++) {
  myArray[i] = 0;
}

Két-dimenziós tömb esetén két for ciklust használunk, esetünkben lesz egy számláló ami a sorokat és egy ami az oszlopokat számolja a mátrixunkban.

int cols = 10;
int rows = 10;
int[][] myArray = new int[cols][rows];

// a 2d tömbben minden pontotvégigveszünk.   
// minden i oszlopnál megviszgálja mindegik j sort 
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    myArray[i][j] = 0;
  }
}

Így különböző szürkeárnyalatos képeket rajzolhatunk:

// Example: 2D Array
size(200,200);
int cols = width;
int rows = height;

// Declare 2D array
int[][] myArray = new int[cols][rows];

// Initialize 2D array values
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    myArray[i][j] = int(random(255));
  }
}

// Draw points
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    stroke(myArray[i][j]);
    point(i,j);
  }
}

A két-dimenziós tömbböket olyan objektumok tárolására is használhatjuk, amik alkalmasak olyan sketchek programozására, amik magukba foglalnak néhány "mátrixot". A következő példa egy Cell-objektumokból álló 2d-tömbböt tartalmaz. Minden cell, egy olyan négyzet aminek a világosságértéke oszcillál/ingadozik 0-255 között, mivel mindegyik érték meghatározott módom változik, egy hullámzó animáció keletkezik a végén:

// 2D Tömb
Cell[][] grid;

// oszlopok és sorok száma a mátrixban
int cols = 10;
int rows = 10;

void setup() {
  size(200,200);
  grid = new Cell[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      // Inicializáljuk az objektumokat 
      grid[i][j] = new Cell(i*20,j*20,20,20,i+j);
    }
  }
}

void draw() {
  background(0);
  // A számláló változók i és j szintén oszlopokra és sorokra 
  // vonatkoznak, és a mátrix minden objektumának
  //  konstruktorában használt argumentumai 

  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      // Oscillate and display each object
      grid[i][j].oscillate();
      grid[i][j].display();
    }
  }
}

// A Cell objektum
class Cell {
  // A cell objektumnak adott a helye a mátrixban és a mérete,   
  // az x,y,w,h változók által
  float x,y;   // x,y apozíció
  float w,h;   // szélességés magasság
  float angle; // angle, a világosság oszcillálásához

  // Cell konstruktor //utolsó paramétere a float tempAngle){ 
Cell(float tempX,float tempY,float tempW,float tempH,float tempAngle){
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    angle = tempAngle;
  } 
  
  // Oszcilláció az angle változó növelése által jön létre:
  void oscillate() {
    angle += 0.02; 
  }

  void display() {
    stroke(255);
    // Szín kalkuláció a hullámzás létrehozásához: 
    fill(127+127*sin(angle));
    rect(x,y,w,h); 
  }
}

forrás: http://processing.org/learning/2darray/ 

OOP röviden

Az OOP-ben "...nem a műveletek megalkotása áll a középpontban, hanem az egymással kapcsolatban álló programegységek hierarchiájának megtervezése."  http://hu.wikipedia.org/wiki/Objektumorient%C3%A1lt_programoz%C3%A1s

Mielőtt megvizsgáljuk hogyan működik az OOP a Processingben, beszéljünk az "objektumról". Képzeld el hogy egy napod programját írod le, kb így nézne ki: pszeudokóddal leírva:

• Felkelek
• Kávét iszok
• Reggelizek: műzlit, tejet.
• Földalattival utazok

Ez mit jelentenek? Milyen speciális szerepeket töltenek be ezek? Megtévesztő lehet, mivel nem írtunk utasításokat, de a legfőbb dolog te vagy, az ember. Különböző tulajdonságokkal rendelkezel. Egy bizonyos módon nézel ki, pl. barna a hajad, szemüveget hordassz, furcsán nézel ki. A képességed is megvan ahhoz hogy megtegyél dolgokat, pl. felkelj (vagy tovább aludj), egyél, utazz a földalattin. Az objektumok éppúgy mint te tulajdonságokkal rendelkezenek és feladatok elvégzésére képesek.

Ez hogyan vonatkozhat a programozásra? Egy objektum tulajdonságai a változók (adatok) és a dolgok amiket el tud végezni azok a funkciók. Ezekből épül fel az objektum-orientált programozás.

Nézzük meg azt az emberre átültetve:

Emberi Adatok:

• Magasság
• Súly
• Nem
• Szem szín
• Haj szín

Emberi funkciók:

• Alvás
• Felkelés
• Evés
• Utazás

Ebben az esetben az embert mind objektumot kezeljük. Az objektumokat osztályokba (class) soroljuk. Másik példa: a sütőforma sütiket csinál, de nincs benne alapvetően süti. A sütiforma az osztály és a süti az objektum.

Objektum használata

Mielőtt megnézzük hogyan írjuk le ténylegesen az osztályt megnézzük hogyan működik az objektum a fő programrészekben (setup, draw). Példának a kocsit használjuk, ami a kódban már egy téglalap lesz:

Adat (globális változó):

• Kocsi színe
• Kocsi x helye
• Kocsi y helye
• Kocsi sebessége

Setup:

• Megadjuk a kocsi színét
• Meghatározzuk a kocsi helyét
• Meghatározzuk a kocsi sebességét

Draw:

• Hátteret kitöltjük egy színnel
• A kocsi színét is megadjuk
• Megnöveljük a kocsi helyének értékét a sebességének értékével

A kódban a globális változókat a setup() előtt határozzuk meg, szokásos módon a kijező ablak létrehozása kerül a setup()-ba, a draw()-ben futtatjuk mejd le a mozgást, amit egy külön függvényeben move() írtunk most le, éppúgy mint a display() függvényt is ami kirajzolás után törli a képernyőt, így látszódni fog az animáció:

Az objektum orientált programozás lehetővé teszi, hogy a fő program helyett a kocsi-objektumban tároljuk a változókat és funkciókat. A kocsi-objektumot egyrészt az adatit ismerjük (szín, helyzet, sebesség) másrészt a metódusát (művelet az objektumon belül, pl. a kocsit vezetni lehet):

Adat (globális változó):

• Kocsi objektum

Setup függvény:

• Kocsi objektum inicializálása (kezdőérték megadása)

Draw függvény:

• Háttérszín kitöltés
• Kocsi objektum megjelenítése
• Kocsi objektum vezetése

Tehát az előző kódunkat e szerint átrendezve így néz ki:

Car myCar;

void setup()  {    
  myCar = new Car();   
}    

void draw()  {    
  background(255);   
  myCar.drive();   
  myCar.display();   
} 

Mielőtt a kód többi részébe is belemennénk, nézzük meg hogyan működnek az osztályok.

A "sütőfoma" leprogramozása

Az autós példa szemlélteti hogyan használjuk objektumokat a Processingben egyszerű, átlátható kódok megírásához. Nehezebb lesz olyan objektumot írni ami egy osztályt is tartalmaz.

Minden osztálynak 4 elemet kell tartalmaznia: név, adat, konstruktor és metódus (Technikailag valójában csak a névre van szükség, de a többit is tartalmazza a program.)

Az alábbi táblázat megmutatja mi a különbség az OOP (létrehozunk egy osztályt) és a nem-OOP között:

Mi mit jelent?

Class Name / Osztály neve:
Az osztály nevének akármilyen szót választhatsz. Ezeket hagyományosan nagybetűvel kezdjük hogy megkülönböztessük a változóktól amik hagyományosan kisbetűsek. Kapcsos zárójelen belülre kerül a kód az osztály neve után.

Data / Adat: Változók gyűjteményét jelenti. Ezek gyakran hivatkozásokra vonatkoznak.

Constructor / Konstuktor: Speciális funkciótlát el az osztályon belül amiben egy hivatkozásszerepel. Itt az objektumra vonatkozó instrukciók szerepelnek, pl. ilyen a setup() aProcessingben, amit arra használunk hogy a sketch-en belül létrehozzunk egy egyéni objektumot valahányszor egy új osztályt hozunk létre. Aminek mindig ugyanaz kell hogy legyen a neve, mint a meghívott operátornak:"Car myCar = new Car();".

Functionality / Funkcionalitás: Műveletek írásával különböző funkciókat adhatunk az objektumunknak.

 Tehát a főbb függvények:

void setup() {

}

void draw() {

}

class Car {

}

Néhány definíció:

"Objektum (példány)
Object (Instance)
Információt (adatokat) tárol és kérésre műveleteket végez. Van állapota, 
viselkedése és futásidőben azonosítható.

Osztály
Class
Az osztály egy felhasználói típus, amelynek alapján példányok (objektumok)
hozhatók létre. Az osztály alapvetően adat és metódus (művelet) definíciókat
tartalmaz.

Konstruktor
Constructor
Az a művelet, amely inicializálja az objektumot. Automatikusan hívódik. Egy
osztályhoz annyiféle konstruktort készítünk, ahányféle képpen lehetővé tesszük a
példányok inicializálását ."

http://www.ms.sapientia.ro/~manyi/teaching/c++/definiciok.pdf

Objektum használata - a részletek

Korábban láthattuk hogyan lehet objektum használatával leegyszerűsíteni asketch-ünk fő részeit (void,loop).

// 1. objektum deklarálása
Car myCar;

void setup()  {    
  // 2 . objektum inicializálása
  myCar = new Car();   
}    

void draw()  {    
  background(255);  
  // 3. egy objektum műveletének meghívása
  myCar.drive();   
  myCar.display();   
}

Most nézzük meg a fönti kód részleteit lépésneként:

1. objektum deklarálása

Objektumot úgy defíniálunk, hogy megadjuk a típusát és a nevét. Valamilyen egyszerű adattípussal mint pl. az intege, ez így néz ki: 

int var;  // type name

Az egyszerű adat típusok információkegyes darabjait tartalmazzák:az integer, a float, a karakterstring, stb. Objektumhoz kapcsolódó változó deklarálása is ilyen egyszerű. Class a típusa és utána megadjuk a nevét. Az objektumok nem primitív adat típusok, hanem összetett adat típusokat tartalmazó műveletek.

2. objektum inicializálása

Kezdőérték megadását jelenti, azaz megjelöljük a változónk értékét. Integer esetén így néz ki: 

var = 10;  // var equals 10 

Ha nem adod meg az értéket, akkor alapból 0 lesz, de akkor is defíniálni kell! Egy objektum inicializálásaegy kicsit bonyolultabb. Ahelyett hogy simán hozzárendelünk egy értéket, mint egy integernél vagy floatnál, fel kell építenünk az objektumot. Amit először a new nevű operátorral létrehozunk: 

myCar = new Car()

A fenti példában a "myCar" az objektum neve és az = jel azt mutatja hogy valamivel egyenlővé tesszük majd, ez lesz amire hivatkozik majd az objektumunk. Ami most történik,valójában a Car objektum inicializálása. Ha meghívjuk a Car osztályt láthatjuk hogy ez a kód-sor meghívja a konstuktort, vagyis azt a speciális műveletcsoportot amit Car()-nek neveztünk el. Válozókkal ellentétben mindig inicializálni kell!

3. egy objektum műveletének meghívása

Ha egyszer sikeresen deklaráltuk és inicializáltuk a változónkat, osztályunkat, már tudjuk használni. MEg tudjuk hívni az objektumben szereplő funkciókat/függvényeket.

A car esetében egyik elérhető funkciónak sincs paramétere (argumentuma):

myCar.drive();   
myCar.display();

A funkciókat a pont szintaxissal hívjuk meg - objektumok tulajdonságaihoz vagy tagfüggvényeihez férhetünk vele hozzá. (A függvények argumentumát, vagy formális paramétereit is szokás változónak nevezni.)

Konstruktor argumentumok

"Konstruktornak hívjuk az objektumorientált programozási nyelvekben egy osztály azon metódusát, amely az objektumpéldányosításakor hívódik meg. A konstruktor általában azért felelős, hogy az objektum adattagjait az osztály szempontjából értelmes, érvényes állapotba hozza, bizonyos nyelvekben pedig az objektum által használt memóriaterületet lefoglalása is feladata. A konstruktor neve általában az osztály nevével egyezik meg. A konstruktorok általában rendelkezhetnek paraméterekkel, amik az objektum kezdeti állapotát határozzák meg. A programnyelvek rendszerint megengedik, hogy azonos néven több, eltérő paraméterlistájú változat is szereplejen. Ilyenkor az objektum létrehozásakor használt argumentumok (független változók) döntenek arról, melyik metódus fut le ezek közül." http://wiki.prog.hu/wiki/Konstruktor 

Az előző példában a car objektumot úgy inicializáltuk hogy a new operátort egy az osztályra vonatkozó konstruktor követte:

Car myCar= new Car();  

Ezek voltak az OOP alapjai. Ennek ellenére lehet egy kis problémánk a fenti kóddal. Mi van ha két car objektumot akarunk használni?

Car myCar1 = new Car();   
Car myCar2 = new Car();

Így elértük célunkat; a kód két car objektumot tartalmaz, az egyiket a myCar1 változóban, a másikat a myCar2 változóban tároltuk el. Azonban, ha tanulmányozoda car osztálytészreveheted hogy ez a két car azonos:midegyik fehér, középen halad és a sebessége 1. Pszeudó kóddal elmondva:

Csinálj egy új autót!

Helyette ezt akarjuk mondani:

Csinálj egy új piros autót, aminek a kezdőpozíciója 0,10 és a sebessége 1.

De ezt is mondhatjuk:

Csinálj egy új kék autót, aminek a kezdőpozíciója 0,100 és a sebessége 2.

Ezt megtehetjük úgy hogy argumentumokat helyezünk a konstruktor metódusába:

Car myCar =  new Car(color(255,0,0),0,100,2);

A konstruktor ezeket az argumentumokat tartalmazhatja:

Car(color tempC, float tempXpos, float tempYpos, float tempXspeed)  {    
  c = tempC;   
  xpos = tempXpos;   
  ypos = tempYpos;   
  xspeed = tempXspeed;   
}

Nézzük meg hogyan működnek ezek a paraméterek ebben a kontaxtusban:

Pszeudo fordítása: Csinálj egy békát aminek a nyelve 100 hosszusságú.

Az argumentumok olyan helyi változók amiket a függvény testében használunk, értékekkel töltünk meg amikor meghívjuk a függvényt. A példánkban ezeknek csak egy céljuk volt, hogy inicializálják a változókat az objektumban. A konstruktorok argumentumai ideiglenesek és kizárólag azért vannak hogy átküldjenek egy értéket onnan ahol az objektumon belül egy másik objektum is szerepel. Ez lehetővé teszi hogy ugyanazzal a konstruktorral több objktumot hozzunk létre:

Car myCar1;
Car myCar2; // Két objektum van!

void setup() {
  size(200,200);
  // Paraméterek kerek zárójelbe kerülnek, amikor az objektumot felépítjük
  myCar1 = new Car(color(255,0,0),0,100,2); 
  myCar2 = new Car(color(0,0,255),0,10,1);
}

void draw() {
  background(255);
  myCar1.drive();
  myCar1.display();
  myCar2.drive();
  myCar2.display();
}

// Annak ellenére hogy több objektumunk vannak, csak egy osztályra van szükségünk.
// Nem számít mennyi sütitsütünk, elég egy sütiforma hozzá.
class Car { 
  color c;
  float xpos;
  float ypos;
  float xspeed;

  // Argumentumokkal defíniájuk a konstruktort:
  Car(color tempC, float tempXpos, float tempYpos, float tempXspeed) { 
    c = tempC;
    xpos = tempXpos;
    ypos = tempYpos;
    xspeed = tempXspeed;
  }

  void display() {
    stroke(0);
    fill(c);
    rectMode(CENTER);
    rect(xpos,ypos,20,10);
  }

  void drive() {
    xpos = xpos + xspeed;
    if (xpos > width) {
      xpos = 0;
    }
  }
}

forrás:

http://processing.org/learning/objects/

Szürkeárnyalat

A színeket 0-255 közötti számokkal határozzuk meg, ennek oka hogy memóriában tároljuk az adatot, bináris számrendszerben (0 és 1), így 24 biten 256 lehetőséget tudunk tárolni, de a 0-t is használjuk értékként így a maximum érték 255 lehet csak. Szürke árnyalat esetén ez így néz ki (ezt 8 biten tároljuk, az RGB értékeket 3x 8 biten):

Bármilyen formának adhatunk színt, stroke()-kal a körvonal színét, fill()-lel a kitöltő színt határozhatjuk meg. Illetve noStroke() és noFill() meghívásával tehetjük ezeket átlátszóvá és nem pedig 0 megadásával, mivel az a fekete szín!

A Processing a kódot sorrendben olvassa és fordítja!

PÉLDA:

RGB színek

A monitor a szubsztraktív, azaz a kivonó színkeverés elvén működik, amikor a fehér hullámhosszából vonjuk ki a több szín hullámhoszzát és így kapjuk meg az eredményt.

(bővebben: http://hu.wikipedia.org/wiki/Szubtrakt%C3%ADv_sz%C3%ADnkever%C3%A9s )

RGB a rövidítése ami a red, green, blue színeket jelenti (vörös, zöld, kék):

Most nézzük ezt meg a gyakorlatban! A következő példában kirajzolunk 3 kört, különböző színkitöltésekkel, a fill() függvény 3 paramétere sorrendben az RGB értékeket takarja:

A Processingben van egy beépített segédeszköz hogy megtudd a színednek mik az RGB paraméterei. Ezt Colos Selector-nak nevezik és a Tools menüből tudod elővenni. A jobb felső sarokban látod az általad kattintással kiválasztott színt és alatta az értékeket: H=hue S=saturation B=brightness R=red G=green B=blue és végül a hexadecimális színkódját. 

Színek átlátszósága

Az RGB értékeken túl opcionálisan megadható egy negyedik paraméter is ami az átlátszóságot, azaz az alfa csatornát szabályozza. A pixelek valójában nem átlátszóak, csak a program úgy keveri össze az értékeket hogy az átlátszóság illúzióját keltik. Ennek értékét is 0-255 között adjuk meg, 0=0% és 255=100% átlátszóságot jelent.

PÉLDA:

Egyéb színmegadó paraméterek

A colorMode() függvény segítségével beállíthatunk egyéb kezdő és vege értékeket amiben a színeket skálázni akarjuk, pl. ha 0-100 között akarjuk meghatározni őket akkor a következőt kell beírnunk a kódba:

colorMode(RGB,100);

De akár mindhárom színnek különböző skálátási tartományt adhatunk meg, pl R 0-100, G 0-500, B 0-10 és alfa 0-255 között legyen:

colorMode(RGB,100,500,10,255);

Végül, nem csak RGB-ben tudjuk defínálni a színünket hanem HSB-ben is hue-színárnyalat 0-360 fokban határozzuk meg, saturation- telítettség 0-100 közötti érték lehet, brightness-fényesség 0-100 közötti érték lehet alapból, de ezeket is át tudod állítani a colorMode() paranccsal.

forrás:

http://processing.org/learning/color/

Az ábrán egy olyan vonalat látunk, aminek két végpontja A(1,0) és B(4,5) koordinátánál van. Előbb x és utána y tengely paraméterét adjuk meg. Ez paranccsal így néz ki: 

line(1,0,4,5);

Rajzolj egy vonalat ( az x=1 és y=0 koordinátától) (az x=4 és Y=5 koordinátáig).

A matematikában megszokott rendszerhez képest a számítógépen a bal felső pont az origo:

Egyszerű formák

primitívek: pont, vonal, téglalap, ovális:

A koordinátáit és a méretét pixelben határozzuk meg.

point()

Egy pont kirajzolásával kezdjünk, ami az x=4 és y=5 ponton helyezkedik el:

line()

A vonal kirajzolása sem annyira bonyolult mivel két végpontjának koordinátáját kell meghatározni:

rect()

Téglalap kirajzolása egy kicsit bonyolultabb, mivel kezdőpontjának koordinátáján túl meg kell adni a szélességét is és a magasságát is, pixelben:

A másik módja hogy a középpontját defíniáljuk először és csak utána a szélességét és a magasságát: 

Harmadik módja a téglalap kirajzolásának hogy a kezdőpont és a végpont koordinátájit adjuk meg, azaz az átellenes sarkokat:

ellipse()

Ovális rajzolásánál ugyanígy különböző módokat használhatunk (center, corner). Kör rajzolására nincs külön parancs, ezért olyan oválisként kell meghatározni aminek a szélessége és a magassága megegyezik.

PÉLDA:

forrás:

http://processing.org/learning/drawing/

A Processing API egyik különlegessége a mód ahogy a fájlokat kezeli. A loadImage() és a loadStrings() függvények  a data mappából keresik ki a fájlokat, ami az adott sketch mappájának egyik alkönyvtára. Példa:

A loadString() függvény egy szöveg (txt) fájlt olvas be egy Sting tartalmú tömbbe.

A loadImage() függvény egy képet olvas be PImage nevű tárolóba.

Példák:

     String[] lines = loadStrings("something.txt");
     PImage image = loadImage("picture.jpg");

Adat típusok és osztályok: Mindkét változónak van egy adat típusa, az egyiknek String, a másiknak PImage. 

A data mappába a következő módon adhatsz fájlt: Sketch → Add File, vagy húzd rá a fájlt egérrel a Processing programozó ablakára, így autómatikusan létrehozza a data mappát és beleteszi a fájlt. Sketch → Show Sketch Folder menüből leellenőrizheted hogy tényleg ott van-e.

Könyvtárak

library:  Speciális feladatok elvégzésére készített kódok gyűjteménye, amik alapvetően nem részei a Processing API magjának. Ezeket innen tudod letölteni http://processing.org/reference/libraries/ 

Egy példa: PDF Export könyvtár: Ez a könyvtár lehetővé teszi hogy a geometrikus formákat pdf képbe mentsük ki vektrosan, így tetszőleges méretre nagyítható lesz a képünk minőségromlás nélkül.

Első lépésben importálni kell a könyvtárakat a sketchbe: 
Sketch → Import Library → pdf ez után a következő kód jelenik meg:

import processing.pdf.*;

Az import parancsot felimeri a program és amikor app-ot exportálunk ki akkor a könyvtárat is beleteszi.

A következő paranccsal tudjuk kimenteni a pdf-et, ami a rajzoló függvényeket tartalmazza (line, ellipse, stb.):

beginRecord(PDF, "lines.pdf");

Egyéb könyvtárak alkalmasak kamera kép beolvasásása, MIDI vagy OSC jel küldésére és fogadására, 3D-s kamera vezérlésére és MySQL adatbázis elérésére.

forrás:

http://processing.org/learning/overview/

A kijelző ablak méretét pixelben határozzuk meg, de ha fontos hogy mindig a képernyő méretéhez igazodjon akkor használjuk a width és high paramétereket. Ugyanúgy ha pl. egy objektet a kijelző ablak közepére akarunk tenni akkor is ezeket írjuk be. Példák:

     size(400, 400);

     // Rossz példa, ha változik a size akkor is 200x 200y 
     // koordinátánál kezdődik a kör
     ellipse(200, 200, 50, 50);

     // Jó példa, ha változik a size akkor is középre kerül
     // a kirajzolt kör
     ellipse(width/2, height/2, 50, 50);


Render
Már volt szó arról hogyan lehet képet exportálni, de a Processing több render típust implementál magába. Eddig csak szélessége és magasságot adtunk meg a size függvényben, de egy további paraméterrel megadhatjuk hogyan renderelje ki a grafikát.
Már volt szó arról hogy ha nagy felbontású 2d vektor grafikát akarunk akkor pdf kiterjesztésbe exportáljunk. A pixelekkel való munka lassú. Hogy ezt elkerüljük, minden render opciónak egyedi szerepe van:

size(400, 400, P2D);

P2D render: OpenGL-t✷ használ így gyorsabban renderel ki két-dimenziós vektor grafikákat. Mivel a Processing legegyszerűbb grafikus API-ját✷✷ és a Processing fejlesztőkörnyezetét használja, ezért könnyen ki lehet exportálni.

✷Open Graphics Library, nyílt grafikus könyvtár. Az amerikai Silicon Graphics cég által kifejlesztett szabvány.

✷✷API = alkalmazásprogramozási felület vagy alkalmazásprogramozási interfész
(application programming interface)

size(400, 400, P3D);

P3D render: szintén OpenGL-t használ a gyorsabb rendereléshez. Két és három dimenziós tárgyakat tud kirajzolni, valamint világítást és textúrát.

size(400, 400, PDF, "output.pdf");

Minden geometrikus formát egy fájlba rendrel ki a képernyő helyett. Ha ezt akarod használni akkor be kell importálni a Sketch / Import Library / PDF nevű könyvtárat!

forrás:
http://processing.org/learning/overview/

applikáció exportálása

Ebben az esetben azt jelenti hogy mindhárom plattformra ki tudsz exportálni egy önmagában futtatható alkalmazást, az Export application gombbal:

A sketchbook mappán belül a sketched mappájába teszi a fájlokat:

UGYANEZ KÓDDAL:

static public void main(String args[]) {
    PApplet.main(new String[] { "YourClassName" });
}

kép exportálása

A saveFrame() függvényt kell ehhez használnod, a draw() függény végére írd be! Akár tiff szekvenciát is exportálhatsz, de más kiterjesztéssel is működik. Szintaxisa:

egy kép: 

saveFrame("output.png")

kép szekvencia:

saveFrame("output-####.png");

Ha vektrosan szeretnéd kimenteni amit csináltál használj pdf kiterjesztést, így nagyfelbontású képet is ki tudsz nyerni a geomatrikus formákból.

videó kimentése

példakód, képszekvenciát ment ki, azt egyéb programban össze tudjuk fűzni videóvá:

/**
* Save Frames
* by Daniel Shiffman.
*
* This example demonstrates how to use saveFrame() to render
* out an image sequence that you can assemble into a movie
* using the MovieMaker tool.
*/

// A boolean figyeli hogy épp felveszünk-e

boolean recording = false;void setup() {
size(640, 360);
smooth();
}

void draw() {
background(0);

// egy tetszőleges oszcilláló forgó animációt
// renderelünk hogy legyen mit videóra rögzíteni:
for (float a = 0; a < TWO_PI; a+= 0.2) {
pushMatrix();
translate(width/2, height/2);
rotate(a+sin(frameCount*0.004*a));
stroke(255);
line(-100, 0, 100, 0);
popMatrix();
}

// a saveFrame-et hívjuk meg!
// Ez a kerekter (#) jelzi a Processingnek hogy
// automatikusan számolja és nevezze el a képeket
if (recording) {
saveFrame("output/frames####.png");
}

// Rajzoljunk valamit ami megmondja mi történik épp
// Ez a renderelt file-ban nem fog látszódni, mivel
//  b/c-t a saveFrame()-után- írjuk be!!!

textAlign(CENTER);
fill(255);
if (!recording) {
text("Press r to start recording.", width/2, height-24);
}
else {
text("Press r to stop recording.", width/2, height-24);
}

// A kör piros lesz amikor felveszünk
stroke(255);
if (recording) {
fill(255, 0, 0);
} else {
noFill();
}
ellipse(width/2, height-48, 16, 16);
}void keyPressed() {

// Ha az r billentyűt nyomjuk
// elindul vagy megáll a felvétel

if (key == 'r' || key == 'R') {
recording = !recording;
}
}

forrás:

http://processing.org/learning/overview/ 

http://wiki.processing.org/w/Export_Info_and_Tips

A Processing egy olyan opensource szoftver, amivel képeket, animációkat, interakciókat hozhatunk létre. A processingben írt kódot sketch-nek nevezzük. C és java szerű felépítéssel rendelkezik. Flexibilis. Soros porton is lehet kommunikálni vele. Néhány beépített library-vel is redelkezik, de telepíthetünk is bele.

Szoftver telepítése: http://processing.org/download/ Erről a linkről letölthető és kicsomagolás után egyből futtatható (win, mac, linux).

A processing fejlesztőkörnyezetének szerkezete:

ELSŐ SKETCH

A sketchek kiterjesztése .pde (=Processing Development Environment). Indítsd el a Processinget, egy ablak jelenik meg. A felső részén egy eszközpaletta látható, alatta egy szöveg szerkesztő rész ahova a kdot írhatod, alatta az Üzenet területe, és legalul a parancsértelmező rész.

Gépeld be a következő kódot:

ellipse(50, 50, 80, 80);

Ez a sor ezt jelenti: Rajzolj egy olyan ellipszist aminek a középpontja 50 pixelre balra és 50 pixelre lefelé helyezkedik el a saroktól (a sarok a 0 0 koordináta, tehát x=50 és y=50) és a szélesége és a magassága is 80 pixel. Most nyomd meg a futtatás gombot: 

futtatás

Ha nem írtad el a kódot megjelenik egy kör a kijelző ablakban (1. kép), ha elrontottad akkor hibaüzenetet kapsz az Üzenet területen (2.kép):

Következő lépésben rajzoljuk ki ezt az ábrát: 

Ehhez létre kell hoznunk egy 480 pixel széles és 120 pixel magas ablakot és az egér mozgás x,y koordinátájára kirajzolni köröket. Ha lenomjuk az egér gombot a kör színe legyen fekete. Ennek a kódja így néz ki, futtasd a kódot:

void setup() {
  size(480, 120);
}

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

ESZKÖZPALETTA ÉS MENÜRENDSZER:

stop

A futtatást a stop gombbal állíthatjuk meg (ha megnyomod eltűnik a kijelző ablak).

Sketch menü: A Run (futtatás) és a Stop (megállítás) melett láthatsz egy Present (bemutatás, prezentáció) gombot, ha ezt nyomod meg akkor a kijelző ablakod fullsreen-en fut és a fejlesztő körneyezet ablakot (és egyebeket) nem láthatod, bal alsó sarokban lévő stop gommbal tudsz kilépni ilyenkor.

mentés

A sketchbook nevű mappába menti alapértelmezettként a kódot, és innen is nyitja meg. Többször ment és célszerű különböző verziókat különböző néven menteni így bármikor vissza tudsz térni korábbi, még működö részekhez.

megnyitás

új sketch létrehozása

megosztás

Ebben az esetben azt jelenti hogy mindhárom plattformra ki tudsz exportálni egy önmagában futtatható alkalmazást, az Export application gombbal:

A sketchbook mappán belül a sketched mappájába teszi a fájlokat:

HELLO WORLD!

line(15, 25, 70, 90);

     size(400, 400);
     background(192, 64, 0);
     stroke(255);
     line(150, 25, 270, 350);

 

     stroke(255);               // körvonal fehér
     stroke(255, 255, 255);     // ez ugyanaz mint az első sor
     stroke(255, 128, 0);       // világos narancssárga (red 255, green 128, blue 0)
     stroke(#FF8000);           // világos narancssárga web-színként megadva
     stroke(255, 128, 0, 128);  // világos narancssárga 50% átlátszósággal

HELLO EGÉR

void setup() {
       size(400, 400);
       stroke(255);
       background(192, 64, 0);
     } 

     void draw() {
       line(150, 25, mouseX, mouseY);
     }

 void setup() {
       size(400, 400);
       stroke(255);
     }

     void draw() {
       background(192, 64, 0);
       line(150, 25, mouseX, mouseY);
     }

void setup() {
       size(400, 400);
       stroke(255);
     }
		  
     void draw() {
       line(150, 25, mouseX, mouseY);
     }
     
     void mousePressed() {
       background(192, 64, 0);
     }

példák és referencia

http://processing.org/learning/gettingstarted/ 

http://processing.org/learning/overview/