Érdekes feldolgozási programozási útmutató tervezőnek-Színszabályozás: 10 lépés

2025 Szerző: John Day | [email protected]. Utoljára módosítva: 2025-01-23 14:47

Az előző fejezetekben többet beszéltünk arról, hogyan kell a kódot használni az alakításhoz a színekkel kapcsolatos ismeretek helyett. Ebben a fejezetben a tudás ezen aspektusát vizsgáljuk meg mélyebben.

1. lépés: Alapvető ismeretek a színről

A szín bizonyos szempontból felülmúlta az emberi intuíciót. A szabad szemmel látott különféle gyönyörű színek valójában ugyanazokból az összetevőkből állnak. Csak a vörös, zöld és kék három világos színével hozhatunk létre minden olyan színt, amelyet emberi szem láthat a keverék segítségével.

A jelenleg látható mobil- és számítógép -képernyők ezen elv alapján készülnek. A vörös, zöld és kék színt három eredeti fényszínnek nevezik. A három elem arányán keresztül bizonyos színt biztosíthatunk. Ezt a leírási módszert RGB módnak is nevezik. Közülük a piros R, a zöld G és a kék B.

Az RGB mód kivételével van egy másik mód is, az úgynevezett CMYK mód. Általában nyomtatással kombinálják. A nyomtatásban három eredeti szín is megtalálható. Ez azonban különbözik a három eredeti fény színétől. Külön -külön piros, sárga és kék színűek. Közülük C a ciánkék, az M bíbor és Y a sárga. Elméletileg csak a CMY segítségével tudjuk a legtöbb színt keverni. De a nyersanyag előállítási technikája miatt aligha tudjuk elérni a CMY telítettségének 100%-át. Ha ezt a három színt összekeverjük, nem kaphatunk elég sötét feketét. Tehát van egy extra K, amely fekete nyomdafestékhez való, a nyomtatás kiegészítéseként.

Ami az RGB -t és a CMYK -t illeti, csak tudnod kell, hogy a természetben a legnyilvánvalóbb különbség van. Az RGB plusz színes mód, amely több szín keverésével növeli a fényerőt. Míg a CMYK mínusz színmód, amely több szín keverésével növeli a sötétséget. Az alábbi képen vizuálisan láthatjuk a két mód hasonlóságait és különbségeit. A bal oldali képen sötét háznak képzelhetjük, három különböző színű zseblámpával. A jobb oldali képen akvarellpapírnak tekinthetjük, miután átfedésben volt három vörös, zöld és kék pigmenttel.

Ha mélyebben szeretné megismerni a különböző színmódok közötti relatív összefüggéseket, nyissa meg a Photoshopot, és válassza ki a színválasztót. Ezután intuitív módon láthatja ugyanazon szín színértékeit különböző színmódokban.

Végül szeretnénk bemutatni egy másik közös színmódot, a HSB -t. A HSB nem ismeri az „eredeti szín” fogalmát. Az emberi szem színek iránti érzése szerint osztályozzák. H jelentése színárnyalat, S telítettség, B pedig fényerő.

A színárnyalat a színtendenciát jelképezi. Minden színnek csak bizonyos színtendenciája van, ha nem barna, fehér vagy szürke. A színválasztó leggazdagabb színátmeneti területe az árnyalat jelzésére szolgál. Értéke PS -ben 0 és 360 között mozog.

A telítettség a színek tisztaságát jelenti. A nagyobb tisztaság élénkebb színeket eredményez. Értéke PS -ben 0 és 100 között mozog.

A fényerő a szín világossági fokát jelenti, 0 és 100 között.

Az RGB móddal összehasonlítva a HSB három dimenziója sokkal jobban megfelel az emberi szem színek iránti érzetének. Nézd csak a HSB értékeket, általában el tudod képzelni, milyen színű.

Ugyanazt a színt illetően a színérték RGB módban (255, 153, 71), míg HSB -ben (27, 72, 100).

Nehéz megítélni, hogyan fog kinézni a három eredeti szín összekeverése után, ha csak az RGB -t nézzük. De a HSB más. Csak meg kell ismernie a színárnyalatokat, mint például a piros 0, a narancssárga 30 és a sárga 60, akkor tudni fogja, hogy ez egy viszonylag telített narancssárga szín lesz, nagy fényerővel és kissé közel a piroshoz, amikor H 27.

