Interessante verwerkingsprogrammeringsgids vir ontwerper-kleurbeheer: 10 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:23

In vorige hoofstukke het ons meer gepraat oor hoe om kode te gebruik om vorm te doen in plaas van kennispunte oor kleur. In hierdie hoofstuk gaan ons hierdie aspek van kennis dieper ondersoek.

Stap 1: Basiese kennis oor kleur

Kleur het in sekere aspekte die menslike intuïsie oortref. Verskeie pragtige kleure wat ons met ons blote oë sien, bestaan eintlik uit dieselfde komponente. Slegs met die drie ligte kleure van rooi, groen en blou, kan ons alle kleure skep wat deur die menslike oë deur mengsel gesien kan word.

Mobiele skerms en rekenaarskerms wat u tans sien, word op grond van hierdie beginsel geskep. Rooi, groen en blou word die drie oorspronklike ligkleure genoem. Deur die verhouding van die drie elemente kan ons 'n sekere kleur verseker. Hierdie beskrywingsmetode word ook RGB -modus genoem. Rooi is R, groen is G en blou is B.

Behalwe die RGB -modus, is daar 'n ander modus genaamd CMYK -modus. Dit word gewoonlik gekombineer met drukwerk. In die drukwerk is daar ook drie oorspronklike kleure. Dit is egter anders as die drie oorspronklike kleure van lig. Hulle is rooi, geel en blou afsonderlik. Daaronder is C vir siaan, M vir magenta en Y vir geel. Teoreties, slegs deur CMY, kan ons die meeste kleure meng. Maar as gevolg van die vervaardigingstegniek van grondstowwe, kan ons die versadiging van CMY beswaarlik 100%laat bereik. As ons hierdie drie kleure meng, kan ons nie 'n swart kleur kry wat donker genoeg is nie. Daar is dus 'n ekstra K, wat vir swart drukink is, as aanvulling op drukwerk.

Wat RGB en CMYK betref, hoef u net te weet dat daar 'n baie duidelike verskil in die natuur is. RGB is 'n plus -kleurmodus, wat die helderheid verhoog deur meer kleure te meng. Terwyl CMYK minus kleurmodus is, wat die duisternis verhoog deur meer kleure te meng. In die onderstaande prentjie kan ons die ooreenkomste en verskille van die twee modusse visueel sien. Ons kan ons voorstel dat ons 'n donker huis is met drie verskillende kleure flitsligte wat aangeskakel is. In die regterkant kan ons dit as 'n waterverfpapier beskou nadat ons drie pigmente rooi, groen en blou oorvleuel het.

As u die relatiewe verhouding tussen verskillende kleurmetodes dieper wil weet, kan u u Photoshop oopmaak en die kleurkieser kies. Dan kan u die kleurwaardes van dieselfde kleur intuïtief sien.

Laastens wil ons nog 'n gewone kleurmodus vir u bekendstel, HSB. HSB het geen konsep van 'oorspronklike kleur' nie. Dit word geklassifiseer volgens die gevoelens van menslike oë vir kleure. H staan vir kleur, S vir versadiging, en B is vir helderheid.

Kleur toon die neiging tot kleur. Elke kleur het 'n sekere soort neiging slegs as dit nie balck, wit of grys is nie. Die rykste kleuroorgangsgebied op die kleurkieser word gebruik om die kleur aan te dui. Die waarde daarvan in PS wissel van 0 tot 360.

Versadiging beteken die suiwerheid van kleur. Hoër suiwerheid bring meer helder kleur. Die waarde daarvan in PS wissel van 0 tot 100.

Helderheid beteken die helderheidsgraad van kleur, wat wissel van 0 tot 100.

In vergelyking met die RGB -modus stem die drie dimensies van HSB baie meer ooreen met die gevoel van menslike oë vir kleure. Kyk net na HSB -waardes; u kan u gewoonlik voorstel watter kleur dit is.

Wat dieselfde kleur betref, is die kleurwaarde in die RGB -modus (255, 153, 71), terwyl dit in HSB (27, 72, 100) is.

Dit is moeilik om te oordeel hoe dit sal lyk na die vermenging van die drie oorspronklike kleure as ons net na RGB kyk. Maar HSB is anders. U hoef net kennis te maak met die kleure van kleure soos rooi is 0, oranje is 30 en geel is 60, dan weet u dat dit 'n relatief versadigde oranje kleur met 'n hoë helderheid en 'n bietjie naby aan rooi sal wees as H is 27.

