Interessant behandlingsprogrammeringsvejledning til designer-farvekontrol: 10 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

I tidligere kapitler har vi talt mere om, hvordan man bruger kode til at forme i stedet for videnspunkter om farve. I dette kapitel vil vi undersøge dette aspekt af viden dybere.

Trin 1: Grundlæggende viden om farve

Farve har i et vist aspekt overgået den menneskelige intuition. Forskellige smukke farver, vi så med vores blotte øjne, består faktisk af de samme komponenter. Kun med de tre lyse farver rød, grøn og blå kan vi skabe alle farver, der kan ses af menneskelige øjne gennem blanding.

Mobilskærme og computerskærme, du i øjeblikket har set, er oprettet på grundlag af dette princip. Rød, grøn og blå kaldes de tre originale lysfarver. Gennem forholdet mellem de tre elementer kan vi sikre en bestemt farve. Denne beskrivelsesmetode kaldes også RGB -tilstand. Blandt den er rød R, grøn er G og blå er B.

Bortset fra RGB -tilstand er der en anden tilstand kaldet CMYK -tilstand. Det kombineres normalt med udskrivning. Ved tryk er der også tre originale farver. Det er imidlertid anderledes end de tre originale lysfarver. De er røde, gule og blå separat. C er for cyan, M for magenta og Y for gul. Teoretisk set kan vi kun blande de fleste farver med CMY. Men på grund af produktionsteknikken af råmateriale kan vi næsten ikke få mætningen af CMY til at nå 100%. Hvis vi blander disse tre farver, kan vi ikke opnå sort, der er mørk nok. Så der er et ekstra K, som er til sort trykfarve, som supplement til tryk.

Hvad angår RGB og CMYK, skal du kun vide, at der er en mest indlysende forskel i naturen. RGB er plusfarvetilstand, hvilket øger lysstyrken ved at blande flere farver. Mens CMYK er minusfarvetilstand, hvilket øger mørket ved at blande flere farver. På billedet herunder kan vi visuelt se ligheder og forskelle mellem de to tilstande. Det venstre billede kan vi forestille os at være et mørkt hus med tre forskellige farver lommelygter tændt. Billedet til højre kan vi betragte det som et akvarelpapir efter overlapning med tre pigmenter rød, grøn og blå.

Hvis du vil kende dens relative forhold mellem forskellige farvetilstande mere dybt, kan du åbne din Photoshop og vælge farvevælgeren. Derefter kan du intuitivt se farveværdierne for den samme farve under forskellige farveindstillinger.

I sidste ende vil vi gerne introducere en anden almindelig farvetilstand for dig, HSB. HSB har ikke noget begreb om “Original Color”. Det er klassificeret efter følelser i menneskelige øjne for farver. H står for farvetone, S for mætning, og B er for lysstyrke.

Nuance repræsenterer faretendensen. Hver farve har kun en bestemt farvetendens, hvis den ikke er balck, hvid eller grå. Det mest rige farveovergangsområde på farvevælgeren bruges til at angive nuance. Dens værdi i PS varierer fra 0 til 360.

Mætning betyder farvens renhed. Højere renhed giver mere levende farver. Dens værdi i PS varierer fra 0 til 100.

Lysstyrke betyder lysstyrken i farven fra 0 til 100.

Sammenlignet med RGB -tilstand er de tre dimensioner af HSB meget mere i overensstemmelse med følelsen af menneskelige øjne for farver. Se kun på HSB -værdier, du kan generelt forestille dig hvilken slags farve det er.

Med hensyn til den samme farve er farveværdien i RGB -tilstand (255, 153, 71), mens den i HSB er (27, 72, 100).

Det er svært at bedømme, hvordan det vil se ud efter at have blandet de tre originale farver sammen, hvis vi kun ser på RGB. Men HSB er anderledes. Du behøver kun at blive fortrolig med farvenuancer som rød er 0, orange er 30 og gul er 60, så ved du, at det vil være en forholdsvis mættet orange farve med høj lysstyrke og lidt tæt på rødt, når H er 27.

