Learning Processing

Cor

Este tutorial é para Processamento versão 1.1 +. Se você ver quaisquer erros ou tiver comentários, por favor nos avise. Este tutorial é do livro, Learning Processing, por Daniel Shiffman, publicado pela Morgan Kaufmann Publishers, 2008 Copyright Elsevier Inc. Todos os direitos reservados.

Em tons de cinza Cor

No mundo digital, quando queremos falar de uma cor, a precisão é necessária. Dizendo: "Ei, você pode fazer esse círculo verde-azulado?" não vai fazer. Cor, ao contrário, é definida como uma série de números. Vamos começar com o caso mais simples: preto e branco ou tons de cinza. 0 significa preto, 255 significa branco. No meio, todos os outros números - 50, 87, 162, 209 e assim por diante - é um tom de cinza variando do preto ao branco.

Faz 0-255 parecer arbitrário para você?

Cor para uma forma determinada precisa ser armazenados na memória do computador. Esta memória é apenas uma longa seqüência de 0 e 1 (um monte de ligar ou desligar.) Cada uma dessas opções é um pouco, oito deles juntos é um byte. Imagine se tivéssemos oito bits (um byte) em sequência - quantas maneiras podemos configurar essas opções? A resposta é (e fazer uma pequena pesquisa em números binários vai provar este ponto) 256 possibilidades, ou um intervalo de números entre 0 e 255. Nós vamos usar oito bits de cores em tons de cinza para os nossos bit alcance e 24 para cores (oito bits para cada um dos componentes vermelho, verde e azul).

Ao adicionar o acidente vascular cerebral () e fill () funções antes que algo é desenhado, podemos definir a cor de qualquer forma dada. Há também a função de fundo (), que define uma cor de fundo para a janela. Aqui está um exemplo.

fundo (255); / / Definir o fundo para branco

acidente vascular cerebral (0); / / Definindo o esboço (AVC) ao preto

fill (150); / / Definindo o interior de uma forma (de preenchimento) para cinza

rect (50,50,75,100) / / Desenhando o retângulo

Traço ou preenchimento pode ser eliminada com as funções: noStroke () e noFill (). Nosso instinto pode ser dizer "stroke (0)" sem esboço, no entanto, é importante lembrar que 0 não é "nada", mas denota a cor preta. Além disso, não se esqueça de eliminar ambos - com noStroke () e noFill (), nada vai aparecer!

Além disso, se traçarmos duas formas, Processamento de sempre usará o golpe mais recentemente especificado e preenchimento, a leitura do código de cima para baixo.

Cor RGB

Lembre-se de pintura a dedo? Através da mistura de três "primário" cores, qualquer cor pode ser gerado. Turbilhão todas as cores juntas resultaram em um marrom lamacento. Quanto mais tinta que você adicionou, o mais escuro ficava. Cores digitais também são construídos através da mistura de três cores primárias, mas funciona de forma diferente da pintura. Primeiro, as primárias são diff erent: vermelho, verde e azul (ou seja, "RGB" color). E com a cor na tela, você está misturando luz, não a pintura, por isso as regras de mistura são diferentes também.

• Vermelho + Verde = Amarelo

• Vermelho + azul = roxo

• Verde + Azul = Ciano (azul-verde)

• Vermelho + Verde + Azul = Branco

• nenhuma cor = Preto

Isso pressupõe que as cores são todas tão brilhante quanto possível, mas é claro, você tem uma gama de cores disponíveis, de modo algum vermelho mais verde alguns mais alguns azuis iguais cinza, e um pouco de vermelho mais um pouco de azul igual roxo escuro. Embora isso possa levar algum tempo para se acostumar, o programa mais você e experimentar com a cor RGB, mais ela vai se tornar instintivo, assim como cores de roda com o seu ngers fi. E, claro, você não pode dizer "Mix algum vermelho com um pouco de azul", você tem que fornecer um valor exato. Tal como acontece com tons de cinza, os elementos individuais de cor são expressas como varia de 0 (nenhum de que cor) a 255 (o máximo possível), e eles são listados na ordem R, G e B. Você vai pegar o jeito RGB mistura de cores através da experimentação, mas que vem vamos cobrir alguns código usando algumas cores comuns.