Vervolgens sal ons die drie dimensies van die twee modusse ooreenstem met x, y, x in die ruimte en 'n kleurkubus teken om vergelyking te doen.

RGB en HSB is net verskillende metodes om kleure te beskryf. Ons kan die adres as 'n metafoor beskou. Gestel as u ander mense die posisie van die keiserlike paleis wil vertel, kan u sê dat dit op nr. 4 van Jingshan Front Street, Dongcheng -gebied, Beijing is. Of u kan sê dit is op 15 sekondes, 55 minute, 39 grade op die noordelike breedtegraad en 26 sekondes, 23 minute, 116 grade op die oostelike lengte. Die beskrywingsmetode van HSB is soortgelyk aan die voormalige. As u vertroud is met die relatiewe gebied, kan u die posisie van die adres in die algemeen ken. Alhoewel RGB meer akkuraat is, maar dit is baie abstrak.

Die HSB -modus het bestaan met die doel om ons te help om kleur gemakliker te beskryf. Om 'n sekere soort kleur op die skerm te vertoon, moet ons dit eers in die RGB -modus omskakel.

In die bostaande stel ons drie kleurmodusse bekend: RGB, HSB, CMYK. In die program hoef u slegs op twee modusse te fokus: RGB en HSB. Hulle het hul eie voordele en hul eie toepassings op dieselfde tyd. As u dit goed ken, voldoen dit aan u ontwerpvereistes.

Stap 2: Datatipe vir die stoor van kleure

Om kleure in die program te wys, gebruik ons meestal RGB -modus in die voorheen. Slegs deur die drie eienskappe te beheer, kan ons egter enige kleure vertoon? Op die rekenaar is dit so.

Ons het vroeër verwys dat ons in die verwerking, behalwe R, G, B, 'n alfa (deursigtigheid) vir kleure kan aanwys. Alfa behoort egter nie tot die kleurkomponent nie. Die bestaan daarvan is 'n gerieflike mengsel met kleure agter. Vir rekenaars om 'n sekere soort kleur akkuraat te beskryf, moet ons dus slegs die belangrikste drie veranderlikes beheer.

In die volgende begin ons 'n soort datatipe Kleur bekendstel, wat hoofsaaklik gebruik word vir die stoor van kleure. Dit is soortgelyk aan datatipes wat voorheen verwys is, soos boolena, int, float.

Laat ek eers eers die werklike kleurgebruik verduidelik. Stel jou dit voor: as ons slegs die voorheen bemeesterde metodes kan gebruik om sekere data te stoor, wat moet ons doen?

Kode Voorbeeld (9-1):

[cceN_cpp tema = "dagbreek"] int r, g, b;

ongeldige opstelling () {

grootte (400, 400);

r = 255;

g = 0;

b = 0;

}

nietige trekking () {

agtergrond (0);

rectMode (SENTRUM);

vul (r, g, b);

reg (breedte/2, hoogte/2, 100, 100);

}

[/cceN_cpp]

Wat kleure met kleurneiging betref, moet ons drie veranderlikes skep om data in drie kleurkanale van onderskeidelik rooi, groen en blou te stoor. As ons later hierdie stel kleurdata wil aanroep, moet ons dit in vul of streep skryf.

Maar u sal vind dat dit te moeilik is om dit te doen, want data is met mekaar verbind. As u 'n idee het om dit in gebruik te pak, is dit geriefliker. Daarom word kleur geskep.

Kode Voorbeeld (9-2):

[cceN_cpp theme = "dagbreek"] kleur myColor;

ongeldige opstelling () {

grootte (400, 400);

myColor = kleur (255, 0, 0);

}

nietige trekking () {

agtergrond (0);

rectMode (SENTRUM);

fill (myColor);

reg (breedte/2, hoogte/2, 100, 100);

} [/cceN_cpp]

Dieselfde met datatipes soos int, ons moet aan die begin 'kleur myColor' gebruik om veranderlikes te skep.

In die opstelling gebruik ons “myColor = color (255, 0, 0)” om waarde toe te ken aan veranderlike myColor. Terwyl funksie kleur (a, b, c) tereg voorstel dat hierdie stel data 'n kleurtipe gevorm het om veranderlike myColor in te voer. As u 'myColor = (255, 0, 0)' skryf, sal die program verkeerd loop.

