Intressant bearbetningsprogrammeringsguide för Designer-Färgkontroll: 10 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:38

I tidigare kapitel har vi pratat mer om hur man använder kod för att forma istället för kunskapspunkter om färg. I detta kapitel kommer vi att utforska denna aspekt av kunskap djupare.

Steg 1: Grundläggande kunskap om färg

Färg, i vissa aspekter, har överträffat mänsklig intuition. Olika vackra färger vi såg med våra blotta ögon består faktiskt av samma komponenter. Endast med de tre ljusa färgerna rött, grönt och blått kan vi skapa alla färger som kan ses av mänskliga ögon genom blandning.

Mobila skärmar och datorskärmar som du för närvarande ser skapas utifrån denna princip. Rött, grönt och blått kallas de tre ursprungliga ljusfärgerna. Genom förhållandet mellan de tre elementen kan vi garantera en viss färg. Denna beskrivningsmetod kallas också RGB -läge. Bland dem är rött R, grönt är G och blått B.

Förutom RGB -läge finns det ett annat läge som kallas CMYK -läge. Det kombineras vanligtvis med utskrift. I tryck finns det också tre originalfärger. Det är dock annorlunda än de tre ursprungliga ljusfärgerna. De är röda, gula och blåa separat. C är för cyan, M för magenta och Y för gult. Teoretiskt sett kan vi blanda ut de flesta färgerna endast genom CMY. Men på grund av produktionstekniken för råmaterial kan vi knappast få CMY -mättnaden att uppnå 100%. Om vi blandar dessa tre färger kan vi inte få svart färg som är tillräckligt mörk. Så det finns ett extra K, som är för svart tryckfärg, som komplement till utskrift.

När det gäller RGB och CMYK behöver du bara veta att det finns en tydlig skillnad i naturen. RGB är plusfärgsläge, vilket ökar ljusstyrkan genom att blanda fler färger. Medan CMYK är minusfärgsläge, vilket ökar mörkret genom att blanda fler färger. På bilden nedan kan vi visuellt se likheterna och skillnaderna mellan de två lägena. Den vänstra bilden kan vi tänka oss att vara ett mörkt hus med tre olika färger på ficklampor tända. Bild till höger, vi kan betrakta det som ett akvarellpapper efter överlappning med tre pigment rött, grönt och blått.

Om du vill veta mer om dess relativa förhållanden mellan olika färglägen kan du öppna din Photoshop och välja färgväljaren. Sedan kan du se färgvärdena för en och samma färg under olika färglägen intuitivt.

I det sista skulle vi vilja introducera ett annat vanligt färgläge för dig, HSB. HSB har ingen uppfattning om”originalfärg”. Det klassificeras efter känslor hos mänskliga ögon för färger. H står för färgton, S för mättnad och B för ljusstyrka.

Nyans representerar färgtendensen. Varje färg har en viss typ av färgtendens endast om den inte är balck, vit eller grå. Det mest rika färgövergångsområdet på färgväljaren används för att indikera nyans. Dess värde i PS varierar från 0 till 360.

Mättnad betyder färgens renhet. Högre renhet ger mer levande färg. Dess värde i PS varierar från 0 till 100.

Ljusstyrka betyder ljusstyrkan i färg, från 0 till 100.

Jämfört med RGB -läge är HSB: s tre dimensioner mycket mer överensstämmande med känslan av mänskliga ögon för färger. Titta bara på HSB -värden, du kan i allmänhet föreställa dig vilken färg det är.

När det gäller samma färg är färgvärdet i RGB -läge (255, 153, 71), medan det i HSB är (27, 72, 100).

Det är svårt att bedöma hur det kommer att se ut efter att ha blandat de tre originalfärgerna om vi bara tittar på RGB. Men HSB är annorlunda. Du behöver bara bekanta dig med nyanser av färger som rött är 0, orange är 30 och gult är 60, då vet du att det kommer att vara en relativt mättad orange färg med hög ljusstyrka och lite nära rött när H är 27.

