Interessant behandlingsprogrammeringsveiledning for designer-fargekontroll: 10 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:21

I tidligere kapitler har vi snakket mer om hvordan du bruker kode til å forme i stedet for kunnskapspunkter om farge. I dette kapitlet skal vi utforske dette aspektet av kunnskap dypere.

Trinn 1: Grunnleggende kunnskap om farge

Farge, i et visst aspekt, har overgått menneskelig intuisjon. Ulike vakre farger vi ser med våre blotte øyne, består faktisk av de samme komponentene. Bare med de tre lyse fargene rødt, grønt og blått, kan vi lage alle farger som kan sees av menneskelige øyne gjennom blanding.

Mobilskjermer og dataskjermer du ser for øyeblikket, er laget på grunnlag av dette prinsippet. Rødt, grønt og blått kalles de tre originale lysfargene. Gjennom forholdet mellom de tre elementene kan vi sikre en viss farge. Denne beskrivelsesmetoden kalles også RGB -modus. Blant den er rød R, grønn G og blå B.

Bortsett fra RGB -modus, er det en annen modus kalt CMYK -modus. Det kombineres vanligvis med utskrift. I utskriften er det også tre originale farger. Det er imidlertid forskjellig fra de tre originale lysfargene. De er røde, gule og blått separat. Blant den er C for cyan, M for magenta og Y for gul. Teoretisk sett kan vi blande ut de fleste farger bare av CMY. Men på grunn av produksjonsteknikken for råvarer kan vi knapt få metningen av CMY til å oppnå 100%. Hvis vi blander disse tre fargene, kan vi ikke få svart farge som er mørk nok. Så det er en ekstra K, som er for svart trykkfarge, som supplement til utskrift.

Når det gjelder RGB og CMYK, trenger du bare å vite at det er en mest åpenbar forskjell i naturen. RGB er pluss fargemodus, noe som øker lysstyrken ved å blande flere farger. Mens CMYK er minusfargemodus, noe som øker mørket ved å blande flere farger. På bildet nedenfor kan vi visuelt se likhetene og forskjellene mellom de to modusene. Bildet til venstre kan vi tenke oss å være et mørkt hus med tre forskjellige farger på lommelykter slått på. Bildet til høyre kan vi betrakte det som et akvarellpapir etter overlapping med tre pigmenter rødt, grønt og blått.

Hvis du vil vite mer om dets relative forhold mellom forskjellige fargemoduser, kan du åpne Photoshop og velge fargevelgeren. Deretter kan du se fargeverdiene til samme farge under forskjellige fargemoduser intuitivt.

I det siste vil vi gjerne introdusere en annen vanlig fargemodus for deg, HSB. HSB har ikke noe begrep om “Original Color”. Det er klassifisert i henhold til følelsene til menneskelige øyne for farger. H står for fargetone, S for metning, og B er for lysstyrke.

Nyanse representerer fargetendensen. Hver farge har bare en viss fargetendens hvis den ikke er hvit, hvit eller grå. Det mest rike fargeovergangsområdet på fargevelgeren brukes til å indikere fargetone. Verdien i PS varierer fra 0 til 360.

Metning betyr fargenes renhet. Høyere renhet gir mer levende farger. Verdien i PS varierer fra 0 til 100.

Lysstyrke betyr lysstyrken på fargen, fra 0 til 100.

Sammenlignet med RGB -modus, er de tre dimensjonene til HSB mye mer i samsvar med følelsen av menneskelige øyne for farger. Bare se på HSB -verdiene, du kan generelt forestille deg hvilken farge det er.

Når det gjelder samme farge, er fargeverdien i RGB -modus (255, 153, 71), mens i HSB er (27, 72, 100).

Det er vanskelig å bedømme hvordan det vil se ut etter å ha blandet de tre originale fargene sammen hvis vi bare ser på RGB. Men HSB er annerledes. Du trenger bare å bli kjent med fargenyanser som rødt er 0, oransje er 30 og gult er 60, så vet du at det vil være en relativt mettet oransje farge med høy lysstyrke og litt nær rødt når H er 27.

