Guide de programmation de traitement intéressant pour le concepteur - Contrôle des couleurs : 10 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Dans les chapitres précédents, nous avons parlé davantage de la façon d'utiliser le code pour faire de la mise en forme plutôt que des points de connaissance sur la couleur. Dans ce chapitre, nous allons approfondir cet aspect de la connaissance.

Étape 1: Connaissances de base sur la couleur

La couleur, sous certains aspects, a dépassé l'intuition humaine. Diverses belles couleurs que nous avons vues à nos yeux nus sont en fait constituées des mêmes composants. Ce n'est qu'avec les trois couleurs de lumière rouge, vert et bleu que nous pouvons créer toutes les couleurs qui peuvent être vues par les yeux humains à travers un mélange.

Les écrans mobiles et les écrans d'ordinateur que vous voyez actuellement sont créés sur la base de ce principe. Le rouge, le vert et le bleu sont appelés les trois couleurs originales de la lumière. Grâce au rapport des trois éléments, nous pouvons assurer une certaine couleur. Cette méthode de description est également appelée mode RVB. Parmi eux, le rouge est R, le vert est G et le bleu est B.

À l'exception du mode RVB, il existe un autre mode appelé mode CMJN. Il est généralement associé à l'impression. En impression, il y a aussi trois couleurs originales. Cependant, il est différent des trois couleurs de lumière d'origine. Ils sont rouges, jaunes et bleus séparément. Parmi eux, C est pour le cyan, M est pour le magenta et Y est pour le jaune. Théoriquement, seulement par CMJ, nous pouvons mélanger la plupart des couleurs. Mais en raison de la technique de production de la matière première, nous pouvons difficilement faire en sorte que la saturation du CMY atteigne 100%. Si on mélange ces trois couleurs, on ne peut pas obtenir une couleur noire suffisamment foncée. Il y a donc un K supplémentaire, qui est pour l'encre d'imprimerie noire, en complément de l'impression.

Quant au RVB et au CMJN, il suffit de savoir qu'il existe une différence de nature des plus évidentes. RVB est un mode couleur plus, qui augmente la luminosité en mélangeant plus de couleurs. Alors que CMJN est le mode couleur négatif, ce qui augmente l'obscurité en mélangeant plus de couleurs. Dans l'image ci-dessous, nous pouvons voir visuellement les similitudes et les différences des deux modes. L'image de gauche, nous pouvons imaginer être une maison sombre avec trois couleurs différentes de lampes de poche allumées. Photo de droite, on peut le considérer comme un papier aquarelle après superposition de trois pigments de rouge, vert et bleu.

Si vous souhaitez connaître plus en profondeur ses relations relatives entre les différents modes de couleurs, vous pouvez ouvrir votre photoshop et choisir le sélecteur de couleurs. Ensuite, vous pouvez voir intuitivement les valeurs de couleur d'une même couleur sous différents modes de couleur.

Enfin, nous aimerions vous présenter un autre mode de couleur commun, HSB. HSB n'a pas de concept de "Couleur Originale". Il est classé selon les sentiments des yeux humains pour les couleurs. H représente la teinte, S la saturation et B la luminosité.

La teinte représente la tendance de la couleur. Chaque couleur n'a une certaine tendance de couleur que si elle n'est pas noire, blanche ou grise. La zone de transition de couleur la plus riche du sélecteur de couleurs est utilisée pour indiquer la teinte. Sa valeur en PS varie de 0 à 360.

La saturation signifie la pureté de la couleur. Une pureté plus élevée apporte une couleur plus vive. Sa valeur en PS varie de 0 à 100.

La luminosité désigne le degré de luminosité de la couleur, allant de 0 à 100.

Par rapport au mode RVB, les trois dimensions de HSB sont beaucoup plus conformes au sentiment des yeux humains pour les couleurs. Il suffit de regarder les valeurs HSB uniquement, vous pouvez généralement imaginer de quel type de couleur il s'agit.

Quant à la même couleur, la valeur de couleur en mode RVB est (255, 153, 71), tandis qu'en HSB est (27, 72, 100).

Il est difficile de juger à quoi cela ressemblera après avoir mélangé les trois couleurs d'origine si nous ne regardons que le RVB. Mais HSB est différent. Vous n'avez qu'à vous familiariser avec les teintes de couleurs telles que le rouge est 0, l'orange est 30 et le jaune est 60, alors vous saurez que ce sera une couleur orange relativement saturée avec une luminosité élevée et un peu proche du rouge lorsque H est 27.

