Interessante Anleitung zur Verarbeitungsprogrammierung für Designer - Farbsteuerung - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

In den vorherigen Kapiteln haben wir mehr darüber gesprochen, wie man Code zum Formen verwendet, anstatt über Wissenspunkte über Farbe. In diesem Kapitel werden wir diesen Aspekt des Wissens tiefer untersuchen.

Schritt 1: Grundwissen über Farbe

Farbe hat in gewisser Hinsicht die menschliche Intuition übertroffen. Verschiedene schöne Farben, die wir mit bloßem Auge sehen, bestehen tatsächlich aus den gleichen Komponenten. Nur mit den drei Lichtfarben Rot, Grün und Blau können wir durch Mischung alle für das menschliche Auge wahrnehmbaren Farben erzeugen.

Nach diesem Prinzip entstehen mobile Bildschirme und Computerbildschirme, die Sie gerade sehen. Rot, Grün und Blau werden die drei ursprünglichen Lichtfarben genannt. Durch das Verhältnis der drei Elemente können wir eine bestimmte Farbe sicherstellen. Diese Beschreibungsmethode wird auch RGB-Modus genannt. Darunter ist Rot R, Grün ist G und Blau ist B.

Außer dem RGB-Modus gibt es einen weiteren Modus namens CMYK-Modus. Es wird normalerweise mit Druck kombiniert. Im Druck gibt es auch drei Originalfarben. Es unterscheidet sich jedoch von den drei ursprünglichen Lichtfarben. Sie sind rot, gelb und blau getrennt. Darunter steht C für Cyan, M für Magenta und Y für Gelb. Theoretisch können wir die meisten Farben nur per CMY herausmischen. Aber aufgrund der Produktionstechnik des Rohmaterials können wir die Sättigung von CMY kaum erreichen, um 100% zu erreichen. Wenn wir diese drei Farben mischen, können wir keine schwarze Farbe erhalten, die dunkel genug ist. Es gibt also ein zusätzliches K, das für schwarze Druckfarbe steht, als Ergänzung zum Druck.

Bei RGB und CMYK müssen Sie nur wissen, dass es einen offensichtlichen Unterschied in der Natur gibt. RGB ist ein Plus-Farbmodus, der die Helligkeit durch Mischen von mehr Farben erhöht. Während CMYK der Minus-Farbmodus ist, der die Dunkelheit durch Mischen von mehr Farben erhöht. Im Bild unten können wir die Ähnlichkeiten und Unterschiede der beiden Modi visuell erkennen. Das linke Bild können wir uns als dunkles Haus vorstellen, in dem drei verschiedene Farben von Taschenlampen eingeschaltet sind. Bild rechts, wir können es als Aquarellpapier betrachten, nachdem es mit drei Pigmenten in Rot, Grün und Blau überlagert wurde.

Wenn Sie die relativen Beziehungen zwischen verschiedenen Farbmodi genauer kennenlernen möchten, können Sie Ihren Photoshop öffnen und den Farbwähler auswählen. Dann können Sie intuitiv die Farbwerte einer gleichen Farbe in verschiedenen Farbmodi sehen.

Zuletzt möchten wir Ihnen einen weiteren gängigen Farbmodus vorstellen, HSB. HSB hat kein Konzept von „Originalfarbe“. Es wird nach dem Empfinden des menschlichen Auges für Farben klassifiziert. H steht für Farbton, S für Sättigung und B für Helligkeit.

Der Farbton steht für die Farbtendenz. Jede Farbe hat nur dann eine bestimmte Farbtendenz, wenn sie nicht schwarz, weiß oder grau ist. Der satter Farbübergangsbereich im Farbwähler wird verwendet, um den Farbton anzuzeigen. Sein Wert in PS reicht von 0 bis 360.

Sättigung bedeutet die Reinheit der Farbe. Höhere Reinheit bringt lebendigere Farben. Sein Wert in PS reicht von 0 bis 100.

Helligkeit bezeichnet den Helligkeitsgrad der Farbe im Bereich von 0 bis 100.