Deretter korresponderer vi de tre dimensjonene til de to modusene til x, y, x i rommet og tegner en fargekubikk for å gjøre sammenligning.

RGB og HSB er bare forskjellige metoder for å beskrive farger. Vi kan ta adressen som en metafor. Anta at hvis du vil fortelle andre mennesker posisjonen til det keiserlige palasset, kan du si at det er på nr. 4 i Jingshan Front Street, Dongcheng -området, Beijing. Eller du kan si at den er på 15 sekunder, 55 minutter, 39 grader på nordlig breddegrad og 26 sekunder, 23 minutter, 116 grader på østlig lengdegrad. Beskrivelsesmetoden for HSB ligner den tidligere. Hvis du er kjent med det relative området, kan du vanligvis vite posisjonen til adressen. Selv om RGB kan være mer nøyaktig, men det er veldig abstrakt.

HSB -modus eksisterte med det formål å hjelpe oss med å beskrive farger mer praktisk. For å vise en bestemt type farge på skjermen, må vi endelig konvertere den til RGB -modus først.

I det ovennevnte introduserer vi tre fargemoduser: RGB, HSB, CMYK. I programmet trenger du bare å fokusere på to moduser: RGB og HSB. De har sine egne fordeler og sine egne applikasjoner på samme tid. Hvis du er kjent med det, vil det tilfredsstille dine mest designende krav.

Trinn 2: Datatype for lagring av farger

For å vise farger i programmet bruker vi stort sett RGB -modus tidligere. Men bare ved å kontrollere de tre egenskapene kan vi vise noen farger? På datamaskinen er det slik.

Vi har tidligere referert til at vi i Processing, bortsett fra R, G, B, kan angi en alfa (transparens) for farger. Men alfa tilhører ikke fargekomponenten. Eksistensen er en praktisk blanding med farger bak. Derfor må datamaskiner bare beskrive de tre viktigste variablene for at datamaskiner skal beskrive en bestemt type farge nøyaktig.

I det følgende begynner vi å introdusere en slags datatype Color, som hovedsakelig brukes til lagring av farger. Det ligner på tidligere refererte datatyper som boolena, int, float.

Her skal jeg først forklare den faktiske fargebruk. Tenk deg dette: anta at hvis vi bare kan bruke de tidligere mestrede metodene for å lagre visse data, hva skal vi gjøre?

Kodeksempel (9-1):

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

ugyldig oppsett () {

størrelse (400, 400);

r = 255;

g = 0;

b = 0;

}

ugyldig trekning () {

bakgrunn (0);

rectMode (SENTRUM);

fyll (r, g, b);

rett (bredde/2, høyde/2, 100, 100);

}

[/cceN_cpp]

Når det gjelder farger som har fargetendens, må vi lage tre variabler for å lagre data i tre fargekanaler, henholdsvis rødt, grønt og blått. Senere, hvis vi ønsker å påkalle dette settet med fargedata, må vi skrive det inn i fyll eller streke.

Men du vil synes det er for plagsomt å gjøre det fordi data er sammenkoblet. Hvis du har en ide om å pakke dem i bruk, vil det være mer praktisk. Derfor skapes farge.

Kodeksempel (9-2):

[cceN_cpp theme = "dawn"] farge myColor;

ugyldig oppsett () {

størrelse (400, 400);

myColor = farge (255, 0, 0);

}

ugyldig trekning () {

bakgrunn (0);

rectMode (SENTRUM);

fyll (myColor);

rett (bredde/2, høyde/2, 100, 100);

} [/cceN_cpp]

Samme med datatyper som int. Vi må bruke “color myColor” i begynnelsen for å lage variabler.

I oppsettet bruker vi “myColor = color (255, 0, 0)” for å tildele verdi til variabelen myColor. Selv om funksjonsfarge (a, b, c) med rette representerer at dette datasettet har dannet en fargetype for å importere variabelen myColor. Hvis du skriver “myColor = (255, 0, 0)”, vil programmet gå galt.