Ensuite, nous allons faire correspondre les trois dimensions des deux modes en x, y, x dans l'espace et dessiner un cube de couleur pour faire la comparaison.

RVB et HSB ne sont que des méthodes différentes pour décrire les couleurs. Nous pouvons prendre l'adresse comme une métaphore. Supposons que si vous voulez dire à d'autres personnes la position du palais impérial, vous pouvez dire qu'il se trouve au n ° 4 de la rue Jingshan Front, dans le quartier de Dongcheng, à Pékin. Ou vous pouvez dire qu'il est à 15 secondes, 55 minutes, 39 degrés à la latitude nord et 26 secondes, 23 minutes, 116 degrés à la longitude est. La méthode de description de HSB est similaire à la première. Si vous connaissez la zone relative, vous pouvez généralement connaître la position de l'adresse. Certes RVB est peut-être plus précis, mais c'est très abstrait.

Le mode HSB existait dans le but de nous aider à décrire la couleur de manière plus pratique. Pour afficher un certain type de couleur à l'écran, nous devons finalement le convertir en mode RVB d'abord.

Dans ce qui précède, nous introduisons trois modes de couleur: RVB, HSB, CMJN. Au programme, vous n'avez qu'à vous concentrer sur deux modes: RVB et TSL. Ils ont leurs propres avantages et leurs propres applications en même temps. Si vous le connaissez, il satisfera vos exigences les plus en matière de conception.

Étape 2: Type de données pour le stockage des couleurs

Pour afficher les couleurs dans le programme, nous utilisons principalement le mode RVB avant. Cependant, seulement en contrôlant les trois propriétés, pouvons-nous afficher des couleurs ? En informatique, c'est comme ça.

Nous avons déjà fait référence à cela dans Processing, à l'exception de R, G, B, nous pouvons désigner un alpha (transparence) pour les couleurs. Mais l'alpha n'appartient pas à la composante de la couleur. Son existence est au mélange commode avec des couleurs derrière. Par conséquent, pour que les ordinateurs décrivent avec précision un certain type de couleur, nous devons contrôler uniquement les trois variables clés.

Dans ce qui suit, nous commençons à introduire une sorte de type de données Color, qui est principalement utilisé pour stocker les couleurs. Il est similaire aux types de données précédemment mentionnés comme boolena, int, float.

Ici, permettez-moi de continuer à expliquer d'abord l'utilisation réelle de la couleur. Imaginez ceci: supposons que nous ne puissions utiliser que les méthodes précédemment maîtrisées pour stocker certaines données, que ferons-nous ?

Exemple de code (9-1):

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

void setup(){

taille (400, 400);

r = 255;

g = 0;

b = 0;

}

tirage nul (){

arrière-plan(0);

rectMode(CENTRE);

remplir(r, g, b);

rect(largeur/2, hauteur/2, 100, 100);

}

[/cceN_cpp]

En ce qui concerne les couleurs à tendance colorée, nous devons créer trois variables pour stocker les données dans trois canaux de couleur rouge, vert et bleu respectivement. Plus tard, si nous voulons invoquer cet ensemble de données de couleur, nous devons l'écrire dans le remplissage ou le trait.

Mais vous trouverez qu'il est trop difficile de le faire car les données sont interconnectées. Si vous avez l'idée de les emballer en cours d'utilisation, ce sera plus pratique. Par conséquent, la couleur est créée.

Exemple de code (9-2):

[cceN_cpp theme="dawn"] color myColor;

void setup(){

taille (400, 400);

maCouleur = couleur(255, 0, 0);

}

tirage nul (){

arrière-plan(0);

rectMode(CENTRE);

fill(maCouleur);

rect(largeur/2, hauteur/2, 100, 100);

} [/cceN_cpp]

Idem avec les types de données comme int, nous devons utiliser « color myColor » au début pour créer des variables.

Dans la configuration, nous utilisons « myColor = color(255, 0, 0) » pour attribuer une valeur à la variable myColor. Alors que la fonction color(a, b, c) représente à juste titre que cet ensemble de données a formé un type de couleur afin d'importer la variable myColor. Si vous écrivez « myColor = (255, 0, 0) », alors le programme ira mal.