Laastens gebruik ons fill () om die werking van kleurvulling te besef. Funksievul () en beroerte () kan beide oorvleuel. Afhangende van die hoeveelheid en tipe parameters, sal dit verskillende effekte hê. Die invoer van slegs een heelgetalveranderlike, wat dit verteenwoordig, is slegs 'n kleur met grysskaal. As u 'n veranderlike kleur invoer, beteken dit dat die kleurreeks groter sal wees. U kan ook 'n kleurveranderlike en 'n heelgetal veranderlike invoer, funksie vul () in die bostaande verander in vul (myColor, 150), dan kan u alfa beheer met die tweede parameter.

Stap 3: Oorvleuelende vulmetode

beroerte, agtergrond het dieselfde oorvleuelende metode met vulsel.

Lees kanaalwaarde van kleur

Benewens opdragte, kan u ook onafhanklik die RGB -waarde in die kleurveranderlike verkry

Kode Voorbeeld (9-3):

[cceN_cpp theme = "dagbreek"] kleur myColor;

ongeldige opstelling () {

myColor = kleur (255, 125, 0);

println (rooi (myColor));

println (groen (myColor));

println (blou (myColor));

}

[/cceN_cpp]

Uitslag in die konsole: 255, 125, 0.

Funksie rooi (), groen (), blou () sal relatief terugkeer na die waarde van rooi, groen en blou kanaal in myColor.

Heksadesimale opdrag

Behalwe vir die gebruik van desimale getalle om RGB aan te toon, kan ons ook heksadesimaal gebruik. Desimaal beteken dat ons 1 vermeerder wanneer dit bymekaar kom. tot 9”,“A tot F”stem ooreen met“10 tot 15”.

Die onderstaande prent is 'n illustrasie van die omskakelingsmetode.

As ons 'n stel heksadesimale waardes soos ff7800 kry, hoef ons dit natuurlik nie met die hand om te skakel nie. Die program sal waardes aan kleurveranderlikes direk toewys. Dit is baie gerieflik.

Ons kan sien dat baie kleurkaartjies aanlyn 'n heksadesimale metode gebruik om kleur te vertoon.

Net soos dribbel van ontwerpgemeenskappe, sal kunswerke kleurpalette aangeheg word. As u 'n gunsteling kleur sien, kan u dit op die program toepas.

Kode Voorbeeld (9-4):

[cceN_cpp theme = "dawn"] kleur terugKleur, kleurA, kleurB, kleurC;

ongeldige opstelling () {

grootte (400, 400);

rectMode (SENTRUM);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

kleurB = #f4a7b4;

kleurC = #f9e5f0;

}

nietige trekking () {

agtergrond (backColor);

vul (kleurA);

reg (200, 200, 90, 300);

vul (kleurB);

reg (100, 200, 90, 300);

vul (kleurC);

reg (300, 200, 90, 300);

} [/cceN_cpp]

Nou is die kleur baie gemakliker met 'n beter effek as om willekeurig waardes in te voer.

Voeg '#' by voor die heksadesimale kleurwaarde, dan kan u die waarde direk aan die veranderlike kleur toewys.

Stap 4: HSB -modus

Benewens die RGB -modus, gaan ons vervolgens praat oor die HSB -modus. Die volgende toon die waarde -toewysingsmetode van HSB -modus.

Kode Voorbeeld (9-5):

[cceN_cpp tema = "dagbreek"] leemte -opstelling () {

grootte (400, 400);

colorMode (HSB);

}

nietige trekking () {

agtergrond (0);

rectMode (SENTRUM);

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

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

vul (kol);

reg (i * 20 + 10, hoogte/2, 10, 300);

}

} [/cceN_cpp]

In die verwerking hoef ons slegs 'n sin van colorMode (HSB) om van HSB -modus oor te skakel, by te voeg. Die gebruik van funksie colorMode () is om die kleurmodus te verander. As ons “HSB” tussen die hakies skryf, word die HSB -modus ingestel; terwyl ons “RGB” skryf, sal dit na die RGB -modus oorgeskakel word.

Wat die moeite werd is om aandag te gee, is wanneer ons colorMode (HSB) skryf, die standaardwaarde van HSB is 255. Dit verskil heelwat van die maksimum waarde in Photoshop. In Photoshop is die maksimum waarde van H 360, die maksimum waarde van S en B is 100. Ons moet dus omskakel.