I det siste bruker vi fill () for å realisere driften av fargestoff. Funksjonsfylling () og slag () lar begge overlappe hverandre. I henhold til mengden og typen parametere vil det ha forskjellige effekter. Importerer bare én heltallsvariabel, som representerer den, er en farge med bare gråtoner. Når du importerer en variabel farge, betyr det at fargeområdet blir større. Du kan også importere en fargevariabel og en heltallsvariabel, endre funksjonsfyll () i ovenstående til fylling (myColor, 150), så kan du kontrollere alfa med den andre parameteren.

Trinn 3: Overlappende fyllingsmetode

slag, bakgrunnen har samme overlappende metode med fyll.

Les Kanalverdi av farge

I tillegg til oppgaver kan du også uavhengig få RGB -verdien i fargevariabelen

Kodeksempel (9-3):

[cceN_cpp theme = "dawn"] farge myColor;

ugyldig oppsett () {

myColor = farge (255, 125, 0);

println (rød (myColor));

println (grønn (myColor));

println (blå (myColor));

}

[/cceN_cpp]

Resultat i konsollen: 255, 125, 0.

Funksjonen rød (), grønn (), blå () vil relativt gå tilbake til verdien av rød, grønn og blå kanal i myColor.

Heksadesimal oppgave

Bortsett fra å bruke desimaltall for å vise RGB, kan vi også bruke heksadesimal. Desimal betyr å øke 1 når den møter 10. Mens heksadesimal betyr å øke 1 når den møter 16. Dens relative forhold til desimal er: “0 til 9” tilsvarer “0 til 9”,” A til F”tilsvarer” 10 til 15”.

Bildet nedenfor viser illustrasjonen av konverteringsmetoden.

Selvfølgelig, hvis vi får et sett med heksadesimale verdier som ff7800, trenger vi ikke å konvertere det manuelt. Programmet vil tilordne verdier til fargevariabler direkte. Det er veldig praktisk.

Vi kan se at mange fargekort på nettet alle bruker heksadesimal metode for å vise farge.

I likhet med designfellesskapets dribbling, vil kunstverk festes i fargepaletter. Hvis du ser en favorittfarging, kan du bruke den på programmet.

Kodeksempel (9-4):

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

ugyldig oppsett () {

størrelse (400, 400);

rectMode (SENTRUM);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

ugyldig trekning () {

bakgrunn (backColor);

fyll (colorA);

rett (200, 200, 90, 300);

fyll (colorB);

rett (100, 200, 90, 300);

fyll (colorC);

rett (300, 200, 90, 300);

} [/cceN_cpp]

Nå er fargen mye mer behagelig med bedre effekt enn å legge inn verdier tilfeldig.

Legg til "#" før den heksadesimale fargeverdien, så kan du tilordne verdien til variabel farge direkte.

Trinn 4: HSB -modus

Ved siden av RGB -modus, neste skal vi snakke om HSB -modus. Følgende viser verditildelingsmetoden for HSB -modus.

Kodeksempel (9-5):

[cceN_cpp theme = "dawn"] ugyldig oppsett () {

størrelse (400, 400);

colorMode (HSB);

}

ugyldig trekning () {

bakgrunn (0);

rectMode (SENTRUM);

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

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

fyll (kol);

rett (i * 20 + 10, høyde/2, 10, 300);

}

} [/cceN_cpp]

I prosessering trenger vi bare å legge til en setning med colorMode (HSB) for å bytte HSB -modus. Bruk av funksjon colorMode () er å skifte fargemodus. Hvis vi skriver “HSB” i braketten, blir den satt til HSB -modus; mens vi skriver “RGB”, vil den bli flyttet til RGB -modus.

Det som er verdt å være oppmerksom på er når vi skriver colorMode (HSB), er standardverdien for HSB 255. Dette er ganske annerledes enn maksimalverdien i Photoshop. I Photoshop er maksverdien til H 360, maksverdien til S og B er 100. Så vi må gjøre konvertering.

Hvis HSB -verdien i Photoshop er (55, 100, 100), bør denne verdien være (55 /360 × 255, 255, 255), dvs. (40, 255, 255) når den konverteres til Processing.