Därefter kommer vi att motsvara de tre dimensionerna för de två lägena till x, y, x i rymden och rita en färgkubik för att göra jämförelse.

RGB och HSB är bara olika metoder för att beskriva färger. Vi kan ta adressen som en metafor. Anta att om du vill berätta för andra människor ställningen för det kejserliga palatset, kan du säga att det är på nr 4 på Jingshan Front Street, Dongcheng -området, Peking. Eller så kan du säga att det är vid 15 sekunder, 55 minuter, 39 grader på nordlig latitud och 26 sekunder, 23 minuter, 116 grader på östlig longitud. Beskrivningsmetoden för HSB liknar den förra. Om du är bekant med det relativa området kan du i allmänhet veta adressens position. Även om RGB kan vara mer exakt, men det är väldigt abstrakt.

HSB -läge fanns med syfte att hjälpa oss att beskriva färgen mer bekvämt. För att visa en viss färg på skärmen måste vi slutligen konvertera den till RGB -läge först.

I ovanstående introducerar vi tre färglägen: RGB, HSB, CMYK. I programmet behöver du bara fokusera på två lägen: RGB och HSB. De har sina egna fördelar och sina egna applikationer samtidigt. Om du är bekant med det kommer det att uppfylla dina mest designkrav.

Steg 2: Datatyp för lagring av färger

För att visa färger i programmet använder vi mestadels RGB -läge tidigare. Men bara genom att kontrollera de tre egenskaperna kan vi visa några färger? I datorn är det så här.

Vi har tidigare nämnt att vi i Processing, förutom R, G, B, kan ange ett alfa (transparens) för färger. Men alfa tillhör inte färgkomponenten. Dess existens är en bekväm blandning med färger bakom. För att datorer ska kunna beskriva en viss typ av färg exakt måste vi därför bara styra de tre viktigaste variablerna.

I det följande börjar vi introducera en sorts datatyp Color, som främst används för att lagra färger. Det liknar tidigare hänvisade datatyper som boolena, int, float.

Låt mig här förklara den faktiska färganvändningen först. Föreställ dig detta: anta att om vi bara kan använda de tidigare behärskade metoderna för att lagra en viss data, vad ska vi göra?

Kodexempel (9-1):

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

