Orientação de programação de processamento interessante para designer - Controle de cores: 10 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:35

Nos capítulos anteriores, falamos mais sobre como usar código para fazer modelagem em vez de pontos de conhecimento sobre cor. Neste capítulo, vamos explorar mais profundamente esse aspecto do conhecimento.

Etapa 1: Conhecimento básico sobre cores

A cor, em certo aspecto, superou a intuição humana. Várias cores lindas que vimos a olho nu consistem, na verdade, nos mesmos componentes. Somente com as três cores claras de vermelho, verde e azul, podemos criar todas as cores que podem ser vistas pelos olhos humanos através da mistura.

Telas móveis e telas de computador que você vê atualmente são criadas com base neste princípio. Vermelho, verde e azul são chamadas as três cores originais da luz. Através da proporção dos três elementos, podemos garantir uma determinada cor. Este método de descrição também é chamado de modo RGB. Entre eles, o vermelho é R, o verde é G e o azul é B.

Exceto para o modo RGB, há outro modo chamado modo CMYK. Geralmente é combinado com a impressão. Na impressão, também existem três cores originais. No entanto, é diferente das três cores originais de luz. Eles são vermelhos, amarelos e azuis separadamente. Entre eles, C é para ciano, M é para magenta e Y é para amarelo. Teoricamente, apenas por CMY, podemos misturar a maioria das cores. Mas por causa da técnica de produção da matéria-prima, dificilmente podemos fazer com que a saturação do CMY atinja 100%. Se misturarmos essas três cores, não podemos obter a cor preta que é escura o suficiente. Portanto, há um K extra, que é para tinta de impressão preta, como suplemento da impressão.

Quanto a RGB e CMYK, você só precisa saber que existe uma diferença mais óbvia na natureza. RGB é o modo de cor positiva, que aumenta o brilho ao misturar mais cores. Enquanto CMYK é o modo de cor negativa, o que aumenta a escuridão ao misturar mais cores. Na imagem abaixo, podemos ver visualmente as semelhanças e diferenças dos dois modos. Na foto da esquerda, podemos imaginar uma casa escura com três cores diferentes de lanternas acesas. Na foto à direita, podemos considerá-la como um papel aquarela após sobreposição com três pigmentos de vermelho, verde e azul.

Se você quiser conhecer mais profundamente suas relações relativas entre os diferentes modos de cores, pode abrir seu photoshop e escolher o seletor de cores. Então você pode ver os valores de cor de uma mesma cor em diferentes modos de cor intuitivamente.

Por último, gostaríamos de apresentar outro modo de cor comum para você, HSB. O HSB não possui o conceito de “Cor Original”. É classificado de acordo com os sentimentos dos olhos humanos pelas cores. H significa matiz, S significa saturação e B significa brilho.

O matiz representa a tendência da cor. Cada cor tem um certo tipo de tendência de cor apenas se não for escura, branca ou cinza. A área de transição de cores mais rica no seletor de cores é usada para indicar matiz. Seu valor em PS varia de 0 a 360.

Saturação significa pureza da cor. Maior pureza traz cores mais vivas. Seu valor em PS varia de 0 a 100.

Brilho significa o grau de luminosidade da cor, variando de 0 a 100.

Comparado com o modo RGB, as três dimensões do HSB estão muito mais de acordo com a sensação dos olhos humanos pelas cores. Basta olhar apenas para os valores HSB, geralmente você pode imaginar que tipo de cor é.

Quanto à mesma cor, o valor da cor no modo RGB é (255, 153, 71), enquanto no HSB é (27, 72, 100).

É difícil julgar como será a aparência depois de misturar as três cores originais se olharmos apenas para RGB. Mas o HSB é diferente. Você só precisa se familiarizar com os matizes de cores como vermelho é 0, laranja é 30 e amarelo é 60, então você saberá que será uma cor laranja relativamente saturada com alto brilho e um pouco perto do vermelho quando H é 27