Im Vergleich zum RGB-Modus entsprechen die drei Dimensionen von HSB viel besser dem Farbempfinden des menschlichen Auges. Schauen Sie sich nur die HSB-Werte an, Sie können sich im Allgemeinen vorstellen, um welche Farbe es sich handelt.

Für dieselbe Farbe beträgt der Farbwert im RGB-Modus (255, 153, 71), während er im HSB-Modus (27, 72, 100) ist.

Es ist schwer zu beurteilen, wie es nach dem Mischen der drei Originalfarben aussehen wird, wenn wir nur RGB betrachten. Aber HSB ist anders. Sie müssen sich nur mit den Farbtönen von Farben vertraut machen, z. B. Rot ist 0, Orange ist 30 und Gelb ist 60, dann wissen Sie, dass es eine vergleichsweise gesättigte orange Farbe mit hoher Helligkeit und ein bisschen nahe an Rot ist, wenn H ist 27.

Als nächstes werden wir die drei Dimensionen der beiden Modi in x, y, x im Raum korrespondieren und einen Farbkubus zum Vergleich zeichnen.

RGB und HSB sind nur unterschiedliche Methoden zur Beschreibung von Farben. Wir können Adresse als Metapher nehmen. Angenommen, wenn Sie anderen Leuten die Position des Kaiserpalastes mitteilen möchten, können Sie sagen, er befindet sich in Nr. 4 der Jingshan Front Street, Dongcheng Area, Peking. Oder Sie können sagen, es ist bei 15 Sekunden, 55 Minuten, 39 Grad auf nördlicher Breite und 26 Sekunden, 23 Minuten, 116 Grad auf östlicher Länge. Die Beschreibungsmethode von HSB ist der ersteren ähnlich. Wenn Sie sich mit dem relativen Gebiet auskennen, können Sie in der Regel die Position der Adresse kennen. RGB mag zwar genauer sein, ist aber sehr abstrakt.

Der HSB-Modus existierte mit dem Ziel, uns zu helfen, Farben bequemer zu beschreiben. Um eine bestimmte Art von Farbe auf dem Bildschirm darzustellen, müssen wir diese schließlich zuerst in den RGB-Modus umwandeln.

Oben stellen wir drei Farbmodi vor: RGB, HSB, CMYK. Im Programm müssen Sie sich nur auf zwei Modi konzentrieren: RGB und HSB. Sie haben ihre eigenen Vorteile und ihre eigenen Anwendungen zugleich. Wenn Sie damit vertraut sind, wird es Ihre meisten Designanforderungen erfüllen.

Schritt 2: Datentyp zum Speichern von Farben

Um Farben im Programm anzuzeigen, verwenden wir früher meistens den RGB-Modus. Können wir jedoch nur durch die Kontrolle der drei Eigenschaften irgendwelche Farben anzeigen? Beim Computer ist das so.

Wir haben bereits in Verarbeitung darauf hingewiesen, dass wir mit Ausnahme von R, G, B ein Alpha (Transparenz) für Farben bezeichnen können. Aber Alpha gehört nicht zur Komponente der Farbe. Seine Existenz ist eine bequeme Mischung mit Farben dahinter. Damit Computer eine bestimmte Art von Farbe genau beschreiben können, müssen wir daher nur die drei wichtigsten Variablen kontrollieren.

Im Folgenden stellen wir eine Art Datentyp Color vor, der hauptsächlich zum Speichern von Farben verwendet wird. Es ähnelt den zuvor genannten Datentypen wie boolena, int, float.

Lassen Sie mich hier zunächst die tatsächliche Verwendung von Farbe erklären. Stellen Sie sich Folgendes vor: Angenommen, wir können nur die zuvor beherrschten Methoden verwenden, um bestimmte Daten zu speichern, was sollen wir tun?

Codebeispiel (9-1):

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

Void-Setup () {

Größe (400, 400);

r = 255;

g = 0;

b = 0;

}

Leere zeichnen (){

Hintergrund(0);

rectMode (MITTE);

füllen (r, g, b);

rect(Breite/2, Höhe/2, 100, 100);

}

