Interessant guia de programació de processament per al dissenyador: control del color: 10 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:11

En capítols anteriors, hem parlat més sobre com utilitzar el codi per fer configuracions en lloc de punts de coneixement sobre el color. En aquest capítol, explorarem més profundament aquest aspecte del coneixement.

Pas 1: coneixements bàsics sobre el color

El color, en cert aspecte, ha superat la intuïció humana. Diversos bells colors que veiem als nostres ulls nus consisteixen en realitat en els mateixos components. Només amb els tres colors clars del vermell, el verd i el blau, podem crear tots els colors que els ulls humans poden veure a través de la barreja.

Les pantalles mòbils i les pantalles d’ordinador que heu vist actualment es creen a partir d’aquest principi. El vermell, el verd i el blau s’anomenen els tres colors originals de la llum. A través de la proporció dels tres elements, podem assegurar un color determinat. Aquest mètode de descripció també s’anomena mode RGB. Entre elles, el vermell és R, el verd és G i el blau és B.

Excepte el mode RGB, hi ha un altre mode anomenat mode CMYK. Normalment es combina amb la impressió. A la impressió, també hi ha tres colors originals. No obstant això, és diferent als tres colors originals de la llum. Són vermelles, grogues i blaves per separat. Entre elles, C és per al cian, M és per al magenta i Y és per al groc. Teòricament, només mitjançant CMY, podem barrejar la majoria de colors. Però a causa de la tècnica de producció de matèries primeres, difícilment podem aconseguir que la saturació de CMY assoleixi el 100%. Si barregem aquests tres colors, no podem obtenir un color negre prou fosc. Per tant, hi ha un K extra, que és per a la tinta d’impressió negra, com a suplement per a la impressió.

Pel que fa a RGB i CMYK, només heu de saber que hi ha una diferència més evident en la naturalesa. El RGB és el mode de color més, cosa que augmenta la brillantor barrejant més colors. Si bé CMYK és el mode de color menys, cosa que augmenta la foscor barrejant més colors. A la imatge següent, podem veure visualment les similituds i diferències dels dos modes. A la imatge de l’esquerra, ens podem imaginar com una casa fosca amb tres colors diferents de llanternes engegades. La imatge de la dreta la podem considerar com un paper aquarel·la després de superposar-se amb tres pigments de vermell, verd i blau.

Si voleu conèixer les seves relacions relatives entre diferents modes de color amb més profunditat, podeu obrir el Photoshop i triar el selector de colors. A continuació, podeu veure intuïtivament els valors de color d’un mateix color en diferents modes de color.

A la darrera, ens agradaria introduir-vos un altre mode de color habitual, HSB. HSB no té cap concepte de "Color original". Es classifica segons els sentiments dels ulls humans pels colors. H significa tonalitat, S és saturació i B és brillantor.

La tonalitat representa la tendència del color. Tots els colors tenen un cert tipus de tendència al color només si no són de color negre, blanc o gris. L’àrea de transició de color més rica del selector de colors s’utilitza per indicar el to. El seu valor en PS oscil·la entre 0 i 360.

La saturació significa la puresa del color. Una puresa més alta aporta un color més viu. El seu valor en PS oscil·la entre 0 i 100.

La brillantor significa el grau de claror del color, que oscil·la entre 0 i 100.

En comparació amb el mode RGB, les tres dimensions del HSB són molt més concordants a la sensació dels colors dels ulls humans. Només cal fixar-se només en els valors HSB, en general es pot imaginar quin tipus de color és.

Quant al mateix color, el valor del color en mode RGB és (255, 153, 71), mentre que en HSB és (27, 72, 100).

És difícil jutjar com serà després de barrejar els tres colors originals si només mirem RGB. Però HSB és diferent. Només haureu de familiaritzar-vos amb els tons de colors com el vermell 0, el taronja 30 i el groc 60, llavors sabreu que serà d’un color taronja relativament saturat amb una brillantor elevada i una mica proper al vermell quan H sigui 27.

