Desenhando Formas Geométricas

Voltar

Introdução

O material a seguir apresenta as principais chamadas de código (métodos, funções) para realizar desenhos na janela. Esses desenhos podem ser pontos, linhas, retângulos, círculos, triângulos e outras formas úteis.


Formas Geométricas

Antes de apresentar qualquer código, peço que veja a listagem de formas 2d no manual do processing (Veja o item 2D Primitives). Lembrando que ele está online no endereço: https://processing.org/reference/. Observe cada forma desse item e o seu código correspondente, pois aqui faremos apenas breves citações do manual.

2D Primitives :  arc()  ellipse()  line()  point()  quad()  rect()  triangle()

Se acompanhou os links acima, pode observar as formas e seus códigos. Assim podemos gerar imagens como:Screen Shot 2015-07-26 at 02.03.49
Cada tipo de forma possui sua função e respectivos parametros. No caso da linha temos 2 pontos representados por um conjunto de 4 valores:

line(x1, y1, x2, y2)

No caso do retangulo (ou rect) também temos 4 parametros, mas eles representam os pontos extremos da forma (superior esquerdo e inferior direito):

rect(a, b, c, d)

Certamente com o tempo é possível se familiarizar com as poucas formas primitivas e seus parametros. Antes de começar a desenhar formas mais elaboradas vamos entender melhor como funciona o espaço da janela e como o código que escrito se relaciona com ela.

Cada projeto executado no processing vem acompanhado de uma janela cinza que surge no momento em que a aplicação está em execução. Apesar desta janela não ser inteiramente essencial para se desenvolver programas (pois podemos ver informações textuais no console), ela serve para representar dados gráficos. Por padrão ela é uma janela de 100×100 pixels e não aparenta ser muito “imponente”. No entanto, podemos resolver essa questão, do tamanho, rapidamente. Basta digitar o comando size(largura,altura) no inicio do seu código, preferencialmente na primeira linha. No lugar de altura e largura escreva os valores desejados para o tamanho da janela. Para maiores detalhes siga o link para o manual.

Como explicado em maiores detalhes na própria pagina do processing (https://processing.org/reference/environment/#Coordinates), o sistema de coordenadas é diferente do que estamos acostumados a ver no papel. O centro do plano de coordenadas se encontra no canto superior esquerdo. Sendo o eixo positivo para baixo e direita. Alguns dizem que isso é um resquício do passado da informática, em que a representação de texto na tela era feita utilizando essa orientação.

coordinates2D3D

Cores de Desenho

Cada forma desenhada é formada por 2 elementos contorno e preenchimento, também conhecidos como stroke e fill respectivamente. Por padrão a cor do fill é branco e o stroke é preto. Nesse caso qualquer forma desenhada terá essas cores. Por exemplo, se desenhar uma elipse:

size(300,300);
ellipse(150,150,100,100);

Screen Shot 2015-09-10 at 18.58.51

Terá uma elipse branca de contorno preto no centro da janela.

Para selecionar a cor desses elementos é necessário executar o comando stroke(r,g,b) ou fill(r,g,b) antes do comando de desenhar a forma. Assim, para desenhar a mesma elipse com preenchimento azul, podemos dizer:

size(300,300);
fill(0,0,255);
ellipse(150,150,100,100);

Caso queira também alterar a cor do contorno, por exemplo, vermelho, será necessário incluir:

size(300,300);
stroke(255,0,0);
fill(0,0,255);
ellipse(150,150,100,100);

Screen Shot 2015-09-10 at 18.59.25

Para cada alteração de cor é necessário uma chamada a essas comandos. Caso queira desenhar uma segunda elipse de preenchimento verde sobre a vermelha pode-se escrever:

size(300,300);
stroke(255,0,0);
fill(0,0,255); // mudança da cor de preenchimento
ellipse(150,150,100,100);
fill(0,255,0); // mudança da cor de preenchimento
ellipse(150,150,50,50);

Screen Shot 2015-09-10 at 19.00.05

É importante lembrar que uma vez alterada a cor de preenchimento, ela será a mesma para todos os preenchimentos desenhados a partir da linha em que o comando fill foi chamado.

Alguns elementos 2D possuem apenas contorno e só podem ter suas cores afetadas pelo comando stroke. Essas formas são: point(), line(), arc().

Ordem de Desenho

Outro aspecto importante a ser considerado ao realizar múltiplas chamadas de desenho em um mesmo código é a ordem em que as formas são acrescentadas a janela. Assim o último comando será desenhado sobre qualquer conteúdo já existente na janela. O primeiro a ser chamado ficará atrás de comandos posteriores de desenho. Assim o seguinte código irá desenhar um circulo sobre o outro:

size(300,300);
ellipse(100,150,150,150);
ellipse(200,150,150,150);

Screen Shot 2015-09-10 at 18.47.42

Cores com Transparência

Toda cor pode ser utilizada com transparência(opacidade,alpha), tanto o fill como stroke. Basta acrescentar mais um parâmetro após o RGB tradicional. Nesse caso temos o formato de cor RGBA, onde A representa o canal Alpha da cor. O canal alpha possui a mesma faixa de valores que as outras componentes, 0 a 255. Zero representa totalmente transparente (ou invisível) enquanto 255 representa totalmente opaco. Vamos voltar ao exemplo anterior, mas acrescentando cores as elipses:

size(300,300);
fill(255,0,0);
ellipse(100,150,150,150);
fill(0,0,255);
ellipse(200,150,150,150);

Screen Shot 2015-09-10 at 18.52.43

Agora acrescente o componente alpha a cor azul (que está sobre a vermelha):

size(300,300);
fill(255,0,0);
ellipse(100,150,150,150);
fill(0,0,255,100); // Componente alpha com valor 100 (~= 40% de visibilidade)
ellipse(200,150,150,150);

Screen Shot 2015-09-10 at 18.54.17

Observe como é possível ver a elipse vermelha abaixo da azul e um o fundo da janela.