[/cceN_cpp]

Bei Farben mit Farbtendenz müssen wir drei Variablen erstellen, um Daten in den drei Farbkanälen Rot, Grün bzw. Blau zu speichern. Wenn wir später diesen Satz von Farbdaten aufrufen möchten, müssen wir ihn in Füllung oder Strich schreiben.

Sie werden jedoch feststellen, dass dies zu umständlich ist, da die Daten miteinander verbunden sind. Wenn Sie die Idee haben, sie im Gebrauch zu verpacken, ist es bequemer. Daher wird Farbe erzeugt.

Codebeispiel (9-2):

[cceN_cpp theme="dawn"] color myColor;

Void-Setup () {

Größe (400, 400);

myColor = Farbe (255, 0, 0);

}

Leere zeichnen (){

Hintergrund(0);

rectMode (MITTE);

füllen (meineFarbe);

rect(Breite/2, Höhe/2, 100, 100);

} [/cceN_cpp]

Wie bei Datentypen wie int müssen wir am Anfang „color myColor“verwenden, um Variablen zu erstellen.

Im Setup verwenden wir „myColor = color(255, 0, 0)“, um der Variablen myColor einen Wert zuzuweisen. Während die Funktion color(a, b, c) richtig darstellt, dass dieser Datensatz einen Farbtyp gebildet hat, um die Variable myColor zu importieren. Wenn Sie "myColor = (255, 0, 0)" schreiben, geht das Programm schief.

Im letzten verwenden wir fill(), um die Operation der Farbauffüllung zu realisieren. Die Funktionen fill() und Stroke() können beide überlappen. Je nach Anzahl und Art der Parameter hat es unterschiedliche Auswirkungen. Das Importieren nur einer Integer-Variablen, die es darstellt, ist eine Farbe mit nur Graustufen. Beim Importieren einer variablen Farbe bedeutet dies, dass der Farbbereich größer wird. Sie können auch eine Farbvariable und eine Integer-Variable importieren, die Funktion fill() oben in fill(myColor, 150) ändern, dann können Sie Alpha mit dem zweiten Parameter steuern.

Schritt 3: Überlappende Füllmethode

Strich, Hintergrund haben dieselbe Überlappungsmethode mit Füllung.

Kanalwert der Farbe lesen

Neben Zuweisungen können Sie den RGB-Wert auch eigenständig in der Farbvariable abrufen

Codebeispiel (9-3):

[cceN_cpp theme="dawn"] color myColor;

Void-Setup () {

myColor = Farbe (255, 125, 0);

println(rot(meineFarbe));

println(grün(meineFarbe));

println (blau (myColor));

}

[/cceN_cpp]

Ergebnis in der Konsole: 255, 125, 0.

Die Funktion red(), green(), blue() kehrt relativ zum Wert des roten, grünen und blauen Kanals in myColor zurück.

Hexadezimale Zuweisung

Abgesehen von der Verwendung von Dezimalzahlen, um RGB anzuzeigen, können wir auch hexadezimal verwenden. Dezimal bedeutet, dass 1 erhöht wird, wenn 10 erreicht wird bis 9“, „A bis F“entsprechen „10 bis 15“.

Das Bild unten zeigt die Konvertierungsmethode.

Wenn wir einen Satz hexadezimaler Werte wie ff7800 erhalten, müssen wir ihn natürlich nicht manuell konvertieren. Das Programm weist Farbvariablen direkt Werte zu. Es ist sehr bequem.

Wir können sehen, dass viele Farbkarten online alle die hexadezimale Methode verwenden, um Farben anzuzeigen.

Wie Design-Community-Dribbble werden Kunstwerke mit Farbpaletten versehen. Wenn Sie eine Lieblingsfarbe sehen, können Sie diese auf das Programm anwenden.

Codebeispiel(9-4):

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

Void-Setup () {

Größe (400, 400);

rectMode (MITTE);

noStroke();

backColor = #395b71;

FarbeA = #c4d7fb;

FarbeB = #f4a7b4;

FarbeC = #f9e5f0;

}