Dernæst vil vi svare de tre dimensioner af de to tilstande til x, y, x i rummet og tegne en farvekubik for at sammenligne.

RGB og HSB er bare forskellige metoder til at beskrive farver. Vi kan tage adressen som en metafor. Antag, at hvis du vil fortælle andre mennesker positionen for det kejserlige palads, kan du sige, at det er på nr. 4 på Jingshan Front Street, Dongcheng -området, Beijing. Eller du kan sige, at det er på 15 sekunder, 55 minutter, 39 grader på nordlig bredde og 26 sekunder, 23 minutter, 116 grader på østlig længde. Beskrivelsesmetoden for HSB ligner den tidligere. Hvis du kender det relative område, kan du generelt kende adressens placering. Selvom RGB måske er mere præcis, men det er meget abstrakt.

HSB -tilstand eksisterede med det formål at hjælpe os med at beskrive farve mere bekvemt. For at vise en bestemt slags farve på skærmen skal vi endelig konvertere den til RGB -tilstand først.

I ovenstående introducerer vi tre farvetilstande: RGB, HSB, CMYK. I programmet skal du kun fokusere på to tilstande: RGB og HSB. De har deres egne fordele og deres egne applikationer på samme tid. Hvis du kender det, tilfredsstiller det dine mest designkrav.

Trin 2: Datatype til lagring af farver

For at vise farver i programmet bruger vi for det meste RGB -tilstand i før. Men kun ved at kontrollere de tre egenskaber kan vi vise nogen farver? I computeren er det sådan her.

Vi har tidligere henvist til, at vi i Processing, bortset fra R, G, B, kan angive en alfa (gennemsigtighed) for farver. Men alfa tilhører ikke farvekomponenten. Dens eksistens er en bekvem blanding med farver bagved. Derfor, for at computere kan beskrive en bestemt slags farve nøjagtigt, er vi kun nødt til at kontrollere de tre vigtigste variabler.

I det følgende begynder vi at introducere en slags datatype Farve, som hovedsageligt bruges til lagring af farver. Det ligner tidligere henviste datatyper som boolena, int, float.

Lad mig her blive ved med at forklare den faktiske brug af farve først. Forestil dig dette: Antag, at hvis vi kun kan bruge de tidligere mestrede metoder til at gemme bestemte data, hvad skal vi gøre?

Kodeksempel (9-1):

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

ugyldig opsætning () {

størrelse (400, 400);

r = 255;

g = 0;

b = 0;

}

ugyldig tegning () {

baggrund (0);

rectMode (CENTER);

fyld (r, g, b);

rect (bredde/2, højde/2, 100, 100);

}

[/cceN_cpp]

Hvad angår farver, der har farvetendens, skal vi oprette tre variabler for at gemme data i tre farvekanaler, henholdsvis rød, grøn og blå. Senere, hvis vi vil påberåbe os dette sæt farvedata, skal vi skrive det i udfyldning eller streger.

Men du vil opleve, at det er for besværligt at gøre det, fordi data er indbyrdes forbundne. Hvis du har en idé om at pakke dem i brug, vil det være mere bekvemt. Derfor skabes farve.

Kodeksempel (9-2):

[cceN_cpp theme = "dawn"] farve myColor;

ugyldig opsætning () {

størrelse (400, 400);

myColor = farve (255, 0, 0);

}

ugyldig tegning () {

baggrund (0);

rectMode (CENTER);

fill (myColor);

rect (bredde/2, højde/2, 100, 100);

} [/cceN_cpp]

Det samme med datatyper som int, vi skal bruge "color myColor" i begyndelsen til at oprette variabler.

I opsætningen bruger vi “myColor = color (255, 0, 0)” til at tildele værdi til variabel myColor. Mens funktionsfarve (a, b, c) med rette repræsenterer, at dette datasæt har dannet en farvetype for at importere variablen myColor. Hvis du skriver “myColor = (255, 0, 0)”, går programmet galt.

