Egyszerű alakzatok


A processing több beépített alakzat készítésével segíti a grafikus felületek leképzését. Itt a legegyszerűbb alakzatokat tárgyaljuk az első körben.

Az első ilyen alakzat a pont:

point(x,y) – pont kirajzolása, x vízszintes koordináta, y függőleges koordináta.

void setup(){
size(200,100);
}
void draw(){
point(100,50);
}


size(200,100,P3D); – opengl renderrel
point(x,y,z) – pont kirajzolása mélységgel, z mélység. A mélységhez kell a P3D mód.

Ha valakinél ez nem működik, ne ijedjen meg. Erősen opengl függő, és sok gépen nem fut, lehet frissíteni a videokártya drivereket vagy új opengl-t letölteni a siker nem garantált. Mi megvagyunk nélküle is, de aki komolyabb grafikákat szeretne készíteni annak szükséges.


Vonal rajzolása:

line(x1,y1,x2,y2) – vonal kirajzolása két pont között, x1-y1 kezdőpont, x2-y2 végpont.


size(300,300);
line(40,50,160,280);


Mint láthattátok se void setup(), se void draw() a grafika mégis megjelenik . Egyszerűbb sketch-eknél így is megírható a program, főleg ábrák kirajzolásához.

line(x1,y1,z1,x2,y2,z2) – vonal kirajzolása mélységgel (ez is P3D).

A mivel nincs kiterjedésük ezért a stroke segítségével állíthatjuk a vonal illetve a pont színét.

line(30, 20, 85, 20);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
line(85, 75, 30, 75);


strokeWeight() – a vonal vastagsága pixelben .


line(30, 20, 85, 20);
strokeWeight(4);
stroke(126);
line(85, 20, 85, 75);
stroke(255);
strokeWeight(8);
line(85, 75, 30, 75);


strokeCap(const) – vonal vég stílusának beállítása. Három érték lehetséges: ROUND – lekerekített vég, SQUARE – szögletes min hosszban , PROJECT – szögletes max hosszban .


size(170,100);
strokeWeight(18);
strokeCap(ROUND);
line(25, 20, 25, 75);
strokeCap(SQUARE);
line(85, 20, 85, 75);
strokeCap(PROJECT);
line(140,20,140,75);


strokeJoin(const) – vonalak találkozásának stílusa(csak vertex esetén). Három értéket vehet ez is fel: MITER – éles, szögletes sarok
BEVEL – levágott sarok
ROUND – lekerekített sarok


size(300,120);
noFill();
strokeWeight(10);
strokeJoin(MITER);
beginShape();
vertex(20,20);
vertex(70,60);
vertex(20,100);
endShape();


A progira most nem térek ki, mert csak a strokeJoin() függvény bemutatására készült. A vertex kezelés majd egy másik leckében lesz leírva. Próbáljuk végig a másik két lehetőséget is.

Háromszög kirajzolás:

triangle(x1,y1,x2,y2,x3,y3) – háromszög kirajzolása, az x-y koordináták a háromszög csúcs pontjait jelölik ki.

triangle(30, 75, 58, 20, 86, 75);


Négyszög kirajzolása:

quad(x1,y1,x2,y2,x3,y3,x4,y4) – tetszőleges négyszög kirajzolása. Az x-y koordináták a négyszög csúcspontja.


quad(38, 31, 76, 20, 69, 60, 30, 76);


Téglalap kirajzolása:

rect(x,y,sz,m) – téglalap kirajzolása, x-y bal felső sarok kezdőpontja, sz a szélesség(x+sz), m a magasság (y+m).

rect(20,10,70,40);

rect(x,y,sz,m,r) – lekerekített téglalap, az r a lekerekítés sugara.

rect(20,10,70,40,10);

rect(x,y,sz,m,tl,tr,br,bl) – lekerekített téglalap de minden sarok különböző mértékben kerekített. tl – top-left(felső bal sarok), tr – top-right(felső jobb) br – bottom.right(alsó jobb sarok), bl–bottom-right(alsó bal sarok).

rect(20,10,70,40,1,10,20,40);

A téglalap kirajzolásához tartozik a rajzolási mód változtató függvény:

