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