I sidste ende bruger vi fill () til at realisere driften af farvepolstring. Funktionsudfyldning () og streg () er begge i stand til at overlappe hinanden. I henhold til mængden og typen af parametre vil det have forskellige effekter. Importerer kun en heltalsvariabel, som repræsenterer den, er en farve med kun gråtoner. Når du importerer en variabel farve, betyder det, at farveområdet vil være større. Du kan også importere en farvevariabel og en heltalsvariabel, ændre funktionsfyld () i ovenstående til fill (myColor, 150), så kan du styre alfa med den anden parameter.

Trin 3: Overlapningsmetode til fyldning

streg, baggrund har samme overlappende metode med fyld.

Læs kanalværdi af farve

Udover opgaver kan du også uafhængigt få RGB -værdien i farvevariablen

Kodeksempel (9-3):

[cceN_cpp theme = "dawn"] farve myColor;

ugyldig opsætning () {

myColor = farve (255, 125, 0);

println (rød (myColor));

println (grøn (myColor));

println (blå (myColor));

}

[/cceN_cpp]

Resultat i konsollen: 255, 125, 0.

Funktion rød (), grøn (), blå () vender relativt tilbage til værdien af rød, grøn og blå kanal i myColor.

Hexadecimal opgave

Bortset fra at bruge decimaltal til at vise RGB, kan vi også bruge hexadecimal. Decimal betyder at øge 1 når det møder 10. Mens hexadecimal betyder at øge 1 når det møder 16. Dets relative forhold til decimal er: “0 til 9” svarer til “0 til 9”,” A til F”svarer til” 10 til 15”.

Billedet herunder er illustrationen af konverteringsmetoden.

Selvfølgelig, hvis vi får et sæt hexadecimale værdier som ff7800, behøver vi ikke at konvertere det manuelt. Programmet tildeler værdier til farvevariabler direkte. Det er meget praktisk.

Vi kan se mange farvekort online, der alle anvender hexadecimal metode til at vise farve.

Ligesom designfællesskabet dribler, vil kunstværker blive vedhæftet farvepaletter. Hvis du ser en yndlingsfarve, kan du anvende den på programmet.

Kodeksempel (9-4):

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

ugyldig opsætning () {

størrelse (400, 400);

rectMode (CENTER);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

ugyldig tegning () {

baggrund (backColor);

fyld (farveA);

ret (200, 200, 90, 300);

fyld (colorB);

ret (100, 200, 90, 300);

fyld (farveC);

ret (300, 200, 90, 300);

} [/cceN_cpp]

Nu er farven meget mere behagelig med bedre effekt end at indtaste værdier tilfældigt.

Tilføj “#” før den hexadecimale farveværdi, så kan du tildele værdi til variabel farve direkte.

Trin 4: HSB -tilstand

Ved siden af RGB -tilstand vil vi derefter tale om HSB -tilstand. Følgende viser værditildelingsmetoden for HSB -tilstand.

Kodeksempel (9-5):

[cceN_cpp theme = "dawn"] ugyldig opsætning () {

størrelse (400, 400);

colorMode (HSB);

}

ugyldig tegning () {

baggrund (0);

rectMode (CENTER);

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

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

fyld (kol);

ret (i * 20 + 10, højde/2, 10, 300);

}

} [/cceN_cpp]

I Processing skal vi kun tilføje en sætning i colorMode (HSB) for at skifte HSB -tilstand. Brugen af funktionen colorMode () er at skifte farvetilstand. Hvis vi skriver “HSB” i parentes, vil det blive sat til HSB -tilstand; mens vi skriver “RGB”, flyttes det til RGB -tilstand.

Det er værd at være opmærksom på, når vi skriver colorMode (HSB), er standardværdien for HSB 255. Dette er ganske anderledes end den maksimale værdi i Photoshop. I Photoshop er den maksimale værdi af H 360, maks. Værdien af S og B er 100. Så vi skal lave konvertering.

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