A continuació, correspondrem les tres dimensions dels dos modes a x, y, x a l'espai i dibuixarem un color cúbic per fer la comparació.

RGB i HSB són mètodes diferents per descriure els colors. Podem prendre l’adreça com a metàfora. Suposem que si voleu informar a altres persones de la posició del palau imperial, podeu dir que és al número 4 del carrer Front Jingshan, àrea de Dongcheng, Pequín. O es pot dir que és a 15 segons, 55 minuts, 39 graus a latitud nord i 26 segons, 23 minuts, 116 graus a longitud est. El mètode de descripció de HSB és similar al primer. Si coneixeu l’àrea relativa, en general podeu conèixer la posició de l’adreça. Tot i que RGB pot ser més precís, però és molt abstracte.

El mode HSB existia amb l'objectiu d'ajudar-nos a descriure el color més convenientment. Per mostrar un determinat tipus de color a la pantalla, finalment hem de convertir-lo primer en mode RGB.

A l’anterior, introduïm tres modes de color: RGB, HSB, CMYK. Al programa, només us heu de centrar en dos modes: RGB i HSB. Tenen els seus propis avantatges i les seves pròpies aplicacions alhora. Si el coneixeu, satisfarà els vostres requisits de disseny.

Pas 2: tipus de dades per emmagatzemar colors

Per mostrar els colors al programa, principalment fem servir el mode RGB a l’anterior. Tot i això, només controlant les tres propietats, podem mostrar colors? En ordinador, és així.

Abans hem mencionat que a Processament, excepte R, G, B, podem designar un alfa (transparència) per als colors. Però l'alfa no pertany al component del color. La seva existència és una barreja convenient amb els colors darrere. Per tant, perquè els ordinadors puguin descriure un determinat tipus de color amb precisió, hem de controlar només les tres variables clau.

A continuació, comencem a introduir una mena de tipus de dades Color, que s'utilitza principalment per emmagatzemar colors. És similar als tipus de dades referits anteriorment com boolena, int, float.

Aquí, deixeu-me continuar explicant l’ús real del color primer. Imagineu-ho: suposem que si només podem utilitzar els mètodes dominats anteriorment per emmagatzemar determinades dades, què farem?

Exemple de codi (9-1):

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

configuració nul·la () {

mida (400, 400);

r = 255;

g = 0;

b = 0;

}

sorteig buit () {

fons (0);

rectMode (CENTRE);

farcit (r, g, b);

recta (amplada / 2, alçada / 2, 100, 100);

}

[/cceN_cpp]

Pel que fa als colors que tenen tendència al color, hem de crear tres variables per emmagatzemar les dades en tres canals de color vermell, verd i blau respectivament. Més endavant, si volem invocar aquest conjunt de dades de color, l’hem d’escriure en farciment o traç.

Però trobareu que és massa difícil fer-ho perquè les dades estan interconnectades. Si teniu idea d’envasar-los, serà més convenient. Per tant, es crea el color.

Exemple de codi (9-2):

[cceN_cpp theme = "dawn"] color myColor;

configuració nul·la () {

mida (400, 400);

myColor = color (255, 0, 0);

}

sorteig buit () {

fons (0);

rectMode (CENTRE);

omplir (myColor);

recta (amplada / 2, alçada / 2, 100, 100);

} [/cceN_cpp]

Igual que amb tipus de dades com int, hem d’utilitzar “color myColor” al principi per crear variables.

A la configuració, fem servir "myColor = color (255, 0, 0)" per assignar valor a la variable myColor. Tot i que el color de la funció (a, b, c) representa correctament que aquest conjunt de dades ha format un tipus de color per importar la variable myColor. Si escriviu "myColor = (255, 0, 0)", el programa anirà malament.

A l’últim, fem servir fill () per realitzar el funcionament del farcit de colors. Les funcions omplir () i traç () permeten superposar-se. Segons la quantitat i el tipus de paràmetres, tindrà efectes diferents. Importar només una variable sencera, que la representa, és només un color amb escala de grisos. Si importeu un color variable, vol dir que l’interval de colors serà més gran. També podeu importar una variable de color i una variable sencera, canviar la funció fill () de l’anterior a fill (myColor, 150) i, a continuació, podeu controlar l’alfa amb el segon paràmetre.

