a Processing.js rövid bemutatása

Amennyiben HTML5 Canvas-ra szeretnénk rajzolni, akkor a Processing.js egy jó megoldás lehet, már hosszú ideje nyomon követem a fejlődését, ebben a blogban is volt erről szó, de csak néhány mondat erejéig, most egy kicsit részletesebb leírást készítettem.

A Processing sokrétű, a kezdetekben Java-hoz készült, később lett belőle egy JavaScript feldolgozó, mely .pjs (ez bármi más szöveges fájl lehet) fájlokat olvas be és futtat, de tud közvetlenül JavaScript-ből is működni. Erről majd később.

Emlékszem, hogy a fejlesztése kezdetén, még nagyon körülményes volt olyan böngészőt találni, melyben megfelelően működött volna, eleinte nem is értettem, hogy az eredeti fejlesztői (Ben Fry és Casey Reas) milyen környezetben tudták tesztelni…de megoldották és nem rosszul… 🙂 Jelenleg már sokkal jobb a helyzet, nem írok böngésző neveket (Chrome, Firefox 4 :)), de bármelyikben működik (és ami nem mellékes: gyorsan!), amely megfelelő szinten támogatja a Canvas-t.

Nézzünk egy egyszerű példát, csináljunk egy .html fájlt:

 <script src="processing.js"></script>   
<canvas data-processing-sources="teszt1.pjs"></canvas>

majd egy teszt1.pjs fájlt, mellyel rajzolunk néhány kört és figyelünk egy billentyűzetről jövő inputot, melynek hatására a kirajzolt körök kitöltő színét megváltoztatjuk:

 void setup()  
{
size(800,600);
}
void draw(){
background(185);
ellipse(30, 48, 36, 36);
ellipse(90, 58, 66, 56);
ellipse(120, 118, 76, 86);
if( keyPressed ) {
if (key == 'r' || key == 'R') {
fill(144);
}
} else {
fill(24);
}
}

Ennyi az egész. A .pjs fájl mindig tartalmaz egy setup() nevű függvényt, amiben jelenleg a Canvas méretét adtam meg, és egy draw() függvényt melyben a tulajdonképpeni rajzolás történhet.

A Processing.js használatának ez csak az egyik módja, talán a legegyszerűbb, egy “Hello World!” példa helyett talán megteszi, ennél sokkal összetettebb dolgokra képes, osztályokat hozhatunk vele létre, 3D megjelenítésre is képes – mindezt jó hatékonyság mellett.

Hasznos leírások:

Színkezelésről:

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

A koordináta rendszerről:

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

Egy példa a pixelek használatára:

 void setup(){  
size(500,500);
background(0);
noStroke();
}
void draw(){
color yellow = color( 255, 255, 0);
loadPixels();
for (int i = 0; i < 10000; i++) {
pixels[i] = yellow;
i+=2; //következõ páratlan szám
}
updatePixels();
}

Tudunk OOP-ben is fejleszteni Processing.js alatt, ehhez is van egy nagyon jó dokumentációja:

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

A benne található autós példa eléggé szemléletes:

http://www.learningprocessing.com/examples/chapter-8/example-8-2/

 // Learning Processing  
// Daniel Shiffman
// http://www.learningprocessing.com
// Example 9-9: An array of Car objects
Car[] cars = new Car[100]; // An array of 100 Car objects!
void setup() {
size(500,500);
smooth();
for (int i = 0; i < cars.length; i ++ ) { // Initialize each Car using a for loop.
cars[i] = new Car(color(i*2),0,i*2,i/20.0);
}
}
void draw() {
background(255);
for (int i = 0; i < cars.length; i ++ ) { // Run each Car using a for loop.
cars[i].move();
cars[i].display();
}
}
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com
// Example 9-9: An array of Car objects
// The Car class does not change whether we are making one car, 100 cars or 1,000 cars!
class Car {
color c;
float xpos;
float ypos;
float xspeed;
Car(color c_, float xpos_, float ypos_, float xspeed_) {
c = c_;
xpos = xpos_;
ypos = ypos_;
xspeed = xspeed_;
}
void display() {
rectMode(CENTER);
stroke(0);
fill(c);
rect(xpos,ypos,20,10);
}
void move() {
xpos = xpos + xspeed;
if (xpos > width) {
xpos = 0;
}
}
}

Én Chrome-ban próbáltam ki ezt a példát és mindenféle trükközéssel próbáltam “szaggatásra” bírni (nagyobb kép, több objektum létrehozása stb.), de nem sikerült, mindig elfogadható sebességgel működött.

Animációk egyszerűen

A Draw() függvényünk úgy működik, mint egy iteráció, így könnyen tudunk vele animálni is, csak a lényegre kell összpontosítani, a többit a Processing elvégzi helyettünk:

 float x,y; //publikus változók  
void setup() {
size(600,600);
background(0);
x = 0;
y = 100;
smooth();
}
void draw() {
background(255);
fill(50,200,150);
noStroke();
ellipse(x,y,55,55);
x++ ;
}

Vagy nézzük meg ezt a példát, ahol a rotateZ() függvényt használtam:

 float theta = 0.0;  
void setup() {
size(600,600,P3D);
}
void draw() {
background(255);
stroke(0);
fill(85);
translate(300, 300);
rotateZ(theta);
rectMode(CENTER);
rect(0,0,200,200);
theta += 0.08;
}

Ugyanígy tudjuk az X és Y tengelyek mellett is animálni az alakzatainkat:

 float theta = 0.0;  
void setup() {
size(600,600,P3D);
}
void draw() {
background(255);
stroke(0);
fill(85);
translate(300, 300);
rotateX(theta);
rectMode(CENTER);
rect(0,0,200,200);
theta += 0.08;
}

Egy kicsit bonyolultabb, piramis példa:

http://www.learningprocessing.com/examples/chapter-14/example-14-10-pyramid/

Szerintem ízelítőnek ennyi pont elég volt, akit érdekel nagyon sok leírást és példát találhat az interneten, és ami a legjobb, hogy a böngészők már nem nyöszörögnek a rajzolás terhétől, hanem mindent megfelelő gyorsasággal megoldanak – legalábbis én ezt tapasztaltam.

Advertisements
This entry was posted in Canvas, HTML5, Processing.js, rotate. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s