rectMode(const) – a téglalap kirajzolásának módja állítható a következő képpen: CORNER – ez az alap beállítási mód, a téglalap első két paramétere a téglalap bal felső sarkát határozza meg a képernyő bal felső sarkától mérve. A harmadik, negyedik paraméter a jobb alsó sarkot határozza meg a téglalap bal felső sarkától.

rectMode(CORNER);
fill(255);
rect(25, 25, 50, 50);


CORNERS – az első kettő a téglalap bal felső sarka az ablak bal felső sarkától, az utolsó kettő paraméter a téglalap jobb alsó sarkát határozza meg az ablak bal felső sarkától.


rectMode(CORNERS);
fill(255);
rect(25, 25, 50, 50);


CENTER – az első két paraméter a téglalap középpontját határozza meg az ablak bal felső sarkától. A harmadik a téglalap szélessége, a negyedik a téglalap magassága.

rectMode(CENTER);
fill(255);
rect(25, 25, 50, 50);


RADIUS – az első két paraméter megint a téglalap középpontja, a harmadik paraméter a vízszintes távolság a középponttól mind két irányba, a negyedik paraméter a függőleges távolság a középpontból mind két irányba.

rectMode(RADIUS);
fill(255);
rect(25, 25, 50, 50);


Kör és ellipszis rajzolás:

ellipse(x,y,a,b) – kör vagy ellipszis rajzolása. x,y a középpont, a az x tengely(szélesség), b az y tengely (magasság).


ellipse(40,40,80,40); // ellipszis

ellipse(40,40,40,40); // kör


Itt is van egy ellipszis kirajzolási mód változtató utasítás:

ellipseMode(const) – kirajzolási mód váltás, négy konstans alkalmazható:

RADIUS – az első két paramétere az ellipszis középpontja, a harmadik paraméter az ellipszis vízszintes tengelyhossza mindkét irányban, a negyedik az ellipszis függőleges tengelyhossza mind két irányba.

ellipseMode(RADIUS);
fill(255);
ellipse(25, 25, 50, 50);


CENTER – az első két paraméter az ellipszis középpontja, a harmadik az ellipszis szélessége, a negyedik paraméter az ellipszis magassága.

ellipseMode(CENTER);
fill(255);
ellipse(25, 25, 50, 50);


CORNER – itt az első két paraméter az ellipszist befogó téglalap bal felső sarkának koordinátája, a harmadik a befogó téglalap szélessége, a negyedik a magassága.

ellipseMode(CORNER);
fill(255);
ellipse(25, 25, 50, 50);


CORNERS – az első két paraméter az ellipszist befogó téglalap bal felső sarka, az utolsó két paraméter a befogó téglalap jobb alsó sarka de itt az ablak bal felső sarkától számolva.

ellipseMode(CORNERS);
fill(255);
ellipse(25, 25, 50, 50);


Ív rajzolása:

arc(x,y,a,b,start,stop) – ív rajzolása. x-y az ellipszis középpontja, a az ellipszis szélessége, b az ellipszis magassága, start az ív kezdeti szöge radiánban, stop az ív záró szöge radiánban.


size(100,300);
arc(40,40,40,40,0,QUARTER_PI);
arc(40,90,40,40,0,HALF_PI);
arc(40,140,40,40,0,PI);
arc(40,190,40,40,0,TWO_PI);
arc(40,240,40,40,0,QUARTER_PI+PI);


Van néhány előre gyártott állandó a radián szögekre, a rajzolásnál általában elérhető velük a kívánt hatás.

QUARTER_PI – negyed pi
HALF_PI – fél pi, negyed kör
PI – pi, fél kör
TWO_PI – két pi, teljes kör

Ezek a konstansok használhatók kezdő és vég szög beállítására is, de ugyan így használhatók lebegő pontos számok is.

arc(x,y,sz,m,start,stop,mod) – ellipszis ív rajzolása, a mod a kitöltés módja.


size(100,200);
arc(40,40,40,40,0,QUARTER_PI+PI,OPEN);
arc(40,90,40,40,0,QUARTER_PI+PI,CHORD);
arc(40,140,40,40,0,QUARTER_PI+PI,PIE);


OPEN – nyitott kör szelet
CHORD – húr szelet
PIE – cikk szelet