Leere zeichnen (){

Hintergrund (Hintergrundfarbe);

füllen (FarbeA);

gerade(200, 200, 90, 300);

füllen (FarbeB);

gleich (100, 200, 90, 300);

füllen (FarbeC);

gerade (300, 200, 90, 300);

} [/cceN_cpp]

Jetzt ist die Farbe viel angenehmer und hat eine bessere Wirkung als die zufällige Eingabe von Werten.

Fügen Sie "#" vor dem hexadezimalen Farbwert hinzu, dann können Sie der Variablenfarbe direkt einen Wert zuweisen.

Schritt 4: HSB-Modus

Neben dem RGB-Modus werden wir als nächstes über den HSB-Modus sprechen. Im Folgenden wird die Wertzuweisungsmethode des HSB-Modus gezeigt.

Codebeispiel (9-5):

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

Größe (400, 400);

Farbmodus (HSB);

}

Leere zeichnen () {

Hintergrund(0);

rectMode (MITTE);

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

Farbe col = Farbe (i/20.0 * 255, 255, 255);

füllen (Spalte);

rect(i * 20 + 10, Höhe/2, 10, 300);

}

} [/cceN_cpp]

In Processing müssen wir zum Umschalten des HSB-Modus nur einen Satz colorMode(HSB) hinzufügen. Die Funktion colorMode() dient zum Umschalten des Farbmodus. Wenn wir „HSB“in die Klammer schreiben, wird es auf den HSB-Modus gesetzt; während wir „RGB“schreiben, wird es in den RGB-Modus verschoben.

Es lohnt sich, darauf zu achten, dass beim Schreiben von colorMode(HSB) der standardmäßige Höchstwert von HSB 255 ist. Dies unterscheidet sich erheblich vom Höchstwert in Photoshop. In Photoshop beträgt der Höchstwert von H 360, der Höchstwert von S und B 100. Wir müssen also eine Konvertierung durchführen.

Wenn der HSB-Wert in Photoshop (55, 100, 100) ist, sollte dieser Wert bei der Konvertierung in Processing (55 / 360 × 255, 255, 255) lauten, d. h. (40, 255, 255).

colorMode() ist eine Funktion, die überlappt werden kann. Im Folgenden stellen wir es Ihnen im Detail vor.

Schritt 5: Überlappende Methode von ColorMode

Wenn Sie den HSB-Wert in Photoshop nicht manuell konvertieren möchten, können Sie daher „colorMode()“in „colorMode(HSB, 360, 100, 100)“schreiben.

HSB-Modus Anwendungsfall 1

Da der RGB-Modus zur Steuerung der Farbtonänderungen nicht ganz bequem ist, können Sie zu diesem Zeitpunkt den HSB-Modus in Betracht ziehen, wenn Sie Farben flexibler steuern möchten.

Codebeispiel(9-6):

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

Größe (800, 800);

Hintergrund(0);

Farbmodus (HSB);

}

Leere zeichnen () {

Strichgewicht(2);

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

float newX, newY;

newX = MausX + (Rauschen (Millis()/1000.0 + 1.2) - 0.5) * 800;

newY = mouseY + (Rauschen (Millis()/1000.0) - 0,5) * 800;

Zeile (MausX, MausY, neuesX, neuesY);

} [/cceN_cpp]

Wenn wir H(Farbtöne) im Strich kontrollieren, haben wir millis() verwendet. Es wird die Betriebszeit vom Anfang bis zur Gegenwart erhalten. Somit erhöht sich der Wert von H(hue) automatisch, wie im Laufe der Zeit, dann ändert sich die Farbe.

Die Einheit von Millis() ist ms. Wenn das Programm also 1 Sekunde lang läuft, ist der Rückgabewert 1000. Dies führt zu einem zu großen Wert. Also müssen wir es durch 1000.0 dividieren.

Da wir hoffen, dass Farben eine periodische Zirkulation darstellen, müssen wir eine Modulo-Operation durchführen, wenn wir endlich den ersten Parameter in Stroke schreiben. Dadurch kann sichergestellt werden, dass es wieder bei 0 beginnt, wenn H(hue) 255 überschritten hat.

