Interessante verwerkingsprogrammeringsrichtlijnen voor ontwerper - Kleurcontrole - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

In vorige hoofdstukken hebben we meer gesproken over het gebruik van code om vorm te geven in plaats van kennispunten over kleur. In dit hoofdstuk gaan we dieper in op dit aspect van kennis.

Stap 1: Basiskennis over kleur

Kleur heeft in bepaalde opzichten de menselijke intuïtie overtroffen. Verschillende mooie kleuren die we met het blote oog zien, bestaan eigenlijk uit dezelfde componenten. Alleen met de drie lichtkleuren rood, groen en blauw kunnen we door vermenging alle kleuren creëren die door menselijke ogen kunnen worden gezien.

Aan de hand van dit principe ontstaan mobiele schermen en computerschermen die u nu ziet. Rood, groen en blauw worden de drie oorspronkelijke kleuren van licht genoemd. Door de verhouding van de drie elementen kunnen we een bepaalde kleur verzekeren. Deze beschrijvingsmethode wordt ook wel RGB-modus genoemd. Daaronder is rood R, groen is G en blauw is B.

Behalve de RGB-modus is er nog een andere modus genaamd CMYK-modus. Het wordt meestal gecombineerd met afdrukken. Bij het afdrukken zijn er ook drie originele kleuren. Het is echter anders dan de drie oorspronkelijke kleuren licht. Ze zijn afzonderlijk rood, geel en blauw. Daaronder is C voor cyaan, M voor magenta en Y voor geel. Theoretisch kunnen we alleen met CMY de meeste kleuren mengen. Maar vanwege de productietechniek van grondstof kunnen we de verzadiging van CMY nauwelijks 100% bereiken. Als we deze drie kleuren mengen, kunnen we geen zwarte kleur krijgen die donker genoeg is. Er is dus een extra K, die voor zwarte drukinkt is, als aanvulling op het drukken.

Wat RGB en CMYK betreft, hoef je alleen maar te weten dat er een duidelijk verschil in aard is. RGB is de plus-kleurmodus, die de helderheid verhoogt door meer kleuren te mengen. Terwijl CMYK de min-kleurmodus is, die de duisternis verhoogt door meer kleuren te mengen. In de onderstaande afbeelding kunnen we visueel de overeenkomsten en verschillen van de twee modi zien. Op de linker foto kunnen we ons voorstellen dat het een donker huis is met drie verschillende kleuren zaklampen aan. Foto rechts, we kunnen het beschouwen als een aquarelpapier na overlapping met drie pigmenten rood, groen en blauw.

Als u de relatieve relaties tussen verschillende kleurmodi dieper wilt weten, kunt u uw photoshop openen en de kleurenkiezer kiezen. Dan kunt u intuïtief de kleurwaarden van eenzelfde kleur onder verschillende kleurmodi zien.

Als laatste willen we een andere veelgebruikte kleurmodus voor u introduceren, HSB. HSB heeft geen concept van "Originele Kleur". Het is geclassificeerd volgens de gevoelens van menselijke ogen voor kleuren. H staat voor tint, S voor verzadiging en B voor helderheid.

Tint vertegenwoordigt de kleurtendens. Elke kleur heeft alleen een bepaalde kleurtendens als het niet zwart, wit of grijs is. Het meest rijke kleurovergangsgebied op de kleurkiezer wordt gebruikt om de tint aan te geven. De waarde in PS varieert van 0 tot 360.

Verzadiging betekent de zuiverheid van kleur. Hogere zuiverheid zorgt voor meer levendige kleuren. De waarde in PS varieert van 0 tot 100.

Helderheid betekent de lichtheidsgraad van kleur, variërend van 0 tot 100.

Vergeleken met de RGB-modus zijn de drie dimensies van HSB veel meer in overeenstemming met het gevoel van het menselijk oog voor kleuren. Kijk alleen naar de HSB-waarden, je kunt je over het algemeen wel voorstellen wat voor kleur het is.

Voor dezelfde kleur is de kleurwaarde in RGB-modus (255, 153, 71), terwijl in HSB (27, 72, 100) is.

Het is moeilijk te beoordelen hoe het eruit zal zien na het mengen van de drie originele kleuren als we alleen naar RGB kijken. Maar HSB is anders. Je hoeft alleen maar vertrouwd te raken met de tinten van kleuren zoals rood is 0, oranje is 30 en geel is 60, dan weet je dat het een relatief verzadigde oranje kleur zal zijn met een hoge helderheid en een beetje in de buurt van rood wanneer H is 27.