Dans la dernière, nous utilisons fill() pour réaliser l'opération de remplissage de couleur. Les fonctions fill() et stroke() permettent toutes deux de se chevaucher. Selon la quantité et le type de paramètres, il aura des effets différents. L'importation d'une seule variable entière, qui la représente est une couleur avec des niveaux de gris uniquement. Lors de l'importation d'une couleur variable, cela signifie que la gamme de couleurs sera plus grande. Vous pouvez également importer une variable de couleur et une variable entière, changer la fonction fill() ci-dessus en fill(myColor, 150), puis vous pouvez contrôler l'alpha avec le deuxième paramètre.

Étape 3: Méthode de remplissage par chevauchement

trait, l'arrière-plan a la même méthode de chevauchement avec remplissage.

Lire la valeur du canal de couleur

En plus des affectations, vous pouvez également obtenir indépendamment la valeur RVB dans la variable de couleur

Exemple de code (9-3):

[cceN_cpp theme="dawn"] color myColor;

void setup(){

maCouleur = couleur(255, 125, 0);

println(rouge(maCouleur));

println(vert(maCouleur));

println(bleu(maCouleur));

}

[/cceN_cpp]

Résultat dans la console: 255, 125, 0.

La fonction red(), green(), blue() reviendra relativement à la valeur des canaux rouge, vert et bleu dans myColor.

Affectation hexadécimale

À l'exception de l'utilisation de nombres décimaux pour afficher RVB, nous pouvons également utiliser hexadécimal. Decimal signifie augmenter de 1 lorsqu'il atteint 10. Alors que hexadécimal signifie augmenter de 1 lorsqu'il atteint 16. Sa relation relative avec le nombre décimal est: " 0 à 9 » correspond à « 0 à 9", "A à F" correspondent à "10 à 15".

L'image ci-dessous est l'illustration de la méthode de conversion.

Bien sûr, si nous obtenons un ensemble de valeurs hexadécimales comme ff7800, nous n'avons pas à le convertir manuellement. Le programme affectera directement des valeurs aux variables de couleur. C'est très pratique.

Nous pouvons voir de nombreuses cartes de couleurs en ligne qui adoptent toutes la méthode hexadécimale pour afficher la couleur.

Comme le dribbble de la communauté du design, les œuvres d'art seront associées à des palettes de couleurs. Si vous voyez une coloration préférée, vous pouvez l'appliquer au programme.

Exemple de code(9-4):

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

void setup(){

taille (400, 400);

rectMode(CENTRE);

noStroke();

backColor = #395b71;

couleurA = #c4d7fb;

couleurB = #f4a7b4;

couleurC = #f9e5f0;

}

tirage nul (){

background(backColor);

remplissage(couleurA);

rect(200, 200, 90, 300);

remplissage(couleurB);

rect(100, 200, 90, 300);

remplissage(couleurC);

rect(300, 200, 90, 300);

} [/cceN_cpp]

Maintenant, la couleur est beaucoup plus confortable avec un meilleur effet que la saisie de valeurs au hasard.

Ajoutez « # » avant la valeur de couleur hexadécimale, puis vous pouvez affecter directement la valeur à la couleur variable.

Étape 4: Mode HSB

A côté du mode RVB, nous allons ensuite parler du mode HSB. Ce qui suit montre la méthode d'attribution de valeur du mode HSB.

Exemple de code (9-5):

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

taille (400, 400);

Modecouleur (HSB);

}

tirage nul () {

arrière-plan(0);

rectMode(CENTRE);

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

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

remplir(col);

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

}

} [/cceN_cpp]

Dans Processing, pour changer de mode HSB, il suffit d'ajouter une phrase de colorMode(HSB). L'utilisation de la fonction colorMode() est de changer le mode couleur. Si nous écrivons « HSB » entre les crochets, il sera alors réglé sur le mode HSB; pendant que nous écrivons « RVB », il passera en mode RVB.

Ce qui vaut la peine de faire attention, c'est que lorsque nous écrivons colorMode(HSB), la valeur maximale par défaut de HSB est de 255. Ceci est assez différent de la valeur maximale de Photoshop. Dans Photoshop, la valeur max de H est 360, la valeur max de S et B sont 100. Nous devons donc faire la conversion.

