Introdução ao processing
Introdução ao processing, cores, sistema de coordenadas, primitivas 2D
Marcio Kassouf Crocomo,
[email protected] Processing - https://processing.org/
O que é Processing?
• Ferramenta utilizada para aprender programação dentro do contexto
de artes visuais, e também para a criação de protótipos;
• Possui linguagem própria (“Java com simplificações”[2]);
• Gratuito e Open Source;
• Possui grande quantidade de tutoriais [3];
• Possui boa documentação [4].
Visão
Introdução
• Redimensionando a janela;
• Cor de fundo;
• Linhas;
• Formas geométricas;
Introdução - Redimensionando a janela
A instrução abaixo redimensiona a janela criada para a largura e altura
passadas. No exemplo a seguir, uma janela de 800 (largura) por 600
(altura) pixels é criada.
menor unidade de
uma imagem
digital
size(800,600);
600
800
Cor de fundo
função background.
background(125);
//um argumento que define o tom de cinza variando de 0 (preto) a 255 (branco)
//ou:
background(20,40,255); //Três argumentos entre 0 e 255 definindo uma cor (RGB
- Red, Green, Blue)
Cor de fundo
background(125); background(0); background(255);
Sistema de cores RGB
Uma forma de representar cores é utilizando o sistema RGB (Red,
Green, Blue), que representa uma cor em função de suas componentes
Vermelha (Red), Verde (Green) e Azul (Blue).
Color Wheel, Adobe. Disponível em
https://color.adobe.com/create/color-wheel/, último acesso em
18/03/2019
Sistema de cores RGB
Sistema RGB (Red, Green, Blue)
As cores são representadas por um conjunto de três valores: Vermelho,
Verde e Azul.
Exemplos de triplas RGBs de 8 bits:
(255,0,0) : vermelho
(0,255,0) : verde
(0,0,255) : azul
(0,0,0) : preto,
(255,255,255) : branco
(255,255,0) : amarelo
(255,0,255) : magenta
(0,255,255) : ciano
Alguns formatos de cor
8 bits – 3 bits para componentes R e G (8 níveis cada) e 2 para
componente B.
16 bits – 5 bits para R e B, 6 para G.
24 bits - 1 byte para representar cada uma das cores RGB (0-255 cada)
32 bits - 1 byte para cada cor RGB, mais um byte para o canal alfa
(transparência).
Cor de fundo
background(255,0,0); background(0,255,0); background(0,0,255); background(220,130,80);
Sistema de coordenadas utilizado.
Considere a janela abaixo criada com o tamanho 800x600.
O primeiro ponto (superior esquerdo) está nas coordenadas (x,y) = (0,0) e o último ponto (inferior direito) nas
coordenadas (800,600). (x aumenta para a direita e y para baixo).
(0,0)
600
(800,600)
800
Linhas
line(x1,y1,x2,y2);
//Desenha uma linha do ponto (x1,y1) até o ponto (x2,y2)
Linhas
line(x1,y1,x2,y2);
//Desenha uma linha do ponto (x1,y1) até o ponto (x2,y2)
Exemplo:
size(400,300);
line(50, 0, 350, 300);
Traços
• A função stroke define a cor do traço utilizado.
stroke(100); //um argumento - tom de cinza
stroke(0,0,255); //cor definida em RGB (azul no exemplo)
stroke(0,0,255,20); //quatro argumentos: adicionado
// canal alpha (transparência)
• A função strokeWeight define a expessura do traço utilizado em pixels;
strokeWeight(5); //traço utilizado terá expessura de 5 pixels
Pontos
• A função abaixo desenha um ponto na tela. Também devemos usar
a função stroke para definir a cor do ponto.
Retângulos
• A função rect mostrada abaixo desenha um retângulo com ponto
superior esquerdo nas coordadas dadas pelos parâmetros x1 e y1, e
com largura e altura dadas pelos parâmetros larg e alt.
rect(x1,y1,larg,alt);
• Exemplo:
size(200,200);
rect(10,10,180,60,0);
Preenchimento e contorno
• A espessura e contorno das formas geométricas desenhadas podem
ser definidos utilizando stroke e strokeWeight, da forma já
mostrada. A cor de preenchimento pode ser definida utilizando a
função fill, de forma similar ao feito com a função stroke.
• Exemplo:
size(200,200);
stroke(100,50,50);
strokeWeight(5);
fill(255,0,0);
rect(10,10,180,60,0);
Preenchimento e contorno
• As funções noFill() e noStroke() podem ser utilizadas para que a
forma geométrica não seja preenchida (noFill) ou não apresente
contorno (noStroke). Caso as duas sejam utilizadas, a forma não é
desenhada.
Elipse
• A função ellipse permite desenhar uma elipse na tela. Uma elipse
com largura igual a altura é uma circunferência.
ellipse(x,y,lar,alt);
• Os parâmetros x e y definem o centro da elipse, e os parâmetros lar
e alt representam a largura e altura da elipse, respectivamente.
• O significado desses parâmetros pode ser alterado ao utilizar a
função ellipseMode (ver documentação).
Elipse
• Exemplo:
size(200,200);
ellipse(100, 100, 200, 200);
Elipse
• Exemplo:
size(200,200);
ellipse(100, 100, 200, 100);
Elipse
• Exemplo:
Muitas outras funções
• Atividade: Estudar a documentação das funções vistas e de outras
funções para desenhar na tela do processing.
• Na tela do processing: Ajuda → Referência
• Você verá que, mesmo com as funções já apresentadas, é possível
fazer ainda mais do que o mostrado.
Referências
• [1] Processing, disponível em https://processing.org/, último acesso:
18/03/2019.
• [2] Processing FAQ, disponível em
https://github.com/processing/processing/wiki/FAQ, último acesso:
18/03/2019.
• [3] Processing tutorials, disponível em
https://processing.org/tutorials/, último acesso: 18/03/2019.
• [4] Language Reference, Processing, disponível em
https://processing.org/reference/, último acesso: 18/03/2019.