A seguir, corresponderemos as três dimensões dos dois modos em x, y, x no espaço e desenharemos uma cúbica de cor para fazer a comparação.

RGB e HSB são apenas métodos diferentes para descrever cores. Podemos tomar o endereço como uma metáfora. Suponha que, se você quiser dizer a outras pessoas a posição do palácio imperial, você pode dizer que é no nº 4 da Jingshan Front Street, área de Dongcheng, Pequim. Ou você pode dizer que está a 15 segundos, 55 minutos, 39 graus na latitude norte e 26 segundos, 23 minutos e 116 graus na longitude leste. O método de descrição do HSB é semelhante ao anterior. Se você está familiarizado com a área relativa, geralmente pode saber a posição do endereço. Embora RGB possa ser mais preciso, é muito abstrato.

O modo HSB existia com o objetivo de nos ajudar a descrever as cores de maneira mais conveniente. Para exibir um certo tipo de cor na tela, finalmente temos que convertê-la para o modo RGB primeiro.

Acima, apresentamos três modos de cores: RGB, HSB, CMYK. No programa, você só precisa se concentrar em dois modos: RGB e HSB. Eles têm suas próprias vantagens e suas próprias aplicações ao mesmo tempo. Se você estiver familiarizado com ele, ele irá satisfazer a maioria dos seus requisitos de design.

Etapa 2: Tipo de dados para armazenamento de cores

Para mostrar as cores no programa, usamos principalmente o modo RGB antes. No entanto, apenas controlando as três propriedades, podemos exibir alguma cor? No computador é assim.

Já nos referimos a isso em Processing, exceto para R, G, B, podemos designar um alfa (transparência) para cores. Mas alfa não pertence ao componente da cor. Sua existência é conveniente mistura com cores atrás. Conseqüentemente, para que os computadores descrevam um certo tipo de cor com precisão, temos que controlar apenas as três variáveis principais.

A seguir, começamos a introduzir um tipo de tipo de dados Color, que é usado principalmente para armazenar cores. É semelhante aos tipos de dados referidos anteriormente, como boolena, int, float.

Aqui, deixe-me explicar primeiro o uso real da cor. Imagine o seguinte: suponha que só podemos usar os métodos previamente dominados para armazenar certos dados, o que devemos fazer?

Exemplo de código (9-1):

[tema cceN_cpp = "amanhecer"] int r, g, b;