void setup () {

storlek (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

bakgrund (0);

rectMode (CENTER);

fyllning (r, g, b);

rekt (bredd/2, höjd/2, 100, 100);

}

[/cceN_cpp]

När det gäller färger som har färgtendens måste vi skapa tre variabler för att lagra data i tre färgkanaler, rött, grönt respektive blått. Senare, om vi vill åberopa den här uppsättningen färgdata, måste vi skriva den i fyllning eller streck.

Men du kommer att tycka att det är för besvärligt att göra det eftersom data är sammankopplade. Om du har en idé att packa dem i bruk blir det mer bekvämt. Därför skapas färg.

Kodexempel (9-2):

[cceN_cpp theme = "dawn"] färg myColor;

void setup () {

storlek (400, 400);

myColor = färg (255, 0, 0);

}

void draw () {

bakgrund (0);

rectMode (CENTER);

fill (myColor);

rekt (bredd/2, höjd/2, 100, 100);

} [/cceN_cpp]

Samma sak med datatyper som int, vi måste använda "color myColor" i början för att skapa variabler.

I installationen använder vi “myColor = color (255, 0, 0)” för att tilldela variabel myColor värde. Medan funktionsfärg (a, b, c) med rätta representerar att denna uppsättning data har bildat en färgtyp för att importera variabeln myColor. Om du skriver “myColor = (255, 0, 0)” kommer programmet att gå fel.

I det sista använder vi fill () för att inse hur färgpolstring fungerar. Funktionsfyllning () och stroke () kan båda överlappa varandra. Enligt kvantitet och typ av parametrar kommer det att ha olika effekter. Importera endast en heltalsvariabel, som representerar den, är en färg med endast gråskala. När du importerar en variabel färg betyder det att färgintervallet blir större. Du kan också importera en färgvariabel och en heltalsvariabel, ändra funktionsfyllning () i ovanstående till fyllning (myColor, 150), sedan kan du styra alfa med den andra parametern.

Steg 3: Överlappningsmetod för fyllning

stroke, bakgrund har samma överlappande metod med fyllning.

Läs kanalens värde av färg

Förutom uppdrag kan du också självständigt få RGB -värdet i färgvariabeln

Kodexempel (9-3):

[cceN_cpp theme = "dawn"] färg myColor;

void setup () {

myColor = färg (255, 125, 0);

println (röd (myColor));

println (grön (myColor));

println (blå (myColor));

}

[/cceN_cpp]

Resultat i konsolen: 255, 125, 0.

Funktionen röd (), grön (), blå () återgår relativt till värdet av röd, grön och blå kanal i myColor.

Hexadecimal uppgift

Med undantag för att använda decimaltal för att visa RGB, kan vi också använda hexadecimal. Decimal betyder att öka 1 när den möter 10. Medan hexadecimal betyder att öka 1 när den möter 16. Dess relativa relation till decimal är:”0 till 9” motsvarar “0 till 9”,” A till F”motsvarar” 10 till 15”.

Bilden nedan är en illustration av konverteringsmetoden.

Naturligtvis, om vi får en uppsättning hexadecimala värden som ff7800, behöver vi inte konvertera det manuellt. Programmet kommer att tilldela värden till färgvariabler direkt. Det är mycket bekvämt.

Vi kan se att många färgkort online använder alla hexadecimala metoder för att visa färg.

Liksom designgemenskapens dribbling kommer konstverk att fästas i färgpaletter. Om du ser en favoritfärgning kan du applicera den på programmet.

Kodexempel (9-4):

[cceN_cpp theme = "dawn"] färg backColor, colorA, colorB, colorC;

void setup () {

storlek (400, 400);

rectMode (CENTER);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

void draw () {

bakgrund (backColor);

fyllning (colorA);

rekt (200, 200, 90, 300);

fyllning (colorB);

rekt (100, 200, 90, 300);

fyllning (colorC);

rekt (300, 200, 90, 300);

} [/cceN_cpp]

Nu är färgen mycket bekvämare med bättre effekt än att mata in värden slumpmässigt.

Lägg till "#" före det hexadecimala färgvärdet, sedan kan du tilldela värdet till variabelfärgen direkt.

Steg 4: HSB -läge

Förutom RGB -läge kommer vi nästa att prata om HSB -läge. Följande visar värdetilldelningsmetoden för HSB -läge.

Kodexempel (9-5):

[cceN_cpp theme = "dawn"] ogiltig inställning () {

storlek (400, 400);

colorMode (HSB);

}

void draw () {

bakgrund (0);

rectMode (CENTER);

för (int i = 0; i <20; i ++) {

färg kol = färg (i/20,0 * 255, 255, 255);

fyllning (kol);

rekt (i * 20 + 10, höjd/2, 10, 300);

}

} [/cceN_cpp]

I Processing behöver vi bara lägga till en mening med colorMode (HSB) för att byta HSB -läge. Funktionen colorMode () används för att ändra färgläge. Om vi skriver “HSB” i parentes, kommer det att ställas in på HSB -läge; medan vi skriver “RGB”, kommer det att flyttas till RGB -läge.

Vad som är värt att uppmärksamma är när vi skriver colorMode (HSB), är standardvärdet för HSB 255. Detta skiljer sig ganska mycket från det maximala värdet i Photoshop. I Photoshop är maxvärdet för H 360, maxvärdet för S och B är 100. Så vi måste göra omvandling.

Om HSB -värdet i Photoshop är (55, 100, 100), bör det här värdet (55 /360 × 255, 255, 255), dvs. (40, 255, 255), omvandlas till Processing.

colorMode () är en funktion som kan överlappas. I det följande kommer vi att presentera det för dig i detalj.

Steg 5: Överlappande metod för ColorMode

Om du därför inte vill konvertera HSB -värdet i Photoshop manuellt kan du skriva "colorMode ()" till "colorMode (HSB, 360, 100, 100)".

HSB Mode Application Case 1

Eftersom RGB -läget inte är så bekvämt att styra nyansändringarna, kan du överväga HSB -läge om du vill styra färgerna mer flexibelt.

Kodexempel (9-6):

[cceN_cpp theme = "dawn"] ogiltig inställning () {

storlek (800, 800);

bakgrund (0);

colorMode (HSB);

}

void draw () {

strokeWeight (2);

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

flyta 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]

När vi kontrollerar H (nyanser) i stroke har vi använt millis (). Det kommer att få driftstiden från början till i dag. Såsom med tiden framåt ökar värdet på H (nyans) automatiskt, sedan ändras färgen.

Enheten millis () är ms. Så när programmet körs i 1 sekund blir returvärdet 1000. Detta leder till ett värde som är för stort. Så vi måste dela det med 1000.0.

Eftersom vi hoppas att färger kommer att ge en periodisk cirkulation, så vi måste göra modulo -operation när vi äntligen skriver den första parametern i stroke. Detta kan säkerställa att det börjar från 0 igen när H (nyans) har överstigit 255.

Funktion strokeWeight () kan styra tjockleken på linjer. Motsvarande enhet för parametrar inom parentes är pixel.

Steg 6: Mode Application Case 2

Kodexempel (9-7):

[cceN_cpp theme = "dawn"] int num; // antal linjer som för närvarande dras

flyta posX_A, posY_A; // Koordinat för punkt A

float posX_B, posY_B; // Koordinat för punkt B

flottörvinkel A, hastighetA; // Vinkel för punkt A, hastighet

flytvinkel B, hastighetB; // Punkt B, hastighet

flottörradieX_A, radieY_A; // Ovalradien bildad av punkt A i X (Y) axel.

flottörradieX_B, radieY_B; // ovalradien bildad av punkt B i X (Y) axel.

void setup () {

storlek (800, 800);

colorMode (HSB);

bakgrund (0);

hastighet A = 0,0009;

hastighetB = 0,003;

radieX_A = 300;

radieY_A = 200;

radieX_B = 200;

radieY_B = 300;

}

void draw () {

translate (bredd/2, höjd/2);

för (int i = 0; i <50; i ++) {

vinkel A += hastighetA;

vinkel B += hastighetB;

posX_A = cos (vinkelA) * radieX_A;

posY_A = sin (vinkel A) * radie Y_A;

posX_B = cos (vinkelB) * radieX_B;

posY_B = sin (vinkelB) * radieY_B;

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

rad (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Driftseffekt:

Utmatningsbild:

Mönstret du ser produceras av en rörelselinje genom konstant överlappning. Spåren efter de två ändpunkterna på linjen är två cirklar var för sig.

Genom HSB -läge har vi kontrollerat nyansändringarna. Med ökningen av linjer kommer nyansen att kompenseras. När massiva halvtransparenta linjer överlappar varandra kommer det att skapa en mycket rik färggradient.

Vi har inbäddat en for loop i funktionsdragning med syfte att använda för loop för att styra linjemängden. Det motsvarar att vi har kontrollerad ritningshastighet. Genom att öka värdet på bedömningstillståndet i för loop, kommer det att öka ritningen seepd.

Nedan är den schematiska figuren. Du kan se rörelsens spår av cirklar tydligare.

Justera olika hastighet och radie, de mönster som bildas kommer också att vara annorlunda. Försök att ändra variabler som vinkel, hastighet, radiusX, radieY och se vad som kommer att hända.

Steg 7: Lagerblandningsläge

De olika färglägena vi pratade om tidigare är alla vana vid färggrafikkomponenter. Förutom att använda denna metod för att styra färg, kan Processing använda olika lagers blandningslägen som Photoshop.

Öppna lagerfönstret i PS, klicka för att välja lagers blandningsläge, så kan vi se dessa alternativ.

Dessa är existerade lagerlägen i PS. För att tala det enkelt kan blandningsläge betraktas som ett slags färgberäkningsläge. Den kommer att avgöra vilken färg som kommer att skapas senast när "färg A" plus "färg B". Här betyder "färg A" färgen bakom det aktuella lagret (kallas även basfärg).”Färg B” betyder färgen på det aktuella lagret (kallas även blandad färg). Programmet kommer att beräkna för att erhålla färg C enligt RGB -värdet och alfa för färg A och B. Det kommer att visas på skärmen som en resultatfärg.

Olika lagerläge står för olika beräkningsmetoder. I nästa halva delen av denna artikelserie kommer vi att fortsätta förklara det i detaljer. Nu behöver vi bara veta dess användning först.

Låt oss titta på ett exempel på hur du använder Add Mode i programmet.

Kodexempel (9-8):

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

void setup () {

storlek (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

bakgrund (0);

blendMode (ADD);

bild (bild 1, 0, 0, 400, 400);

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

}

[/cceN_cpp]

Resultat:

Function blendMode () används för att ställa in grafikens blandningsläge. Vi fyller i ADD bakom betyder att vi har valt Add Mode.

I programmet finns det inget begrepp om lager. Men eftersom det finns en ritningssekvens för de grafiska komponenterna, så när man blandar bilder, betraktas bild 1 som basfärg och bild 2 som blandfärg.

ADD -läget tillhör "Brighten Class". Efter att du har använt den får du en ljusare effekt.

Nedan visas ett blandningsläge som kan användas vid bearbetning.

Steg 8: Bearbetar blandningsläge

Vi kan försöka ändra olika blandningslägen för att se effekten.

När exempel (9-8) har använt överlappande läge (bakgrunden ska vara vit):

Efter att ha använt subtraheringsläge (bakgrunden ska vara vit):

Steg 9: Layer Blending Mode -applikationsfodral

Blandningsläge kan inte bara användas för bilder, utan också lämplig för alla grafiska komponenter i duken. Nedan visas en användning om Lägg till -läge. Den kan användas för att analoga olika ljuseffekter.

Kodexempel (9-9):

[cceN_cpp theme = "dawn"] ogiltig inställning () {

storlek (400, 400);

}

void draw () {

bakgrund (0);

blendMode (ADD);

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

för (int i = 0; i <num; i ++) {

om (slumpmässigt (1) <0,5) {

fyllning (0, 50, 0);

}annan{

fyllning (50);

}

ellips (slumpmässig (50, bredd - 50), slumpmässig (50, höjd - 50), 20, 20);

}

}

[/cceN_cpp]

Här har vi genom funktion slumpmässigt blandat grön färg och vit färg, som redan har burit alfa, i partiklarna. Vi kan använda musen för att styra mängden cirkel och se den överlappande effekten.

ADD och SCREEN är ganska lika. Även om det är samma sak att lysa upp, finns det subtila skillnader. Du kan byta ut den till SKÄRM och göra jämförelse. Efter överlappning blir renheten och ljusstyrkan för ADD högre. Den är lämplig för att analogera ljuseffekten.

När det gäller färg, här har vi kommit till ett slut i detta kapitel. För detta”språk” har du redan behärskat tillräckligt med lediga ord. Skynda dig nu att använda koden för att njuta av världens form och färg!

Steg 10: Källa

Denna artikel är från:

Om du har några frågor kan du kontakta ： [email protected].