Exemplo: a cor RGB

fundo (255);

noStroke ();

/ Vermelho / Bright

fill (255.0.0);

elipse (20,20,16,16);

/ / Vermelho escuro

fill (127,0,0);

elipse (40,20,16,16);

/ / Pink (vermelho pálido)

fill (255200200);

elipse (60,20,16,16);

Processamento também tem um seletor de cores para ajudar na escolha de cores. Acesso a este FERRAMENTAS via (na barra de menus) → COLOR SELECTOR.

Transparência de cor

Além dos componentes vermelho, verde e azul de cada cor, há um componente adicional opcional quarto, referido como a cor do "alpha". Alpha significa transparência e é particularmente útil quando você quiser desenhar elementos que aparecem parcialmente see-through em cima uns dos outros. Th e valores alpha de uma imagem são muitas vezes referidas coletivamente como o "canal alpha" de uma imagem.

É importante perceber que os pixels não são literalmente transparente, isto é simplesmente uma ilusão conveniente que é realizado misturando cores. Nos bastidores, o processamento leva o números de cores e adiciona um percentual de uma a uma percentagem do outro, criando a percepção ótica da mistura. (Se você está interessado na programação de "cor de rosa" de óculos, este é o lugar onde você iria começar.)

Alpha valores também variam de 0 a 255, com 0 sendo completamente transparente (ou seja, 0% opaco) e 255 completamente opaco (ou seja, 100% opaco).

Exemplo: a transparência Alpha

tamanho (200.200);

background (0);

noStroke ();

/ / No quarto argumento significa 100% de opacidade.

fill (0,0,255);

rect (0,0,100,200);

/ / 255 significa 100% de opacidade.

fill (255,0,0,255);

rect (0,0,200,40);

Opacidade / / 75%.

fill (255,0,0,191);

rect (0,50,200,40);

Opacidade / / 55%.

fill (255,0,0,127);

rect (0,100,200,40);

Opacidade / / 25%.

fill (255,0,0,63);

rect (0,150,200,40);

Faixas de cor personalizada

RGB de cores com faixas de 0 a 255 não é a única maneira que você pode manipular cor em Processing. Por trás das cenas na memória do computador, a cor é sempre conversamos sobre como uma série de 24 bits (ou 32 no caso de cores com um alfa). No entanto, o processamento vamos pensar sobre a cor de qualquer maneira que nós gostamos, e traduzir os nossos valores em números o computador entende. Por exemplo, você pode preferir pensar em cor como variando de 0 a 100 (como uma percentagem). Você pode fazer isso especificando um colorMode custom ().

colorMode (RGB, 100);

A função acima diz: "OK, nós queremos pensar sobre a cor em termos de vermelho, verde e azul A faixa de valores RGB será de 0 a 100.."

Embora raramente é conveniente fazê-lo, você também pode ter limites diferentes para cada componente de cor:

colorMode (RGB, 100,500,10,255);

Agora nós estamos dizendo "Red valores vão de 0 a 100, verde 0-500, azul 0-10, e alfa de 0 a 255."

Finalmente, embora você provavelmente vai precisar apenas de cor RGB para todas as necessidades de sua programação, você também pode especificar cores no HSB (matiz, saturação e brilho) de modo. Sem entrar em muitos detalhes, cores HSB funciona da seguinte forma:

• Hue - O tipo de cor, varia de 0 a 360 por padrão (acho que de 360 ​​graus em uma cor "roda").

• Saturação - A vibração da cor, 0 a 100 por padrão.

• Brilho - O, assim, o brilho da cor, 0 a 100 por padrão.

Com colorMode () você pode definir sua faixa própria cor.

Este tutorial é para Processamento versão 1.1 +. Se você ver quaisquer erros ou tiver comentários, por favor nos avise. Este tutorial é do livro, Learning Processing, por Daniel Shiffman, publicado pela Morgan Kaufmann Publishers, 2008 Copyright Elsevier Inc. Todos os direitos reservados.