void setup () {

tamanho (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

fundo (0);

rectMode (CENTER);

encher (r, g, b);

rect (largura / 2, altura / 2, 100, 100);

}

[/cceN_cpp]

Quanto às cores com tendência de cor, precisamos criar três variáveis para armazenar dados em três canais de cores de vermelho, verde e azul, respectivamente. Posteriormente, se quisermos invocar esse conjunto de dados de cores, teremos que escrevê-lo no preenchimento ou no traço.

Mas você descobrirá que é muito problemático fazer isso porque os dados estão interconectados. Se você tem ideia de embalá-los em uso, será mais conveniente. Portanto, a cor é criada.

Exemplo de código (9-2):

[cceN_cpp theme = "dawn"] color myColor;

void setup () {

tamanho (400, 400);

minhaCor = cor (255, 0, 0);

}

void draw () {

fundo (0);

rectMode (CENTER);

preencher (minhaCor);

rect (largura / 2, altura / 2, 100, 100);

} [/cceN_cpp]

Mesmo com tipos de dados como int, temos que usar “color myColor“no início para criar variáveis.

Na configuração, usamos “myColor = color (255, 0, 0)” para atribuir valor à variável myColor. Enquanto a função color (a, b, c) representa corretamente que este conjunto de dados formou um tipo de cor para importar a variável myColor. Se você escrever “myColor = (255, 0, 0)”, então o programa irá dar errado.

No último, usamos fill () para realizar a operação de preenchimento de cores. As funções fill () e stroke () podem se sobrepor. De acordo com a quantidade e tipo de parâmetros, terá efeitos diferentes. Importando apenas uma variável inteira, que representa uma cor com escala de cinza apenas. Ao importar uma cor variável, isso significa que a gama de cores será maior. Você também pode importar uma variável de cor e uma variável de inteiro, alterar a função fill () acima para fill (myColor, 150), então você pode controlar alfa com o segundo parâmetro.

Etapa 3: Método de preenchimento de sobreposição

traço, plano de fundo tem o mesmo método de sobreposição com preenchimento.

Leia o valor da cor do canal

Além das atribuições, você também pode obter de forma independente o valor RGB na variável de cor

Exemplo de código (9-3):

[cceN_cpp theme = "dawn"] color myColor;

void setup () {

minhaCor = cor (255, 125, 0);

println (vermelho (minhaCor));

println (verde (minhaCor));

println (azul (minhaCor));

}

[/cceN_cpp]

Resultado no console: 255, 125, 0.

As funções red (), green (), blue () retornarão relativamente ao valor do canal vermelho, verde e azul em myColor.

Atribuição Hexadecimal

Exceto para usar números decimais para mostrar RGB, também podemos usar hexadecimal. Decimal significa aumentar 1 quando atingir 10. Enquanto hexadecimal significa aumentar 1 quando atingir 16. Sua relação relativa com decimal é: “0 a 9” corresponde a “0 a 9”,“A a F”correspondem a“10 a 15”.

A imagem abaixo é a ilustração do método de conversão.

Claro, se obtivermos um conjunto de valores hexadecimais como ff7800, não precisamos convertê-lo manualmente. O programa atribuirá valores às variáveis de cor diretamente. É muito conveniente.

Podemos ver que muitos cartões de cores online são todos adotados pelo método hexadecimal para exibir cores.

Como o dribbble da comunidade de design, as obras de arte serão anexadas a paletas de cores. Se você vir uma cor favorita, pode aplicá-la ao programa.

Exemplo de código (9-4):

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

void setup () {

tamanho (400, 400);

rectMode (CENTER);

noStroke ();

backColor = # 395b71;

colorA = # c4d7fb;

colorB = # f4a7b4;

colorC = # f9e5f0;

}

void draw () {

fundo (backColor);

preencher (cor A);

rect (200, 200, 90, 300);

preencher (corB);

rect (100, 200, 90, 300);

preencher (cor C);

rect (300, 200, 90, 300);

} [/cceN_cpp]

Agora, a cor é muito mais confortável com melhor efeito do que inserir valores aleatoriamente.

Adicione “#” antes do valor hexadecimal da cor, então você pode atribuir o valor à cor variável diretamente.

Etapa 4: Modo HSB

Além do modo RGB, a seguir vamos falar sobre o modo HSB. O seguinte mostra o método de atribuição de valor do modo HSB.

Exemplo de código (9-5):

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

tamanho (400, 400);

colorMode (HSB);

}

void draw () {

fundo (0);

rectMode (CENTER);

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

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

preencher (col);

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

}

} [/cceN_cpp]

Em Processing, para mudar o modo HSB, só precisamos adicionar uma frase de colorMode (HSB). O uso da função colorMode () é para mudar o modo de cor. Se escrevermos “HSB” no colchete, ele será definido para o modo HSB; enquanto escrevemos “RGB”, ele será alterado para o modo RGB.

O que vale a pena prestar atenção é que quando escrevemos colorMode (HSB), o valor máximo padrão de HSB é 255. Isso é bem diferente do valor máximo no Photoshop. No Photoshop, o valor máximo de H é 360, o valor máximo de S e B são 100. Portanto, precisamos fazer a conversão.

Se o valor HSB no Photoshop for (55, 100, 100), quando convertido para Processing, esse valor deve ser (55/360 × 255, 255, 255), ou seja, (40, 255, 255).

colorMode () é uma função que pode ser sobreposta. A seguir, iremos apresentá-lo em detalhes.