Pas 3: mètode de farciment superposat

traç, el fons té el mateix mètode de superposició amb farciment.

Llegiu el valor del color del canal

A més de les tasques, també podeu obtenir de forma independent el valor RGB a la variable de color

Exemple de codi (9-3):

[cceN_cpp theme = "dawn"] color myColor;

configuració nul·la () {

myColor = color (255, 125, 0);

println (vermell (myColor));

println (verd (myColor));

println (blau (myColor));

}

[/cceN_cpp]

Resultat a la consola: 255, 125, 0.

Les funcions vermell (), verd (), blau () tornaran relativament al valor del canal vermell, verd i blau a myColor.

Assignació hexadecimal

Excepte l'ús de nombres decimals per mostrar RGB, també podem utilitzar hexadecimal. Decimal significa augmentar 1 quan compleix 10. Mentre que hexadecimal significa augmentar 1 quan compleix 16. La seva relació relativa amb decimal és: "0 a 9" corresponen a "0 a 9 "," A a F "corresponen a" 10 a 15 ".

La imatge següent mostra la il·lustració del mètode de conversió.

Per descomptat, si obtenim un conjunt de valors hexadecimals com ff7800, no l’hem de convertir per manual. El programa assignarà valors a les variables de color directament. És molt convenient.

Podem veure moltes targetes de colors en línia que adopten un mètode hexadecimal per mostrar el color.

Igual que el driblatge de la comunitat de disseny, les obres d'art s'adjuntaran a paletes de colors. Si veieu un color preferit, el podeu aplicar al programa.

Exemple de codi (9-4):

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

configuració nul·la () {

mida (400, 400);

rectMode (CENTRE);

noStroke ();

backColor = # 395b71;

colorA = # c4d7fb;

colorB = # f4a7b4;

colorC = # f9e5f0;

}

sorteig buit () {

fons (backColor);

farcit (colorA);

rect (200, 200, 90, 300);

farcit (colorB);

rect (100, 200, 90, 300);

farcit (colorC);

rect (300, 200, 90, 300);

} [/cceN_cpp]

Ara, el color és molt més còmode amb un millor efecte que introduir valors a l’atzar.

Afegiu "#" abans del valor de color hexadecimal i, a continuació, podeu assignar un valor al color variable directament.

Pas 4: mode HSB

A més del mode RGB, a continuació parlarem del mode HSB. A continuació es mostra el mètode d'assignació de valors del mode HSB.

Exemple de codi (9-5):

[cceN_cpp theme = "dawn"] void setup () {

mida (400, 400);

colorMode (HSB);

}

sorteig buit () {

fons (0);

rectMode (CENTRE);

per a (int i = 0; i <20; i ++) {

color col = color (i / 20,0 * 255, 255, 255);

farcit (col);

rect (i * 20 + 10, altura / 2, 10, 300);

}

} [/cceN_cpp]

A Processament, per canviar el mode HSB, només hem d’afegir una frase de colorMode (HSB). L’ús de la funció colorMode () és canviar el mode de color. Si escrivim “HSB” entre claudàtors, s’establirà en mode HSB; mentre escrivim "RGB", es canviarà al mode RGB.

El que val la pena prestar atenció és quan escrivim colorMode (HSB), el valor màxim per defecte de HSB és 255. Això és molt diferent al valor màxim de Photoshop. A Photoshop, el valor màxim de H és 360, el valor màxim de S i B són 100. Per tant, hem de fer la conversió.

Si el valor HSB a Photoshop és (55, 100, 100), quan es converteix a Processament, aquest valor hauria de ser (55/360 × 255, 255, 255), és a dir (40, 255, 255).

colorMode () és una funció que es pot superposar. A continuació, us el presentarem detalladament.

Pas 5: Mètode de superposició de ColorMode

Per tant, si no voleu convertir el valor HSB a Photoshop manualment, podeu escriure "colorMode ()" a "colorMode (HSB, 360, 100, 100)".