colorMode () er en funksjon som kan overlappes. I det følgende vil vi presentere det for deg i detalj.

Trinn 5: Overlappende metode for ColorMode

Derfor, hvis du ikke vil konvertere HSB -verdien i Photoshop manuelt, kan du skrive “colorMode ()” til “colorMode (HSB, 360, 100, 100)”.

HSB Mode Application Case 1

Fordi RGB -modus ikke er veldig praktisk for å kontrollere endringer av fargetone, kan du på dette tidspunktet vurdere HSB -modus hvis du ønsker å kontrollere farger mer fleksibelt.

Kodeksempel (9-6):

[cceN_cpp theme = "dawn"] ugyldig oppsett () {

størrelse (800, 800);

bakgrunn (0);

colorMode (HSB);

}

ugyldig trekning () {

slagvekt (2);

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

flyte newX, newY;

newX = mouseX + (støy (millis ()/1000.0 + 1.2) - 0.5) * 800;

newY = mouseY + (støy (millis ()/1000.0) - 0.5) * 800;

line (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Når vi kontrollerer H (fargetoner) i slag, har vi brukt millis (). Det vil få driftstiden fra begynnelsen til i dag. Som med tiden som går fremover, vil verdien av H (fargetone) øke automatisk, og fargene endres.

Enheten til millis () er ms. Så når programmet kjører i 1 sekund, vil returverdien være 1000. Dette vil føre til en verdi som er for stor. Så vi må dele det med 1000,0.

Fordi vi håper at farger vil presentere en periodisk sirkulasjon, så vi må gjøre modulo -drift når vi endelig skriver den første parameteren i slag. Dette kan sikre at det starter fra 0 igjen når H (fargetone) har overgått 255.

Funksjon strokeWeight () kan kontrollere tykkelsen på linjer. Den tilsvarende enheten for parametere innenfor braketten er piksel.

Trinn 6: Mode Application Case 2

Kodeksempel (9-7):

[cceN_cpp theme = "dawn"] int num; // antall linjer som er tegnet

flyte posX_A, posY_A; // Koordinat for punkt A

flyte posX_B, posY_B; // Koordinat for punkt B

flytevinkel A, hastighetA; // Vinkel på punkt A, hastighet

flytevinkelB, hastighetB; // Vinkel på punkt B, hastighet

flyteradiusX_A, radiusY_A; // Radius av oval dannet av punkt A i X (Y) aksel.

flyteradiusX_B, radiusY_B; // ovalradius dannet av punkt B i X (Y) aksel.

ugyldig oppsett () {

størrelse (800, 800);

colorMode (HSB);

bakgrunn (0);

hastighet A = 0,0009;

hastighetB = 0,003;

radiusX_A = 300;

radius Y_A = 200;

radiusX_B = 200;

radius Y_B = 300;

}

ugyldig trekning () {

translate (bredde/2, høyde/2);

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

vinkel A += hastighetA;

vinkel B += hastighetB;

posX_A = cos (vinkelA) * radiusX_A;

posY_A = sin (vinkelA) * radiusY_A;

posX_B = cos (vinkelB) * radiusX_B;

posY_B = sin (vinkelB) * radiusY_B;

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

linje (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Driftseffekt:

Utgangsbilde:

Mønsteret du ser er produsert av en bevegelseslinje gjennom konstant overlapping. Sporene etter de to endepunktene på linjen er to sirkler hver for seg.

Gjennom HSB -modus har vi kontrollert nyansene. Med økningen av linjer, vil fargetonen kompensere. Når massive halvgjennomsiktige linjer overlapper hverandre, vil det skape en veldig rik fargegradient.

Vi har innebygd en for sløyfe i funksjonstegning med sikte på å bruke for sløyfe for å kontrollere linjemengden. Det tilsvarer at vi har kontrollert tegnehastighet. Øker verdien av dømmingstilstand i for loop, vil det øke tegningen seepd.

Nedenfor er den skjematiske figuren. Du kan se bevegelsessporet til sirkler tydeligere.

Juster forskjellig hastighet og radius, mønstrene som dannes vil også være forskjellige. Prøv å endre variabler som vinkel, hastighet, radiusX, radiusY og se hva som vil skje.

Trinn 7: Lagblandingsmodus

De forskjellige fargemodusene vi snakket om før, er alle vant til fargegrafikkens komponenter. Bortsett fra å bruke denne metoden for å kontrollere farge, kan Processing bruke blandingsmoduser for forskjellige lag som Photoshop.

Åpne lagvinduet i PS, klikk for å velge blandingsmodus for lag, så kan vi se disse alternativene.

Dette er eksisterende lagmoduser i PS. For å si det enkelt kan blandingsmodus betraktes som en slags fargeberegningsmodus. Den bestemmer hvilken farge som skal opprettes i den siste når “farge A” pluss “farge B”. Her betyr “farge A” fargen bak det nåværende laget (også kalt grunnfarge). "Farge B" betyr fargen på det nåværende laget (også kalt blandet farge). Programmet vil beregne for å få farge C i henhold til RGB -verdien og alfa for farge A og B. Den vil vises på skjermen som en resultatfarge.

Ulike lagmodus står for forskjellige beregningsmetoder. I den neste halvdelen av denne artikkelserien vil vi fortsette å forklare den i detaljer. Nå må vi bare vite bruken først.

La oss se på et eksempel på bruk av Add Mode i programmet.

Kodeksempel (9-8):

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

ugyldig oppsett () {

størrelse (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

ugyldig trekning () {

bakgrunn (0);

blendMode (ADD);

bilde (bilde 1, 0, 0, 400, 400);

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

}

[/cceN_cpp]

Resultat:

Funksjon blendMode () brukes til å angi blandingsmodus for grafikk. Vi fyller ut ADD bak betyr at vi har angitt Add Mode.

I programmet er det ingen lagbegrep. Men fordi det er en tegningssekvens for de grafiske komponentene, blir bildet 1 derfor sett på som grunnfarge og bilde 2 som blandet farge når du blander bilder.

ADD -modus tilhører "Brighten Class". Etter bruk har du en lysere effekt.

Nedenfor er en blandemodus som kan brukes i prosessering.

Trinn 8: Behandler blandemodus

Vi kan prøve å endre forskjellige blandemodus for å se effekten.

Når eksempel (9-8) har vedtatt overlappende modus (bakgrunnen skal settes til hvit):

Etter bruk av Subtraktsmodus (bakgrunnen skal settes til hvit):

Trinn 9: Layer Blending Mode Application Case

Blandemodus kan ikke bare brukes til bilder, men også egnet for alle grafiske komponenter i lerretet. Nedenfor har vist en bruk om Legg til -modus. Den kan brukes til å analog ulike lyseffekter.

Kodeksempel (9-9):

[cceN_cpp theme = "dawn"] ugyldig oppsett () {

størrelse (400, 400);

}

ugyldig trekning () {

bakgrunn (0);

blendMode (ADD);

int num = int (3000 * mouseX/400,0);

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

hvis (tilfeldig (1) <0,5) {

fyll (0, 50, 0);

}ellers{

fyll (50);

}

ellipse (tilfeldig (50, bredde - 50), tilfeldig (50, høyde - 50), 20, 20);

}

}

[/cceN_cpp]

Her, gjennom tilfeldig funksjon, har vi blandet grønn farge og hvit farge, som allerede har båret alfa, inn i partiklene. Vi kan bruke musen til å kontrollere mengden sirkel og se den overlappende effekten.

ADD og SCREEN er ganske like. Selv om det er det samme for å lyse, er det subtile forskjeller. Du kan erstatte den til SCREEN og sammenligne. Etter å ha blitt overlappet, vil renheten og lysstyrken til ADD være høyere. Den er egnet for å analogere lyseffekten.

Når det gjelder farge, har vi kommet til en slutt i dette kapitlet. For dette "språket" har du allerede mestret nok ledige ord. Skynd deg nå å bruke kode for å nyte verden av form og farge!

Trinn 10: Kilde

Denne artikkelen er fra:

Hvis du har spørsmål, kan du kontakte ： [email protected].