Etapa 5: Método de sobreposição de ColorMode

Portanto, se você não quiser converter o valor HSB no Photoshop manualmente, você pode escrever “colorMode ()” em “colorMode (HSB, 360, 100, 100)”.

Caso 1 de aplicação do modo HSB

Como o modo RGB não é muito conveniente para controlar as mudanças de matiz, neste momento, se você deseja controlar as cores de forma mais flexível, pode considerar o modo HSB.

Exemplo de código (9-6):

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

tamanho (800, 800);

fundo (0);

colorMode (HSB);

}

void draw () {

strokeWeight (2);

curso (int (milis () / 1000,0 * 10)% 255, 255, 255);

float newX, newY;

newX = mouseX + (ruído (milis () / 1000,0 + 1,2) - 0,5) * 800;

newY = mouseY + (ruído (milis () / 1000,0) - 0,5) * 800;

linha (mouseX, mouseY, novoX, novoY);

} [/cceN_cpp]

Quando controlamos H (matizes) no traço, usamos millis (). Obterá o tempo de operação desde o início até o presente. Assim, à medida que o tempo avança, o valor de H (matiz) aumentará automaticamente e, em seguida, a cor mudará.

A unidade de milis () é ms. Portanto, quando o programa for executado por 1 segundo, o valor de retorno será 1000. Isso levará a um valor muito grande. Portanto, temos que dividir por 1000,0.

Porque esperamos que as cores apresentem uma circulação periódica, temos que fazer a operação de módulo quando finalmente escrevermos o primeiro parâmetro em traço. Isso pode garantir que ele começará de 0 novamente quando H (matiz) tiver ultrapassado 255.

A função strokeWeight () pode controlar a espessura das linhas. A unidade correspondente para parâmetros dentro do colchete é pixel.

Etapa 6: Modo de Aplicação Caso 2

Exemplo de código (9-7):

[cceN_cpp theme = "amanhecer"] int num; // quantidade de linhas desenhadas atualmente

float posX_A, posY_A; // Coordenada do ponto A

float posX_B, posY_B; // Coordenada do ponto B

ângulo de flutuaçãoA, velocidadeA; // Ângulo do ponto A, velocidade

ângulo de flutuaçãoB, velocidadeB; // Ângulo do ponto B, velocidade

float radiusX_A, radiusY_A; // O raio da oval formada pelo ponto A no eixo X (Y).

float radiusX_B, radiusY_B; // raio do oval formado pelo ponto B no eixo X (Y).

void setup () {

tamanho (800, 800);

colorMode (HSB);

fundo (0);

velocidade A = 0,0009;

velocidadeB = 0,003;

radiusX_A = 300;

radiusY_A = 200;

radiusX_B = 200;

radiusY_B = 300;

}