Ezt követően a két mód három dimenzióját x, y, x térben fogjuk megfeleltetni, és egy színes köböt rajzolunk az összehasonlításhoz.

Az RGB és a HSB csak különböző módszerek a színek leírására. Vegyük a megszólítást metaforának. Tegyük fel, hogy ha meg akarjuk mondani másoknak a császári palota helyzetét, akkor azt mondhatjuk, hogy az a Jingshan Front Street 4. szám, Dongcheng terület, Peking. Vagy mondhatod, hogy 15 másodperc, 55 perc, 39 fok az északi szélességen és 26 másodperc, 23 perc, 116 fok a keleti hosszúságon. A HSB leírási módszere hasonló az előbbiekhez. Ha ismeri a relatív területet, általában ismerheti a cím pozícióját. Bár az RGB pontosabb lehet, de nagyon elvont.

A HSB mód létezett azzal a céllal, hogy segítsen nekünk a színek kényelmesebb leírásában. Ahhoz, hogy egy bizonyos színt megjelenítsünk a képernyőn, először át kell alakítanunk RGB módba.

A fentiekben három színmódot mutatunk be: RGB, HSB, CMYK. A programban csak két módra kell összpontosítania: RGB és HSB. Saját előnyökkel és saját alkalmazásokkal rendelkeznek. Ha ismeri, akkor megfelel a legtöbb tervezési követelménynek.

2. lépés: Adattípus a színek tárolásához

A színek megjelenítéséhez a programban többnyire az előzőekben használt RGB módot használjuk. Azonban csak a három tulajdonság vezérlésével jeleníthetünk meg bármilyen színt? A számítógépben ez így van.

Korábban már utaltunk rá, hogy a feldolgozás során az R, G, B kivételével a színekhez alfa (átlátszóság) kijelölhető. De az alfa nem tartozik a szín összetevőjébe. Léte a kényelmes keverés a mögötte lévő színekkel. Ezért ahhoz, hogy a számítógépek pontosan leírhassanak egy bizonyos színtípust, csak a legfontosabb három változót kell kezelnünk.

A következőkben egyfajta Color adattípust kezdünk bevezetni, amelyet elsősorban színek tárolására használnak. Hasonló a korábban hivatkozott adattípusokhoz, például a boolena, int, float.

Először is hadd magyarázzam el a színek tényleges használatát. Képzeljük el ezt: tegyük fel, hogy ha a korábban elsajátított módszereket csak bizonyos adatok tárolására használhatjuk, mit tegyünk?

Kód példa (9-1):

[cceN_cpp theme = "hajnal"] int r, g, b;

