Processing – színkezelés


Egy kicsit most elkanyarodunk az arduinotól, de aztán majd vissza térünk kibővült tudással. Ebben a leckében a processing színkezeléséről lesz szó.
Átvesszük az adott utasításokat, és egy-egy példával ismertetjük a képernyőre gyakorolt hatásukat.

Kezdjük az első ilyen utasítással( bár ezt már tárgyaltuk egyszer):

background(x) – háttér színének beállítása, x egyenlő lehet egy 0-255 közötti számmal, ami ebben az esetben a fehér és a fekete közé eső szürke
árnyalatai. 255 – fehér, 0 – fekete.

void setup(){
size(150,150);
background(255);
}
void draw(){
}


background(r, g, b) – színes háttér előállítása rgb színekből, r a vörös árnyalatai, g a zöldé, b a kéké, a három értékből bármilyen szín kikeverhető.

void setup(){
size(150,150);
background(255,34,100);
}
void draw(){
}

Az rgb színek egyetlen egyetlen hexadecimális szám ként is megadhatók:
blackground( #4733CB) – ez egy halvány kék szín.

Ez kiszerkeszthető a Tools menü / Color Selector segédjével, itt az rgb színek három értékét valamint a hexakódot is kiírja a program.

Vagy kiválasztható színkód táblázatból : https://hu.wikipedia.org/wiki/HTML-sz%C3%ADnk%C3%B3dok


Ha a colorMode(HSB); – utasítást beírjuk akkor a színkezelés nem az rgb-szerint történik hanem, színárnyalat, szín telítettség, fényerő beállítása szerint. Ezt az állapotot a colorMode(RGB) utasítással lehet vissza állítani.

background(v1,v2,v3) – ez egy másik szín megadási mód ami a colorMode(HSB) utasítással állítható be. Itt az első érték a v1 az árnyalat értéke, a v2 a telítettség, a v3 a fényerő értéke.

void setup(){
size(150,150);
colorMode(HSB);
background(134,166,144);
}
void draw(){
}


background(x,a) – szüke árnyalata az első érték, az átlátszóság mértéke a második(alfa). Ugyan így hozzáadható minden színmegadási módhoz az átlátszóság. Erről majd később.


fill(x) – alakzatok kitöltő színének beállítása, x a szürke árnyalata a következő alakzatokon, vagy szövegen.


void setup(){
size(300,100);
}
void draw(){
for(int i=0; i<255;i+=10){
fill(i);
rect(i,20,10,10);
}
}


fill(r,g,b) – rgb kitöltő szín beállítása a következő alakzatokon vagy szövegen.


void setup(){
size(300,100);
}
void draw(){
for(int i=0; i<255;i+=10){
fill(i,0,0);
ellipse(i,20,20,20);
fill(0,i,0);
ellipse(i,50,20,20);
fill(0,0,i);
ellipse(i,80,20,20);
}
}

Most nézzük meg ugyan ezt a progit a colorMode(HSB) beállítással:

void setup(){
size(300,100);
colorMode(HSB);
}
void draw(){
for(int i=0; i<255;i+=10){
fill(i,255,255);
ellipse(i,20,20,20);
fill(100,i,255);
ellipse(i,50,20,20);
fill(255,255,i);
ellipse(i,80,20,20);
}
}


Az első fill() utasításban csak az szín árnyalatot állítottuk, így kaptuk meg a teljes színskálát. Persze a telítettség és a fényerő maxra került:

fill(i,255,255);

A második fill()-be a telítettséget állítottuk a 100-as színárnyalaton, ami egy zöld szín:

fill(100,i,255);

A harmadik fill()-en csak a fényerőt állítjuk, max telítettség mellett:

fill(255,255,i);


Ehhez a programhoz kapcsolhatjuk a következő utasítást is:
stroke(x); – keret vagy vonalszín, szürke árnyalatai.

stroke(r,g,b); – keret vagy vonalszín, rgb színekkel. Ez is megadható colorMode(HSB) -ként.

Alakítsuk át kicsit az utolsó programot:

void setup(){
size(300,100);
colorMode(HSB);
}
void draw(){
for(int i=0; i<255;i+=10){
fill(i,255,255);
stroke(i,255,255);
ellipse(i,20,20,20);
fill(100,i,255);
stroke(100,i,255);
ellipse(i,50,20,20);
fill(255,255,i);
stroke(255,255,i);
ellipse(i,80,20,20);
}
}


Mint látható eltüntettük a körök fekete körvonalait, vagyis pontosabban,
be állítottuk a körvonal színét a kitöltés színével megegyező színűre.

Ide tartozik még a kitöltő szín tiltása:
noFill(); – ettől a sortól nem használ kitöltő szint(kitöltő szín kikapcsolása)


void setup(){
size(200,120);
}
void draw(){
fill(#30DEE3);
rect(40,10,60,60);
noFill();
rect(70,40,60,60);
}


Valamint a keret szín tiltása:
noStroce() – keret szín tiltása.

void setup(){
size(200,120);
}
void draw(){
fill(#E510D0);
stroke(0);
ellipse(40,40,60,60);
noStroke();
ellipse(70,70,60,60);
}


Egy fontos adalék: ha előtte nem adtunk meg keret színt akkor a tiltás sor előtt kirajzolt alakzatokra is érvényes lesz a keretszín tiltás.


Most ennyi fért bele a színkezelésbe, de ebből még lesz második rész is.