void draw () {

traduzir (largura / 2, altura / 2);

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

ângulo A + = velocidade A;

ânguloB + = velocidadeB;

posX_A = cos (ânguloA) * raioX_A;

posY_A = sin (ânguloA) * raioY_A;

posX_B = cos (ânguloB) * raioX_B;

posY_B = sin (ânguloB) * raioY_B;

curso (int (núm / 500,0)% 255, 255, 255, 10);

linha (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Efeito da operação:

Imagem de saída:

O padrão que você viu é produzido por uma linha de movimento por meio de sobreposição constante. Os traços dos dois pontos finais da linha são dois círculos separados.

Através do modo HSB, controlamos as mudanças de matiz. Com o aumento das linhas, a tonalidade será compensada. Quando grandes linhas semitransparentes se sobrepõem, isso criará um gradiente de cores muito rico.

Incorporamos um loop for na função draw com o objetivo de usar o loop for para controlar a quantidade de linha. É equivalente a termos controlado a velocidade de desenho. Aumentando o valor da condição de julgamento no loop for, aumentará a seepd de desenho.

Abaixo está a figura esquemática. Você pode ver o traço de movimento dos círculos com mais clareza.

Ajuste a velocidade e o raio diferentes, os padrões formados também serão diferentes. Tente alterar variáveis como ângulo, velocidade, radiusX, radiusY e veja o que acontecerá.

Etapa 7: Modo de mesclagem de camadas

Os vários modos de cor que falamos antes são todos usados para colorir componentes gráficos. Exceto para usar este método para controlar a cor, o Processing pode usar vários modos de mesclagem de camadas, como o Photoshop.

Abra a janela da camada no PS, clique para escolher o modo de mesclagem das camadas, então podemos ver essas opções.

Esses são os modos de camada existentes no PS. Para falar de forma simples, o modo de mesclagem pode ser considerado uma espécie de modo de cálculo de cores. Ele decidirá qual cor será criada no último quando “cor A” mais “cor B”. Aqui, “cor A” significa a cor por trás da camada atual (também chamada de cor de base). “Cor B” significa a cor da camada atual (também chamada de cor mista). O programa fará os cálculos para obter a cor C de acordo com o valor RGB e alfa das cores A e B. Será exibida na tela como uma cor resultante.

Modo de camada diferente significa métodos de cálculo diferentes. Na próxima metade desta série de artigos, iremos explicá-lo em detalhes. Agora só temos que saber primeiro seu uso.

Vejamos um exemplo de uso do modo Adicionar no programa.

Exemplo de código (9-8):

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

void setup () {

tamanho (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

fundo (0);

blendMode (ADD);

imagem (imagem 1, 0, 0, 400, 400);

imagem (imagem2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Resultado:

A função blendMode () é usada para definir o modo de mesclagem dos gráficos. Preenchemos ADD atrás significa que definimos o Modo de adição.

No programa, não há conceito de camada. Mas, como há sequência de desenho dos componentes gráficos, ao mesclar imagens, a imagem 1 é considerada cor de base e a imagem 2 como cor mista.

O modo ADD pertence à “Classe de Iluminar”. Depois de usá-lo, você obterá um efeito de brilho.

Abaixo está um modo de mesclagem que pode ser usado no processamento.

Etapa 8: Modo de mistura de processamento

Podemos tentar alterar o modo de mesclagem diferente para ver o efeito.

Quando o exemplo (9-8) adota o modo de sobreposição (o fundo deve ser definido como branco):

Depois de usar o modo Substract (o fundo deve ser definido como branco):

Etapa 9: Caso de aplicação do modo de mesclagem de camadas

O modo de mesclagem não pode ser usado apenas para imagens, mas também adequado para todos os componentes gráficos na tela. Abaixo, é exibido um uso sobre o Modo Adicionar. Pode ser usado para analógicos vários efeitos de iluminação.

Exemplo de código (9-9):

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

tamanho (400, 400);

}

void draw () {

fundo (0);

blendMode (ADD);

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

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

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

preencher (0, 50, 0);

}outro{

encher (50);

}

elipse (aleatório (50, largura - 50), aleatório (50, altura - 50), 20, 20);

}

}

[/cceN_cpp]

Aqui, por meio da função random, misturamos a cor verde e a cor branca, que já carregavam alfa, nas partículas. Podemos usar o mouse para controlar a quantidade de círculo e observar o efeito de sobreposição.

ADD e SCREEN são bastante semelhantes. Embora seja o mesmo para iluminar, existem diferenças sutis. Você pode substituí-lo por SCREEN e fazer uma comparação. Depois de ser sobreposto, a pureza e o brilho do ADD serão maiores. É adequado para fazer a analogia do efeito de iluminação.

Quanto à cor, chegamos ao fim deste capítulo. Para este “idioma”, você já dominou vacabulários suficientes. Agora, corra para usar o código e aproveitar o mundo das formas e cores!

Etapa 10: Fonte

Este artigo é de:

Se você tiver alguma dúvida, pode entrar em contato com ： [email protected].