2012.12.14.
14:26

Írta: harsanyireka

Hello world!

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.

Screen Shot 2012-12-14 at 1.48.05 PM.png

 

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

Screen Shot 2012-12-14 at 1.58.45 PM.png

Screen Shot 2012-12-14 at 1.59.02 PM.png

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);
}

Screen Shot 2012-12-14 at 2.07.24 PM.png

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:

Screen Shot 2012-12-14 at 2.42.59 PM.png

 

HELLO WORLD!

Processingben ez most annyit jelent hogy rajzoljunk egy vonalat:
line(15, 25, 70, 90);
Ha futtatodakódot egy kisablakbanegy szürke négyzet jelenik meg, rajta egy fekete vonal, aminek végpontjainak koordinátái 15,25 és 70,90 a kettőt kötöttük össze. A 0,0 (x,y) a bal felső sarok.
line.jpg
Következő lépésként változtassuk meg a háttér színét és az ablak méretét, illetve a vonal színétis adjuk meg, legyen fehér:

size(400, 400); background(192, 64, 0); stroke(255); line(150, 25, 270, 350);
 line2.jpg
 
Tehát az ablakunk 400 pixel széles és magas négyzet lett, a hátterünk narancssárga és a vonalunk fehér. Alapvetően a színeket 0-255 közötti étékkel adhatjuk meg, RGB értékként, ha csak egy számot írunk (adunk meg paraméternek) oda akkor mindhármat ugyanannak veszi, tehát a stroke(255) ugyanaz mint a stroke(255, 255, 255). Példák:
     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
 
A fill() és a background() függvények ugyanígy működnek. Ezek az értékek addig látszódnak amíg a következővel felül nem írod őket.
  
   

HELLO EGÉR

Vannak statikus és dinamikus sketch-ek,az előző egy statikus volt, ahol függvények sorozatával létrehozhatunk egy képet, most nézzünk meg egy dinamikusat,ami azt jelenti hogy talrtalmazzon valamilyen animációt vagy interakciót, azaz mozgást.
A nagyon hosszú kódokat célszerű több függvényre bontani, két alapértelmezett függvény a Processingben a setup() és a loop(),ezek beépítettfüggvények amik automatikusan meghívódnak (de sajátot is létrehozhatunk).
A setup egyszer futle, az indításnál, ezzel szemben a draw folyamatosan, hogy érzékeljük a különbséget használjuk ugyanazt a kódot, azzala különbséggel hogy először a setup-ben defíniáljuk a háttérszínt, a másodiknál pedig a loop-ban. Minkét esetben egy olyan vonalat rajzololunk ki aminek kezdő koordinátája 150,25-nél van a végpontját pedig az egér x,y helyzete határozza meg. A size() függvénynek kell lennie az első parancsnak a setup-on belül!
void setup() {
       size(400, 400);
       stroke(255);
       background(192, 64, 0);
     } 

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

Ebben az esetben a kirajzolt vonalak mindvégig látszódnak az ablakban:
line3mouse1.jpg
 void setup() {
       size(400, 400);
       stroke(255);
     }

     void draw() {
       background(192, 64, 0);
       line(150, 25, mouseX, mouseY);
     }
Ebben az esetben, mivel a draw folyamatosan fut,tehát miután kirajzolta a vonalat újra kirajzolja a hátteret is, ezzel eltűntetve az előzőleg kirajzolt vonalat, ezért egy db vonalat látunk aminek végkoordinátája mindig az egerünk pozíciójánál van:
line4mouse2.jpg
Az alap programok általában a fent említett két függvént használják, haladóbb szinten bele lehet írni a kódba a mousePressed() függvényt, ami akkor fut le ha az egérgombot megnyomod, ebben az esetben ez a kód így néz ki, a background() átkerült ide, most a vonalak imét kirajzolva maradnak, de amikor megnyomod az egérgombot akkor a háttérkirajzolás letörli ezeket a vonalakat:
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

További példákat a  File → Examples menüben találsz, itt kategorizálva vannak a sketch-ek:
 
Screen Shot 2012-12-24 at 1.43.39 PM.png
 
 
forrás:

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

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

 

 

 

Szólj hozzá!

A bejegyzés trackback címe:

https://processing.blog.hu/api/trackback/id/tr144965215

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.
süti beállítások módosítása