Die Funktion StrokeWeight() kann die Dicke von Linien steuern. Die entsprechende Einheit für Parameter innerhalb der Klammer ist Pixel.

Schritt 6: Modus Anwendungsfall 2

Code-Beispiel (9-7):

[cceN_cpp theme="dawn"] int num; // Anzahl der aktuell gezeichneten Linien

schweben posX_A, posY_A; // Koordinate von Punkt A

schweben posX_B, posY_B; // Koordinate von Punkt B

SchwimmwinkelA, GeschwindigkeitA; // Winkel von Punkt A, Geschwindigkeit

SchwimmwinkelB, GeschwindigkeitB; // Winkel von Punkt B, Geschwindigkeit

SchwimmerradiusX_A, RadiusY_A; // Der Radius des Ovals, das von Punkt A in der X(Y)-Achse gebildet wird.

SchwimmerradiusX_B, RadiusY_B; // Der Radius des Ovals, das durch den Punkt B in der X(Y)-Achse gebildet wird.

Leere Einrichtung () {

Größe (800, 800);

Farbmodus (HSB);

Hintergrund(0);

GeschwindigkeitA = 0,0009;

GeschwindigkeitB = 0,003;

RadiusX_A = 300;

RadiusY_A = 200;

RadiusX_B = 200;

RadiusY_B = 300;

}

Leere zeichnen () {

übersetzen (Breite/2, Höhe/2);

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

WinkelA += GeschwindigkeitA;

WinkelB += GeschwindigkeitB;

posX_A = cos(WinkelA) * RadiusX_A;

posY_A = sin(WinkelA) * RadiusY_A;

posX_B = cos(WinkelB) * RadiusX_B;

posY_B = sin(WinkelB) * RadiusY_B;

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

Linie (posX_A, posY_A, posX_B, posY_B);

Anzahl++;

}

} [/cceN_cpp]

Betriebseffekt:

Ausgabebild:

Das Muster, das Sie sehen, wird durch eine Bewegungslinie durch ständige Überlappung erzeugt. Die Spuren der beiden Endpunkte der Linie sind zwei getrennte Kreise.

Über den HSB-Modus haben wir die Farbtonänderungen gesteuert. Mit der Zunahme der Linien wird der Farbton ausgeglichen. Wenn sich massive halbtransparente Linien überlappen, wird ein sehr satter Farbverlauf erzeugt.

Wir haben eine for-Schleife in die Funktion draw eingebettet mit dem Ziel, die for-Schleife zu verwenden, um die Anzahl der Zeilen zu steuern. Dies entspricht der kontrollierten Zeichengeschwindigkeit. Wenn Sie den Wert der Beurteilungsbedingung in der for-Schleife erhöhen, wird die Zeichnungsseepd erhöht.

Unten ist die schematische Abbildung. Sie können die Bewegungsspur von Kreisen deutlicher sehen.

Passen Sie unterschiedliche Geschwindigkeit und Radius an, die gebildeten Muster werden auch unterschiedlich sein. Versuchen Sie, Variablen wie Winkel, Geschwindigkeit, RadiusX, RadiusY zu ändern und sehen Sie, was passiert.

Schritt 7: Ebenenmischmodus

Die verschiedenen Farbmodi, über die wir zuvor gesprochen haben, sind alle zum Einfärben von Grafikkomponenten verwendet. Abgesehen davon, dass diese Methode zur Farbsteuerung verwendet wird, kann die Verarbeitung die Mischmodi verschiedener Ebenen wie Photoshop verwenden.

Öffnen Sie das Ebenenfenster in PS, klicken Sie, um den Mischmodus der Ebenen auszuwählen, dann können wir diese Optionen sehen.