void setup () {

méret (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

háttér (0);

rectMode (CENTER);

kitöltés (r, g, b);

egyenes (szélesség/2, magasság/2, 100, 100);

}

[/cceN_cpp]

Ami a színekkel kapcsolatos tendenciákat illeti, három változót kell létrehoznunk az adatok három piros, zöld és kék színcsatornában való tárolásához. Később, ha meg akarjuk hívni ezt a színadat -készletet, akkor ki kell töltenünk vagy kitöltenünk.

De azt fogja tapasztalni, hogy túl bonyolult ezt megtenni, mert az adatok össze vannak kötve. Ha ötlete van használat közben a csomagolásra, akkor kényelmesebb lesz. Ezért a szín jön létre.

Kód példa (9-2):

[cceN_cpp theme = "hajnal"] szín myColor;

void setup () {

méret (400, 400);

myColor = szín (255, 0, 0);

}

void draw () {

háttér (0);

rectMode (CENTER);

fill (myColor);

egyenes (szélesség/2, magasság/2, 100, 100);

} [/cceN_cpp]

Hasonlóan az adattípusokhoz, például az int, a változók létrehozásához az elején a „color myColor” -t kell használnunk.

A beállítás során a „myColor = color (255, 0, 0)” értéket használjuk a myColor változó értékének hozzárendeléséhez. Míg a szín (a, b, c) helyesen jelzi, hogy ez az adathalmaz színtípust alkotott a myColor változó importálásához. Ha azt írja, hogy „myColor = (255, 0, 0)”, akkor a program elromlik.

Az utolsó esetben a fill () használatával valósítjuk meg a színes párnázás működését. A funkció kitöltése () és a löket () egyaránt lehetővé teszi az átfedést. A paraméterek mennyiségétől és típusától függően különböző hatásokkal jár. Csak egy egész változó importálása, amely azt jelzi, hogy csak szürkeárnyalatos szín. Változó szín importálásakor ez azt jelenti, hogy a színtartomány nagyobb lesz. Importálhat egy színváltozót és egy egész változót is, módosíthatja a fill () függvényt a fill -be (myColor, 150), majd a második paraméterrel vezérelheti az alfa -t.

3. lépés: Átfedő kitöltési módszer

stroke, háttér ugyanazt az átfedő módszert használja a kitöltéssel.

Olvassa el a csatorna színértékét

A hozzárendeléseken kívül önállóan is beszerezheti az RGB értéket a színváltozóban

Kód példa (9-3):

[cceN_cpp theme = "hajnal"] szín myColor;

void setup () {

myColor = szín (255, 125, 0);

println (piros (myColor));

println (zöld (myColor));

println (kék (myColor));

}

[/cceN_cpp]

Eredmény a konzolban: 255, 125, 0.

A piros (), zöld (), kék () függvény viszonylag visszatér a piros, zöld és kék csatorna értékéhez a myColor -ban.

Hexadecimális hozzárendelés

Kivéve a tizedes számok megjelenítését az RGB -hez, használhatunk hexadecimális értékeket is. A tizedes azt jelenti, hogy 1 -et növelünk, ha 10 -et találunk. Míg a hexadecimális azt jelenti, hogy 1 -et növelünk, ha 16 -ot találunk. 9 -ig”,„ A -tól F -ig”megfelel„ 10 -től 15 -ig”.

Az alábbi képen az átalakítási módszer látható.

Természetesen, ha olyan hexadecimális értékeket kapunk, mint az ff7800, akkor nem kell manuálisan konvertálnunk. A program közvetlenül hozzárendeli az értékeket a színváltozókhoz. Nagyon kényelmes.

Láthatjuk, hogy sok színkártya online hexadecimális módszert alkalmaz a színek megjelenítésére.

A dizájnközösség csöpögéséhez hasonlóan a műalkotások is színes palettákat kapnak. Ha kedvenc színezékét látja, alkalmazhatja a programban.

Kód példa (9-4):

[cceN_cpp theme = "hajnal"] color backColor, colorA, colorB, colorC;

void setup () {

méret (400, 400);

rectMode (CENTER);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

színB = #f4a7b4;

színC = #f9e5f0;

}

void draw () {

háttér (backColor);

fill (colorA);

egyenes (200, 200, 90, 300);

fill (colorB);

egyenes (100, 200, 90, 300);

fill (colorC);

egyenes (300, 200, 90, 300);

} [/cceN_cpp]

Most a szín sokkal kényelmesebb és jobb hatású, mint az értékek véletlenszerű bevitele.

Adja hozzá a „#” karaktert a hexadecimális színérték elé, majd közvetlenül hozzárendelhet értéket a változó színhez.

4. lépés: HSB mód

Az RGB mód mellett a HSB módról fogunk beszélni. Az alábbiakban a HSB mód értékkiosztási módszerét mutatjuk be.

Kód példa (9-5):

[cceN_cpp theme = "dawn"] érvénytelen beállítás () {

méret (400, 400);

colorMode (HSB);

}

void draw () {

háttér (0);

rectMode (CENTER);

for (int i = 0; i <20; i ++) {

szín col = szín (i/20,0 * 255, 255, 255);

kitöltés (col);

egyenes (i * 20 + 10, magasság/2, 10, 300);

}

} [/cceN_cpp]

A feldolgozás során a HSB mód váltásához csak egy colorMode (HSB) mondatot kell hozzáadnunk. A colorMode () függvény használata a színmód váltására szolgál. Ha „HSB” -t írunk a zárójelbe, akkor az HSB módba kerül; amíg „RGB” -t írunk, az RGB üzemmódba kerül.

Amire érdemes odafigyelni, az az, hogy amikor colorMode (HSB) -t írunk, a HSB alapértelmezett maximális értéke 255. Ez egészen más, mint a Photoshop maximális értéke. Photoshopban a H maximális értéke 360, az S és a B értéke 100. Tehát konvertálnunk kell.

Ha a HSB értéke a Photoshopban (55, 100, 100), akkor feldolgozásra konvertálva ennek az értéknek (55 /360 × 255, 255, 255) kell lennie, azaz (40, 255, 255).

A colorMode () egy átfedhető függvény. A következőkben részletesen bemutatjuk Önnek.

5. lépés: A ColorMode átfedő módszere

Ezért, ha nem szeretné manuálisan konvertálni a HSB értékét a Photoshop alkalmazásban, akkor írja be a „colorMode ()” értéket „colorMode (HSB, 360, 100, 100)” formátumba.

HSB mód alkalmazási eset 1

Mivel az RGB mód nem túl kényelmes az árnyalatváltozások vezérléséhez, ebben az időben, ha rugalmasabban szeretné szabályozni a színeket, fontolja meg a HSB módot.

Kód példa (9-6):

[cceN_cpp theme = "dawn"] érvénytelen beállítás () {

méret (800, 800);

háttér (0);

színmód (HSB);

}

void draw () {

strokeSúly (2);

löket (int (millis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

newX = egérX + (zaj (millis ()/1000,0 + 1,2) - 0,5) * 800;

newY = egérY + (zaj (millis ()/1000,0) - 0,5) * 800;

sor (egérX, egérY, újX, újY);

} [/cceN_cpp]

Amikor a H (színárnyalatokat) szabályozzuk ütés közben, akkor millis () értéket használtunk. Megkapja a működési időt az elejétől a jelenig. Így, ahogy az idő előrehaladtával, a H (színárnyalat) értéke automatikusan növekszik, majd a szín megváltozik.

A millis () mértékegysége ms. Tehát, ha a program 1 másodpercig fut, a visszatérési érték 1000 lesz. Ez túl nagy értékhez vezet. Tehát el kell osztanunk 1000.0 -val.

Mivel reméljük, hogy a színek periodikus keringést mutatnak be, ezért muszáj modulo műveletet végeznünk, amikor végre megírjuk az első paramétert. Ezzel megbizonyosodhat arról, hogy újra 0 -ról indul, amikor a H (színárnyalat) meghaladja a 255 -öt.

Funkció strokeWeight () szabályozhatja a vonalak vastagságát. A zárójelben lévő paraméterek megfelelő mértékegysége a pixel.

6. lépés: Mód alkalmazási eset 2

Kód példa (9-7):

[cceN_cpp theme = "hajnal"] int num; // az éppen húzott vonalak mennyisége

float posX_A, posY_A; // A pont koordinátája

float posX_B, posY_B; // B pont koordinátája

úszószögA, sebességA; // A pont szöge, sebesség

lebegési szögB, sebességB; // B pont szöge, sebesség

úszó sugárX_A, sugárY_A; // Az ovális sugár, amelyet az X (Y) tengely A pontja alkot.

úszó sugárX_B, sugárY_B; // az ovális sugár, amelyet az X (Y) tengely B pontja alkot.

void setup () {

méret (800, 800);

colorMode (HSB);

háttér (0);

sebességA = 0,0009;

sebességB = 0,003;

sugárX_A = 300;

sugárY_A = 200;

sugárX_B = 200;

sugárY_B = 300;

}

void draw () {

fordítás (szélesség/2, magasság/2);

(int i = 0; i <50; i ++) {

szögA += sebességA;

szögB += sebességB;

posX_A = cos (szögA) * sugárX_A;

posY_A = sin (szögA) * sugárY_A;

posX_B = cos (szögB) * sugárX_B;

posY_B = sin (szögB) * sugárY_B;

löket (int (szám/500,0) % 255, 255, 255, 10);

vonal (posX_A, posY_A, posX_B, posY_B);

szám ++;

}

} [/cceN_cpp]

Művelet hatása:

Kimeneti kép:

A látott mintát egy mozgó vonal állítja elő az állandó átfedések révén. Az egyenes két végpontjának nyoma két kör külön -külön.

A HSB mód segítségével szabályoztuk a színárnyalat változásait. A vonalak növekedésével a színárnyalat eltolódik. Amikor a masszív, félig átlátszó vonalak átfedik egymást, nagyon gazdag színátmenetet hoz létre.

Beágyaztunk egy for ciklus függvény rajzolást azzal a céllal, hogy ciklusként használjuk a vonal mennyiségének szabályozására. Ez azzal egyenértékű, hogy szabályoztuk a rajzolási sebességet. Ha növeli az ítélési feltétel értékét a ciklusban, akkor növeli a rajzot.

Az alábbiakban a sematikus ábra látható. Tisztábban láthatja a körök mozgásnyomát.

Állítsa be a különböző sebességet és sugarát, a kialakított minták is eltérőek lesznek. Próbálja meg megváltoztatni a változókat, például a szöget, a sebességet, a sugaratX, a sugárY -t, és nézze meg, mi fog történni.

7. lépés: Rétegkeverési mód

A különböző színmódok, amelyekről korábban beszéltünk, mind a grafikus komponensek színesítésére szolgálnak. A színek szabályozására használt módszer kivételével a Processing különféle rétegek keverési módját használhatja, például a Photoshopot.

Nyissa meg a réteg ablakot a PS -ben, kattintson a rétegek keverési módjának kiválasztásához, majd láthatjuk ezeket a lehetőségeket.

Ezek létező rétegmódok a PS -ben. Egyszerűen szólva a keverési mód egyfajta színszámítási módnak tekinthető. Eldönti, hogy melyik szín jön létre az utolsóban, amikor az „A szín” és a „B szín” megjelenik. Itt az „A szín” az aktuális réteg mögötti színt jelenti (más néven alapszín). „B szín” az aktuális réteg színét jelenti (más néven vegyes szín). A program kiszámítja, hogy a C színt az A és B szín RGB értéke és alfa szerint kapja -e meg. Ez a szín jelenik meg a képernyőn.

A különböző rétegmódok különböző számítási módszereket jelentenek. Ennek a cikksorozatnak a következő felében részletesebben elmagyarázzuk. Most már csak a használatát kell tudnunk.

Nézzünk egy példát a Hozzáadás mód használatára a programban.

Kód példa (9-8):

[cceN_cpp theme = "hajnal"] PImage image1, image2;

void setup () {

méret (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

háttér (0);

blendMode (ADD);

kép (1. kép, 0, 0, 400, 400);

kép (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Eredmény:

A blendMode () funkció a grafika keverési módjának beállítására szolgál. Töltsük ki az ADD mögött azt, hogy beállítottuk a Hozzáadás módot.

A programban nincs rétegfogalom. De mivel a grafikus komponensek rajzolási sorrendje van, így a képek keverésekor az 1. kép alapszínnek, a 2. kép pedig vegyes színnek tekintendő.

Az ADD mód a „Brighten Class” kategóriába tartozik. Használata után ragyogó hatás érhető el.

Az alábbiakban egy feldolgozási módot használunk.

8. lépés: A keverési mód feldolgozása

Megpróbálhatjuk megváltoztatni a különböző keverési módokat, hogy lássuk a hatást.

Ha a példa (9-8) átfedési módot alkalmazott (a hátteret fehérre kell állítani):

Kivonás mód használata után (a hátteret fehérre kell állítani):

9. lépés: Rétegkeverési mód alkalmazása

A keverési mód nemcsak képekhez használható, hanem a vászon összes grafikai összetevőjéhez is. Az alábbiakban a Hozzáadás mód használatát mutatjuk be. Különféle fényeffektusok analógozására használható.

Kód példa (9-9):

[cceN_cpp theme = "dawn"] érvénytelen beállítás () {

méret (400, 400);

}

void draw () {

háttér (0);

blendMode (ADD);

int szám = int (3000 * egérX/400.0);

for (int i = 0; i <szám; i ++) {

ha (véletlen (1) <0,5) {

kitöltés (0, 50, 0);

}más{

kitöltés (50);

}

ellipszis (véletlenszerű (50, szélesség - 50), véletlenszerű (50, magasság - 50), 20, 20);

}

}

[/cceN_cpp]

Itt a véletlenszerű függvényen keresztül zöld és fehér színt kevertünk a részecskékbe, amelyek már alfát hordoztak. Az egérrel szabályozhatjuk a kör mennyiségét és figyelhetjük az átfedő hatást.

ADD és SCREEN nagyon hasonlóak. Bár ugyanaz a fényesítés, vannak finom különbségek. Cserélheti a képernyőre, és összehasonlíthatja. Az átfedés után az ADD tisztasága és fényessége magasabb lesz. Alkalmas a fényhatás analógjára.

Ami a színt illeti, ebben a fejezetben véget értünk. Ehhez a „nyelvhez” már elegendő üresedést sajátított el. Most siessen a kód használatával, hogy élvezze a forma és a szín világát!

10. lépés: Forrás

Ez a cikk innen származik:

Ha bármilyen kérdése van, vegye fel a kapcsolatot a ： [email protected] címen.