colorMode () er en funktion, der kan overlappes. I det følgende vil vi præsentere det for dig i detaljer.

Trin 5: Overlappende metode til ColorMode

Hvis du derfor ikke ønsker at konvertere HSB -værdi i Photoshop manuelt, kan du skrive "colorMode ()" til "colorMode (HSB, 360, 100, 100)".

HSB Mode Application Case 1

Fordi RGB -tilstand ikke er helt praktisk til at kontrollere farveskiftet, kan du på nuværende tidspunkt overveje HSB -tilstand, hvis du ønsker at styre farver mere fleksibelt.

Kodeksempel (9-6):

[cceN_cpp theme = "dawn"] ugyldig opsætning () {

størrelse (800, 800);

baggrund (0);

colorMode (HSB);

}

ugyldig tegning () {

strokeWeight (2);

slagtilfælde (int (millis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

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

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

linje (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Når vi kontrollerer H (nuancer) i slagtilfælde, har vi brugt millis (). Det vil opnå driftstiden fra begyndelsen til i dag. Som med tiden fremad stiger værdien af H (nuance) automatisk, derefter ændres farven.

Enheden millis () er ms. Så når programmet kører i 1 sekund, vil returværdien være 1000. Dette vil føre til en værdi, der er for stor. Så vi skal dele det med 1000,0.

Fordi vi håber, at farver vil præsentere en periodisk cirkulation, så vi er nødt til at udføre modulo -drift, når vi endelig skriver den første parameter i streg. Dette kan sikre, at det starter fra 0 igen, når H (nuance) har overskredet 255.

Funktion strokeWeight () kan kontrollere tykkelsen af linjer. Den tilsvarende enhed for parametre inden for parentes er pixel.

Trin 6: Mode Application Case 2

Kodeksempel (9-7):

[cceN_cpp theme = "dawn"] int num; // mængde linjer, der i øjeblikket trækkes

float posX_A, posY_A; // Koordinat for punkt A

float posX_B, posY_B; // Koordinat for punkt B

flydevinkel A, hastighedA; // Vinkel på punkt A, hastighed

flydevinkelB, hastighedB; // Vinkel på punkt B, hastighed

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

flyderadiusX_B, radiusY_B; // ovalradius dannet af punkt B i X (Y) aksel.

ugyldig opsætning () {

størrelse (800, 800);

colorMode (HSB);

baggrund (0);

hastighedA = 0,0009;

hastighedB = 0,003;

radiusX_A = 300;

radiusY_A = 200;

radiusX_B = 200;

radiusY_B = 300;

}

ugyldig tegning () {

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

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

vinkel A += hastighedA;

vinkelB += hastighedB;

posX_A = cos (vinkelA) * radiusX_A;

posY_A = sin (vinkelA) * radiusY_A;

posX_B = cos (vinkelB) * radiusX_B;

posY_B = sin (vinkelB) * radiusY_B;

slagtilfælde (int (num/500,0) % 255, 255, 255, 10);

linje (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Driftseffekt:

Outputbillede:

Det mønster, du har set, frembringes af en bevægelseslinje gennem konstant overlapning. Sporene efter linjens to endepunkter er to cirkler hver for sig.

Gennem HSB -tilstand har vi kontrolleret farvenuancerne. Med stigningen i linjer vil nuancen opvejes. Når massive halvgennemsigtige linjer overlapper hinanden, vil det skabe en meget rig farvegradient.

Vi har integreret en for loop i funktion draw med det formål at bruge for loop til at styre mængden af line. Det svarer til, at vi har kontrolleret tegningshastighed. Forøgelse af værdien af bedømmelsestilstand i for loop, det vil øge tegningen seepd.

Nedenfor er den skematiske figur. Du kan se bevægelsessporet af cirkler mere tydeligt.

Juster forskellig hastighed og radius, de dannede mønstre vil også være forskellige. Prøv at ændre variabler som vinkel, hastighed, radiusX, radiusY og se, hvad der vil ske.

Trin 7: Lagblandingstilstand

De forskellige farvetilstande, vi talte om før, bruges alle til at farvekomponenter i farver. Bortset fra at bruge denne metode til at styre farve, kan Processing bruge forskellige lags blandingstilstande som Photoshop.

Åbn lagvinduet i PS, klik for at vælge lagets blandingstilstand, så kan vi se disse muligheder.

Disse er eksisterende lagtilstande i PS. For at sige det enkelt kan blandingstilstand betragtes som en slags farveberegningstilstand. Det bestemmer, hvilken farve der skal oprettes i den sidste, når “farve A” plus “farve B”. Her betyder “farve A” farven bag det nuværende lag (også kaldet grundfarve). "Farve B" betyder farven på det nuværende lag (også kaldet blandet farve). Programmet vil beregne for at opnå farve C i henhold til RGB -værdien og alfa for farve A og B. Den vises på skærmen som en resultatfarve.

Forskellig lagtilstand står for forskellige beregningsmetoder. I den næste halve del af denne artikelserie vil vi fortsætte med at forklare det i detaljer. Nu skal vi først kende dets anvendelse.

Lad os se på et eksempel på brug af tilføjelsestilstand i programmet.

Kodeksempel (9-8):

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

ugyldig opsætning () {

størrelse (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

ugyldig tegning () {

baggrund (0);

blendMode (ADD);

billede (billede 1, 0, 0, 400, 400);

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

}

[/cceN_cpp]

Resultat:

Function blendMode () bruges til at indstille grafikkens blandingstilstand. Vi udfylder ADD bagved, at vi har indstillet tilføjelsestilstand.

I programmet er der intet lagbegreb. Men fordi der er tegningssekvens af de grafiske komponenter, betragtes billede 1 som grundfarve og billede 2 som blandet farve, når man blander billeder.

ADD -tilstand tilhører "Brighten Class". Efter brug har du en lysere effekt.

Nedenfor er en blandingstilstand, der kan bruges i behandling.

Trin 8: Behandler blandingstilstand

Vi kan prøve at ændre forskellige blandingstilstande for at se effekten.

Når eksempel (9-8) har vedtaget overlappende tilstand (baggrunden skal være hvid):

Efter brug af Subtraktilstand (baggrunden skal indstilles til hvid):

Trin 9: Layer Blending Mode Application Case

Blandingstilstand kan ikke kun bruges til billeder, men også egnet til alle grafiske komponenter i lærredet. Nedenfor har vist en brug om tilføjelsestilstand. Det kan bruges til at analog forskellige lyseffekter.

Kodeksempel (9-9):

[cceN_cpp theme = "dawn"] ugyldig opsætning () {

størrelse (400, 400);

}

ugyldig tegning () {

baggrund (0);

blendMode (ADD);

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

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

hvis (tilfældig (1) <0,5) {

fyld (0, 50, 0);

}andet{

fyld (50);

}

ellipse (tilfældig (50, bredde - 50), tilfældig (50, højde - 50), 20, 20);

}

}

[/cceN_cpp]

Her har vi gennem tilfældig funktion blandet grøn farve og hvid farve, som allerede har båret alfa, ind i partiklerne. Vi kan bruge musen til at styre mængden af cirkler og se den overlappende effekt.

ADD og SCREEN er ret ens. Selvom det er det samme at lysne, er der subtile forskelle. Du kan udskifte den til SCREEN og foretage sammenligning. Efter at være overlappet vil renheden og lysstyrken ved ADD være højere. Det er velegnet til at analogere lyseffekten.

Med hensyn til farve, her er vi kommet til en ende i dette kapitel. For dette "sprog" har du allerede mestret nok ledige stillinger. Skynd dig nu at bruge kode til at nyde verden af form og farve!

Trin 10: Kilde

Denne artikel er fra:

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