Dies sind existierende Ebenenmodi in PS. Vereinfacht gesagt kann der Mischmodus als eine Art Farbberechnungsmodus angesehen werden. Es entscheidet, welche Farbe zuletzt erstellt wird, wenn „Farbe A“plus „Farbe B“. Hier bedeutet „Farbe A“die Farbe hinter der aktuellen Ebene (auch Grundfarbe genannt). „Farbe B“bedeutet die Farbe der aktuellen Ebene (auch Mischfarbe genannt). Das Programm berechnet die Farbe C entsprechend dem RGB-Wert und dem Alpha der Farbe A und B. Sie wird auf dem Bildschirm als Ergebnisfarbe angezeigt.

Unterschiedlicher Layermodus steht für unterschiedliche Berechnungsmethoden. Im nächsten halben Teil dieser Artikelserie werden wir es im Detail erklären. Jetzt müssen wir nur noch seine Verwendung kennen.

Sehen wir uns ein Beispiel für die Verwendung des Add-Modus im Programm an.

Codebeispiel(9-8):

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

Void-Setup () {

Größe (800, 400);

image1 = loadImage("1.jpg");

image2 = loadImage("2.jpg");

}

Leere zeichnen (){

Hintergrund(0);

blendMode (ADD);

Bild (Bild1, 0, 0, 400, 400);

Bild (Bild2, MausX, MausY, 400, 400);

}

[/cceN_cpp]

Ergebnis:

Die Funktion blendMode() wird verwendet, um den Mischmodus der Grafik einzustellen. Wir füllen ADD hinter aus, was bedeutet, dass wir den Add-Modus eingestellt haben.

Im Programm gibt es kein Konzept der Schicht. Da es jedoch eine Zeichenfolge der Grafikkomponenten gibt, also beim Überblenden von Bildern, wird Bild 1 als Grundfarbe und Bild 2 als Mischfarbe betrachtet.

Der ADD-Modus gehört zur „Brighten Class“. Nach der Anwendung erhalten Sie einen aufgehellten Effekt.

Unten ist ein Mischmodus, der in der Verarbeitung verwendet werden kann.

Schritt 8: Mischmodus verarbeiten

Wir können versuchen, verschiedene Mischmodi zu ändern, um den Effekt zu sehen.

Wenn Beispiel (9-8) den Überlappungsmodus verwendet hat (der Hintergrund sollte auf Weiß eingestellt sein):

Nachdem Sie den Substract-Modus verwendet haben (der Hintergrund sollte auf weiß eingestellt sein):

Schritt 9: Anwendungsfall für den Layer-Mischmodus

Der Mischmodus kann nicht nur für Bilder verwendet werden, sondern eignet sich auch für alle Grafikkomponenten in der Leinwand. Unten wurde eine Verwendung zum Hinzufügen-Modus angezeigt. Es kann verwendet werden, um verschiedene Lichteffekte zu analogisieren.

Code-Beispiel (9-9):

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

Größe (400, 400);

}

Leere zeichnen () {

Hintergrund(0);

blendMode (ADD);

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

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

wenn (zufällig (1) < 0,5) {

füllen (0, 50, 0);

}anders{

füllen (50);

}

Ellipse (zufällig (50, Breite - 50), zufällig (50, Höhe - 50), 20, 20);

}

}

[/cceN_cpp]

Hier haben wir durch die zufällige Funktion grüne Farbe und weiße Farbe, die bereits Alpha getragen haben, in die Partikel gemischt. Wir können die Maus verwenden, um die Menge des Kreises zu steuern und den Überlappungseffekt zu beobachten.

ADD und SCREEN sind ziemlich ähnlich. Obwohl es gleich ist, aufzuhellen, gibt es feine Unterschiede. Sie können es durch BILDSCHIRM ersetzen und vergleichen. Nach dem Überlappen sind die Reinheit und Helligkeit von ADD höher. Es eignet sich zur Analogie- rung der Lichtwirkung.

Was die Farbe angeht, hier sind wir in diesem Kapitel zu Ende. Für diese „Sprache“beherrschen Sie bereits genügend Vokabular. Beeilen Sie sich jetzt, um Code zu verwenden, um die Welt der Formen und Farben zu genießen!

Schritt 10: Quelle

Dieser Artikel ist von:

Bei Fragen wenden Sie sich bitte an: [email protected].