Aula 10 – Cores

2 junho, 2009 (15:30) | aulas | Por: admin

Objetivo

Nas últimas semanas, trabalhamos com a estrutura de repetição. Tal estrutura, permite a execução de diversas linhas de código mais de uma vez. O capítulo atual retorna o trabalho com as estruturas da programação gráfica.

Agora, vamos aplicar a estrutura de repetição com diversas funções da programação gráfica. Desta forma, a maior parte dos exemplos dos próximos capítulos utiliza a estrutura de repetição misturada com diversos conceitos da programação gráfica. Iniciaremos hoje com a representação de cores para o Processing.

Sintaxe

Esta seção serve como resumo e referência aos comandos explorados neste capítulo. Pule este tópico se for sua primeira leitura.

  • background (en/pt): define a cor de fundo da tela;
  • fill (en/pt): define a cor de preenchimento das formas geométricas;
  • stroke (en / pt): define a cor de desenho de linhas e bordas;
  • color (en / pt): tipo de dado usado para armazenar cores;
  • colorMode (en / pt): altera a maneira que o Processing interpreta as cores: RGB ou HSB;
  • get (en / pt): retorna a cor de um pixel, ou retorna um pedaço de uma imagem;
  • set (en / pt): altera a cor de um pixel, ou escreve uma imagem diretamente na tela;
  • save (en / pt): salva em disco o que está sendo mostrado na tela;
  • saveFrame (en / pt): salva em disco uma seqüencia de imagens.

Cores

No Processing as cores são definidas através de parâmetros das funções background, fill e stroke:

  • background (en/pt): define a cor de fundo da tela;
  • fill (en/pt): define a cor de preenchimento das formas geométricas;
  • stroke (en / pt): define a cor de desenho de linhas e bordas;

Quando as funções acima são chamadas com apenas um parâmetro, a cor escolhida é uma tonalidade de cinza, sendo o valor zero igual ao preto e o branco correspondente ao valor 255.

No exemplo abaixo, a cor do desenho da linha é variado de 0 até 255. Desta forma, é desenhada uma linha a cada iteração e a alteração da cor da linha cria um efeito de degradê.

cor01

Executar!

O valor da cor, porém, também pode ser representado por três parâmetros. Neste caso, por padrão o Processing utiliza a especificação de cores RGB. Nesta especificação, uma cor é representada pela mistura aditiva das cores vermelho (RED), verde (GREEN) e azul (BLUE).

A seguir, três círculos são desenhados um ao lado do outro com as cores vermelho, verde e azul como preenchimentos respectivos.

cor02

Executar!

Transparência

Observa-se que as cores especificadas são opacas. Com o uso de dois ou quatro parâmetros é possível definir a transparência de uma cor. O valor zero indica que a cor é completamente transparente e o valor 255 é o padrão que indica a completa opacidade.

No exemplo abaixo, o parâmetro de transparência permite que se crie novas cores dependendo da combinação entre formas com transparência.

cor03

Executar!

As informações sobre uma cor podem ser armazenadas em variáveis através do tipo de dado color.

Por exemplo, a linha color amarelo = color(230, 237, 30), cria uma variável chamada amarelo que representa esta cor.

 

cor04

Executar!

Notação HSB

Embora o padrão de cores no Processing seja o RGB também é possível trabalhar com cores nas notações hexadecimal e HSB. A primeira, popular entre os desenvolvedores web codifica os números entre zero e 255 como dois dígitos de zero a FF. Nesta base, os números de zero até quinze são representados de zero a nove e de A até F.

Por exemplo, a cor RGB com vermelho igual a 255, verde igual a 255 e azul igual a 255 é representada em hexadecimal por #FFFFFF.

A notação HSB (Hue, Saturation, Brightness) define as cores em termos de tonalidade, saturação e brilho. O valor de tonalidade (hue) vai de zero até 360 abrangendo todas as cores do espectro. A saturação vai de zero até 100% e indica a pureza de uma cor. Quanto menor a pureza, mais com tons de cinza a cor aparecerá. O brilho indica a relação entre o claro e o escuro e vai de zero a 100%, sendo o 100% representando o maior brilho.

Para selecionar o uso da notação HSB é necessária a chamada à função colorMode (en / pt). Tal função pode aceitar como parâmetros: o tipo de modelo de cor, a escala utilizada para a tonalidade, a escala usada para a saturação e a escala do brilho.

No exemplo abaixo, a saturação e o brilho são constantes mas a tonalidade varia.

cor05

Executar!

A escolha de uma cor pode ser facilitada através do uso da ferramenta seletor de cor, acessível pelo menu Tools > Color Selector.

colorselector

Cor de um pixel

Também é possível obter a cor de um pixel contido em uma posição específica da tela, ou trocar esta cor. Para obter a cor de um pixel através da sua posição em x e y, pode-se utilizar a função get (en / pt) .

O caminho contrário, ou seja, a alteração de um pixel em um local específico da tela pode ser feito através da função set (en / pt).

Abaixo, um exemplo de uso da função set para geração de uma textura procedural.

cor06

Executar!

No fragmento a seguir, a cor de um retângulo é escolhida a partir do seletor também de maneira procedural.

cor07

Executar!

Salvando o resultado

O resultado de nossos programas fica cada vez mais interessante. É possível salvar este resultado em um arquivo diretamente no Processing. Para salvar a imagem sendo exibida na janela de visualização em um momento exato pode-se utilizar a função save (en / pt).

A imagem será armazenada na pasta do projeto, acessível através do menu Sketch > Show Sketch Folder (CTRL + K). Os formatos possíveis são: TIF, TARGA, JPEG, PNG, dependendo da extensão escolhida. Por questões de segurança esta função não pode ser usada em ambiente Web.

No exemplo abaixo, a imagem “imagem.png” é criado quando o usuário clica com o botão do mouse.

cor08

Deve-se ter cuidado na chamada da função save dentro da função draw.  Neste caso, o arquivo é constantemente atualizado e sobrescrito a cada frame.

Outra função que pode ser usada para salvar imagens de um programa é a saveFrame (en / pt). A cada chamada a esta função, uma sequência numerada de imagens é salva na pasta do projeto. Se a função for chamada sem parâmetro, o nome dos arquivos vai de screen-0000.tif até screen-9999.tif, sendo numerado a partir da variável frameCount.

No caso da parametrização, por exemplo: saveFrame(“teste###.tif”), o número de # indica o número de dígitos utilizados para armazenar a sequencia.

Para Saber Mais

Reas, Casey. Fry, Ben. Processing: A Programming Handbook for Visual Designers and Artists. p. 85-93.

 

 

 

 

 

 

 

 

 

 

 

 

 

Comentários

Pingback de Introdução à Programação 1 e 2 (2009) » Exercício de Revisão para Prova (2o Bimestre)
Data: 23 de junho de 2009 Hora: 16:10

[...] Ver Aula 10 [...]