Vervolgens zullen we de drie dimensies van de twee modi corresponderen met x, y, x in de ruimte en een kubieke kleur tekenen om een vergelijking te maken.

RGB en HSB zijn slechts verschillende methoden om kleuren te beschrijven. We kunnen het adres als een metafoor nemen. Stel dat als je andere mensen de positie van het keizerlijk paleis wilt vertellen, je kunt zeggen dat het op nr. 4 van Jingshan Front Street, Dongcheng Area, Beijing is. Of je kunt zeggen dat het 15 seconden, 55 minuten, 39 graden noorderbreedte en 26 seconden 23 minuten 116 graden oosterlengte is. De beschrijvingsmethode van HSB is vergelijkbaar met de eerste. Als u bekend bent met het relatieve gebied, kunt u over het algemeen de positie van het adres kennen. Hoewel RGB misschien nauwkeuriger is, is het erg abstract.

De HSB-modus bestond met als doel ons te helpen kleuren gemakkelijker te beschrijven. Om een bepaald soort kleur op het scherm weer te geven, moeten we deze uiteindelijk eerst omzetten naar RGB-modus.

In het bovenstaande introduceren we drie kleurmodi: RGB, HSB, CMYK. In het programma hoef je je maar op twee modi te concentreren: RGB en HSB. Ze hebben hun eigen voordelen en tegelijkertijd hun eigen toepassingen. Als u er bekend mee bent, zal het aan uw meest ontwerpvereisten voldoen.

Stap 2: Gegevenstype voor het opslaan van kleuren

Om kleuren in het programma weer te geven, gebruiken we meestal de RGB-modus in de voorgaande. Kunnen we echter alleen kleuren weergeven door de drie eigenschappen te beheersen? In de computer is het zo.

We hebben al eerder vermeld dat we in Processing, behalve voor R, G, B, een alfa (transparantie) voor kleuren kunnen aanduiden. Maar alfa behoort niet tot de component kleur. Het bestaat uit een gemakkelijke menging met kleuren erachter. Om computers een bepaald soort kleur nauwkeurig te laten beschrijven, hoeven we dus alleen de drie belangrijkste variabelen te controleren.

In het volgende beginnen we een soort gegevenstype Kleur te introduceren, dat voornamelijk wordt gebruikt voor het opslaan van kleuren. Het is vergelijkbaar met eerder genoemde gegevenstypen zoals boolena, int, float.

Hier, laat me eerst het daadwerkelijke gebruik van kleur uitleggen. Stelt u zich eens voor: stel dat we de eerder beheerste methoden alleen kunnen gebruiken om bepaalde gegevens op te slaan, wat moeten we dan doen?

Codevoorbeeld (9-1):

[cceN_cpp thema="dageraad"] int r, g, b;

ongeldige setup(){

maat (400, 400);

r = 255;

g = 0;

b = 0;

}

nietig tekenen(){

achtergrond(0);

rectMode(CENTER);

vul (r, g, b);

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

}

[/cceN_cpp]

Wat betreft kleuren die kleurneiging hebben, moeten we drie variabelen maken om gegevens op te slaan in drie kleurkanalen van respectievelijk rood, groen en blauw. Als we later deze set kleurgegevens willen gebruiken, moeten we deze in vulling of lijn schrijven.

Maar u zult merken dat het te lastig is om dit te doen omdat gegevens met elkaar verbonden zijn. Als je een idee hebt om ze in gebruik te verpakken, zal het handiger zijn. Zo ontstaat er kleur.

Codevoorbeeld (9-2):

[cceN_cpp theme="dawn"] kleur myColor;

ongeldige setup(){

maat (400, 400);

mijnKleur = kleur (255, 0, 0);

}

nietig tekenen(){

achtergrond(0);

rectMode(CENTER);

vul (mijnkleur);

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

} [/cceN_cpp]

Hetzelfde geldt voor gegevenstypen zoals int, we moeten aan het begin "color myColor" gebruiken om variabelen te maken.

In de installatie gebruiken we "myColor = color(255, 0, 0)" om waarde toe te kennen aan variabele myColor. Terwijl de functie kleur (a, b, c) terecht aangeeft dat deze set gegevens een kleurtype heeft gevormd om de variabele myColor te importeren. Als u "myColor = (255, 0, 0)" schrijft, gaat het programma fout.