Si la valeur HSB dans Photoshop est (55, 100, 100), lors de la conversion en Traitement, cette valeur doit être (55 / 360 × 255, 255, 255), c'est-à-dire (40, 255, 255).

colorMode() est une fonction qui peut être superposée. Dans ce qui suit, nous vous le présenterons en détail.

Étape 5: Méthode de chevauchement de ColorMode

Par conséquent, si vous ne souhaitez pas convertir manuellement la valeur HSB dans Photoshop, vous pouvez écrire « colorMode() » dans « colorMode(HSB, 360, 100, 100) ».

Cas d'application du mode HSB 1

Étant donné que le mode RVB n'est pas très pratique pour contrôler les changements de teinte, à ce stade, si vous souhaitez contrôler les couleurs de manière plus flexible, vous pouvez envisager le mode HSB.

Exemple de code(9-6):

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

taille (800, 800);

arrière-plan(0);

Modecouleur (HSB);

}

tirage nul () {

poids du trait(2);

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

float newX, newY;

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

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

line(mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Lorsque nous contrôlons H(teintes) dans le trait, nous avons utilisé millis(). Il obtiendra le temps de fonctionnement du début au présent. Ainsi, comme avec le temps qui avance, la valeur de H(teinte) augmentera automatiquement, puis la couleur changera.

L'unité de millis() est ms. Ainsi, lorsque le programme s'exécute pendant 1 seconde, la valeur de retour sera de 1000. Cela conduira à une valeur trop grande. Nous devons donc le diviser par 1000,0.

Parce que nous espérons que les couleurs présenteront une circulation périodique, nous devons donc faire une opération modulo lorsque nous écrivons enfin le premier paramètre en trait. Cela peut garantir qu'il recommencera à partir de 0 lorsque H(teinte) aura dépassé 255.

La fonction strokeWeight() peut contrôler l'épaisseur des lignes. L'unité correspondante pour les paramètres entre parenthèses est le pixel.

Étape 6: Cas d'application du mode 2

Exemple de code (9-7):

[cceN_cpp theme="dawn"] int num; // quantité de lignes actuellement tracées

flottant posX_A, posY_A; // Coordonnée du point A

flottant posX_B, posY_B; // Coordonnée du point B

flotteur angleA, vitesseA; // Angle du point A, vitesse

flotteur angleB, vitesseB; // Angle du point B, vitesse

float rayonX_A, rayonY_A; // Le rayon de l'ovale formé par le point A dans l'axe X(Y).

float rayonX_B, rayonY_B; // le rayon de l'ovale formé par le point B de l'axe X(Y).

void setup() {

taille (800, 800);

Modecouleur (HSB);

arrière-plan(0);

vitesseA = 0,0009;

vitesseB = 0,003;

rayonX_A = 300;

rayonY_A = 200;

rayonX_B = 200;

rayonY_B = 300;

}

tirage nul () {

translate(largeur/2, hauteur/2);

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

angleA += vitesseA;

angleB += vitesseB;

posX_A = cos(angleA) * rayonX_A;

posY_A = sin(angleA) * rayonY_A;

posX_B = cos(angleB) * rayonX_B;

posY_B = sin(angleB) * rayonY_B;

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

ligne(posX_A, posY_A, posX_B, posY_B);

nombre++;

}

} [/cceN_cpp]

Effet de l'opération:

Image de sortie:

Le motif que vous voyez est produit par une ligne en mouvement par un chevauchement constant. Les traces des deux extrémités de la ligne sont deux cercles séparément.

Grâce au mode HSB, nous avons contrôlé les changements de teinte. Avec l'augmentation des traits, la teinte va se décaler. Lorsque des lignes massives semi-transparentes se chevauchent, cela créera un dégradé de couleurs très riche.

Nous avons intégré une boucle for dans la fonction draw dans le but d'utiliser la boucle for pour contrôler la quantité de ligne. C'est équivalent à celui que nous avons contrôlé la vitesse de dessin. En augmentant la valeur de la condition de jugement dans la boucle for, cela augmentera le seepd du dessin.

Ci-dessous la figure schématique. Vous pouvez voir plus clairement la trace de mouvement des cercles.

Ajustez une vitesse et un rayon différents, les motifs formés seront également différents. Essayez de changer des variables comme l'angle, la vitesse, le rayonX, le rayonY et voyez ce qui se passera.

Étape 7: Mode de fusion des calques

Les différents modes de couleurs dont nous avons parlé précédemment sont tous utilisés pour colorer les composants graphiques. Sauf pour utiliser cette méthode pour contrôler la couleur, le traitement peut utiliser divers modes de fusion de calques comme Photoshop.

Ouvrez la fenêtre des calques dans PS, cliquez pour choisir le mode de fusion des calques, puis nous pouvons voir ces options.

Ce sont des modes de couche existants dans PS. Pour le dire simplement, le mode de fusion peut être considéré comme une sorte de mode de calcul des couleurs. Il décidera quelle couleur sera créée en dernier lorsque "couleur A" plus "couleur B". Ici, « couleur A » signifie la couleur derrière le calque actuel (également appelée couleur de base). « couleur B » signifie la couleur du calque actuel (également appelée couleur mélangée). Le programme calculera pour obtenir la couleur C en fonction de la valeur RVB et de l'alpha des couleurs A et B. Elle sera affichée à l'écran comme couleur de résultat.

Un mode de couche différent correspond à différentes méthodes de calcul. Dans la prochaine moitié de cette série d'articles, nous continuerons à l'expliquer en détail. Il ne nous reste plus qu'à connaître d'abord son utilisation.

Regardons un exemple d'utilisation du mode d'ajout dans le programme.

Exemple de code (9-8):

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

void setup(){

taille (800, 400);

image1 = loadImage("1.jpg");

image2 = loadImage("2.jpg");

}

tirage nul (){

arrière-plan(0);

blendMode(AJOUTER);

image(image1, 0, 0, 400, 400);

image(image2, sourisX, sourisY, 400, 400);

}

[/cceN_cpp]

Résultat:

La fonction blendMode() est utilisée pour définir le mode de fusion des graphiques. Nous remplissons ADD derrière signifie que nous avons défini le mode d'ajout.

Au programme, il n'y a pas de notion de couche. Mais parce qu'il y a une séquence de dessin des composants graphiques, donc lors du mélange d'images, l'image 1 est considérée comme la couleur de base et l'image 2 comme la couleur mélangée.

Le mode AJOUTER appartient à la « Classe Éclaircie ». Après l'avoir utilisé, vous obtiendrez un effet lumineux.

Vous trouverez ci-dessous un mode de fusion qui peut être utilisé dans le traitement.

Étape 8: Traitement du mode de fusion

Nous pouvons essayer de changer différents modes de fusion pour voir l'effet.

Lorsque l'exemple (9-8) a adopté le mode chevauchement (le fond doit être réglé sur blanc):

Après avoir utilisé le mode soustraction (l'arrière-plan doit être réglé sur blanc):

Étape 9: Cas d'application du mode de fusion des calques

Le mode de fusion peut non seulement être utilisé pour les images, mais également adapté à tous les composants graphiques du canevas. Ci-dessous a affiché une utilisation sur le mode d'ajout. Il peut être utilisé pour analogique divers effets d'éclairage.

Exemple de code(9-9):

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

taille (400, 400);

}

tirage nul () {

arrière-plan(0);

blendMode(AJOUTER);

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

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

if(aléatoire(1) < 0.5){

remplir (0, 50, 0);

}autre{

remplir (50);

}

ellipse(aléatoire (50, largeur - 50), aléatoire (50, hauteur - 50), 20, 20);

}

}

[/cceN_cpp]

Ici, grâce à la fonction random, nous avons mélangé la couleur verte et la couleur blanche, qui ont déjà porté l'alpha, dans les particules. Nous pouvons utiliser la souris pour contrôler la quantité de cercle et observer l'effet de chevauchement.

ADD et SCREEN sont assez similaires. Bien qu'il soit identique pour éclaircir, il existe des différences subtiles. Vous pouvez le remplacer par SCREEN et faire une comparaison. Après avoir été superposé, la pureté et la luminosité de ADD seront plus élevées. Il convient à l'analogie de l'effet d'éclairage.

Quant à la couleur, nous sommes arrivés à la fin de ce chapitre. Pour cette « langue », vous maîtrisez déjà suffisamment de vacabulaires. Maintenant, dépêchez-vous d'utiliser le code pour profiter du monde de la forme et de la couleur !

Étape 10: Source

Cet article provient de:

Si vous avez des questions, vous pouvez contacter： [email protected].