Processing első lépések


A processing mint írtam szabadon felhasználható grafikus programozási nyelv.
Java alapokon nyugszik és erősen objektum orientált (OOP), igaz a fejlesztői környezet ennek nagy részét elrejti előlünk.


Az első lépések:

először le kell töltenünk a java fejlesztői környezetét a JDK-t , a processing erre épül.

Ez megtalálható : http://www.oracle.com/technetwork/java/javase/downloads/index.html


Ha ezt sikeresen feltelepítettük, akkor jöhet a processing telepítése a következő helyről: https://processing.org/download/
Kicsomagoljuk a zip fájlt és a processing.exe-re kattintva nyíthatjuk meg az IDE-t.
Ha rendben lefolyt a telepítés a processing megnyitása után a következő kép tárul a szemünk elé:

Leegyszerűsített felület, egyszerűbb kezelés. A fehér területre írjuk a sketch-ünket, ez bal oldalt számozással ellátott rész. A megírt sketch-et az indít gombbal fordítjuk le és indítjuk el a futását. A stop gombbal állítjuk meg. Az IDE alsó területén található a konzol terület, ide kerülnek a program futása közbeni konzolnak szánt üzenetek illetve itt jelentkeznek az írás és fordítás alatti hiba üzenetek is.

A felületen található debug hiba kezelés, de erről majd később illetve a java feliratú kimeneti mód választó négyzet ahol több kimeneti mód közül választhatunk. Így alkalmassá válik a sketch-ünk python illetve android alkalmazásokhoz is.


A fájl menü nem ismeretlen senkinek, itt érdemes megemlíteni a Sketchbook-ot ahol
az utoljára megírt sketch-eink tárolódnak illetve az Examples-t ahol minta progik érhetők el.


A programozási nyelv kulcsszavairól referenciát találhatok a Help menü / Reference
almenüjében ami egy webes felületre irányít át.


Írjuk meg első programunk:

void setup() {

size(200, 200);

}


void draw() {

background(204);

line(width/2, height/2, mouseX, mouseY);

}


Nézzük: az első és legfontosabb a processig progi és két főfüggvényt tartalmaz, a setup-ot ami csak egyszer hajtódik végre a program indításánál, és a draw-ot ami folyamatoson újra végre hajtódik amíg le nem állítja valami.

size(200, 200); – sor a setup-ban helyezkedik el, evvel kreálunk egy megadott értékeknek megfelelő ablakot, ahol aztán majd a grafikus dolgaink megjelenek.Az első paraméter a szélesség a második a magasság.

background(204); – a háttérszín árnyalatát állítjuk be vele, itt ez egy szürke. Próbálkozzunk az érték változtatásával. Más értékekkel a fekete és a fehér közötti árnyalatokat kapjuk (szürkék), a fekete = 0, a fehér = 255. Lehet színes is a háttér ha a következő képpen adjuk meg a hátteret:

background(204,45,0); – a három érték az RGB színek erősségét állítja be, az első paraméter a vörös szín, a második a zöld szín, a harmadik a kék szín értékét tárolja. A három szín keverékéből bármilyen szín előállítható.


Lépjünk tovább. A következő sor egy vonal rajzolását teszi lehetővé:
line(width/2, height/2, mouseX, mouseY); – az első paraméter width/2 a setupban beállított ablak szélességének felét veszi (100), ugyan így a height/2 az ablak magasságának felét adja(100). Ebből a két koordinátából áll a vonal kezdő pontja. A második két érték a vonal végpontja lesz, ez a mi esetünkben az egér helyének X és Y koordinátája.

Mint a setup ugyan úgy a draw függvény teste is kapcsos zárójelek között helyezkedik el {}, de gondolom ez már ismerős. A progiba ugyan úgy írhatók megjegyzések is a kettő per jel mögé //.


A processing a vonalon kívül sok más sík illetve térbeli alakzatot is ismer, mutatok még egyet  kedv csinálónak.

rect(mouseX,mouseY,30,30); – téglalap rajzolása, az első két paraméter a téglalap bal felső sarka, a harmadik paraméter a szélesség, a negyedik a magasság.

Ha a line() sort kicseréljük erre akkor egy egérrel együtt mozgó négyzetet kapunk, ha
a background()-ot is elrakjuk a setup-ba akkor a négyzettel rajzolhatunk.


void setup() {

size(400, 300);

background(204,45,0);

}

void draw() {

rect(mouseX,mouseY,30,30);

}


Ez csak egy kis ízelítő, a processing programozás kezdeti lépéseiről, hogy igazán mit

tud arról bővebben: https://processing.org/ oldalról.