In de laatste gebruiken we fill() om de werking van kleuropvulling te realiseren. Functie fill() en stroke() kunnen beide overlappen. Afhankelijk van de hoeveelheid en het type parameters zal het verschillende effecten hebben. Het importeren van slechts één integer-variabele, die aangeeft dat het een kleur is met alleen grijswaarden. Bij het importeren van een variabele kleur betekent dit dat het kleurbereik groter zal zijn. Je kunt ook een kleurvariabele en een integer-variabele importeren, de functie fill() in het bovenstaande wijzigen in fill(myColor, 150), dan kun je alpha besturen met de tweede parameter.

Stap 3: Overlappende vulmethode

lijn, achtergrond hebben dezelfde overlappende methode met vulling.

Lees kanaalwaarde van kleur

Naast toewijzingen kun je ook zelfstandig de RGB-waarde verkrijgen in de kleurvariabele

Codevoorbeeld (9-3):

[cceN_cpp theme="dawn"] kleur myColor;

ongeldige setup(){

mijnKleur = kleur (255, 125, 0);

println(rood(mijnkleur));

println(groen(mijnkleur));

println(blauw(mijnkleur));

}

[/cceN_cpp]

Resultaat in de console: 255, 125, 0.

Functie red(), green(), blue() keren relatief terug naar de waarde van rood, groen en blauw kanaal in myColor.

Hexadecimale toewijzing

Behalve voor het gebruik van decimale getallen om RGB weer te geven, kunnen we ook hexadecimaal gebruiken. Decimaal betekent 1 verhogen wanneer het 10 bereikt. Terwijl hexadecimaal betekent 1 toenemen wanneer het 16 bereikt. De relatieve relatie met decimaal is: "0 tot 9" komt overeen met "0 tot 9”, “A tot F” komt overeen met “10 tot 15”.

Onderstaande afbeelding is de illustratie van de conversiemethode.

Als we een set hexadecimale waarden zoals ff7800 krijgen, hoeven we deze natuurlijk niet handmatig te converteren. Het programma zal direct waarden aan kleurvariabelen toewijzen. Het is erg handig.

We kunnen zien dat veel kleurenkaarten online allemaal een hexadecimale methode gebruiken om kleur weer te geven.

Net als dribbelen van de ontwerpgemeenschap, zullen kunstwerken worden bijgevoegd in kleurenpaletten. Als je een favoriete kleuring ziet, kun je deze toepassen op het programma.

Codevoorbeeld (9-4):

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

ongeldige setup(){

maat (400, 400);

rectMode(CENTER);

geen slag();

backColor = #395b71;

kleurA = #c4d7fb;

kleurB = #f4a7b4;

kleurC = #f9e5f0;

}

nietig tekenen(){

achtergrond (backColor);

vul (kleurA);

recht(200, 200, 90, 300);

vullen (kleurB);

recht(100, 200, 90, 300);

vullen (kleurC);

recht(300, 200, 90, 300);

} [/cceN_cpp]

Nu is de kleur veel comfortabeler met een beter effect dan het willekeurig invoeren van waarden.

Voeg "#" toe voor de hexadecimale kleurwaarde, dan kunt u direct een waarde toewijzen aan de variabele kleur.

Stap 4: HSB-modus

Naast de RGB-modus gaan we het nu hebben over de HSB-modus. Het volgende toont de waardetoewijzingsmethode van de HSB-modus.

Codevoorbeeld (9-5):

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

maat (400, 400);

kleurModus (HSB);

}

nietig tekenen() {

achtergrond(0);

rectMode(CENTER);

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

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

vul(kolom);

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

}

} [/cceN_cpp]

In Processing hoeven we alleen een zin colorMode(HSB) toe te voegen om van HSB-modus te wisselen. Het gebruik van de functie colorMode() is om de kleurmodus te verschuiven. Als we "HSB" tussen de haakjes schrijven, wordt deze ingesteld op de HSB-modus; terwijl we "RGB" schrijven, wordt het verschoven naar de RGB-modus.

Wat de moeite waard is om op te letten, is dat wanneer we colorMode(HSB) schrijven, de standaard maximale waarde van HSB 255 is. Dit is heel anders dan de maximale waarde in Photoshop. In Photoshop is de maximale waarde van H 360, de maximale waarde van S en B is 100. We moeten dus een conversie uitvoeren.

Als de HSB-waarde in Photoshop (55, 100, 100) is, moet deze waarde bij conversie naar Processing (55 / 360 × 255, 255, 255) zijn, d.w.z. (40, 255, 255).