As die HSB -waarde in Photoshop (55, 100, 100) is, moet hierdie waarde (55 /360 × 255, 255, 255), d.w.s. (40, 255, 255), omgeskakel word na Verwerking.

colorMode () is 'n funksie wat oorvleuel kan word. In die volgende sal ons dit in detail aan u voorstel.

Stap 5: Oorvleuelende metode van ColorMode

As u dus nie die HSB -waarde handmatig in Photoshop wil omskakel nie, kan u "colorMode ()" in "colorMode (HSB, 360, 100, 100)" skryf.

HSB Mode -aansoekkas 1

Omdat die RGB -modus nie maklik is om die kleure te verander nie, kan u HSB -modus oorweeg as u kleure buigsaamder wil beheer.

Kode Voorbeeld (9-6):

[cceN_cpp tema = "dagbreek"] leemte -opstelling () {

grootte (800, 800);

agtergrond (0);

colorMode (HSB);

}

nietige trekking () {

beroertegewig (2);

beroerte (int (millis ()/1000.0 * 10)%255, 255, 255);

dryf newX, newY;

newX = mouseX + (noise (millis ()/1000.0 + 1.2) - 0.5) * 800;

newY = mouseY + (noise (millis ()/1000.0) - 0.5) * 800;

line (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

As ons H (kleure) in 'n beroerte beheer, het ons millis () gebruik. Dit sal die werkingstyd van die begin tot die hede verkry. Net soos met die tyd wat vorentoe beweeg, neem die waarde van H (kleur) outomaties toe, dan verander die kleur.

Die eenheid van millis () is ms. Dus, as die program vir 1 sekonde loop, is die opbrengswaarde 1000. Dit sal lei tot 'n te groot waarde. Ons moet dit dus met 1000.0 deel.

Omdat ons hoop dat kleure 'n periodieke sirkulasie bied, moet ons modulo -werking doen as ons uiteindelik die eerste parameter in 'n beroerte skryf. Dit kan verseker dat dit weer vanaf 0 begin wanneer H (tint) 255 oorskry het.

Funksie strokeWeight () kan die dikte van lyne beheer. Die ooreenstemmende eenheid vir parameters binne die hakie is pixel.

Stap 6: Mode -aansoekkas 2

Kode Voorbeeld (9-7):

[cceN_cpp tema = "dagbreek"] int num; // hoeveelheid lyne wat tans getrek word

dryf posX_A, posY_A; // Koördinaat van punt A

dryf posX_B, posY_B; // Koördinaat van punt B

vlotterhoek A, spoed A; // Hoek van punt A, spoed

dryfhoek B, spoedB; // Hoek van punt B, spoed

vlotterradiusX_A, radiusY_A; // Die ovaalradius gevorm deur punt A in X (Y) as.

vlotradiusX_B, radiusY_B; // die ovaalstraal gevorm deur punt B in X (Y) as.

ongeldige opstelling () {

grootte (800, 800);

colorMode (HSB);

agtergrond (0);

spoed A = 0,0009;

spoedB = 0,003;

radiusX_A = 300;

radius Y_A = 200;

radiusX_B = 200;

radius Y_B = 300;

}

nietige trekking () {

vertaal (breedte/2, hoogte/2);

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

hoek A += spoedA;

hoek B += spoedB;

posX_A = cos (hoekA) * radiusX_A;

posY_A = sin (hoekA) * radiusY_A;

posX_B = cos (hoekB) * radiusX_B;

posY_B = sin (hoekB) * radiusY_B;

beroerte (int (num/500.0) % 255, 255, 255, 10);

reël (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Operasie -effek:

Afvoerprent:

Die patroon wat u sien, word gevorm deur 'n bewegingslyn deur konstante oorvleueling. Die spore van die twee eindpunte van die lyn is twee sirkels afsonderlik.

Deur die HSB -modus het ons die kleure verander. Met die toename in lyne, word die kleur verreken. As massiewe halfdeursigtige lyne oorvleuel, sal dit 'n baie ryk kleurgradiënt skep.

Ons het 'n for lus ingebed in funksietrekking met die doel om lus te gebruik om die hoeveelheid lyn te beheer. Dit is gelykstaande aan die feit dat ons die treksnelheid beheer. Deur die waarde van die beoordelingsvoorwaarde in die lus te verhoog, verhoog die tekening seepd.

Hieronder is die skematiese figuur. U kan die bewegingspoor van sirkels duideliker sien.

Pas verskillende spoed en radius aan, die gevormde patrone sal ook anders wees. Probeer veranderlikes soos hoek, spoed, radiusX, radiusY verander en kyk wat sal gebeur.

Stap 7: Laaimengmodus

Die verskillende kleurmetodes wat ons voorheen gepraat het, word alles gebruik om die grafiese komponente in te kleur. Behalwe om hierdie metode te gebruik om kleur te beheer, kan die verwerking van verskillende lae se mengmodusse soos Photoshop gebruik word.

Maak die laagvenster in PS oop, klik om die mengmodus van lae te kies, dan kan ons hierdie opsies sien.

Dit is bestaande laagmodusse in PS. Om dit eenvoudig te sê, kan die mengmodus as 'n soort kleurberekeningsmodus beskou word. Dit sal besluit watter kleur in die laaste sal geskep word wanneer "kleur A" plus "kleur B". Hier beteken "kleur A" die kleur agter die huidige laag (ook basiskleur genoem). "Kleur B" beteken die kleur van die huidige laag (ook gemengde kleur genoem). Die program sal bereken om kleur C te verkry volgens die RGB -waarde en alfa van kleur A en B. Dit sal op die skerm as resultaatkleur vertoon word.

Verskillende laagmodusse staan vir verskillende berekeningsmetodes. In die volgende helfte van hierdie reeks artikels gaan ons verder in detail. Nou moet ons eers die gebruik daarvan ken.

Kom ons kyk na 'n voorbeeld van die gebruik van Add Mode in die program.

Kode Voorbeeld (9-8):

[cceN_cpp tema = "dagbreek"] PImage image1, image2;

ongeldige opstelling () {

grootte (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

nietige trekking () {

agtergrond (0);

blendMode (ADD);

beeld (beeld 1, 0, 0, 400, 400);

beeld (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Uitslag:

Funksie blendMode () word gebruik om die mengmodus van grafika in te stel. Ons vul ADD in agter die middele dat ons Add Mode ingestel het.

In die program is daar geen konsep van laag nie. Maar omdat daar 'n tekenreeks van die grafiese komponente is, word beeld 1 dus as basiskleur en beeld 2 as gemengde kleur beskou.

ADD -modus behoort tot "Brighten Class". Nadat u dit gebruik het, kry u 'n helder effek.

Hieronder is 'n mengmodus wat in die verwerking gebruik kan word.

Stap 8: Verwerk mengmodus

Ons kan probeer om die verskillende mengmodusse te verander om die effek te sien.

As voorbeeld (9-8) die oorvleuelingsmodus aangeneem het (die agtergrond moet op wit gestel word):

Nadat u die substraatmodus gebruik het (die agtergrond moet op wit gestel word):

Stap 9: Laagmengingsmodus -toepassingshouer

Die mengmodus kan nie net vir foto's gebruik word nie, maar ook vir alle grafiese komponente in die doek. Hieronder word 'n gebruik oor toevoegmodus vertoon. Dit kan gebruik word om verskillende beligtingseffekte te analoog.

Kode Voorbeeld (9-9):

[cceN_cpp tema = "dagbreek"] leemte -opstelling () {

grootte (400, 400);

}

nietige trekking () {

agtergrond (0);

blendMode (ADD);

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

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

as (ewekansig (1) <0.5) {

vul (0, 50, 0);

} anders {

vul (50);

}

ellips (ewekansig (50, breedte - 50), ewekansig (50, hoogte - 50), 20, 20);

}

}

[/cceN_cpp]

Hier het ons deur funksionele willekeurige groen kleur en wit kleur, wat alfa al gedra het, in die deeltjies gemeng. Ons kan die muis gebruik om die hoeveelheid sirkel te beheer en na die oorvleuelende effek te kyk.

ADD en SCREEN is baie dieselfde. Alhoewel dit dieselfde is om op te helder, is daar subtiele verskille. U kan dit na SCREEN vervang en vergelyk. Nadat dit oorvleuel is, is die suiwerheid en helderheid van ADD hoër. Dit is geskik om die beligtingseffek te analiseer.

Wat kleur betref, het ons in hierdie hoofstuk tot 'n einde gekom. Vir hierdie 'taal' het u al genoeg vakatures onder die knie. Maak gou, gebruik die kode om die wêreld van vorm en kleur te geniet!

Stap 10: Bron

Hierdie artikel is afkomstig van:

As u enige vrae het, kan u kontak: [email protected].