Cas d'aplicació del mode HSB 1

Com que el mode RGB no és del tot convenient per controlar els canvis de tonalitat, en aquest moment, si voleu controlar els colors de manera més flexible, podeu considerar el mode HSB.

Exemple de codi (9-6):

[cceN_cpp theme = "dawn"] void setup () {

mida (800, 800);

fons (0);

colorMode (HSB);

}

sorteig buit () {

pes de cop (2);

traç (int (millis () / 1000,0 * 10)% 255, 255, 255);

flota newX, newY;

newX = mouseX + (noise (millis () / 1000,0 + 1,2) - 0,5) * 800;

newY = mouseY + (noise (millis () / 1000,0) - 0,5) * 800;

línia (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Quan controlem H (matisos) en traç, hem utilitzat millis (). Obtindrà el temps d’operació des del principi fins a l’actualitat. Així, tal com passa amb el temps cap endavant, el valor de H (matís) augmentarà automàticament i, a continuació, canviarà el color.

La unitat de millis () és ms. Per tant, quan el programa s’executi durant 1 segon, el valor retornat serà de 1000. Això donarà lloc a un valor massa gran. Per tant, hem de dividir-lo per 1000.0.

Com que esperem que els colors presentin una circulació periòdica, hem de fer una operació de mòdul quan finalment escrivim el primer paràmetre en traç. Això pot assegurar-se que tornarà a començar a partir de 0 quan H (tonalitat) hagi superat els 255.

La funció strokeWeight () pot controlar el gruix de les línies. La unitat corresponent per als paràmetres del parèntesi és el píxel.

Pas 6: cas d'aplicació de mode 2

Exemple de codi (9-7):

[cceN_cpp theme = "dawn"] int num; // quantitat de línies traçades actualment

flotador posX_A, posY_A; // Coordenada del punt A

flotador posX_B, posY_B; // Coordenada del punt B

angle de flotació A, velocitat A; // Angle del punt A, velocitat

angle flotant B, velocitat B; // Angle del punt B, velocitat

radi de flotació X_A, radi Y_A; // El radi de l’oval format pel punt A de l’eix X (Y).

radi de flotació X_B, radi Y_B; // el radi de l’oval format pel punt B de l’eix X (Y).

configuració nul·la () {

mida (800, 800);

colorMode (HSB);

fons (0);

velocitat A = 0,0009;

velocitat B = 0,003;

radiX_A = 300;

radiY_A = 200;

radiX_B = 200;

radiY_B = 300;

}

sorteig buit () {

traduir (amplada / 2, alçada / 2);

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

angleA + = velocitatA;

angleB + = velocitatB;

posX_A = cos (angleA) * radiX_A;

posY_A = sin (angleA) * radi Y_A;

posX_B = cos (angleB) * radiX_B;

posY_B = sin (angleB) * radi Y_B;

traç (int (num / 500,0)% 255, 255, 255, 10);

línia (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Efecte d’operació:

Imatge de sortida:

El patró que heu vist és produït per una línia de moviment mitjançant una superposició constant. Les traces dels dos punts finals de la línia són dos cercles separats.

A través del mode HSB, hem controlat els canvis de tonalitat. Amb l’augment de línies, la tonalitat es compensarà. Quan les línies mig transparents massives es superposin, crearà un degradat de color molt ric.

Hem incrustat un bucle for al dibuix de funcions amb l'objectiu d'utilitzar-lo per controlar la quantitat de línia. És equivalent a que hem controlat la velocitat de dibuix. Si augmenta el valor de la condició de judici en bucle for, augmentarà la separació del dibuix.

A continuació es mostra la figura esquemàtica. Podeu veure el rastre de moviment dels cercles amb més claredat.

Ajusteu la velocitat i el radi diferents, els patrons formats també seran diferents. Proveu de canviar variables com angle, velocitat, radi X, radi Y i vegeu què passarà.

Pas 7: mode de barreja de capes

Els diversos modes de color que parlàvem anteriorment s’utilitzen per pintar components gràfics. Excepte per utilitzar aquest mètode per controlar el color, el processament pot utilitzar modes de fusió de diverses capes, com Photoshop.

Obriu la finestra de capes a PS, feu clic per triar el mode de fusió de capes i, a continuació, podem veure aquestes opcions.

Aquests són modes de capa existents a PS. Per dir-ho simplement, el mode de fusió es pot considerar com una mena de mode de càlcul del color. Decidirà quin color es crearà en l'últim moment en què "color A" més "color B". Aquí "color A" significa el color darrere de la capa actual (també anomenat color base). "Color B" significa el color de la capa actual (també anomenada color mixt). El programa calcularà per obtenir el color C segons el valor RGB i l'alfa dels colors A i B. Es mostrarà a la pantalla com a resultat.

El mode de capes diferents significa mètodes de càlcul diferents. A la propera part d’aquesta sèrie d’articles, continuarem explicant-ho amb detalls. Ara només hem de conèixer primer el seu ús.

Vegem un exemple d’utilitzar el mode Afegeix al programa.

Exemple de codi (9-8):

[cceN_cpp theme = "dawn"] PImatge imatge1, imatge2;

configuració nul·la () {

mida (800, 400);

imatge1 = loadImage ("1.jpg");

imatge2 = loadImage ("2.jpg");

}

sorteig buit () {

fons (0);

blendMode (ADD);

imatge (imatge1, 0, 0, 400, 400);

imatge (imatge2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Resultat:

La funció blendMode () s’utilitza per configurar el mode de fusió dels gràfics. Omplim AFEGIR darrere dels mitjans que hem configurat el mode Afegeix.

Al programa, no hi ha cap concepte de capa. Però com que hi ha una seqüència de dibuix dels components gràfics, per tant, quan es combinen imatges, la imatge 1 es considera com a color base i la imatge 2 com a color mixt.

El mode ADD pertany a "Brighten Class". Després d’utilitzar-lo, obtindreu un efecte més alegre.

A continuació es mostra un mode de fusió que es pot utilitzar a Processament.

Pas 8: processament del mode de fusió

Podem provar de canviar el mode de fusió diferent per veure l’efecte.

Quan l'exemple (9-8) ha adoptat el mode de superposició (el fons s'hauria d'establir en blanc):

Després d'utilitzar el mode de substracció (el fons s'hauria d'establir en blanc):

Pas 9: cas d'aplicació del mode de barreja de capes

El mode de fusió no només es pot utilitzar per a imatges, sinó també apte per a tots els components gràfics del llenç. A continuació es mostra un ús sobre el mode Afegeix. Es pot utilitzar per analitzar diversos efectes de llum.

Exemple de codi (9-9):

[cceN_cpp theme = "dawn"] void setup () {

mida (400, 400);

}

sorteig buit () {

fons (0);

blendMode (ADD);

int num = int (3000 * mouseX / 400.0);

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

if (aleatori (1) <0,5) {

omplir (0, 50, 0);

} més {

farcit (50);

}

el·lipse (aleatòria (50, amplada - 50), aleatòria (50, alçada - 50), 20, 20);

}

}

[/cceN_cpp]

Aquí, mitjançant la funció aleatòria, hem barrejat el color verd i el blanc, que ja han portat alfa a les partícules. Podem utilitzar el ratolí per controlar la quantitat de cercles i veure l'efecte de superposició.

ADD i SCREEN són bastant similars. Tot i que és igual d’il·luminar, hi ha diferències subtils. Podeu substituir-lo per PANTALLA i fer una comparació. Després de superposar-se, la puresa i la brillantor de l'ADD seran més altes. És adequat per analitzar l’efecte de llum.

Quant al color, aquí hem arribat al final en aquest capítol. Per a aquest "idioma", ja heu dominat prou vacabularis. Ara, afanyeu-vos a utilitzar el codi per gaudir del món de la forma i el color.

Pas 10: font

Aquest article prové de:

Si teniu cap pregunta, podeu contactar amb ： [email protected].