colorMode() is een functie die kan worden overlapt. Hieronder zullen we het uitgebreid aan u voorstellen.

Stap 5: Overlappende methode van ColorMode

Daarom, als u de HSB-waarde niet handmatig in Photoshop wilt converteren, kunt u "colorMode()" in "colorMode(HSB, 360, 100, 100)" schrijven.

HSB-modus Toepassingsgeval 1

Omdat de RGB-modus niet erg handig is om de veranderingen van tint te regelen, kunt u op dit moment, als u de kleuren flexibeler wilt regelen, de HSB-modus overwegen.

Codevoorbeeld (9-6):

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

grootte (800, 800);

achtergrond(0);

kleurModus (HSB);

}

nietig tekenen() {

slagGewicht(2);

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

zweven nieuweX, nieuweY;

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

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

lijn (muisX, muisY, nieuweX, nieuweY);

} [/cceN_cpp]

Wanneer we H(tinten) in een streek controleren, hebben we millis() gebruikt. Het zal de operatietijd van het begin tot het heden verkrijgen. Dus, net als met het verstrijken van de tijd, zal de waarde van H(hue) automatisch toenemen, waarna de kleur verandert.

De eenheid van millis() is ms. Dus als het programma 1 seconde loopt, is de retourwaarde 1000. Dit leidt tot een te grote waarde. Dus we moeten het delen door 1000,0.

Omdat we hopen dat kleuren een periodieke circulatie zullen vertonen, moeten we de modulo-bewerking uitvoeren wanneer we uiteindelijk de eerste parameter in streek schrijven. Dit kan ervoor zorgen dat het weer vanaf 0 begint wanneer H(hue) de 255 heeft overschreden.

Functie strokeWeight() kan de dikte van lijnen regelen. De corresponderende eenheid voor parameters binnen de haak is pixel.

Stap 6: Modus Toepassing Case 2

Codevoorbeeld (9-7):

[cceN_cpp thema="dageraad"] int num; // aantal lijnen momenteel getekend

zweven posX_A, posY_A; // Coördinaat van punt A

zweven posX_B, posY_B; // Coördinaat van punt B

zweefhoekA, snelheidA; // Hoek van punt A, snelheid

zweefhoekB, snelheidB; // Hoek van punt B, snelheid

zwevende straalX_A, straalY_A; // De straal van het ovaal gevormd door punt A in de X(Y)-as.

zwevende straalX_B, straalY_B; // de straal van het ovaal gevormd door punt B in de X(Y)-as.

ongeldige setup() {

grootte (800, 800);

kleurModus (HSB);

achtergrond(0);

snelheidA = 0,0009;

snelheid B = 0,003;

straalX_A = 300;

straalY_A = 200;

straalX_B = 200;

straalY_B = 300;

}

nietig tekenen() {

vertalen (breedte/2, hoogte/2);

voor (int i = 0; ik < 50; i++) {

hoekA += snelheidA;

hoekB += snelheidB;

posX_A = cos(hoekA) * straalX_A;

posY_A = sin(hoekA) * straalY_A;

posX_B = cos(hoekB) * straalX_B;

posY_B = sin (hoekB) * straalY_B;

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

lijn (posX_A, posY_A, posX_B, posY_B);

aantal++;

}

} [/cceN_cpp]

Operatie-effect:

Uitgangsbeeld:

Het patroon dat u ziet, wordt geproduceerd door een bewegende lijn door constante overlapping. De sporen van de twee eindpunten van de lijn zijn twee cirkels afzonderlijk.

Via de HSB-modus hebben we de veranderingen van de tint gecontroleerd. Met de toename van lijnen, wordt de tint gecompenseerd. Wanneer massieve, halftransparante lijnen elkaar overlappen, ontstaat er een zeer rijk kleurverloop.

We hebben een for-lus ingebed in functiedraw met als doel om de for-lus te gebruiken om de hoeveelheid lijn te regelen. Het komt erop neer dat we de tekensnelheid hebben gecontroleerd. Door de waarde van de beoordelingsvoorwaarde in de for-lus te vergroten, wordt de tekeningssijpel groter.

Hieronder staat de schematische figuur. Je kunt het bewegingsspoor van cirkels duidelijker zien.

Pas verschillende snelheid en straal aan, de gevormde patronen zullen ook anders zijn. Probeer variabelen zoals hoek, snelheid, radiusX, radiusY te veranderen en kijk wat er zal gebeuren.

Stap 7: Overvloeimodus voor lagen

De verschillende kleurmodi die we eerder hebben besproken, worden allemaal gebruikt om grafische componenten te kleuren. Behalve om deze methode te gebruiken om de kleur te regelen, kan Processing de overvloeimodi van verschillende lagen gebruiken, zoals Photoshop.

Open het laagvenster in PS, klik om de overvloeimodus van de lagen te kiezen, dan kunnen we deze opties zien.

Dit zijn bestaande laagmodi in PS. Simpel gezegd, de overvloeimodus kan worden beschouwd als een soort kleurberekeningsmodus. Het zal beslissen welke kleur als laatste zal worden gecreëerd wanneer “kleur A” plus “kleur B”. Hier betekent “kleur A” de kleur achter de huidige laag (ook wel basiskleur genoemd). “kleur B” betekent de kleur van de huidige laag (ook wel gemengde kleur genoemd). Het programma berekent om kleur C te verkrijgen volgens de RGB-waarde en alfa van kleur A en B. Het zal op het scherm worden weergegeven als resultaatkleur.

Verschillende laagmodus staat voor verschillende berekeningsmethoden. In het volgende halve deel van deze serie artikelen zullen we het in detail uitleggen. Nu hoeven we alleen eerst het gebruik ervan te kennen.

Laten we eens kijken naar een voorbeeld van het gebruik van de modus Toevoegen in het programma.

Codevoorbeeld (9-8):

[cceN_cpp theme="dawn"] PImage afbeelding1, afbeelding2;

ongeldige setup(){

grootte (800, 400);

afbeelding1 = loadImage ("1.jpg");

image2 = loadImage("2.jpg");

}

nietig tekenen(){

achtergrond(0);

blendMode(TOEVOEGEN);

afbeelding (afbeelding1, 0, 0, 400, 400);

afbeelding (afbeelding2, muisX, muisY, 400, 400);

}

[/cceN_cpp]

Resultaat:

Functie blendMode() wordt gebruikt om de overvloeimodus van afbeeldingen in te stellen. We vullen ADD in achter betekent dat we de Add Mode hebben ingesteld.

In het programma is er geen concept van een laag. Maar omdat er een tekenvolgorde is van de grafische componenten, dus bij het mengen van afbeeldingen, wordt afbeelding 1 beschouwd als basiskleur en afbeelding 2 als gemengde kleur.

ADD-modus behoort tot "Brighten Class". Na gebruik krijg je een helderder effect.

Hieronder staat een overvloeimodus die kan worden gebruikt in Verwerken.

Stap 8: Overvloeimodus verwerken

We kunnen proberen om verschillende overvloeimodi te veranderen om het effect te zien.

Wanneer voorbeeld (9-8) de overlappende modus heeft aangenomen (de achtergrond moet op wit worden gezet):

Na gebruik van de aftrekmodus (de achtergrond moet op wit worden gezet):

Stap 9: Toepassingsgeval voor het overvloeien van lagen

De overvloeimodus kan niet alleen worden gebruikt voor afbeeldingen, maar is ook geschikt voor alle grafische componenten in het canvas. Hieronder is een gebruik weergegeven over de modus Toevoegen. Het kan worden gebruikt om verschillende lichteffecten analoog te maken.

Codevoorbeeld (9-9):

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

maat (400, 400);

}

nietig tekenen() {

achtergrond(0);

blendMode(TOEVOEGEN);

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

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

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

vul (0, 50, 0);

}anders{

vul(50);

}

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

}

}

[/cceN_cpp]

Hier hebben we, door middel van een willekeurige functie, de groene kleur en de witte kleur, die al alfa hebben vervoerd, in de deeltjes gemengd. We kunnen de muis gebruiken om de hoeveelheid cirkel te regelen en het overlappende effect te bekijken.

ADD en SCREEN lijken veel op elkaar. Hoewel het hetzelfde is om op te fleuren, zijn er subtiele verschillen. U kunt het vervangen door SCREEN en een vergelijking maken. Na overlap zal de zuiverheid en helderheid van ADD hoger zijn. Het is geschikt om het lichteffect te vergelijken.

Wat betreft kleur, hiermee zijn we in dit hoofdstuk tot een einde gekomen. Voor deze “taal” heb je al genoeg vacabularia onder de knie. Haast je nu om code te gebruiken om te genieten van de wereld van vorm en kleur!

Stap 10: Bron

Dit artikel is afkomstig van:https://www.elecfreaks.com/11462.html

Als je vragen hebt, kun je contact opnemen met [email protected].