Por favor confiram suas notas!

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjcmFMU1NoM3phaUFQaVRualVIV2tkc0E&hl=pt_BR

Farei o lançamento no iger na próxima sexta. Qualquer problema, por favor, avise!

Para que funcione é necessário a instalação da biblioteca .obj loader.

Passo a passo 3d no Processing, ver seção 8.

Links para arquivos .obj.

• Processamento de imagem;
• Programação gráfica 3d;
• Programação para dispositivos móveis;
• Modularização de algoritmos;
• Uso de bibliotecas em geral;
• Bibliotecas de física e simulação;
• Programação de som e video;
• Realidade aumentada;
• Desenvolvimento de projeto.

Neste semestre, continua a diminuir o peso da prova e a crescer o peso dos trabalhos.

Os exercícios a seguir são um aquecimento, um preview do que está para vir e servem, também, para ilustrar alguns temas que passamos rapidamente no semestre anterior.

1) Por padrão, o eixo de coordenadas no Processing funciona como na imagem a seguir:

Na prática, podemos mover este sistema de coordenadas através de comandos de transformação de coordenadas. Principalmente quando formos trabalhar com coordenadas em 3d, muitas vezes é mais fácil mover o eixo.

A função translate (en / pt) move o eixo a partir da lateral superior esquerda. Esta função recebe dois parâmetros: o primeiro, é o deslocamento em relação ao eixo x e o segundo é o deslocamento em relação ao eixo y.

Complete o código a seguir com os comandos de transformação de forma a conseguir o resultado esperado. Observe que a letra a já está respondida.

a) 

rect(10, 10, 30, 30);
translate(50, 0);
rect(10, 10, 30, 30);
translate(__X1__, __X2__);
rect(10, 10, 30, 30);
translate(__X3__, __X4__);
rect(10, 10, 30, 30);

Resultado esperado:

Resposta do exercício:

rect(10, 10, 30, 30);
translate(50, 0);
rect(10, 10, 30, 30);
translate(0, 50);
rect(10, 10, 30, 30);
translate(-50, 0);
rect(10, 10, 30, 30);

b)

ellipse(50, 50, 10, 10);
translate(10, 10);
ellipse(50, 50, 10, 10);
translate(__x1__, __x2__);
ellipse(50, 50, 10, 10);
translate(__x3__, __x4__);
ellipse(50, 50, 10, 10);
translate(__x5__, __x6__);
ellipse(50, 50, 10, 10);

Resultado esperado:

c)

for(int i=0;i<10;i++) {
  rect(0, 0, 10, 10);
  translate(__X1__, __X2__);
}

Resultado esperado:

2) Outra transformação possível é a rotação, implementada através do comando rotate (en / pt). Tal função rotaciona  o eixo em uma quantidade especificada pelo parâmetro. O ângulo é dado em radianos, ou seja, devem estar entre zero e 2PI. Se quiser converter de graus para radianos use a função radians (en/ pt).

Complete o código a seguir de forma a conseguir o resultado esperado. Observe que a letra a já está respondida.

a)

noFill();
stroke(__X1__,0,0);
line(0,0, 100, 0);
rect(20, 20, 50, 50);
rotate(__X2__);
stroke(0,255,0);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);
rotate(__X3__);
stroke(0,0,255);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);

Resultado esperado:

Resposta:

noFill();
stroke(255,0,0);
line(0,0, 100, 0);
rect(20, 20, 50, 50);
rotate(PI/12);
stroke(0,255,0);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);
rotate(PI/12);
stroke(0,0,255);
line(0, 0, 100, 0);
rect(20, 20, 50, 50);

b)

noFill();
stroke(255,0,0);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);
translate(__X1__,__X2__);
stroke(0,255,0);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);
rotate(__X3__);
stroke(0,0,255);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);
rotate(__X4__);
stroke(255,0,255);
line(0, 0, 100, 0);
line(0, 0, 0, 100);
rect(-20, -20, 40, 40);

c)

noFill();
translate(50,50);
for(int i=0;i<10;i++) {
  rotate(__X__);
  rect(-25, -25, 50, 50);
}

3) Outros comandos disponíveis relacionados à transformações são os comandos scale (en / pt), pushMatrix (en / pt) e popMatrix (en / pt). A função scale aumenta/diminui o eixo de coordenadas. A função pushMatrix guarda em uma pilha o estado atual das transformações sendo feitas. A função popMatrix retorna ao estado colocado anteriormente na pilha.

Complete o código a seguir de forma a conseguir o resultado esperado.

a)

pushMatrix();
translate(50,50);
for(int i=0;i<5;i++) {
  rotate(__X1__);
  scale(__X2__);
  rect(-30, -30, __X3__, __X4__);
}
popMatrix();
noFill();
rect(10, 10, 80, 80);

Resultado esperado:

3) O comando size (en / pt) define o dimensionamento da janela de visualização. Até agora, usamos o comando size apenas com os parâmetros largura e altura. O 3o parâmetro do comando size permite que façamos a escolha do renderizador que o Processing vai usar. Os renderizadores disponíveis são:

• JAVA2D: padrão, ideal para trabalhar com gráficos vetoriais 2d;
• P2D: destinado a gráficos simples e voltado para manipulação direta de pixels;
• P3D: gráficos em 3d simplificados, voltados para o trabalho com pixels diretamente;
• OPENGL: gráficos em 3d via JOGL;
• PDF: desenha em um arquivo PDF.

Para usar esses renderizadores, use, por exemplo:

• size(400, 400, JAVA2D);
• size(400, 400, P2P);
• size(400, 400, P3D);
• size(400, 400, OPENGL);
• size(400, 400, PDF, “output.pdf”);

Para usar o renderizador OPENGL é necessário selecionar o menu Sketch > Import Library > OpenGL.

Observe que para a visualização em 3d (P3D e OPENGL) o eixo z agora deve ser considerado.

Fonte das imagens: REAS &amp;amp;amp; FRY (Processing).

Observe que agora é possível usar as funções rotateX, rotateY e rotateZ de maneira semelhante à função rotate.

Fonte das imagens: REAS &amp;amp;amp; FRY (Processing).

Refaça qualquer um dos exercícios que entregou anteriormente utilizando o renderizador OpenGL e o renderizador P3D.

As variáveis criadas até agora permitiram o armazenamento de apenas um valor de cada vez. Vetores permitem a definição de variáveis com o poder de armazenar múltiplos valores. Voltando à metáfora das gavetas, um vetor corresponde a uma gaveta com inúmeras subdivisões.

O objetivo deste capítulo é definir como podemos utilizar vetores em nossos programas e descreve inúmeras situações nas quais os vetores são essenciais.

Sintaxe introduzida

• Funções de manipulação de vetor:
  • append: Aumenta um vetor em um elemento colocando um novo elemento no fim do vetor;
  • arrayCopy: Copia um vetor ou parte deve em outro;
  • concat: Concatena (junta) dois vetores;
  • expand: Aumenta um vetor para o dobro de seu tamanho ou para um tamanho especificado;
  • reverse: Inverte um vetor;
  • shorten: Elimina o último elemento de um vetor;
  • sort: Ordena um vetor;
  • splice:  Coloca um vetor ou elemento dentro de um outro;
  • subset: Retorna um vetor de elementos de dentro de um vetor já existente.

Declarando e criando vetores

Variáveis do tipo vetor podem ser declaradas da mesma maneira que se declara qualquer outro tipo de dado. A diferença é que após o nome do tipo de dado, deve-se colocar um sinal de abertura e de fechamento de colchetes ([ e ]).

Dessa forma, os seguintes códigos declaram vetores:

int[] posicao;

float[] tamanho;

color[] cor;

string[] nome;

Depois da declaração de uma variável como vetor, ele não pode ser utilizado ainda. É necessária a criação do vetor informando quantas posições ele disponibiliza para uso. Neste momento, parte da memória do computador é separada para cada posição do vetor. A palavra chave new é usada neste processo.

No código abaixo, por exemplo, o vetor posição é criado com 5 posições:

int[] posicao;

posicao = new int[5];

Também é possível declarar e criar um vetor em uma mesma linha. No exemplo abaixo, é criado um vetor cor com 10 posições.

color[] cor = new color[10];

Após o processo de criação de um vetor na memória cada uma de suas posições está vazia pode ter um valor indefinido ou um valor padrão. Visualmente pode-se representar cada uma das posições como se fosse uma variável independente.

Por exemplo, após a execução do código a seguir, a representação na memória do computador é a de 4 variáveis independentes nomeadas: tam[0], tam[1], tam[2], tam[3]. No Processing os vetores iniciam-se na posição zero.

Atribuição de valores a uma posição de um vetor

Para colocar um valor dentro de uma variável de vetor, ou seja, preencher cada posição com uma atribuição pode-se utilizar o nome do vetor e a posição desejada entre colchetes (”[" e "]“) seguida pelo sinal de recebe (”=”).

Por exemplo:

int[] dado = new int[3];

dado[0] = 5;

dado[1] = 3;

dado[2] = 2;

Outra possibilidade é substituir a criação do vetor com o operador new por uma lista separada por vírgulas e delimitada por chaves:

int[] dado = {3, 1, 2};

Limites de um vetor

Já que um vetor começa na posição zero, a tentativa de acessá-lo fora desta posição levanta um erro de execução. Este erro é bastante comum para o programador iniciante.

Por exemplo, a execução do código abaixo, pára o programa e exibe o erro ArrayIndexOutOfBoundsException.

int[] val = new int[2];

val[0] = 1; // Tudo ok

val[1] = 2; // Tudo ok

val[2] = 3; // ERRO!

Para obter o tamanho de um vetor a qualquer momento pode-se utilizar a propriedade length, acessível através do operador ponto (”.”).

O fragmento demonstra o uso desta propriedade:

int[] x = {10, 20, 30};

int[] y = {30, 40, 50,60};

int[] z = new int[5];

int[] w;

println(x.length); // Exibe 3

println(y.length); // Exibe 4

println(z.length); // Exibe 5

// Se a linha a seguir for descomentada, um erro é levantado

// println(w.length);

Percorrendo vetores

Geralmente a estrutura for é utilizada para percorrer vetores. A inicialização se dá com o valor zero, o limite é até o tamanho do vetor e a iteração é feita item a item.

Vale, portanto, o esquema:

for(int variavel = 0; variavel < vetor.length; variavel++)

{

…vetor[variavel]…

}

Observe que o atalho “variavel++” tem o mesmo resultado que variavel=variavel+1, ou seja, a cada iteração, uma posição diferente do vetor é acessada.

Abaixo, uma sequencia de linhas é desenhada com o vetor estabelecendo sua posição inicial.

Executar!

No exemplo a seguir uma série de elipses são desenhadas a partir das informações do vetor.

Executar!

Os dados de um vetor também podem ser alterados com a utilização da estrutura for. Esta estratégia é útil para o armazenamento do resultado da execução de cálculos.

No exemplo abaixo, o vetor d é calculado ao carregar o programa no método setup e é utilizado apenas no método draw.

Executar!

Vetores também podem ser úteis para armazenar valores que representam a posição de objetos. O programa seguinte demonstra os objetos tendo sua posição alterada a partir da posição do mouse.

Executar!

A posição ou estado do mouse também podem ser armazenados utilizando-se vetores.

Executar!

Funções para manipulação de vetores

A manipulação de vetores com o objetivo de aumentar, diminuir, ordenar e apagar um vetor pode ser feita diretamente através de estruturas de repetição e atribuições. Esta abordagem, porém, é trabalhosa e propensa a erros. Sugere-se, portanto, o uso das funções de manipulação de vetores disponibilizadas pela biblioteca padrão. As funções do Processing são listadas a seguir:

• append: Aumenta um vetor em um elemento colocando um novo elemento no fim do vetor;
• arrayCopy: Copia um vetor ou parte deve em outro;
• concat: Concatena (junta) dois vetores;
• expand: Aumenta um vetor para o dobro de seu tamanho ou para um tamanho especificado;
• reverse: Inverte um vetor;
• shorten: Elimina o último elemento de um vetor;
• sort: Ordena um vetor;
• splice:  Coloca um vetor ou elemento dentro de um outro;
• subset: Retorna um vetor de elementos de dentro de um vetor já existente.

Função append: Aumentar um vetor em um elemento

int[] x = { 1, 2, 3};
println(x); // Exibe 1, 2, 3
x = append(x, 4);
println(x); // Exibe 1, 2, 3, 4

Função arrayCopy: Copiar um vetor em outro

int[] x = {1, 2, 0, 0, 5};
int[] y = {3, 4};
arrayCopy(y, 0, x, 2, 2);
println(x); // Exibe 1, 2, 3, 4, 5

Função concat: Concatenar vetores

int[] x = {1, 2, 3};
int[] y = {4, 5, 6};
int[] z;
z = concat(x,y);
println(z);

Função expand: Aumentar um vetor

int[] x = {1, 2, 3};
// Descomentar essa linha para exibir erro!
// println(x[3]);
println(x.length); // Exibe 1, 2, 3
x = expand(x, 4);
println(x[3]);

Função reverse: Inverter um vetor

int[] x = {1, 2, 3, 4, 5, 6};
println(x); // Exibe 1, 2, 3, 4, 5, 6
x = reverse(x);
println(x); // Exibe 6, 5, 4, 3, 2, 1

Função shorten: Eliminar o último elemento

int[] x = {1, 2, 3, 4, 5};
println(x); // Exibe 1, 2, 3, 4, 5
x = shorten(x);
println(x); // Exibe 1, 2, 3, 4

Função sort: Ordenar um vetor

int[] x = {5, 4, 1, 3, 2};
println(x); // Exibe 5, 4, 1, 3, 2
x = sort(x);
println(x); // Exibe 1, 2, 3, 4, 5

Função splice: Colocar vetor dentro de outro

int[] x = {1, 2, 5};
int[] y = {3, 4};
int[] z;
z = splice(x, y, 2);
println(z); // Exibe 1, 2, 3, 4, 5

Função subset: Retorna um vetor de elementos de dentro de um vetor já existente

int[] x = {1, 2, 3, 4, 5, 6};
int[] y = subset(x, 2, 3);
println(y); // Exibe 3, 4, 5

Exemplos de uso das funções de manipulação de vetores

A função append pode ser usada para armazenar a posição do mouse. No programa abaixo, o fragmento x = append(x, mouseX) vai armazenando no fim do vetor a posição em x do mouse.

Executar!

Em mais um exemplo, o vetor armazena as posições do mouse e, a cada iteração a instrução x = subset(x, 1);  elimina o primeiro elemento do vetor. Desta forma, o elemento que na iteração anterior estava na posição 2, na seguinte vai para a 1 e assim sucessivamente.

Esta estratégia implementa uma trilha atrás do cursor.

Executar!

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ê.

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.

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.

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.

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.

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.

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.

Executar!

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

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.

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.

Trabalhamos até agora com estruturas que permitiram a execução de nossos códigos linha a linha e apenas uma vez. A execução de um conjunto de linhas poderia ser controlada única e exclusivamente através da estrutura condicional (if). Para que se executasse um conjunto de linhas diversas vezes, a cada frame, utilizamos o bloco draw.

Entretanto, muitas vezes será necessário executar um conjunto de linhas dentro de um mesmo frame. Para isto, podemos utilizar a estrutura de repetição.

Estrutura de Repetição

É a estrutura de controle do fluxo lógico que permite executar diversas vezes um mesmo trecho do algoritmo até que uma certa condição seja satisfeita. Existem diversos tipos de estruturas de repetição, o que as diferencia é o local no qual a condição é tratada. Assim, existem os tipos de estrutura de repetição:

• Estrutura de Repetição com teste no início;
• Estrutura de Repetição com teste no final;
• Estrutura de Repetição com variável de controle;
• Estrutura de Repetição com teste no meio.

Estrutura de Repetição com teste no início

Nessa estrutura, um fluxo de execução será repetido enquanto uma certa condição esteja sendo satisfeita.

while (condição)

    comando a ser executado

Caso haja mais de um comando a ser executado, eles devem ser separados linha a linha ou por ponto e vírgulas. Para delimitar o bloco, todos os comandos a serem executados devem estar entre colchetes ({}).

while (condição)

{

    primeiro comando a ser executado

    segundo comando a ser executado

    ...

    comando n a ser executado

}

Dessa forma, a condição é testada antes de executar o trecho de código. Ou seja, se, da primeira vez o resultado for falso, os comandos não são executados nenhuma vez.

Observe que se a condição for sempre verdadeira, a estrutura de repetição se repete indefinidamente e o programa fica travado em um loop infinito. Neste caso, o processamento fica travado nesta linha.

Estrutura de repetição com teste no final

Nessa estrutura, um fluxo de execução será repetido pelo menos uma vez. Cada vez que terminar a execução de um dos fluxos, o teste condicional é feito para verificar se o fluxo é executado novamente.

do
    comando a ser executado

while (condição)

Caso haja mais de um comando a ser executado, eles devem ser separados linha a linha ou por ponto e vírgulas. Para delimitar o bloco, todos os comandos a serem executados devem estar entre chaves ({}).

do

{
    primeiro comando a ser executado

    segundo comando a ser executado
    ...

    comando n a ser executado
} while (condição)

Dessa forma, a condição é testada depois de executar o trecho de código. Ou seja, se, da primeira vez o resultado da condição for falso, mesmo assim os comandos são executados pelo menos uma vez.

Estrutura de Repetição com variável de controle

Ocorrem casos que é difícil determinar quantas vezes um bloco será executado. Sabe-se que ele será executado quando uma certa condição for satisfeita. Às vezes, não é intuitivo determinar quantas vezes um bloco vai ser executado. Nestas vezes, os comandos while e do while são recomendados.
No caso de se saber quantas vezes um bloco deve ser executado, o comando for permite a execução de um bloco um número determinado de vezes.

for (inicialização;condição;incremento)
    comando

Caso haja mais de um comando a ser executado, eles devem ser separados linha a linha ou por ponto e vírgulas. Para delimitar o bloco, todos os comandos a serem executados devem estar entre chaves ({}).

for (inicialização;condição;incremento)

{

    comando 1

    ...

    comando n
}

O comando for é equivalente a:

inicialização

while (condição)

{

comando 1

...

comando n

    incremento
}

Por exemplo:

for (num=1;num<=10;num=num+1)
    comando

É equivalente a:

num=1 

while (num<=10) {    
    comando
    num = num + 1
} 

Estrutura de repetição com teste no meio

Às vezes, trabalha-se com condições complexas que são difíceis de serem representadas no início ou no final de um bloco. Dessa forma, a estrutura de repetição com teste no meio utiliza-se do comando break que é útil para interromper a repetição a qualquer momento da execução. Quando o fluxo é interrompido, passa-se, diretamente, para o fluxo imediatamente superior.

while (true) //Ou outra condição

{
    primeiro comando a ser executado

    segundo comando a ser executado
    if (condição)

        break
    terceiro comando a ser executado

    n comando a ser executado
}

O comando continue

O comando continue interrompe a execução de uma iteração do laço e passa para a próxima. Quando o comando continue é chamado dentro de um “for” o controle passa para o comando de incremento.

Comparação entre as estruturas de repetição

Exemplos em Processing

No exemplo abaixo, um conjunto de linhas é desenhado através da estrutura de repetição for.

Executar!

Neste exemplo, uma elipse tem seu tamanho alterado a partir de uma variável i.

Executar!

É possível misturar a estrutura de repetição com a estrutura condicional.

Executar!

Em mais um exemplo, o degradê é obtido através do desenho de uma linha e alteração de cor ao mesmo tempo.

Observe que este exemplo já foi tratado anteriormente.

Executar!

Por padrão, a estrutura for produz repetições em uma dimensão. Colocando uma estrutura for dentro da outra, pode-se iterar por duas dimensões. No exemplo a seguir, o ponto percorre as linhas e colunas durante a execução.

Executar!

Material da aula em anexo.

Até agora o código que escrevemos caracterizou-se por ser executado linha a linha e do início ao fim do programa. A única alteração de fluxo trabalhada foi implementada através do bloco draw, que permite que seja feita a repetição de parte do código indefinidamente. Entretanto, em um programa de computador muitas vezes torna-se necessário um controle mais fino do fluxo de execução. Por exemplo, realizar um desenho apenas quando uma certa condição esteja satisfeita. Para este controle será necessária a definição da estrutura condicional, representada pela palavra chave if.

Este capítulo trata desta estrutura, mas também se preocupa em aumentar o poder de uso das variáveis. Até agora, apenas as variáveis do Processing foram utilizadas. Como próximo passo, será mostrada a possibilidade do programador em definir e usar suas próprias variáveis.

Estrutura Condicional

No capítulo anterior, conhecemos os operadores relacionais e os operadores lógicos. Tais operadores permitem que um programa tome decisões sobre quais linhas de código podem ser executadas e quais linhas de código não podem ser executadas.

Em resumo, expressões relacionais são expressões que realizam operações de comparação entre dois valores de um mesmo tipo primitivo usando os operadores relacionais (==, >=, !=, <=, etc). Os operandos são variáveis, constantes ou expressões de qualquer tipo e o resultado da expressão é um valor lógico.

Os operadores relacionais são:

• <: Menor;
• >: Maior;
• <=: Menor ou igual;
• >=: Maior ou igual;
• ==: Igual;
• !=: Diferente.

As já citadas expressões lógicas, por sua vez, envolvem os operadores lógicos (||, &&, !). Os operandos são valores lógicos e o resultado da expressão é um valor lógico. A tabela verdade (combinação entre os operadores) é:

• true && true é igual a true;
• true && false é igual a false;
• false && true é igual a false;
• false && false é igual a false;
• true || true é igual a true;
• true || false é igual a true;
• false || true é igual a true;
• false || false é igual a false;
• !true é igual a false;
• !false é igual a true.

Estes resultados lógicos podem ser utilizados para executar ações apenas quando uma certa condição for satisfeita. Por exemplo, um programa pode desenhar ou não um objeto se o mouse for pressionado. O primeiro tipo de estrutura condicional é a seleção simples. Nesta estrutura, construída através da instrução if, se uma certa condição for verdadeira, a primeira instrução imediatamente abaixo da condição é executada. Caso a condição seja false, o comando é ignorado. Em inglês, “if” significa “se”.

if(condição)

comando a ser executado

No exemplo abaixo, a variável lógica mousePressed é usada como condição. Desta forma, o comando rect(width/3, height/3, width/3, height/3); só é executado caso mousePressed esteja com valor verdadeiro, ou seja, se o mouse for pressionado. Observe que o comando ellipse(width/3, height/3, width/3, height/3); sempre é executado e não é influenciado pelo if. Uma boa prática para dar a idéia que há uma relação entre o comando if e a linha posterior é fazer um pequeno deslocamento após o início da linha. Este deslocamento se chama indentação. Esta prática, no Processing, é apenas uma convenção estética. Em outras linguagens como Python, por exemplo, esta prática é obrigatória.

void draw()
{
background(255);
if(mousePressed)
rect(width/3, height/3, width/3, height/3);
ellipse(width/3, height/3, width/3, height/3);
}

Executar!

Caso haja mais de um comando a ser executado estes comandos devem ser agrupados entre colchetes. Este agrupamento é chamado de bloco de instruções. Novamente, a indentação é relevante para facilitar a leitura. Abaixo, apenas enquanto qualquer tecla estiver pressionada, o fundo é mudado para a cor branca e o retângulo é desenhado.

void draw()
{
background(0);
if(keyPressed)
{
background(255);
rect(width/3, height/3, width/3, height/3);
}
}

Executar!

A condição em uma seleção simples pode ser formada por uma expressão relacional. A seguir, apenas quando a posição em x do mouse for maior que a metade da tela, a linha é desenhada. O exemplo também demonstra outro estilo de indentação na qual a abertura da chaves é colocada logo após a definição da condição sem a quebra de linha.

void draw()
{
background(255);
if(mouseX>width/2) {
line(width/2, 0, width/2, height);
}
}

Executar!

Para executar um fluxo alternativo de código apenas no caso da condição ser falsa, utiliza-se a estrutura de seleção composta. Neste caso, a palavra else é colocada logo após o fim do bloco de código definido pelo comando if. O bloco de instruções após o else só é executado quando a condição for falsa. É importante destacar que o fluxo principal e o fluxo alternativo tem execuções excludentes, ou seja, o fluxo alternativo nunca é executado após o fluxo principal.

O código abaixo ilustra o uso do else. O bloco do if só é executando quando o último botão do mouse pressionado pelo usuário for o botão esquerdo. A linha, então, é desenhada de cima para baixo e em um fundo branco. Caso contrário, ou seja, se não for o botão esquerdo, a linha desenhada é de baixo para cima em um fundo cinza.

void draw()
{
if(mouseButton==LEFT) {
background(255);
line(0, 0, width, height);
}
else  {
background(128);
line(width, 0, 0, height);
}
}

Executar!

Condições podem ser encadeadas. Neste caso, uma estrutura de seleção pode ser colocada dentro da outra. No exemplo abaixo, quando a primeira condição é falsa (mouseX<width/3) o segundo teste  (mouseX<2*width/3) é feito. Caso este segundo teste também seja falso, daí sim a instrução background(255) é habilidada. Há, portanto, três fluxos no programa a seguir e os três fluxos são executados conforme o intervalo determinado pela variável mouseX.

void draw()
{
if(mouseX<width/3) {
background(0);
} else if(mouseX<2*width/3) {
background(128);
} else {
background(255);
}
line(width/3, 0, width/3, height);
line(2*width/3, 0, 2*width/3, height);
}

Executar!

Exercício de Fixação 01 – Teste de mesa

Imagine a existência das variáveis a e b que podem assumir ou o valor zero ou o valor um. Complete a tabela abaixo, a partir de possíveis valores para a e b, segundo o código abaixo:

a	b	Comando Executado
0	0	println(”Z”);
0	1
1	0
1	1

Operadores lógicos também podem ser utilizados com as estruturas condicionais. Abaixo, um botão é criado conforme na área entre os pontos (30, 20) e (40, 35). Quando o usuário passa com o mouse sobre a região, sua cor de preenchimento é colocada com o valor branco (255). Caso contrário, o preenchimento é colocado com a cor preta (zero).

void draw()
{
// Cria um botão. Quando o mouse estiver dentro do intervalo,
// pinta o botão de branco
if(mouseX>=30 && mouseX<=40 && mouseY>=20 && mouseY<=35) {
fill(255);
}
else {
fill(0);
}
rect(30, 20, 10, 15);

}

Executar!

Uma estrutura de seleção encadeada pode ser usada para representar os possíveis estados de um botão.Abaixo, as ações executadas quando o botão é clicado estão dentro do bloco posterior ao if(mousePressed).

void setup()
{
textFont(createFont(”Arial”, 10));
textAlign(CENTER);
}

void draw()
{
background(255);
// Cria um botão. Quando o mouse estiver dentro do intervalo,
// pinta o botão de branco

if(mouseX>=width/3 &&
mouseX<=2*width/3 &&
mouseY>=height/3 &&
mouseY<=2*height/3) {
if(mousePressed) {
fill(128);
text(”Ok!”, 10, 10);
}
else
fill(255);
}
else {
fill(0);
}
rect(width/3, height/3, width/3, height/3);
}

Executar!

Em mais um exemplo de estrutura condicional encadeada, desta vez as variáveis de teclado são utilizadas:

void draw()
{
background(0);
if(keyPressed)
{
if(key==’r’ || key==’R')
{
background(255,0,0);
}
}
}

Executar!

No seguinte, as teclas codificadas são consideradas. Neste caso, a instrução if(key==CODED) é necessária para verificar se a tecla é codificada. Cada if é responsável por verificar o estado de uma tecla

void setup()
{
textFont(createFont(”Arial”, 10));
textAlign(CENTER);
}
void draw()
{
background(128);
// Se for tecla codificada
if(key==CODED)
{
// Se for para cima
if(keyCode==UP)
{
text(”CIMA”, width/2, height/2);
} else if(keyCode==DOWN)
{
text(”BAIXO”, width/2, height/2);
}
}
}

Executar!

Exercício de Fixação 02 – Botões

Faça um programa que implemente três botões na tela. Quando cada um destes botões é clicado, a cor de fundo da tela deve ser trocada.

A variável frameCount também poderia ser usada na construção de expressões relacionais e com o objetivo de controlar o andamento de uma animação. Entretanto, torna-se mais prática a utilização de variáveis criadas pelo próprio programador ao invés da frameCount. A próxima seção trata da criação deste tipo de variável. Posteriormente, verificaremos como utilizar tais variável em nossas estruturas de seleção.

Criação de variáveis em um programa

As variáveis criadas pelo programador também são armazenadas na memória do computador. Pode-se retornar à analogia que a memória corresponde a um armário recheado de gavetas. Para diferenciar uma gaveta de outra, é necessário por um rótulo em cada gaveta. O rótulo da gaveta corresponde ao identificador da variável. O conteúdo da gaveta corresponde ao valor associado à variável.

Para que se possa criar essas gavetas no armário, ou melhor, declarar as variáveis na memória é necessário configurar qual é o tipo de informação que pode ser armazenado em cada variável. Este processo de declaração é formado por três partes: tipo da variável, nome da variável e, opcionalmente, o valor inicial da variável após o comando de atribução (”=”). Nas linhas seguintes exemplifica-se a criação de três variáveis do tipo inteiro (int), uma após a outra:

int a = 1; // a começa com valor 1

int b = 2; // b começa com valor 2

int c = a + b; // c começa com valor 3

int d; // d tem valor desconhecido.

O código acima demonstra que do lado direito do sinal de atribuição (”=”) pode-se ter uma expressão. No caso, a expressão aritmética “a + b” tem como resultado o valor 3. Assim, pode-se representar a memória do computador de maneira gráfica.

Observe que o valor da variável chamada d é desconhecido até a execução da última linha. Qualquer tentativa em utilizar a variável d levantará um erro de execução. Por exemplo, o código abaixo, tenta usar a variável d para calcular o valor de e.

int a = 1; // a começa com valor 1
int b = 2; // b começa com valor 2
int c = a + b; // c começa com valor 3
int d; // d tem valor desconhecido
int e = d * 2; // e é igual ao dobro de d, esta linha levanta um erro!

O Processing seleciona a linha com o erro e mostra a mensagem “The local variable d may not have been initialized”.

A inicialização da variável não necessariamente precisa ser feita durante a linha de declaração. A correção do código anterior, pode ser feita, portanto desta maneira:

int a = 1; // a começa com valor 1
int b = 2; // b começa com valor 2
int c = a + b; // c começa com valor 3
int d;
d= 4;
int e = d * 2; // e é igual ao dobro de d, ou seja 8.

A declaração das variáveis também pode ser resumida em uma linha.

int a, b, c, d, e;
a = 1; // a começa com valor 1
b = 2; // b começa com valor 2
c = a + b; // c começa com valor 3
d= 4;
e = d * 2; // e é igual ao dobro de d, ou seja 8.

O tipo inteiro não é o único tipo de dado disponível, o Processing também aceita outros tipos. Tais tipos armazenam diferentes objetos e obedecem a diferentes intervalos, ou seja, podem assumir diversos valores. Alguns exemplos:

• Inteiro (int): -2.147.483.648 a -2.147.483.647
• Ponto Flutuante (float): -3,4 * 10^38 a +3,4*10^38
• Caractere (char): 0 a 65535;
• Byte (byte): -128 a 127;
• Lógico (boolean): true ou false;
• Cor (color): 16 milhões de cores e 256 tonalidades de transparência;
• Fonte (PFont): Inúmeros tipos diferentes de fontes;
• Forma SVG (PShape): Inúmeros tipos diferentes de formas no formato SVG;
• Imagem (PImage): Diferentes tipos de imagens (.gif, .jpg, .png, .tga).

Após uma variável ser criada com um tipo de dado ele não pode ser trocado ou redefinido. Por exemplo, o código abaixo levanta o erro “Duplicate local variable a”.

float a= 12;

int a = 13;

Também não é possível misturar tipos que não sejam conversíveis. Por exemplo, o tipo ponto flutuante não “serve” dentro do tipo inteiro. A mensagem de erro dada é:  “cannot convert from float to int”.

int a = 13.3; // Erro!
float a = 1;
int b = a + 12.4; // Erro!

Em muitas situações, porém, é necessária a conversão entre tipos de dados diferentes. A manipulação do tipo lógico (boolean) é um exemplo típico. Ele não é conversível implicitamente ao tipo inteiro. Para converter do tipo boolean para o tipo int, por exemplo, utiliza-se a função int.

boolean a = true;
int b = int(a);

Algumas outras funções de conversão disponíveis são:

• binary: Converte byte, char, int e color para string de notação binária;
• boolean: Converte de string (”true” e “false”) para valor lógico;
• byte: Conversão para byte;
• char: Conversão para char;
• float: Converte para float;
• hex: Converte um byte, char, int ou color para uma representação equivalente hexadecimal;
• int: Converte para número inteiro;
• str: Retorna a representação em string de tipos primitivos e arrays;
• unbinary: Converte uma representação binária no formato string para o inteiro equivalente;
• unhex: Converte uma representação hexadecimal no formato string para o inteiro equivalente.

Nomenclatura de Variáveis

Em relação aos nomes de variáveis, os exemplos mostrados até agora caracterizaram-se por usar apenas uma letra para dar nome à variável. Embora esta seja uma prática válida, é altamente recomendável a escolha de nomes significativos para descrever cada variável. Por exemplo, para representar uma variável que indica a cor do fundo de um programa algumas opções interessantes ao invés de “f” ou “c” seriam:

• fundo
• corFundo
• corDeFundo

Nomes como “CORDEFUNDO”, “CorDeFundo” e “cordefundo” embora sejam válidos para a linguagem de programação, fogem de uma certa convenção de nomenclatura recomendável para facilitar a leitura de seus programas. Esta convenção depende de cada linguagem. No Processing, utiliza-se o chamado CamelCase, recomendando-se que:

• O nome de todas as variáveis seja iniciado com letra minúscula e nunca por um número;
• Se o nome da variável for composto por mais de uma palavra, as palavras seguintes devem ter sua primeira letra maiúscula;
• Variáveis que nunca mudam de valor durante a execução de um programa, ou, na prática, constantes são nomeadas de maneira diferente e todas as letras devem ser capitalizadas. Por exemplo: CORNER, CENTER, indicam valores constantes.

Também se deve salientar que alguns caracteres não podem ser usados para dar nome às variáveis. Neste conjunto se incluem os espaços, caracteres especiais ($, %, &, * , -, etc) e caracteres acentuados. Além disso, as variáveis também não podem ser nomeadas com as palavras-reservadas da linguagem Processing. E, embora seja possível, é altamente não recomendável utilizar  o nome de funções já existentes para dar nome.  Ou seja, “rect” e “ellipse” são nomes que devem ser evitados e “int” e “float” são inválidos.

Escopo de variáveis

Uma variável possui uma área de validade, ou seja, sua existência é limitada a um bloco de código. Esta validade é chamada de escopo da variável.

No caso do modo contínuo do Processing, para criar uma variável que seja vista por todo o programa, sua criação deve ser feita fora dos blocos setup e draw. Por exemplo, no código abaixo, a variável x pode ser trabalhada tanto pelo setup quanto pelo draw.

int x;
void setup()
{
x = width;
strokeWeight(10);
}
void draw()
{
background(255);
point(x, height/2);
x = x – 1;
}

Executar!

Se uma variável é definida dentro de um bloco, ela não é enxergada pelo outro. No exemplo abaixo, o Processing levanta o erro “Cannot find anything named ‘n’”, denotando que a variável n, dentro do bloco draw é desconhecida. Em outras palavras, o escopo da variável n é o bloco setup.

void setup()
{
int n = 0;
strokeWeight(10);
}
void draw()
{
background(255);
point(n, height/2);
n = n + 1;
}

Observe que blocos podem ser criados através da abertura e fechamento de chaves. No exemplo abaixo, a variável cor só existe dentro do if. Este estilo de codificação pode criar uma confusão na leitura do código. Recomenda-se, portanto, a organização da criação das variáveis. Assim, sua definição deve ser feita no início dos blocos draw e setup no caso de variáveis que devem ser usadas apenas nestes blocos e fora do setup e draw no caso de variáveis que devem ser compartilhadas pelos dois blocos.

void draw()
{
if(mousePressed)
{
color c = color(255);
}
background(c);
}

Na seção a seguir, exemplificam-se alguns usos de variáveis no Processing e, principalmente, sua utilização conjunta à estrutura condicional.

Exemplos de uso de variáveis

Variáveis podem ser usadas para representar a posição de um objeto na tela. No exemplo abaixo, as variáveis x e y indicam a posição em x e y da construção de um ponto.

Em setup os valores de x e y são, respectivamente, inicializados com width/2 e height/2, ou seja, o ponto é desenhado no centro da tela.

float x;
float y;
void setup()
{
x = width/2;
y = height/2;
strokeWeight(10);
}
void draw()
{
background(255);
point(x,y);
}

Executar!

As variáveis x e y podem ser alteradas a cada chamada do draw. Esta atualização pode ser feita, por exemplo, com a instrução x=x+1. Esta instrução, a cada chamada do draw, incrementa o valor de x em uma unidade. Por exemplo, na primeira chamada ao draw, ou seja, no primeiro frame, x é igual a 50. A partir daí, x = 50 +1, ou x fica com valor 51. Como a modificação de x em cada frame é de uma posição, pode-se dizer que sua velocidade em x é de 1 pixel por frame.

float x;
float y;
void setup()
{
x = width/2;
y = height/2;
strokeWeight(10);
println(x);
}
void draw()
{
background(255);
point(x,y);
x = x + 1;
println(x);
}

Executar!

No próximo exemplo, a velocidade do objeto é dependente da posição do mouse. Desta forma, se a posição do mouse estiver à esquerda do objeto a velocidade é negativa. Caso contrário, a velocidade é positiva.

float x;
float y;
void setup()
{
x = width/2;
y = height/2;
strokeWeight(10);
frameRate(30);
}
void draw()
{
background(255);
point(x,y);
// Faz com que o objeto siga o mouse (eixo x)
if(mouseX<x)
x = x – 1;
else if(mouseX>x)
x = x + 1;

// Faz com que o objeto siga o mouse (eixo y)
if(mouseY<y)
y = y – 1;
else if(mouseY>y)
y = y + 1;
}

Executar!

O teclado também pode ser utilizado como condição para a modificação de uma variável.  A seguir, as teclas controlam a modificação de x ou y.

float x;
float y;
void setup()
{
x = width/2;
y = height/2;
strokeWeight(10);
frameRate(30);
}
void draw()
{
background(255);
point(x,y);
// Se a tecla for codificada e
// pressionada
if(key==CODED && keyPressed)
{
// Para cima, altera o valor de y em -1
if(keyCode==UP)
{
y = y – 1;
}
// Para baixo, altera o valor de y em +1
else if(keyCode==DOWN)
{
y = y + 1;
}
// Para esquerda, altera o valor de x em -1
else if(keyCode==LEFT)
{
x = x – 1;
}
// Para direita, altera o valor de x em +1
else if(keyCode==RIGHT)
{
x = x + 1;
}
}
}
Executar!

Além dos tipos básicos, as variáveis também podem conter objetos mais complexos como fontes e imagens. A função createFont, no exemplo a seguir, retorna uma variável do tipo PFont. Essa variável é usada no bloco draw para desenhar a cada frame um texto diferente. A condição (frameCount%2==0) a cada frame habilita um bloco diferente. Quando frameCount é par,  a condição é verdadeira e o fluxo principal é executado. No caso de frames ímpares o fluxo alternativo é executado.

PFont fonte1;
PFont fonte2;
void setup()
{
fonte1 = createFont(”Arial”, 15);
fonte2 = createFont(”Times New Roman”, 20);
textAlign(CENTER);
frameRate(5);
}
void draw()
{
background(128);
// Em frames pares, mostra a fonte arial
if(frameCount % 2==0)
{
textFont(fonte1);
text(”Arial”, width/2, height/2);
}
else // Em frames ímpares, mostra a times
{
textFont(fonte2);
text(”Times”, width/2, height/2);
}
}

Executar!

Outro tipo de variável que o Processing aceita é a variável de imagem. Uma imagem é representada pelo tipo PImage. Para carregar uma imagem é necessária a chamada à função loadImage passando como parâmetro o nome do arquivo de imagem. A exibição da imagem é controlada pela função image. Tal função permite a escolha da posição da imagem na tela e, opcionalmente, de sua altura e largura. No exemplo a seguir, o arquivo “aviao.png” é exibido.

Para colocar este arquivo dentro do projeto para que Processing consiga enxergá-lo, selecione o menu Sketch > Add file… . O arquivo será colocado em uma pasta chamada data dentro da pasta do projeto.

// Variável de imagem
PImage img;
// Carrega a imagem
img = loadImage(”aviao.png”);
// Exibe a imagem na posição 0,0
image(img,0,0);

Executar!

Imagem inserida (originalmente de SpriteLib GPL – observe a licença desta imagem no site!).

No próximo exemplo, a exibição da imagem é controlada a partir da posição do mouse. A chamada a imageMode(CENTER) faz com que o desenho da imagem seja centralizado em relação à posição do mouse.

// Variável de imagem
PImage img;
void setup()
{
size(300, 200);
// Carrega a imagem
img = loadImage(”aviao.png”);
// O modo de desenho da imagem é centralizado
imageMode(CENTER);
}
void draw()
{
// Oculta o cursor
noCursor();
// Cor de fundo igual ao fundo da imagem
background(0,67,171);
// Exibe a imagem na posição do mouse
image(img,mouseX,mouseY);
}

Executar!

Por enquanto, observe que só nos preocupamos em carregar e mostrar as imagens. Futuramente, veremos como uma imagem pode ser alterada através de filtros ou processada pixel a pixel.

Para saber mais

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

51 a 59 – decisão.

]]> http://www.brunocampagnolo.com/2009ip/2009/03/24/aula-04-estrutura-condicional-e-criacao-de-variaveis/feed/ 0 http://www.brunocampagnolo.com/2009ip/2009/03/17/aula-03-expressoes-aritmeticas-relacionais-e-logicas/ http://www.brunocampagnolo.com/2009ip/2009/03/17/aula-03-expressoes-aritmeticas-relacionais-e-logicas/#comments Tue, 17 Mar 2009 16:47:36 +0000 admin http://www.brunocampagnolo.com/2009ip/?p=302 Objetivo

Anteriormente, entendemos o Processing como uma ferramenta de desenho e como uma ferramenta de animação e interação. Cada vez mais funções são apresentadas para que se entenda como funcionam as funcionalidades de uma linguagem de programação voltada para a computação gráfica e design digital.

As variáveis apresentadas no capítulo anterior foram utilizadas como entradas imediatas de dados das funções gráficas. Tais variáveis, porém, podem ser alteradas e modificadas através de expressões , operadores e funções. Desta forma, o tema do capítulo corrente trata de como aplicar elementos da aritmética e lógica em um programa de computador. Cada um destes elementos será enxergado como se fosse um bloco de lego, ou melhor, um filtro no qual um ou mais valores serão transformados em outros.

No início, outro tipo de interação também é apresentada: a interação via teclado.

Destaca-se que o uso de expressões relacionais e lógicas neste capítulo deve ser estudado com cuidado por ter um enfoque mais matemático que o tradicional. Entretanto, em situações reais seu uso é mais simples se combinadas com o uso de estruturas condicionais. Se você compreende bem as operações lógicas e relacionais fique confortável para pular este capítulo e partir direto para o trabalho com a estrutura condicional na seqüencia.

Exemplos do Capítulo

Os exemplos mostrados neste capítulo estão disponíveis para download.

Sintaxe introduzida (link para documentação em Português)

Esta seção serve como resumo e referência aos comandos explorados neste capítulo. Pule para o tópico “Usando as variáveis de teclado no modo contínuo”, se for sua primeira leitura.

• Variáveis de teclado:
  • key: contém o valor da tecla mais recentemente pressionada ou solta, representa o caractere da tecla;
  • keyCode: permite a detecção de teclas especiais como UP, DOWN, LEFT e RIGHT (cima, baixo, esquerda e direita);
  • keyPressed: valor booleano que indica se uma tecla está pressionada (true) ou solta (false).
• Expressões Aritméticas:
  • operador +: Adiciona dois valores ou concatena dois strings. Pode ser usado para modificar a posição de um elemento na tela em relação a uma coordenada existente, deixando o elemento mais à direita em relação ao eixo x ou mais para baixo em relação ao eixo y.
  • operador -: Subtrai dois valores. Semelhante ao operador “+”, o – também pode deslocar um elemento. No caso do operador – o elemento é deslocado para cima em relação ao eixo y e para a esquerda em relação ao eixo x. O operador “-” também pode ser usado para inverter uma direção de movimento.
  • operador *: Multiplica dois valores. Sua utilidade está, por exemplo, no reescalonamento de uma posição. A operação de multiplicação por zero também terá vez em relação à habilitação de desenho de um elemento.
  • operador /: Divide um valor por outro. Indica quantas vezes um elemento serve dentro de outro. Operações com “/” podem ser usadas, por exemplo, para criar funções que aumentam de uma unidade após um certo tempo.
  • operador %: Retorna o resto inteiro da divisão. Usado para restringir um conjunto de números a um intervalo desejado.
• Expressões Relacionais:
  • ==: Operador de igualdade. Devolve verdadeiro quando os dois operandos são iguais;
  • !=: Operador de diferença. Devolve verdadeiro quando os dois operandos são diferentes;
  • >: Operador de maior. Devolve verdadeiro quando o operando da esquerda é maior que o da direita;
  • <: Operador de menor. Devolve verdadeiro quando o operando da esquerda é menor que o da direita;
  • >=: Operador maior ou igual. Devolve verdadeiro quando o operando da esquerda é maior ou igual que o da direita.
  • <=: Operador menor ou igual. Devolve verdadeiro quando o operando da esquerda é menor ou igual que o da direita.
• Expressões Lógicas:
  • && – Operador E.
  • || – Operador OU.
  • ! – Operador NÃO.

Sintaxe introduzida (link para documentação em Inglês)

Esta seção serve como resumo e referência aos comandos explorados neste capítulo. Pule para o tópico “Usando as variáveis de teclado no modo contínuo”, se for sua primeira leitura.

• Variáveis de teclado:
  • key: contém o valor da tecla mais recentemente pressionada ou solta, representa o caractere da tecla;
  • keyCode: permite a detecção de teclas especiais como UP, DOWN, LEFT e RIGHT (cima, baixo, esquerda e direita);
  • keyPressed: valor booleano que indica se uma tecla está pressionada (true) ou solta (false).
• Expressões Aritméticas:
  • operador +: Adiciona dois valores ou concatena dois strings. Pode ser usado para modificar a posição de um elemento na tela em relação a uma coordenada existente, deixando o elemento mais à direita em relação ao eixo x ou mais para baixo em relação ao eixo y.
  • operador -: Subtrai dois valores. Semelhante ao operador “+”, o – também pode deslocar um elemento. No caso do operador – o elemento é deslocado para cima em relação ao eixo y e para a esquerda em relação ao eixo x. O operador “-” também pode ser usado para inverter uma direção de movimento.
  • operador *: Multiplica dois valores. Sua utilidade está, por exemplo, no reescalonamento de uma posição. A operação de multiplicação por zero também terá vez em relação à habilitação de desenho de um elemento.
  • operador /: Divide um valor por outro. Indica quantas vezes um elemento serve dentro de outro. Operações com “/” podem ser usadas, por exemplo, para criar funções que aumentam de uma unidade após um certo tempo.
  • operador %: Retorna o resto inteiro da divisão. Usado para restringir um conjunto de números a um intervalo desejado.
• Expressões Relacionais:
  • ==: Operador de igualdade. Devolve verdadeiro quando os dois operandos são iguais;
  • !=: Operador de diferença. Devolve verdadeiro quando os dois operandos são diferentes;
  • >: Operador de maior. Devolve verdadeiro quando o operando da esquerda é maior que o da direita;
  • <: Operador de menor. Devolve verdadeiro quando o operando da esquerda é menor que o da direita;
  • >=: Operador maior ou igual. Devolve verdadeiro quando o operando da esquerda é maior ou igual que o da direita.
  • <=: Operador menor ou igual. Devolve verdadeiro quando o operando da esquerda é menor ou igual que o da direita.
• Expressões Lógicas:
  • && – Operador E.
  • || – Operador OU.
  • ! – Operador NÃO.

Usando as variáveis de teclado no modo contínuo

O teclado é, sem dúvida, um dos dispositivos de interação de maior  popularidade no uso de dispositivos eletrônicos. Desde teclados computadorizados, aparelhos celulares, eletrodomésticos como microondas, máquinas de escrever, e, até mesmo, brinquedos, a interação via teclado é conhecida por todos. O teclado do computador é derivado da interface da máquina de escrever. Mesmo que o computador tenha evoluído nas últimas décadas e deixado de ser meramente uma máquina de criar textos, o teclado persiste e foi adaptado para o uso em games, navegação pela Internet e comunicação pessoal.

O Processing expõe três variáveis que indicam o estado atual do teclado:

• key: contém o valor da tecla mais recentemente pressionada ou solta, representa o caractere da tecla;
• keyCode: permite a detecção de teclas especiais como UP, DOWN, LEFT e RIGHT (cima, baixo, esquerda e direita);
• keyPressed: valor booleano que indica se uma tecla está pressionada (true) ou solta (false).

A variável key retorna o caractere pressionado. No exemplo abaixo, cada vez que o usuário altera a tecla uma letra diferente é exibida na tela. Observe o uso da função textAlign para alinhar o texto no centro da tela.

void setup()
{
   // Carrega a fonte Arial com metade do tamanho da tela
   textFont(createFont("Arial", width/2));
   // Alinha o texto
   textAlign(CENTER, BASELINE);
}
void draw()
{
    // Limpa a tela
    background(100);
    // Exibe a tecla pressionada
    text(key, width/2, height/2);

}

Executar!

Embora o valor de key seja um caractere também é possível convertê-lo para uma representação numérica. Essa representação numérica é derivada de uma tabela de caracteres chamada tabela ASCII. Esta tabela representa cada caractere com um valor diferente de 0 até 255. Por exemplo, entre 48 e 57 temos os valores dos caracteres de 0 a 9. Entre 65 e 90 tem-se o intervalo das letras maiúsculas. O exemplo abaixo, associa a posição de desenho de uma linha à tecla pressionada.

void setup()
{
    size(300, 100);
    // Carrega a fonte Arial com metade do tamanho da tela
    textFont(createFont("Arial", height/2));
    // Alinha o texto
    textAlign(CENTER, BASELINE);
}
void draw()
{
    // Limpa a tela
    background(100);
    // Exibe a tecla pressionada como uma linha
    // O valor de x corresponde à tecla
    line(key, 0, key, height);
    // Exibe o valor ASCII da tecla pressionada
    text(int(key), width/2, height);
}

Executar!

Enquanto a variável key retorna um caractere ASCII, a variável keyCode permite que se utilize a representação para teclas especiais. Esta representação inclui também as teclas como: UP, DOWN, LEFT, RIGHT, ALT, SHIFT e CONTROL, por exemplo. Observe que keyCode representa a tecla e não a letra. Por exemplo, ao pressionar a tecla ‘A’, independente se o valor é minúsculo ou maiúsculo, o valor obtido é 65. O exemplo abaixo demonstra a diferença entre key e keyCode. Uma lista dos valores está disponível no site do Java.

void setup()
{
  size(300, 100);
  // Carrega a fonte Arial com metade do tamanho da tela
  textFont(createFont("Arial", height/2));
  // Alinha o texto
  textAlign(CENTER, BASELINE);
}
void draw()
{
  // Limpa a tela
  background(100);
  // Exibe a tecla pressionada como uma linha
  // O valor de x1 corresponde à key
  // O valor de x2 corresponde à keyCode
  line(key, 0, keyCode, height);
  // Exibe o valor da tecla pressionada (key)
  text(int(key), width/3, height/2);
  text(key, 2*width/3, height/2);
  // Exibe o valor da tecla pressionada (keyCode)
  text(keyCode, width/2, height);
}

Executar!

A última variável que se preocupa com o teclado é a variável keyPressed. Tal variável é um valor lógico que poderá ser utilizado para a tomada de decisões. O código a seguir exemplifica a mudança da cor da tela caso qualquer tecla seja pressionada. A tecla pressionada determina a cor escolhida. O uso da função int se dá para converter o valor lógico (true ou false) para 1 ou zero.

void setup()
{
  // Carrega a fonte Arial com metade do tamanho da tela
  textFont(createFont("Arial", height/2));
  // Alinha o texto
  textAlign(CENTER, BASELINE);
}
void draw()
{
  // Limpa a tela com a cor da tecla
  // caso a tecla seja pressionada
  background(key * int(keyPressed));
  text(key, width/2, height/2);
}

Executar!

Para usar o teclado efetivamente, será necessário diferenciar cada uma das teclas pressionadas e associar ações diferentes a cada tecla conforme sua relação com um valor.  Será necessário, portanto, necessário o uso dos operadores, principalmente, os relacionais. Nas próximas seções, conheceremos os principais operadores que podem ser utilizados no Processing e como eles podem ser utilizados para manipulação das variáveis de mouse e de teclado, ou mesmo para aplicar operações na variável frameCount.

Expressões Aritméticas

A matemática pode ser utilizada para produzir forma e movimento em um programa. Os operadores aritméticos tradicionais, embora sejam bastante intuitivos podem ser aplicados na criação de comportamentos complexos, principalmente quando misturados entre si para gerar funções. As expressões aritméticas são construídas através dos operadores explicados a seguir:

• operador +: Adiciona dois valores ou concatena dois strings. Pode ser usado para modificar a posição de um elemento na tela em relação a uma coordenada existente, deixando o elemento mais à direita em relação ao eixo x ou mais para baixo em relação ao eixo y.
• operador -: Subtrai dois valores. Semelhante ao operador “+”, o – também pode deslocar um elemento. No caso do operador – o elemento é deslocado para cima em relação ao eixo y e para a esquerda em relação ao eixo x. O operador “-” também pode ser usado para inverter uma direção de movimento.
• operador *: Multiplica dois valores. Sua utilidade está, por exemplo, no reescalonamento de uma posição. A operação de multiplicação por zero também terá vez em relação à habilitação de desenho de um elemento.
• operador /: Divide um valor por outro. Indica quantas vezes um elemento serve dentro de outro. Operações com “/” podem ser usadas, por exemplo, para criar funções que aumentam de uma unidade após um certo tempo.
• operador %: Retorna o resto inteiro da divisão. Usado para restringir um conjunto de números a um intervalo desejado.

Observa-se exemplos de aplicação de cada um destes operadores em seguida, principalmente para a implementação de deslocamentos e movimentos.

No exemplo a seguir, o mouse determina a posição de um retângulo na tela. O círculo branco é desenhado à direita do retângulo através da aplicação do operador + e o círculo cinza é desenhado à esquerda pelo uso do operador -.

void setup()
{
  rectMode(CENTER);
}

void draw()
{
  background(100);
  // Retângulo ao centro
  fill(0);
  rect(mouseX, mouseY, 20, 20);
  // Círculo à direita
  fill(255);
  ellipse(mouseX+20, mouseY, 20, 20);
  // Círculo à esquerda
  fill(128);
  ellipse(mouseX-20, mouseY, 20, 20);
}

Executar!

O caso abaixo demonsta o texto sendo exibido à esquerda, acima, à direita e abaixo conforme a aplicação dos deslocamentos.

void setup()
{
  // Carrega a fonte Arial com tamanho 10
  textFont(createFont("Arial", 10));
  // Alinha o texto
  textAlign(CENTER);
}

void draw()
{
  background(100);
  noFill();
  text("N", mouseX, mouseY-20);
  text("O", mouseX-20, mouseY);
  text("S", mouseX, mouseY + 20);
  text("E", mouseX+20,mouseY);
}

Executar!

A combinação dos operadores + e – pode ser feita com a variável frameCount, width e height. No exemplo abaixo, cada letra é deslocada em relação a anterior. O valor do deslocamento determina também a posição inicial do objeto.

void setup()
{
  // Carrega a fonte Arial com tamanho 20
  textFont(createFont("Arial", 20));
  // Alinha o texto
  textAlign(CENTER);
}
void draw()
{
  background(100);
  text("3", frameCount, height - 20);
  text("2", frameCount+10, height - 40);
  text("1", frameCount+20, height - 60);
}

Executar!

O operador de multiplicação também pode ser usado para aumentar ou diminuir a velocidade de um movimento. No exemplo abaixo, cada letra tem uma velocidade diferente a partir do multiplicador.

void setup()
{
  // Carrega a fonte Arial com tamanho 20
  textFont(createFont("Arial", 20));
  // Alinha o texto
  textAlign(CENTER);
}
void draw()
{
  background(100);
  text("3", frameCount*0.5, height - 20);
  text("2", frameCount, height - 40);
  text("1", frameCount*2, height - 60);
}

Executar!

A partir dos exemplos anteriores pode-se observar que a posição do objeto em relação ao tempo reflete a relação física entre velocidade e tempo (sendo frameCount uma boa aproximação do tempo passado desde o início do programa). Assim, considerando a independência dos movimentos no eixo x e no eixo y, as fórmulas para cálculo da posição de um objeto após a passagem de um certo tempo é:

x = posição inicial em x + (velocidade em x * frameCount )

y = posição inicial em y + (velocidade em y * frameCount)

Esta é a fórmula do Movimento Retilínio Uniforme. No exemplo, abaixo, cada instrução implementa uma fórmula de posicionamento diferente em x e em y. A tabela sumariza as posições, direções e velocidades de cada objeto. Observe que a velocidade é dada em pixels por frame.

void setup()
{
  // Carrega a fonte Arial com tamanho 20
  textFont(createFont("Arial", 20));
  // Alinha o texto
  textAlign(CENTER);
  frameRate(5);
}
void draw()
{
  background(100);
  text("3", 10+frameCount*0.5, 20+frameCount*3);
  text("2", 45-frameCount*2, 50+frameCount*3);
  text("1", 90-frameCount*7, 60-frameCount*5);
}

Executar!

Exercício de Fixação 01 – Completar a tabela

Conhecendo a fórmula do MRU e dadas as seguintes posições, complete a tabela a seguir.

Fórmula:

x = posição inicial em x + (velocidade em x * frameCount )

y = posição inicial em y + (velocidade em y * frameCount)

Instrução	Posição Inicial em X	Velocidade em X (pixels / frame)	Direção em X	Posição Inicial em Y	Velocidade em Y (pixels / frame))	Direção em Y
text(”X”, frameCount*0.7, 13-frameCount*6);
text(”Y”, -45+frameCount*10, 50+frameCount*3);
text(”Z”, 12-frameCount*3, 30+frameCount*2);

 

Outro tipo de movimento de possível implementação apenas usando operadores aritméticos é o movimento retilíneo uniformemente variado. Neste caso, a velocidade varia de maneira constante, ou seja, uma aceleração é aplicada. Um exemplo típico de aceleração que pode ser aplicada em um corpo é a aceleração da gravidade.

A fórmula para determinação da posição a partir do frameCount é:

posição atual = posição inicial + velocidade inicial * frameCount+ (1/2*aceleração*frameCount * frameCount )

Foge do escopo deste material a demonstração desta fórmula.

void setup()
{
  size(100, 300);
  frameRate(5);
}
void draw()
{
  ellipse(width/2,
  10+1*frameCount+(0.5*5*frameCount*frameCount),
  10, 10);
}

Executar!

É claro, o movimento em x e em y pode ser enxergado de maneira independente. Por exemplo, a seguir é demonstrado o movimento de um projétil: velocidade constante em x e variável em relação à velocidade em y.

void setup()
{
  size(400, 300);
  frameRate(30);
}
void draw()
{
  background(0);
  ellipse(2 * frameCount,
  height-5*frameCount+(0.5*0.06*frameCount*frameCount),
  10, 10);
}

Executar!

Movimentos periódicos podem ser implementados através do operador %. Tal operador retorna o resto inteiro da divisão. Conforme já explicado no capítulo anterior, a aplicação do operador % em uma variável que cresce constantemente cria uma expressão que volta a se repetir. O programa abaixo gera o gráfico de aplicação do operador % em relação ao frameCount. O intervalo de repetição da expressão se dá de zero até 99. Ao frameCount chegar em 100, já que 100 dividido por 100  dá resto 0, o intervalo recomeça.

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 20));
  frameRate(10);
}
void draw()
{
  // Exibe o ponto
  point(frameCount,
  frameCount % 100);
  // Exibe os dados
  fill(255);
  rect(0, height/2, 400, 100);
  fill(0);
  text("frameCount = " + frameCount, 0, height - 60);
  text("frameCount % 100 = " + (frameCount % 100), 0, height - 40);
}

Executar!

Destaca-se, também, que qualquer um dos movimentos anteriores também pode ser implementado de maneira periódica usando o operador % como parâmetro do movimento. No exemplo abaixo, a expressão frameCount % 30 permite que se repita a animação de 30 em 30 frames.

void setup()
{
  // Carrega a fonte Arial com tamanho 20
  textFont(createFont("Arial", 20));
  // Alinha o texto
  textAlign(CENTER);
  frameRate(5);
}
void draw()
{
  background(100);
  text("3", 10+(frameCount % 30)*0.5, 20+(frameCount % 30)*3);
  text("2", 45-(frameCount % 30)*2, 50+(frameCount % 30)*3);
  text("1", 90-(frameCount % 30)*7, 60-(frameCount % 30)*5);
}

Executar!

A aplicação da expressão (frameCount % width) ou (frameCount % height) retorna, respectivamente, um intervalo de repetição entre zero e a largura da tela e entre zero e a altura da tela. Esta expressão é útil para criar a ilusão que um objeto ao chegar em um limite da tela retorna à posição original. No caso da velocidade do objeto ser de valor constante igual a 1 frame por segundo, a expressão deve ser (frameCount % width) para uma repetição no eixo x e (frameCount % height) para uma repetição no eixo y.  Se a velocidade for diferente, o valor de velocidade deve dividir a largura ou altura, conforme exemplo abaixo:

void setup()
{
  size(100, 300);
}
void draw()
{
  background(0);
  ellipse(0,
  (frameCount % height), 10, 10);
  // Velocidade: 2 px/frame
  ellipse(width/4,
          2*(frameCount % (height/2)), 10, 10);
  // Velocidade: 3 px/frame
  ellipse(width/2,
          3*(frameCount % (height/3)), 10, 10);
  // Velocidade: 4 px/frame
  ellipse(3*width/4,
          4*(frameCount % (height/4)), 10, 10);
}

Executar!

Desta forma, o operador “/”, ou seja, a divisão, é útil também na criação de funções que aumentam (ou diminuem) conforme a passagem do tempo. No programa seguinte, observa-se a evolução do gráfico de uma função conforme a aplicação de diferentes fatores de divisão. Salianta-se que ao invés da divisão, o mesmo efeito poderia ser conseguido através da multiplicação. Por exemplo, o gráfico de (frameCount/2) é o mesmo de (frameCount * 0.5). A divisão, porém, deixa mais claro ao leitor do código o objetivo do programador. No caso de (frameCount/2), por exemplo, o objetivo é obter uma função com a metade da velocidade imposta por frameCount.

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 15));
  frameRate(10);
}
void draw()
{
  // Exibe os pontos
  stroke(0);
  point(frameCount,
  frameCount);
  stroke(255, 0, 0);
  point(frameCount,
  frameCount / 2);
  stroke(0, 255, 0);
  point(frameCount,
  frameCount / 3);
  // Exibe os dados
  noStroke();
  fill(255);
  rect(0, height/2, 400, 100);
  fill(0);
  text("frameCount  = "    + frameCount, 0, height - 45);
  fill(255,0,0);
  text("frameCount / 2 = " + (frameCount / 2), 0, height - 30);
  fill(0,255,0);
  text("frameCount / 3 = " + (frameCount / 3), 0, height - 15);
}

Executar!

Uma funcionalidade interessante é obtida através da combinação entre as expressões (frameCount % width) e (frameCount / width): percorrer os pixels da tela. A chamada à point(frameCount % width, frameCount / width), marca cada um dos pontos da tela da esquerda para a direita e de cima para baixo.

void setup()
{
  size(256, 256);
  textFont(createFont("Arial", 20));
}
void draw()
{
  // Exibe os pontos
  stroke(frameCount % 256);
  point(frameCount % width,
        frameCount / width);

  // Exibe os dados
  fill(255);
  rect(0, width-60, width, 60);
  fill(0);
  text("frameCount % width = " + (frameCount % width), 0, height - 40);
  text("frameCount / width = " + (frameCount / width), 0, height - 20);
}

Executar!

Esta abordagem de desenho, embora permita compreender o instante de desenho de cada pixel é muito lenta para situações reais pois exige o redesenho de cada frame. Em um capítulo posterior, verificaremos como repetir o comando de desenho diversas vezes sem precisar redesenhar a tela utilizando a instrução for.

Variações nesta abordagem podem ser feitas, por exemplo, para gerar o desenho de um grid.

void setup()
{
  size(300, 300);
  textFont(createFont("Arial", 15));
}
void draw()
{
  // Exibe os pontos
  stroke(128);
  fill(frameCount % 256);
  rect((frameCount % (width/10)) * 10,
       (frameCount / (width/10)) * 10, 10, 10);

  // Exibe os dados
  fill(255);
  rect(0, width-100, width, 100);
  fill(0);
  text("(frameCount % (width /10)) * 10 = " +
        (frameCount % (width /10)) * 10 , 0, height - 80);
  text("(frameCount / (width /10)) * 10 = " +
        (frameCount / (width /10)) * 10, 0, height - 60);
  text("frameCount % width = " + (frameCount % width), 0, height - 40);
  text("frameCount / width = " + (frameCount / width), 0, height - 20);
}

Executar!

A variável frameCount começa a se mostrar insuficiente para resolver todos os problemas: observe que a primeira posição do grid não é desenhada.  Se diminuíssemos de 1 o valor de frameCount, esta situação estaria resolvida. Aumentaria, porém a complexidade de escrever e compreender esta expressão. No próximo capítulo, veremos como resolver o mesmo problema com uma expressão menos complexa através da definição de variáveis.

Exercício de Fixação 02 – Programa

Faça um programa que simule o comportamento da formação de uma palavra de 4 letras que devem se encontrar no centro da tela e formar uma palavra. Após o encontro, a animação recomeça.

Exercício de Fixação 03 – Grid

Faça um programa que construa um grid quadrado de 5 x 5 casas. Cada casa deve ser construída em um frame.

Definiu-se nesta seção, os operadores aritméticos. Nosso próximo passo será a utilização de operadores que além de modificarem expressões também serão úteis na tomada de decisões.

Expressões relacionais

Uma expressão relacional é obtida quando dois valores são comparados. Esta comparação tem como resultado um valor lógico. Tal valor pode ser o valor verdadeiro (true) ou o falso (false). O Processing apresenta seis operadores relacionais:

• ==: Operador de igualdade. Devolve verdadeiro quando os dois operandos são iguais;
• !=: Operador de diferença. Devolve verdadeiro quando os dois operandos são diferentes;
• >: Operador de maior. Devolve verdadeiro quando o operando da esquerda é maior que o da direita;
• <: Operador de menor. Devolve verdadeiro quando o operando da esquerda é menor que o da direita;
• >=: Operador maior ou igual. Devolve verdadeiro quando o operando da esquerda é maior ou igual que o da direita.
• <=: Operador menor ou igual. Devolve verdadeiro quando o operando da esquerda é menor ou igual que o da direita.

A avaliação destes operadores é bastante intuitiva. Observe as expressões abaixo:

• 3==3 é igual a verdadeiro;
• 3==4 é igual a falso;
• 30!=40 é igual a verdadeiro;
• 40!=40 é igual a falso;
• 10>5 é igual a verdadeiro;
• 10<5 é igual a falso;
• 10>10 é igual a falso;
• 10>=10 é igual a true.

Para exibir o valor destas expressões, pode-se usar a função println:

println(3==3);
println(3==4);
println(30!=40);
println(40!=40);
println(10>5);
println(10<5);
println(10>10);
println(10>=10);

Observe que o operador == não deve ser substituído por apenas um sinal de igual. Apenas um sinal de igual é usado para a operação de atribuição, que veremos no capítulo sobre criação de variáveis.

Os valores true e false serão úteis na tomada de decisões, mas também podem ser usados como se fossem números.

Assim, para a conversão de um valor true para 1 e do valor false para zero é necessária a aplicação da função int:

println(int(3==3));
println(int(3==4));
println(int(30!=40));
println(int(40!=40));
println(int(10>5));
println(int(10<5));
println(int(10>10));
println(int(10>=10));

Importante! Este tipo de conversão será utilizado nos próximos exemplos para que possamos compreender como funcionam os operadores relacionais. Em situações reais, perceberemos posteriormente, que tal conversão deve ser evitada para que nosso código seja o mais claro possível.

No exemplo abaixo, a cor de fundo da tela é controlada conforme a posição em x do mouse. Se o mouse estiver antes da metade da tela, a cor de fundo é o branco (cor 255), pois 255 multiplicado por 1 é igual a 255. Caso contrário, a cor obtida é o preto (cor zero), pois 255 multiplicado por zero é igual a zero.

void draw()
{
  background(255 * int(mouseX < width/2));
  stroke(128);
  line(width/2, 0, width/2, height);
}

Executar!

Os operadores relacionais também podem ser usados para cortar um valor após um certo limite. Abaixo, quando o valor de mouseX passa da metade da tela, o valor de mouseX multiplicado por int(mouseX<width/2) passa a ser zero.

void setup()
{
  rectMode(CENTER);
}
void draw()
{
  background(0);
  fill(128);
  rect(0, 0, width, height);
  fill(255);
  rect(mouseX   * int(mouseX<width/2),
           mouseY   * int(mouseY<height/2),
           width/4  * int(mouseX<width/2),
           height/4 * int(mouseX<height/2));
}

Executar!

No exemplo abaixo, cada tecla de zero a cinco é associada à troca da cor de fundo de um retângulo diferente, como se estivessemos usando um teclado. Observe que quando a tecla é pressionada o valor é mantido até que outra tecla seja pressionada.

void draw()
{
  background(128);
  fill( 255 * int(key=='1') );
  rect(0, 0, width/5, height);
  fill( 255 * int(key=='2') );
  rect(width/5, 0, width/5, height);
  fill( 255 * int(key=='3') );
  rect(2*width/5, 0, width/5, height);
  fill( 255 * int(key=='4') );
  rect(3*width/5, 0, width/5, height);
  fill( 255 * int(key=='5') );
  rect(4*width/5, 0, width/5, height);
}

Executar!

Diferente do exemplo anterior, a cor de fundo no próximo exemplo só é trocada enquanto a tecla estiver pressionada. Observa-se, portanto, que o operador * quando aplicado ao resultado de uma operação relacional exige que todos os lados da operação de multiplicação tenham valor verdadeiro para que o resultado da multiplicação não dê zero.

void draw()
{
  background(128);
  fill( 255 * int(key=='1') * int(keyPressed));
  rect(0, 0, width/5, height);
  fill( 255 * int(key=='2') * int(keyPressed));
  rect(width/5, 0, width/5, height);
  fill( 255 * int(key=='3') * int(keyPressed));
  rect(2*width/5, 0, width/5, height);
  fill( 255 * int(key=='4') * int(keyPressed));
  rect(3*width/5, 0, width/5, height);
  fill( 255 * int(key=='5') * int(keyPressed));
  rect(4*width/5, 0, width/5, height);
}

Executar!

Usando estratégia semelhante à do exercício anterior, é possível criar uma ferramenta de desenho que mistura a interação com o mouse e teclado. No exemplo abaixo, a cor do pincel é escolhida a partir da tecla pressionada. O operador ‘+’ separando as operações de multiplicação, faz com que somente com uma condição verdadeira a cor seja escolhida.

void setup()
{
  background(0);
  strokeWeight(5);
}
void draw()
{
  stroke( 255 * int(key=='1') * int(mousePressed) +
          200 * int(key=='2') * int(mousePressed) +
          150 * int(key=='3') * int(mousePressed) +
          100 * int(key=='4') * int(mousePressed));
  point(mouseX, mouseY);
}

Executar!

Apesar de válida, a utilização dos operadores * e + em conjunto com os operadores relacionais deve ser evitada quando possível. Para combinar operadores relacionais, portanto, utilizaremos os operadores lógicos.

Expressões lógicas

Operadores lógicos são úteis para combinar duas ou mais expressões relacionais e para inverter valores lógicos. O operador E, representado pelo sinal &&, retorna o valor verdadeiro caso todos os operandos tenham valor verdadeiro. O operador OU, reprentado pelo sinal ||, retorna o valor verdadeiro caso qualquer um dos operandos tenha valor verdadeiro. O operador NÃO, representado pelo sinal ! é um operador unário, ou seja, só pode ser aplicado em um operando. Neste caso, a aplicação do operador inverte o verdadeiro como falso e vice-versa.

Na prática, todas as combinações possíveis para estes operadores são:

• true && true é igual a true;
• true && false é igual a false;
• false && true é igual a false;
• false && false é igual a false;
• true || true é igual a true;
• true || false é igual a true;
• false || true é igual a true;
• false || false é igual a false;
• !true é igual a false;
• !false é igual a true.

Em uma comparação com objetos do mundo real, o operador E funciona como se fosse uma combinação de duas válvulas em um mesmo cano. Apenas se as duas válvulas estiverem ligadas a água sai pelo cano e enche o pote. No programa abaixo, cada uma das válvulas é controlada por um operador lógico. A válvula da esquerda é controlada pelo teclado e a da direita pelo mouse. Só no caso de ambas as válvulas estiverem ligadas o cano deixa a água sair.

void setup()
{
  size(200, 200);
  textFont(createFont("Arial", 45));
  textAlign(CENTER);
  smooth();
}

void draw()
{
  // Desenha o cano e as válvulas
  fill(0);
  rect(0, height/2, 2*width/3, 30);
  // Desenha a válvula associada ao teclado
  fill(255 * int(keyPressed));
  rect(width/4, height/2-10, 10, 40);
  // Desenha a válvula associada ao mouse
  fill(255 * int(mousePressed));
  rect(width/2, height/2-10, 10, 40);
  // Desenha o pote
  fill(255 * int(mousePressed && keyPressed));
  rect(3*width/5, height-60, 60, 60);
  text("E", width/2, height/3);
}

Executar!

No caso do operador OU, temos dois canos diferentes. Assim, tanto no caso de uma válvula ou outra estarem abertas o pote será preenchido com água. Novamente, a válvula da esquerda é controlada pelo teclado e a da direita pelo mouse.

void setup()
{
  size(200, 200);
  textFont(createFont("Arial", 45));
  textAlign(CENTER);
  smooth();
}

void draw()
{
  // Desenha o cano e as válvulas
  fill(0);
  rect(0, height/2, width/3, 30);
  rect(width-width/3, height/2, width/3, 30);
  // Desenha a válvula associada ao teclado
  fill(255 * int(keyPressed));
  rect(width/4, height/2-10, 10, 40);
  // Desenha a válvula associada ao mouse
  fill(255 * int(mousePressed));
  rect(width-width/4, height/2-10, 10, 40);
  // Desenha o pote
  fill(255 * int(mousePressed || keyPressed));
  rect(width/5, height-60, 3*width/5, 60);
  text("OU", width/2, height/3);
}

Executar!

No exemplo abaixo, o retângulo faz o papel de um botão. Assim, o operador E é usado para determinar o intervalo no qual o mouse pode estar para que o botão seja habilitado. Desta forma, quando a posição em x do mouse estiver no intervalo entre 30 e 70 o retângulo é pintado na cor branca.

void setup()
{
  textFont(createFont("Arial", 10));
  textAlign(CENTER);
}

void draw()
{
  background(128);
  // Preenche quando mouseX estiver entre 30 e 70
  fill( 255 * int((mouseX >= 30) && (mouseX <= 70)));
  rect(30, 0, 40, 100);
  // Mostra o valor de mouseX
  text(mouseX, 10, 10);
}

Executar!

No caso da habilitação do botão demandar do clique do mouse, somente se faz necessária a colocação de mais uma condição: mousePressed deve ser igual a true.

void setup()
{
  textFont(createFont("Arial", 10));
  textAlign(CENTER);
}

void draw()
{
  background(128);
  // Preenche quando mouseX estiver entre 30 e 70
  // e o mouse for pressionado
  fill( 255 * int((mouseX >= 30) &&
                  (mouseX <= 70) &&
                   mousePressed));
  rect(30, 0, 40, 100);
  // Mostra o valor de mouseX
  text(mouseX, 10, 10);
}

Executar!

Nos exemplos anteriores considerou-se apenas a consideração de mouseX. Para a delimitação de um botão em uma área da tela, o valor de mouseY também deve ser considerado.

void setup()
{
  textFont(createFont("Arial", 10));
}

void draw()
{
  background(128);
  // Preenche quando mouseX estiver entre 30 e 70
  // e quando mouseY estiver entre 10 e 40
  fill( 255 * int((mouseX >= 30) &&
                  (mouseX <= 70) &&
                  (mouseY >= 10) &&
                  (mouseY <= 40)));
  rect(30, 10, 40, 30);
  // Mostra o valor de mouseX e mouseY
  text("("+mouseX+","+mouseY+")", 10, 80);
}

Executar!

Exercício de Fixação 04 – Botões

Seu objetivo agora é gerar uma interface com 4 botões retangulares. Ao clicar em qualquer um destes botões, o botão deve indicar que foi clicado.

Os operadores E e OU também podem ser utilizados para na composição de funções com o objetivo de implementar movimentos mais complexos, formados por diferentes funções. Vamos codificar, inicialmente, o movimento de um objeto indo da esquerda para a direita e voltando ao ponto inicial.

Observe, por exemplo, o movimento periódico do objeto abaixo. A expressão, (frameCount % width) conforme vimos anteriormente, é responsável por este movimento periódico.

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 10));
  fill(0);
}

void draw()
{
  background(255);
  rect(frameCount % width, 2*height/3, 20, 20);
  text("frameCount % width = " + frameCount % width, 20, 20);
}

Executar!

Se fosse necessário o movimento contrário, ou seja, da esquerda para a direita, a expressão (width-frameCount % width) seria aplicável.

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 10));
  fill(0);
}

void draw()
{
  background(255);
  rect(width - frameCount % width, 2*height/3, 20, 20);
  text("width - frameCount % width = " + (width - frameCount % width), 20, 20);
}

Executar!

Plotando as duas funções de movimento em um mesmo gráfico, conforme o programa abaixo, observa-se que para a implementação de, por exemplo, um movimento periódico do objeto indo e voltando na tela poderíamos misturar as duas funções. Constata-se que a função em vermelho poderia ser usada para o início do movimento e a função em verde para a segunda parte do movimento, ou seja, para o retorno do objeto.

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 15));
  frameRate(20);
}
void draw()
{
  // Exibe os pontos
  stroke(0);
  point(frameCount, frameCount);
  stroke(255, 0, 0);
  point(frameCount, frameCount % 100);
  stroke(0, 255, 0);
  point(frameCount, 100 - frameCount % 100);
  // Exibe os dados
  noStroke();
  fill(255);
  rect(0, height/2, 400, 100);
  fill(0);
  text("frameCount  = "    + frameCount, 0, height - 45);
  fill(255,0,0);
  text("frameCount % 100 = " + frameCount % 100,
  0, height - 30);
  fill(0,255,0);
  text("100 - frameCount % 100 = " + (100 - frameCount % 100),
  0, height - 15);
}

Executar!

A combinação entre as duas expressões pode ser feita através da multiplicação de cada uma delas pelo intervalo que ela deve ser válida.

Ou seja: a expressão (frameCount % 100) no exemplo acima deve ser utilizada entre zero e 100 e a expressão (100-frameCount %100) é válida entre 100 e 200.

O intervalo entre 0 e 100 é representado por: (frameCount < 100) e (frameCount>=100 && frameCount<200) representa o intervalo seguinte.

A função final de deslocamento será:

(frameCount % 100) * int(frameCount<100) +

(100-frameCount%100) * int(frameCount>=100 && frameCount<200)

No resultado abaixo a função de deslocamento é representada em azul.

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 15));
  frameRate(20);
  strokeWeight(5);
}
void draw()
{
  // Exibe os pontos
  stroke(0);
  point(frameCount, frameCount);
  stroke(255, 0, 0);
  point(frameCount, frameCount % 100);
  stroke(0, 255, 0);
  point(frameCount, 100 - frameCount % 100);
  stroke(0, 0, 255);
  point(frameCount, (frameCount % 100) * int(frameCount<100) +
       (100-frameCount % 100) * int(frameCount>=100 && frameCount<200)
    );

  // Exibe os dados
  noStroke();
  fill(255);
  rect(0, height/2, 400, 100);
  fill(0);
  text("frameCount  = "    + frameCount, 0, height - 45);
  fill(255,0,0);
  text("frameCount % 100 = " + frameCount % 100,
  0, height - 30);
  fill(0,255,0);
  text("100 - frameCount % 100 = " + (100 - frameCount % 100),
        0, height - 15);
  fill(0,0,255);
  text("100 - frameCount % 100 = " + (100 - frameCount % 100),
        0, height - 15);
}

Executar!

Aplicando a fórmula no movimento do objeto:

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 10));
  fill(0);
}

void draw()
{
  background(255);
  // Função de movimento
  rect( (frameCount % width) * int(frameCount<width) +
    (width-frameCount % width) * int(frameCount>=width &&  frameCount<2*width)
    , 2*height/3, 20, 20);
  text("frameCount % width = " + (frameCount % width), 20, 20);
  text("width-frameCount % width = " + (width-frameCount % width), 20, 40);
}

Executar!

Em resumo, a composição de funções de movimento pode ser feita através da soma das expressões que geram cada intervalo desejado:

FUNÇÃO 1 * int(CONDIÇÃO QUE GERA O INTERVALO 1) +

FUNÇÃO 2 * int(CONDIÇÃO QUE GERA O INTERVALO 2) +

...

Exercício de Fixação 5 – Funções

Crie um programa que simule o comportamento a seguir:

Entre o frame 0 e 10: Posição inicial em x igual a 10 e velocidade 3.

Do frame 10 em diante: Posição 40.

Posição em y sempre de height/2

Ver exemplo.

No exemplo a seguir, o objetivo será deixar o próprio intervalo periódico. Ou seja, o objeto vai ficar oscilando entre duas posições.

Importante: sem a criação de variáveis auxiliares o código a seguir será de difícil compreensão! Faça a análise do código com calma, mas não se preocupe, voltaremos futuramente a ele!

O intervalo desejado pode ser implementado através das condições:

frameCount % (width*2) < width

e

frameCount % (width*2) >= width

A primeira condição é habilitada de 0 até width. A segunda fica com valor verdadeiro de width em diante. (frameCount % (width *2)) restringe o intervalo de frameCount de zero ao dobro de width.

Observe o desenho da função obtida em azul para uma largura de 100.

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 15));
  frameRate(20);
  strokeWeight(5);
}
void draw()
{
  // Exibe os pontos
  stroke(0);
  point(frameCount, frameCount);
  stroke(255, 0, 0);
  point(frameCount, frameCount % 100);
  stroke(0, 255, 0);
  point(frameCount, 100 - frameCount % 100);
  stroke(0, 0, 255);
  point(frameCount, (frameCount % 100)  * int(frameCount % 200 < 100 ) +
    (100-frameCount % 100) * int(frameCount % 200 >= 100)
    );

  // Exibe os dados
  noStroke();
  fill(255);
  rect(0, height/2, 400, 100);
  fill(0);
  text("frameCount  = "    + frameCount, 0, height - 45);
  fill(255,0,0);
  text("frameCount % 100 = " + frameCount % 100,
  0, height - 30);
  fill(0,255,0);
  text("100 - frameCount % 100 = " + (100 - frameCount % 100),
  0, height - 15);
  fill(0,0,255);
  text("combinação = " + (100 - frameCount % 100),
  0, height );
}

Segue o resultado final, com o objeto movimentando-se do início ao fim e voltando:

void setup()
{
  size(400, 200);
  textFont(createFont("Arial", 10));
  fill(0);
}

void draw()
{
  background(255);
  // Função de movimento
  rect( (frameCount % width) * int(frameCount % (width*2) < width ) +
        (width-frameCount % width) * int(frameCount % (width*2) >= width)
        , 2*height/3, 20, 20);

  text("frameCount % width = " + (frameCount % width), 20, 20);
  text("width-frameCount % width = " + (width-frameCount % width), 20, 40);
}

Executar!

void setup()
{
  size(350, 230);
  textFont(createFont("Arial", 10));
  fill(0);
}

void draw()
{
  background(255);
  // Função de movimento
  rect( (frameCount % width) * int(frameCount % (width*2) < width ) +
        (width-frameCount % width) * int(frameCount % (width*2) >= width),   
        (frameCount % height) * int(frameCount % (height*2) < height ) +
        (height-frameCount % height) * int(frameCount % (height*2) >= height) , 20, 20);

  text("frameCount % width = " + (frameCount % width), 20, 20);
  text("width-frameCount % width = " + (width-frameCount % width), 20, 40);
  text("frameCount % height = " + (frameCount % height), 20, 60);
  text("width-frameCount % height = " + (width-frameCount % height), 20, 80);
}

Executar!

Em mais um exemplo, também pode-se aplicar operações lógicas com as variáveis de teclado. No exemplo abaixo, as setas LEFT e RIGHT podem controlar a posição de um objeto.

void setup()
{
  size(300,100);
  rectMode(CENTER);
}

void draw()
{
  background(255);
  rect( width/3     * int(keyCode==LEFT) +
        2*width/3   * int(keyCode==RIGHT) +
        width/2     * int(keyCode!=LEFT &&
                          keyCode!=RIGHT)
        , height/2, 20, 20);
}

Por fim, no exemplo a seguir a variável keyPressed é utilizada para que apenas quando o usuário esteja com a tecla pressionada o objeto seja deslocado.

void setup()
{
  size(300,100);
  rectMode(CENTER);
}

void draw()
{
  background(255);
  rect( width/3 * int(keyPressed &&
        keyCode==LEFT) +
        2*width/3   * int(keyPressed &&
                          keyCode==RIGHT  ) +
        width/2     * int(!keyPressed || (keyCode!=LEFT &&
        keyCode!=RIGHT))
    , height/2, 20, 20);
}

Executar!

Para saber mais

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

Páginas 223 a 227 – teclado

43 a 50 – aritmética e funções

51 a 59 – decisão.

No capítulo anterior, o Processing foi tratado como uma simples ferramenta de desenho. Entretanto, o Processing é uma ambiente bastante completo de programação em geral permitindo a manipulação de estruturas em memória através de suas instruções. O objetivo principal agora é começarmos a pensar sobre as diferentes maneiras de representar essas estruturas através de variáveis.

Além disso, os tópicos de programação gráfica deste capítulo tratam da utilização do modo contínuo do Processing. Em tal modo de execução, o Processing deixa de ser uma ferramenta de desenho e passa a permitir a criação de animações. Por fim, durante este texto também é demonstrado o uso básico de  fontes e utilização do posicionamento do mouse em nossos programas para ilustrar o uso das variáveis de mouse.

Exemplos do capítulo

Os exemplos mostrados neste capítulo estão disponíveis para download (mirror).

Sintaxe Introduzida (link para a documentação em português)

Esta seção serve como resumo e referência aos comandos explorados neste capítulo. Pule para o tópico “Uso de Variáveis” se for sua primeira leitura!

• Variáveis do Processing:
  • width: armazena a largura da tela de visualização
  • height: armazena a altura da tela de visualização
  • focused: valor lógico que indica se o usuário está com o foco na janela do programa executando;
  • frameCount: no modo contínuo, é um número inteiro que contém o número de frames mostrados desde o início da execução do programa. Cada chamada ao método draw incrementa este valor;
  • frameRate: valor aproximado de taxa de atualização máxima de frames na execução do programa em modo contínuo;
  • online: valor lógico que representa se o programa está sendo executado dentro de uma página Web ou não;
  • screen.width: largura da tela do computador em pixels;
  • screen.height: altura da tela do computador em pixels;
  • mouseButton: indica qual dos botões do mouse foi pressionado (LEFT, CENTER ou RIGHT);
  • mousePressed: valor lógico que indica se qualquer botão do mouse foi pressionado;
  • mouseX: posição horizontal do mouse (eixo X) no frame atual;
  • mouseY: posição vertical do mouse (eixo Y);
  • pmouseX: posição horizontal do mouse (eixo X) no frame anterior;
  • pmouseY: posição vertical do mouse (eixo Y) no frame anterior;
  • key: contém o valor da mais recente tecla pressionada ou solta;
  • keyCode: usada para detectar o pressionamento de teclas especiais como UP, DOWN, RIGHT e LEFT;
  • keyPressed: valor lógico que indica se qualquer tecla foi pressionada.
• Exibição de variáveis no modo console:
  • print: envia texto para área de console do Processing;
  • println: envia texto para área de console do Processing e pula uma linha;
• Tipografia básica:
  • text: em um ponto qualquer, escreve um texto;
  • createFont: dinamicamente converte uma fonte disponível no computador para uma fonte do Processing;
  • textFont: seleciona a fonte atual;
  • PFont.list: lista as fontes disponíveis.
• Operadores aritméticos:
  • +: adição e concatenação;
  • -: subtração;
  • *: multiplicação;
  • /: divisão;
  • %: módulo (resto inteiro da divisão);
• Funções de conversão:
  • int: converte para um número inteiro;
• Modo contínuo:
  • setup: função chamada quando inicia a execução do programa;
  • draw: chamada imediatamente após a execução do setup, repete-se continuamente;
  • frameRate: define a taxa de atualização do programa em frames por segundo;
  • frameRate: valor aproximado de taxa de atualização máxima de frames na execução do programa em modo contínuo;
  • frameCount: no modo contínuo, é um número inteiro que contém o número de frames mostrados desde o início da execução do programa. Cada chamada ao método draw incrementa este valor;

Sintaxe Introduzida (link para a documentação em inglês)

Esta seção serve como resumo e referência aos comandos explorados neste capítulo. Pule para o tópico “Uso de Variáveis” se for sua primeira leitura!

• Variáveis do Processing:
  • width: armazena a largura da tela de visualização
  • height: armazena a altura da tela de visualização
  • focused: valor lógico que indica se o usuário está com o foco na janela do programa executando;
  • frameCount: no modo contínuo, é um número inteiro que contém o número de frames mostrados desde o início da execução do programa. Cada chamada ao método draw incrementa este valor;
  • frameRate: valor aproximado de taxa de atualização máxima de frames na execução do programa em modo contínuo;
  • online: valor lógico que representa se o programa está sendo executado dentro de uma página Web ou não;
  • screen.width: largura da tela do computador em pixels;
  • screen.height: altura da tela do computador em pixels;
  • mouseButton: indica qual dos botões do mouse foi pressionado (LEFT, CENTER ou RIGHT);
  • mousePressed: valor lógico que indica se qualquer botão do mouse foi pressionado;
  • mouseX: posição horizontal do mouse (eixo X) no frame atual;
  • mouseY: posição vertical do mouse (eixo Y);
  • pmouseX: posição horizontal do mouse (eixo X) no frame anterior;
  • pmouseY: posição vertical do mouse (eixo Y) no frame anterior;
  • key: contém o valor da mais recente tecla pressionada ou solta;
  • keyCode: usada para detectar o pressionamento de teclas especiais como UP, DOWN, RIGHT e LEFT;
  • keyPressed: valor lógico que indica se qualquer tecla foi pressionada.
• Exibição de variáveis no modo console:
  • print: envia texto para área de console do Processing;
  • println: envia texto para área de console do Processing e pula uma linha;
• Tipografia básica:
  • text: em um ponto qualquer, escreve um texto;
  • createFont: dinamicamente converte uma fonte disponível no computador para uma fonte do Processing;
  • textFont: seleciona a fonte atual;
  • PFont.list: lista as fontes disponíveis;
• Operadores aritméticos:
  • +: adição e concatenação;
  • -: subtração;
  • *: multiplicação;
  • /: divisão;
  • %: módulo (resto inteiro da divisão).
• Funções de conversão:
  • int: converte para um número inteiro.
• Modo contínuo:
  • setup: função chamada quando inicia a execução do programa;
  • draw: chamada imediatamente após a execução do setup, repete-se continuamente;
  • frameRate: define a taxa de atualização do programa em frames por segundo;
  • frameRate: valor aproximado de taxa de atualização máxima de frames na execução do programa em modo contínuo;
  • frameCount: no modo contínuo, é um número inteiro que contém o número de frames mostrados desde o início da execução do programa. Cada chamada ao método draw incrementa este valor;

Uso de Variáveis

Anteriormente, verificou-se que o Processing trabalha com os tipos de dados: inteiro, ponto flutuante, caractere, string e lógico. Tais tipos de dados em nossos programas até agora foram representados de maneira constante. Por exemplo, no programa abaixo, que desenha duas linhas que dividem a tela, os valores 300, 200, 100, 0 e 200 não variam durante a execução do programa.

size(300, 200);
line(100, 0, 100, 200);
line(200, 0, 200, 200);

Executar!

Tais valores são constantes. Assim, para criar um novo programa que divida novamente a tela em 3 partes será necessária a atualização de diversas constantes dentro do programa. Variáveis resolvem este problema e permitem que se organize o código e se crie dependência de parâmetros em relação a outros. Na memória do computador, variáveis são containers para armazenar informações, permitindo que um dado mude de valor e seja reutilizado diversas vezes em um programa. Na utilização do ambiente do Processing, existem variáveis que já existem durante a execução e variáveis que o programador pode definir.

Variáveis do Processing

O Processing já possui uma série de variáveis que são criadas no momento de execução do programa. Tais variáveis não precisam ser declaradas e são atualizadas de maneira indireta através da chamada à funções e à interação com o programa. A variável width reflete a largura da janela do programa e a variável height contém o valor da altura. A chamada à função size modifica o valor destas variáveis, mas, caso não seja chamada, tanto a largura quanto a altura ficarão com valor de 100 pixels.

A importância de usar estas funções está em deixar o seu programa facilmente adaptável caso haja uma modificação apenas no tamanho da janela. A seguir, por exemplo, cria-se um programa para dividir a tela em seis partes iguais.

size(300, 200);
line(100, 0, 100, 200);
line(200, 0, 200, 200);
line(0, 100, 300, 100);

Executar!

Caso o valor de size seja modificado, todas as demais constantes devem ser modificadas. Com o uso de width e height como parâmetros, valores diferentes de size mantem a mesma proporção.

size(450, 100);
line(width/3, 0, width/3, height);
line(width/3*2, 0, width/3*2, height);
line(0, height/2, width, height/2);

Executar!

Além do width e do height, algumas outras variáveis úteis que o Processing disponibiliza são:

• focused: valor lógico que indica se o usuário está com o foco na janela do programa executando;
• frameCount: no modo contínuo, é um número inteiro que contém o número de frames mostrados desde o início da execução do programa. Cada chamada ao método draw incrementa este valor;
• frameRate: valor aproximado de taxa de atualização máxima de frames na execução do programa em modo contínuo;
• online: valor lógico que representa se o programa está sendo executado dentro de uma página Web ou não;
• screen.width: largura da tela do computador em pixels;
• screen.height: altura da tela do computador em pixels;
• mouseButton: indica qual dos botões do mouse foi pressionado (LEFT, CENTER ou RIGHT);
• mousePressed: valor lógico que indica se qualquer botão do mouse foi pressionado;
• mouseX: posição horizontal do mouse (eixo X) no frame atual;
• mouseY: posição vertical do mouse (eixo Y);
• pmouseX: posição horizontal do mouse (eixo X) no frame anterior;
• pmouseY: posição vertical do mouse (eixo Y) no frame anterior;
• key: contém o valor da mais recente tecla pressionada ou solta;
• keyCode: usada para detectar o pressionamento de teclas especiais como UP, DOWN, RIGHT e LEFT;
• keyPressed: valor lógico que indica se qualquer tecla foi pressionada.

Neste capítulo, ilustraremos o uso das variáveis de mouse e de controle do modo contínuo.

Exibição de variáveis

Para exibir o valor de uma variável em um instante pode-se usar as funções print e println. Tais funções exibem informações na área de texto denominada console do Processing. O usuário nunca terá acesso a estas informações, pois o console do Processing é de exclusivo acesso do programador. Entretanto, muitas vezes, quando for necessária a depuração e correção de código com erro, as funções print e println permitirão ao programador a verificação dos valores de cada variável no momento desejado. No exemplo abaixo, a função println mostra os valores das expressões que usam as variáveis width e height.

size(200, 250);
line(width/3, 0, width/3, height);
line(width/3*2, 0, width/3*2, height);
line(0, height/2, width, height/2);
println("O valor de width/3 é: " + width/3);
println("O valor de height é: " + height);
println("O valor de width/3*2 é: " + width/3*2);
println("O valor de height/2 é: " + height/2);

Executar!

Se necessária a exibição de uma variável para o usuário pode-se usar a função text para mostrar o valor da variável na tela. A utilização da função text, porém, não pode ser feita sozinha. Por exemplo, o código abaixo, ao ser executado, indica o erro de falta de indicação de qual fonte deve ser utilizada: “Use textFont() before text()”.

size(300, 150);
text("O valor de width é:", 10, 50);
text(width, 10, 70);

Desta forma, antes de qualquer chamada à função text é necessário configurar qual é a fonte que será utilizada para a exibição do texto através da função textFont. A fonte deve ser carregada na memória utilizando as funções loadFont ou createFont. No próximo capítulo, trataremos dos detalhes para trabalhar tipografia no Processing. Por enquanto, o carregamento das fontes deve ser feito seguindo o exemplo, indicando o nome da fonte que deve ser gerada e o tamanho da fonte:

textFont(createFont("Fonte", TAMANHO DA LETRA));

Nesse modelo, o seguinte código corrige o anterior:

size(300, 150);
textFont(createFont("Arial", 20));
text("O valor de width é:", 10, 50);
text(width, 10, 70);

Executar!

A escolha da fonte Arial no fragmento acima se dá por esta fonte estar instalada no computador. Entretanto, computadores diferentes tem um conjunto diferentes de fontes disponíveis. Para verificar as fontes disponíveis em um computador selecione o menu Tools > Create Font e veja uma lista das fontes disponíveis.

Outra maneira de visualizar as fontes instaladas é a chamada ao comando a seguir. Neste caso, a lista de fontes é exibida no console do Processing:

println(PFont.list());

Observe que até agora apenas as variáveis width e height fazem sentido quando exibidas na tela. Por exemplo, o código seguinte exibe sempre o valor 0 mesmo quando o mouse é movido na execução do programa.

size(300, 150);
textFont(createFont("Arial", 20));
text("O valor de mouseX é:", 10, 50);
text(mouseX, 10, 70);
text("Ué? Sempre zero...", 10, 90);

Executar!

Este comportamento é normal e se deve ao fato que estamos trabalhando até agora com o modo básico do Processing, destinado apenas a desenhos básicos. Neste modo, o código do programa é executado apenas uma vez. Desta forma, a linha text(mouseX, 10, 70); é executada imediatamente na abertura do programa. Para que o valor da variável seja sempre atualizado na tela, será necessária a utilização do modo contínuo de execução do Processing.

Modo contínuo de execução

O modo contínuo de execução permite que o programador tenha controle do fluxo de execução do seu programa. Duas funções são utilizadas: a função setup, utilizada de maneira opcional, é executada uma vez só durante o carregamento da página. A função draw, por sua vez, é o coração do modo contínuo e indica o que deve se repetir constantemente.

O que se repete: a função draw

No modo contínuo de execução, todo o código que o programador deseja repetir indefinidamente deve ser colocado dentro de um bloco de texto determinado pela função draw. Para criar um bloco draw, use a seguinte sintaxe:

void draw() {
// Coloque aqui o código que deve rodar indefinidamente
}

O código dentro do draw entra em um processo chamado loop e só é interrompido quando o usuário fecha o programa ou clica no botão stop. No exemplo abaixo, a mensagem “Olá, Processing” é repetida até o fechamento do programa.

void draw() {
println("Olá, Processing");
}

É essencial entender que um programa só pode ter um bloco draw. No caso de repetição do método draw, o Processing mostra o erro: “Duplicate method draw int type …”.

void draw()
{
println("Olá, Processing");
}
void draw()
{
println("Olá, Processing");
}

Controle da taxa de repetição

Por padrão, a taxa de repetição de um bloco draw, também chamada de frameRate, é de 60 frames por segundo (fps). Neste caso, a cada segundo, a função draw é chamada no máximo 60 vezes. O código abaixo exibe o valor de frameRate no console do Processing.

void draw()
{
println(frameRate);
}

O valor do frameRate não é exato.  Muitas vezes, um programa pode ser executado mais lentamente quando a máquina for lenta devido a algum processamento poderoso sendo realizado.  Outra variável associada ao draw é a variável frameCount. Tal variável indica a quantidade de vezes que o método draw foi chamado desde o início do programa, ou seja, cada vez que o draw é executado o valor de frameCount aumenta em uma unidade.

void draw()
{
print("O valor de frameRate: ");
println(frameRate);
print("O valor de frameCount: ");
println(frameCount);
}

O valor do frameRate pode ser mudado com a função frameRate. A alteração do valor de frameRate para um valor baixo deixa a execução de um programa mais lenta. Quanto maior o valor de frameRate, mais rápida a taxa de atualização. No exemplo abaixo, o valor de frameRate é alterado para 3, ou seja, a função draw é chamada no máximo 3 vezes por segundo. Observe também que o texto desenhado se sobrepõe a cada chamada.

void draw()
{
frameRate(3);
textFont(createFont("Arial", 20));
text("frameCount é:", 10, 50);
text(frameCount, 10, 70);
print("O valor de frameCount é:");
println(frameCount);
}

Executar!

Para corrigir esta sobreposição, pode-se, por exemplo, chamar a função background. Neste caso, o fundo vai ser reconstruido a cada execução com a cor indicada como parâmetro.

void draw()
{
frameRate(3);
background(0);
textFont(createFont("Arial", 20));
text("frameCount é:", 10, 50);
text(frameCount, 10, 70);
print("O valor de frameCount é:");
println(frameCount);
}

Executar!

Com esta combinação de uso dos comandos frameRate, draw e frameCount, podem ser criados nossos primeiros exemplos de animação simples feita com o Processing.

No exemplo abaixo, a linha vai preenchendo a tela e é construída de cima para baixo. Como frameCount aumenta a cada draw, o valor de y do ponto final da linha também aumenta.

void draw()
{
// Controla a velocidade da animação
frameRate(30);
// Desenha uma linha horizontal.
// Como frameCount aumenta a cada pixel o valor de
// y do ponto final da linha também aumenta.
line(0, frameCount, width, frameCount);
}

Executar!

A colocação da função background, por sua vez, faz com que a linha não se acumule na execução e a interface seja reconstruída a cada frame.

void draw()
{
// Controla a velocidade da animação
frameRate(30);
// Limpa a tela
background(128);
// Desenha uma linha horizontal.
// Como frameCount aumenta a cada pixel o valor de
// y do ponto final da linha também aumenta.
line(0, frameCount, width, frameCount);
}

Executar!

Qualquer função pode ser parametrizada utilizando a variável frameCount. Efeitos diferentes são obtidos. Por exemplo, no código abaixo, o raio da elipse e a cor de preenchimento são alterados a cada frame.

void draw()
{
// Controla a velocidade da animação
frameRate(30);
// Altera o preenchimento conforme o frameCount
fill(frameCount);
// Aumenta a elipse conforme o frameCount
ellipse(width/2, height/2, frameCount/2, frameCount/2);
}

Executar!

Movimentos simples também podem ser feitos utilizando a variável frameCount. Abaixo, um retângulo se movimenta da esquerda para a direita e outro na direção contrária. A expressão width-frameCount permitiu que o retângulo se movesse no sentido contrário.

void draw()
{
// Controla a velocidade da animação
frameRate(30);
// Limpa a tela
background(255);
// O desenho do retângulo é feito a partir do ponto central
rectMode(CENTER);
// Retângulo da esquerda para a direita
fill(100);
rect(frameCount, height/2, 20, 30);
// Retângulo da direita para a esquerda
fill(200);
rect(width - frameCount, height/2, 20, 30);
}

Executar!

A variável frameCount representa um valor que só é incrementado. Dessa forma, a animação criada não se repete com a passagem do tempo. Se existir a necessidade de uma animação com um aspecto periódico, um operador aritmético que pode ser utilizado é o operador módulo (%). Este operador permite que se criem expressões aritméticas que tem como resultado o resto inteiro de uma divisão. Exemplos:

• 6 % 3 é igual a 0,  já que 6 dividido por 3 dá 2 e o resto é 0, então 6 % 3 é igual a 0;
• 14 % 4 é igual a 2,  já que 14 dividido por 4 é igual a 3 (4*3 = 12) e o resto é 2, então 14 % 4 é igual a 2;
• 35 % 3 é igual a 2, já que 35 dividido por 3 é igual a 11 ( 3 * 11 = 33) e o resto é 2, então 35 % 3 é igual a 2;
• 3 % 10 é igual a 3, já que 3 dividido por 10 é igual a 0 (3 * 0 = 0) e o resto é 3, então 3 % 10 é igual a 3.

Para entender melhor o significado do módulo, observe a tabela, com a variação de x sendo incrementado e a aplicação do módulo de 3 em cada valor.

Na tabela, o valor de x % 3 possui um comportamento periódico que vai se repetindo de 3 em 3 aplicações do operador. Caso fosse aplicado o módulo de 4 o valor se repetiria de 4 em 4 aplicações, e assim sucessivamente.

Desta maneira, o programa abaixo faz com que o retângulo se mova de cima para baixo na tela de maneira periódica, pois (frameCount % height) vai de 0 a height periodicamente.

void draw() {
// Varia a cor de fundo de 0 a 255
background(frameCount % 256);
// Move o retângulo de 0 a height
rect(width/2, frameCount % height, 20, 20);
}

Executar!

Usando as variáveis de mouse no modo contínuo

A posição do mouse também é refletida como uma variável do Processing. Tais variáveis só fazem sentido quando acessadas no modo contínuo do Processing. As seis variáveis de mouse são:

• mouseButton: indica qual dos botões do mouse foi pressionado (LEFT, CENTER ou RIGHT);
• mousePressed: valor lógico que indica se qualquer botão do mouse foi pressionado;
• mouseX: posição horizontal do mouse (eixo X) no frame atual;
• mouseY: posição vertical do mouse (eixo Y);
• pmouseX: posição horizontal do mouse (eixo X) no frame anterior;
• pmouseY: posição vertical do mouse (eixo Y) no frame anterior.

A variável mouseX contém a posição do mouse no eixo horizontal e a variável mouseY contém a posição do mouse no eixo vertical. Lembre-se: o valor de mouseY, diferentemente da matemática, sobe de cima para baixo em um programa. O exemplo abaixo demonstra essa situação.

void draw() {
// Seleciona a fonte Arial
background(0);
textFont(createFont("Arial", 15));
text("mouseX =", 10, 20);
text(mouseX, 10, 40);
text("mouseY =", 10, 60);
text(mouseY, 10, 80);
}

Executar!

O mouse pode determinar também a posição de desenho dos elementos. Nos exemplos a seguir, utiliza-se o mouse como determinante do ponto inicial das figuras.

void draw() {
background(0);
smooth();
// O retangulo segue o cursor.
rect(mouseX, mouseY, width/3, height/3);
}

Executar!

A alteração no valor do rectMode altera a posição de desenho da figura.

void draw() {
background(0);
smooth();
// O retângulo é desenhado a partir do centro
rectMode(CENTER);
// O retangulo segue o cursor.
rect(mouseX, mouseY, width/3, height/3);
}

Executar!

A aplicação de um deslocamento na posição do mouse desloca o desenho das figuras. Este tipo de efeito é útil, por exemplo, quando é necessário mover objetos na tela ou desenhar cursores personalizados. Para desligar a visualização do cursor, chame a função noCursor().

void draw() {
background(0);
smooth();
// Oculta o cursor
noCursor();
// O retângulo é desenhado a partir do centro
rectMode(CENTER);
// O retangulo segue o cursor.
rect(mouseX, mouseY, width/3, height/3);
ellipse(mouseX+20, mouseY, width/3, height/3);
triangle(mouseX-20, mouseY,
mouseX-20, mouseY+10,
mouseX + 30, mouseY + 5);
}

Executar!

O valor de mouseX ou mouseY também podem ser usados para controlar o tamanho de uma figura.

void draw() {
background(0);
rect(0, height/2, mouseX, 20);
}

Executar!

Ou mesmo, podem controlar a escala ou cor de um elemento.

void draw() {
background(0);
fill(mouseX * 2);
ellipse(width/2, height/2, mouseY * 2, mouseY * 2);
}

Executar!

É claro, o mouse também pode ser utilizado para geração de desenhos.

void draw()
{
point(mouseX, mouseY);
}

Executar!

void draw() {
stroke(frameCount % 256);
line(0, 0, mouseX, mouseY);
}

Executar!

Outras duas variáveis úteis em relação à interação com o mouse são as variáveis pmouseX e pmouseY. Tais variáveis permitem que se obtenha o valor de posicionamento do mouse no frame anterior. A combinação de mouseX, mouseY, pmouseX e pmouseY permite a criação de diferentes efeitos de desenho.

void draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}

Executar!

A variável mousePressed é um valor lógico que indica quando o mouse foi pressionado. Posteriormente, veremos que os valores lógicos podem ser usados para a tomada de decisão em nossos programas. No exemplo abaixo, o valor do stroke é determinado pelo pressionar do mouse. Desta forma, quando o valor de mousePressed for true (1), a multiplicação de 204 por 1 dá 204, ou seja, o pincel usado tem a mesma cor do fundo. Caso contrário, quando o botão do mouse estiver solto, 204 vezes 0 é zero e a cor do pincel fica preto.

Observe o uso da função int. Tal função retorna o valor zero caso o valor de mousePressed seja falso e um caso seja verdadeiro.

void draw() {
// 204 (light gray) é a cor padrão do fundo
// Assim, quando mousePressed for true, o pincel será
// pintado com a cor de fundo
// Caso contrário, o pincel terá a cor 0 (preto).
stroke(204 * int(mousePressed));
line(mouseX, mouseY, pmouseX, pmouseY);
}

Executar!

Outra maneira de usar a variável mousePressed é demonstrada abaixo. Neste caso, a linha só é desenhada caso o mouse seja pressionado.

void draw() {
line(mouseX * int(mousePressed),
mouseY * int(mousePressed),
pmouseX* int(mousePressed),
pmouseY * int(mousePressed));
}

Executar!

Configuração do modo contínuo: a função setup

Existem algumas funções que devem ser executadas apenas uma vez em um programa. Por exemplo, a configuração da largura e altura da tela através da função size deve ser executada apenas no início da execução. Outras configurações importantes que devem ser realizadas apenas uma vez são o carregamento de imagens, configuração do antialiasing (função smooth) e escolha da fonte a ser utilizada através da função textFont.

Dessa forma, tudo que se deseja executar apenas uma vez e antes da chamada da função draw deve ser colocado no bloco setup, definido assim:

void setup() {
// Coloque aqui o código que será executado apenas uma vez.
}

No exemplo seguinte, o tamanho da tela é configurado antes do draw. Observe também o uso do operador + para a concatenação do texto.

void setup()
{
size(300, 200);
textFont(createFont("Arial", 20));
stroke(128);
fill(140);
}
void draw()
{
background(255);
text("(" + mouseX + ", " + mouseY + ")", 10, 20);
ellipse(pmouseX, pmouseY, mouseX, mouseY);
}

Executar!

Resumo

Neste texto, tratamos do uso de variáveis dentro de um programa em Processing. Tais variáveis permitem que o comportamento dos programas seja alterado a partir de parâmetros modificados pela interação do usuário, pela passagem do tempo e, até mesmo, a partir de estímulos externos ao programa. Para que as variáveis tenham um uso interessante, foi necessária a definição do modo contínuo. Em tal modo o Processing funciona como uma ferramenta de animação permitindo que parte de nosso código seja repetido periodicamente.

O que vem pela frente?

Muitas vezes as variáveis não representarão, imediatamente, um valor necessário para os nossos programas. Dessa forma, será necessário modificar seu valor. Para esta modificação poderemos usar funções matemáticas ou operadores. O próximo capítulo, portanto, tratará das diferentes operações que podem ser feitas com uma variável e como utilizar estas operações para implementar efeitos em um programa.

Exercício Proposto P02

A) Desenhe um tabuleiro de jogo da velha. Ao redimensionar a tela via método size, este tabuleiro deve ser redimensionado também.

B) Desenhe uma linha vertical. Faça com que esta linha seja desenhada repetidamente e sua cor seja alterada em uma tonalidade. Observe o programa esperado. No final, seu programa deverá gerar a seguinte imagem:

C) Desenhe uma linha diagonal. Faça com que esta linha seja desenhada repetidamente e sua cor seja alterada em uma tonalidade de cada vez. Além disso, a repetição do padrão deve ser periódica (use o operador % e o operador * para implementar a periodicidade). Observe o programa esperado. No final, seu programa deverá gerar a seguinte imagem:

D) Desenhe uma seta qualquer. Faça com que esta seta se mova da diagonal superior esquerda para a diagonal inferior direita.

E) Desenhe uma seta qualquer. Faça com que esta seta se mova da diagonal superior esquerda para a diagonal inferior direita e ao chegar na diagonal inferior direita volte ao início da jornada.

F) Desenhe 4 quadrados. Cada um inicia em uma posição diferente da tela. Faça com que eles se encontrem no centro da tela.

G) No capítulo anterior, solicitou-se a criação de um robô utilizando as ferramentas de desenho do Processing. Utilizando as variáveis width e height faça com que seu robô, quando a resolução é alterada, mantenha as proporções originais.

H ) Coloque seu robô no modo contínuo através das funções setup e draw. Crie alguma funcionalidade interessante baseada no que você aprendeu na aula, preferencialmente usando a interação via mouse.

Entregue seus exercícios neste link.

Para saber mais

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

Faça o download da apresentação.

Objetivo

Este texto tem como objetivo apresentar a programação de computadores para aqueles que nunca tiveram contato prévio com nenhuma outra linguagem ou ambiente de programação. Inicia-se com uma apresentação dos conceitos básicos sobre linguagens de programação em geral. Posteriormente, alguns destes conceitos são explorados utilizando-se a linguagem e ambiente de programação Processing. Os exemplos que serão apresentados se baseiam na necessidade de conhecer os fundamentos programação gráfica. Desta forma, também será focado o conhecimento matemático essencial para o trabalho com as primitivas gráficas na tela do computador, como, por exemplo, sistemas de coordenadas, ângulos e formas de desenho básicas.

A leitura deste texto pode ser feita de maneira linear. Preferencialmente, siga também os links fornecidos em cada tópico quando surgir alguma dúvida. Tais links servem para que você se acostume a leitura da documentação do próprio Processing. No fim do documento, a seção “Para Saber Mais” faz referência a material complementar ou alternativo ao tópicos discorridos.

Sintaxe introduzida (link para documentação em português)

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

• Elementos de código:
  • // – Comentário de código;
  • /* */ – Comentário multilinha;
  • /** */ – Comentário de código;
  • ; – Finalizador de instrução;
  • , – Separador de parâmetros;
• Operadores:
  • >: Maior;
  • <: Menor;
  • ==: Igual;
• Valores lógicos:
  • true: verdadeiro;
  • false: falso;
• Configuração do fundo de tela:
  • size: Controla o tamanho da janela do programa, recebendo dois parâmetros: largura e altura da janela;
  • background: Modifica a cor de preenchimento do fundo da tela;
• Cores:
  • background: Modifica a cor de preenchimento do fundo da tela;
  • fill: Escolhe a cor usada para preenchimento das formas;
  • noFill: Desabilita o preenchimento das formas;
  • stroke: Escolhe a cor usada para o desenho de bordas e linhas;
  • noStroke: Desabilita o desenho das bordas e linhas.
• Desenho de formas bidimensionais:
  • point: Desenha um ponto em uma posição específica;
  • line: Desenha uma linha ligando dois pontos;
  • triangle: Gera um triângulo a partir de 3 pontos;
  • quad: Desenha um quadrilátero a partir de 4 pontos;
  • rect: Desenha um tipo especial de quadrilátero, o retângulo, a partir de um ponto, uma largura e uma altura.
  • ellipse: Desenha uma elipse, dado a sua coordenada, a largura e a altura. Para desenhar um círculo a largura e altura devem ser iguais;
  • arc: Cria um arco. Arcos são pedaços de elipse. A função arc recebe como parâmetro além da coordenada, da largura e da altura o início e o fim do arco em radianos.
  • bezier: Constrói uma curva de Bezier a partir dos pontos âncora e pontos de controle;
  • curve: Desenha uma linha curva;
  • beginShape, vertex e endShape: Constrói um polígono a partir de um conjunto de vértices.
• Alteração nos atributos de desenho:
  • stroke: Escolhe a cor usada para o desenho de bordas e linhas;
  • strokeWeight: Determina a espessura de desenho das linhas;
  • strokeCap: Escolhe o estilo de renderização das finalizações de linha;
  • strokeJoin: Define o estilo de junção dos segmentos de linha formando um polígono;
    
  • noStroke: Desabilita o desenho das bordas e linhas;
    
  • fill: Escolhe a cor usada para preenchimento das formas;
    
  • noFill: Desabilita o preenchimento das formas;
    
  • smooth: Desenha os elementos geométricos com bordas e cantos suavizados;
    
  • noSmooth: Desabilita a suavização de bordas e cantos;
  • rectMode: Configura o comportamento padrão de como um retângulo é desenhado.

Sintaxe introduzida (link para documentação em inglês)

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

• Elementos de código:
  • // – Comentário de código;
  • /* */ – Comentário multilinha;
  • /** */ – Comentário de código;
  • ; – Finalizador de instrução;
  • , – Separador de parâmetros;
• Operadores:
  • >: Maior;
  • <: Menor;
  • ==: Igual;
• Valores lógicos:
  • true: verdadeiro;
  • false: falso;
• Configuração do fundo de tela:
  • size: Controla o tamanho da janela do programa, recebendo dois parâmetros: largura e altura da janela;
  • background: Modifica a cor de preenchimento do fundo da tela;
• Cores:
  • background: Modifica a cor de preenchimento do fundo da tela;
  • fill: Escolhe a cor usada para preenchimento das formas;
  • noFill: Desabilita o preenchimento das formas;
  • stroke: Escolhe a cor usada para o desenho de bordas e linhas;
  • noStroke: Desabilita o desenho das bordas e linhas.
• Desenho de formas bidimensionais:
  • point: Desenha um ponto em uma posição específica;
  • line: Desenha uma linha ligando dois pontos;
  • triangle: Gera um triângulo a partir de 3 pontos;
  • quad: Desenha um quadrilátero a partir de 4 pontos;
  • rect: Desenha um tipo especial de quadrilátero, o retângulo, a partir de um ponto, uma largura e uma altura.
  • ellipse: Desenha uma elipse, dado a sua coordenada, a largura e a altura. Para desenhar um círculo a largura e altura devem ser iguais;
  • arc: Cria um arco. Arcos são pedaços de elipse. A função arc recebe como parâmetro além da coordenada, da largura e da altura o início e o fim do arco em radianos.
  • bezier: Constrói uma curva de Bezier a partir dos pontos âncora e pontos de controle;
  • curve: Desenha uma linha curva;
  • beginShape, vertex e endShape: Constrói um polígono a partir de um conjunto de vértices.
• Alteração nos atributos de desenho:
  • stroke: Escolhe a cor usada para o desenho de bordas e linhas;
  • strokeWeight: Determina a espessura de desenho das linhas;
  • strokeCap: Escolhe o estilo de renderização das finalizações de linha;
  • strokeJoin: Define o estilo de junção dos segmentos de linha formando um polígono;
    
  • noStroke: Desabilita o desenho das bordas e linhas;
    
  • fill: Escolhe a cor usada para preenchimento das formas;
    
  • noFill: Desabilita o preenchimento das formas;
    
  • smooth: Desenha os elementos geométricos com bordas e cantos suavizados;
    
  • noSmooth: Desabilita a suavização de bordas e cantos;
  • rectMode: Configura o comportamento padrão de como um retângulo é desenhado.

O Processing

Tal ambiente, derivado da linguagem de programação Java, é uma linguagem de programação e ambiente para pessoas que desejam programar imagens, animações e interações. O Processing pode ser usado para o ensino dos fundamentos da programação de computadores usando um contexto visual. Seu público alvo é formado, principalmente, por artistas, estudantes e pesquisadores. A facilidade de instalação, uso e aprendizagem aliada à produtividade na geração de programas que utilizem interações complexas, faz com que o Processing seja ideal para a prototipação rápida de ideias e como caderno de esboços em software.

Este aspecto didático do Processing não limita a sua aplicação em programas reais que exijam alto desempenho em processamento gráfico e ou que exijam portabilidade para diversas plataformas de software. Por ser baseado na linguagem Java, os programas em Processing geram applets e programas que apresentam excelente performance, principalmente se comparado com outras alternativas  como Flash e JavaScript. Além disso, tais programas tem suporte para as plataformas Windows, Linux e Mac OS inclusive para funcionalidades como programação gráfica em 3d, OpenGL, processamento de som e vídeo, geração de arquivos PDF, exibição de imagens SVG, e, qualquer biblioteca existente para a linguagem Java.

O Processing será nossa ferramenta de programação de computadores neste curso, veja sua interface ao lado. Sua instalação é bastante leve e simples e deve ser feita a partir do próprio portal da ferramenta. Para um passo a passo de instalação da ferramenta e como executar o seu primeiro código básico:

1. Baixe o arquivo disponível no portal do Processing. Escolha a versão conforme o seu sistema operacional:
   1. Windows;
   2. Linux;
   3. Mac OSX.
2. Descomprima o arquivo na pasta de sua preferência;
3. Nesta pasta, execute o programa Processing.exe;
4. Dentro da ferramenta, digite o código a seguir e clique no botão Run ou use a combinação de teclas CTRL + R;
5. Parabéns! Este é o seu primeiro programa em Processing! Veja o resultado esperado abaixo.

size(300, 200);
line(100, 100, 200, 100);

Após a instalação do Processing, vamos entender o que significa a criação de um programa de computador. Destaca-se, porém, que o foco deste capítulo é enxergar o Processing como um ambiente de programação voltado para a criação de imagens. Ou seja, trabalharemos com o Processing como se ele fosse um programa como o Paint ou PhotoShop. Mas, programar não significa fazer desenhos! Nos capítulos seguintes, veremos que o Processing não se limita ao desenho, sendo uma ferramenta completa de desenvolvimento que apresenta uma série de poderosas estruturas de programação.

O que é programação de computadores?

Programar significa construir algoritmos. Um algoritmo é uma sequência de passos destinada a resolver um problema e é formado, principalmente, por estruturas de controle as quais serão discutidas posteriormente com mais detalhes.
Tais estruturas de controle fazem parte do nosso dia a dia e, resumidamente são:

• Estrutura sequencial: indica a ordem de execução de um algoritmo. Cada passo deve ser realizado necessariamente após o outro;
• Estrutura de seleção: permite a escolha de um conjunto de passos em detrimento do outro conforme uma certa condição seja satisfeita;
• Estrutura de repetição: dá o poder de controlar a quantidade de vezes que um conjunto de passos pode ser executado em um algoritmo.

Estas estruturas permitem que sejam alteradas as informações no processador do computador. Neste capítulo, será tratado como a estrutura sequencial trabalha com as informações do tipo constante.

A informação

Assim, além destas estruturas, outro ponto importante para a compreensão do que é um algoritmo é o conceito de informação. O material que o algoritmo manipula, ou seja, cada dado, fato ou valor que pode ser trabalhado na memória do computador é uma informação. Existem diversos formatos que uma informação pode ser armazenada e estes formatos são os chamados tipos primitivos de informação. Apesar de cada linguagem de programação ter um conjunto próprio de tipos primitivos, a maior parte das linguagens da família da linguagem Java, como o Processing, trabalha com os seguintes cinco tipos básicos:

• Inteiro: número pertencente ao conjunto dos números inteiros, pode ser negativo se acompanhado do sinal “-”. Exemplos: 130, -10, 2700, idade em anos, número de páginas de um livro, posição do mouse no eixo x, posição do mouse no eixo y;
• Ponto flutuante: número pertencente ao conjunto dos números de ponto flutuante. É formado por parte inteira e parte decimal, as quais são separadas através do “.” Exemplos: 1.73, 12.23, PI, salário.
• Caractere: texto formado por um caractere. Delimitado através do sinal de apóstrofo (”‘”). Exemplos: ‘a’, ‘b’, ‘Z’, ‘1′, ‘2′, tecla pressionada.
• String: texto formado por um conjunto de um ou mais caracteres. Deve ser delimitado por um sinal de aspas (” ” “). Exemplos: “Processing”, “Bruno”,  “A”, seu nome.
• Lógico: o tipo lógico pode assumir dois valores: verdadeiro ou falso. O valor verdadeiro é representado pela palavra true e o valor falso por false. No Processing, o true também pode ser associado ao valor 1 e o false ao valor 0. Exemplos: true, false, interruptor de luz, estado do botão do mouse (pressionado ou não).

Uma informação pode ser constante ou variável. Constantes não variam com o tempo durante a execução de um programa. Variáveis podem ser alteradas em algum instante da execução.

• Exemplos de constantes: 123, PI, “nome”, true;
• Exemplos de variáveis: nome, interruptor, estado do botão do mouse.

Exercício de Fixação 01 – Classifique como variável ou constante

Classifique os itens abaixo como variáveis ou constantes.

a) 12

b) endereço

c) “endereço”

d) 2.3

e) true

f) melhor time do Paraná

g) 1 + 1

Exercício de Fixação 02 – Determine o tipo de constante

Classifique os itens abaixo como: Inteiro, Ponto Flutuante, Caractere, String e Lógico.

a) true

b) 23

c) 2.56

d) ‘a’

e) false

f) “true”

g) “false”

O uso das informações na memória exige que o programador entenda como representar a informação para o programa. No Processing, a informação é representada no formato texto. A manipulação das informações acontece através da execução de instruções que utilizam as estruturas sequencial, de seleção e de repetição. A seguir, vamos construir nosso primeiro algoritmo, o qual é formado apenas sequenciação de instruções.

A estrutura sequencial e um exemplo de algoritmo

Vamos imaginar o seguinte problema: criar um esboço da bandeira do Brasil colado em uma cartolina branca.  Além da cartolina, você tem um conjunto de pedaços de papel de diferentes cores: verde, amarelo e azul. Também tem tesoura, cola e uma régua. Em Português coloquial, uma resolução possível deste problema simples é bastante óbvia:

1. Recortar um retângulo verde;
2. Colar o retângulo verde na cartolina;
3. Recortar um losango amarelo;
4. Colar o losango amarelo;
5. Recortar um círculo de cor azul;
6. Cole, por fim, o círculo azul.

Seguimos uma sequencia de ações linear na qual cada ação é executada uma linha após a outra, de cima para baixo. Executando em uma ordem diferente, o resultado pode não ser o esperado. Colando primeiro o losango amarelo na cartolina, por exemplo, invalidaria a construção da bandeira.

Desta forma, em um algoritmo, cada linha corresponde a uma instrução e deve ser lida e interpretada de maneira independente da anterior como se estivéssemos trabalhando com uma receita culinária. Esta sequencia lógica de execução do algoritmo passo a passo é a estrutura sequencial ou sequenciação. Ou seja, a ordem do código escrito importa na ordem de execução.

Embora pareça completa e simples a lista de instruções acima, há algumas questões em aberto. Por exemplo, o retângulo verde é de que tamanho? Ele é maior ou menor que o losango amarelo? O ser humano responde estas questões de maneira intuituiva. Na programação de computadores não há espaço para ambiguidade. Se criássemos um programa para desenhar a bandeira do Brasil, deveríamos definir exatamente quais são as dimensões e posição de qualquer um dos componentes do objeto sendo desenhado. Além disso, não podemos usar a língua portuguesa para especificar comandos para a linguagem. Faz-se necessária a utilização de instruções da linguagem de programação. Para que possamos escrever o algoritmo anterior no Processing será necessário compreender que escrever um programa de computador é muito diferente de escrever um email ou um texto qualquer e a sintaxe deve ser conhecida e respeitada.

Por exemplo, no Processing, o desenho de um retângulo se dá através da instrução rect. Uma instrução guarda certa semelhança com uma frase na língua portuguesa. Assim, a frase: “Desenhar um retângulo de 80 por 50 na posição 120, 130.”, no Processing deve ser escrito com o código abaixo.

rect(120, 130, 80, 50);

Constata-se que este código apresenta 4 informações numéricas constantes: 120, 130, 80 e 50. Estas informações numéricas são processadas pela função rect, responsável por construir o retângulo. Isto posto, da mesma forma como uma frase da língua humana, há uma série de componentes no código-fonte acima. Pode-se, até mesmo, fazer a analogia com os sujeitos, predicados e objetos de uma oração. Na próxima seção analisaremos a anatomia de uma instrução e de um código simples.

Anatomia de um código em Processing

Aprender uma linguagem de programação é como aprender um novo idioma. Antes da fluência na linguagem, devemos, portanto, conhecer sua sintaxe. Diferente de um idioma, no qual o ser humano interpreta e perdoa os erros do iniciante, em uma linguagem de programação o erro de sintaxe implica em um programa que não funciona. Um programa básico no Processing é formado pelos seguintes componentes: comentários, funções, instruções, expressões e espaços em branco.

Comentários

Comentários são fragmentos do código que o computador ignora. Sua importância está em escrever recados no programa sobre o que ele faz e comentários em geral sobre o funcionamento de um conjunto de instruções. Bons programadores comentam seu código de maneira que não apenas eles mas também outras pessoas possam entender o que acontece. Outra utilidade do comentário é ocultar pedaços do código que estão incompletos ou com algum problema e que devem ser consertados em outro momento.

No exemplo abaixo, todas as linhas marcadas com // são comentários de código.

// A função size configura a largura e a altura da tela do programa.
// No exemplo abaixo, a tela possui 300 pixels de altura e 200 de largura.
size(300, 200);
// A função background altera a cor de fundo da tela.
// No exemplo abaixo, a tela é pintada na cor branca.
background(255);
// A linha abaixo, embora seja um comando válido, não será executada pois o sinal de comentário está colocado antes do comando
// rect(120, 130, 80, 50);

Outra maneira de criar um comentário é utilizando o conjunto /* e */. Este é o chamado comentário multilinha. Neste caso, o comentário inicia-se com o sinal /* e pode ser estendido a diversas linhas. O comentário é fechado com o sinal */.

/* O programa abaixo é um exemplo simples de como podemos desenhar uma linha no Processing.
Atenção: este programa se preocupa em colorir a linha com a cor vermelha usando a função stroke.
*/
size(300, 200);
background(255);
stroke(255, 0, 0);
line(0, 0, 100, 100);
/* as linhas seguintes estão comentadas, ou seja, não são executadas
stroke(255, 0, 0);
line(100, 100, 200, 200);
*/

O comentário de código (doc comment), por sua vez, é útil para a geração de uma documentação explicativa sobre o programa como um todo. Esta documentação é inserida no documento HTML gerado quando é feita a exportação do código em Processing para o formato applet, o qual permite sua publicação na Web. Após a exportação, todo o texto colocado entre os sinais /** e */ é colocado no arquivo “index.html”. Para exportar um programa em Processing, use o menu File > Export ou tecle CTRL + E.

/**
Exemplo simples de como podemos desenhar uma linha vermelha no Processing.
Atenção: este programa se preocupa em colorir a linha com a cor vermelha usando a função stroke.
*/
size(300, 200);
background(255);
stroke(255, 0, 0);
line(0, 0, 100, 100);
/* As linhas seguintes estão comentadas, ou seja, não são executadas
Estas linhas não serão copiadas no arquivo index.html.
stroke(255, 0, 0);
line(100, 100, 200, 200);
*/

Observa-se que no Processing o comentário é exibido com uma cor diferente em relação ao resto do código.

Funções

Funções (também chamados de módulos ou procedimentos) permitem a transmissão de ordens do programador para o computador. Servem como comandos sendo passados para desenhar, alterar cores, realizar cálculos, executar ações quaisquer, etc. O nome de uma função é geralmente em letra minúscula. Quando uma função é chamada, seu nome deve ser seguido por parênteses. Quando o nome da função é composto por duas palavras, a segunda palavra é conectada na primeira e sua primeira letra é colocada em maiúsculo. Esta não é uma regra obrigatória, mas é uma boa prática para ser seguida quando você cria suas próprias funções. Portanto, além dos procedimentos disponíveis por padrão no Processing é possível definir novas funções para compartimentalizar e organizar o seu código.

No código abaixo, temos exemplos de chamadas às funções line,  fill, noFill e rect.

// A função size (300, 200) configura a tela para 300 pixels de largura por 200 pixels de altura
size(300, 200);
// A função fill habilita o preenchimento das formas sendo desenhadas a seguir.
// A cor escolhida é uma tonalidade intermediária de cinza
fill(128);
// A função rect desenha uma retângulo de 50 pixels por 30 pixels a partir do ponto (0, 0 )
rect(0, 0, 50, 30);
// A função noFill desabilita o preenchimento das formas.
noFill();
// A função rect desenha um retângulo de 50 pixels por 30 pixels a partir do ponto (10, 10)
// Observe que o retângulo não está preenchido devido à chamada a noFill feita anteriormente.
rect(10, 10, 50, 30);

Funções podem receber parâmetros para alterar ou configurar seu comportamente. Algumas funções, como a noFill, não recebem parâmetros. Outras, como a fill, recebem um parâmetro apenas. As demais funções como a rect podem utilizar mais de um parâmetro e estes parâmetros são separados através de vírgulas.

Exercício de Fixação 03 – Determine o número de parâmetros

Determine o número de parâmetros de cada uma das chamadas à funções abaixo.

a) noStroke();

b) fill(128);

c) rect(12, 12, 12, 12);

d) quad(10, 20, 20, 30, 30, 50, 60, 10);

Importante acrescentar que as funções em Processing são sensíveis ao contexto. Deste modo, as chamadas às funções devem se preocupar com a letras maiúsculas e minúsculas. Por exemplo, a função rect não pode ser chamada escrevendo Rect e nem RECT. Assim, o código abaixo está errado e gera o erro “The function Size(int, int) does not exist.”

Size(100, 100);

Expressões

Através da combinação de operadores consegue-se a geração de expressões. Existem expressões de diversos tipos: expressões aritméticas, expressões lógicas e expressões relacionais.  Expressões sempre tem como resultado um valor. Exemplos de expressões:

• 5+6 corresponde ao valor 11;
• 120.23 – 0.23 corresponde ao valor 120;
• “Bruno ” + ” Campagnolo” corresponde ao valor “Bruno Campagnolo”;
• ((3*5)+4) corresponde ao valor 19;
• 5 > 3 corresponde ao valor true, pois 5 é maior que 3;
• 52 == 52 corresponde ao valor true, pois 52 é igual a 52;
• 51 < 41 corresponde ao valor false, pois 51 não é menor que 41.

As expressões podem ser usadas diretamente como parâmetro de uma função:

// A função rect chamada abaixo desenha um retângulo de 50 pixels por 30 pixels a partir do ponto (20, 30).
// Observe que 10+10 corresponde a 20 e 3 * 10 dá o resultado da multiplicação de 3 por 10.
rect(10+10, 3*10, 50, 30);

Exercício de Fixação 04 – Determine o valor da expressão

Determine qual é o valor de cada uma das expressões abaixo.

a) 1+1

b) 2 * 4

c) 20 * 4 + 2

d) 20 * (4 + 2)

e) 5 > 40

f) 45 < 50

g) (2*3) > (5*1)

h) (10-10)==(20-20)

Instruções

Assim, um conjunto de expressões e funções define uma instrução, a qual deve ser sempre finalizada pelo sinal “;”. Muito cuidado deve ser dedicado à utilização deste sinal, pois quando você esquece de colocar um ponto e vírgula em um programa, o Processing reclama com o erro “Syntax error, maybe a missing semicolon?”, como mostra a figura.

Existem diferentes tipos de instrução. Por enquanto, conhecemos apenas as instruções úteis para a chamada de funções.

Espaços em branco

O programador não precisa se preocupar com a quantidade de espaços em branco que usa entre os elementos de seu programa. Por espaços em branco leia-se: quebras de linha, tabulações e espaços normais. Deve-se preferir, porém, a representação de cada instrução em apenas uma linha e reservar os espaços  para situações onde algum esclarecimento é necessário.

Assim, códigos no estilo abaixo são válidos mas devem ser evitados:

size

(300     ,

200          );

background(                   200)

;

A figura abaixo resume os elementos apresentados.

Definidos estes elementos, ferramentas iniciais para que se possa compreender as instruções do Processing, é possível agora utilizar essas instruções para a criação de janelas e desenho de diversas formas geométricas na tela do computador.

Sistema de Coordenadas Cartesianas

Quando se faz um desenho na tela do computador é necessária, primeiramente, a especificação do tamanho da área útil de desenho. Esta área é formada por pequenos pontos de luz chamados pixels.

Cada pixel é identificado por uma cor e por uma posição. Em relação a posição de um ponto, utiliza-se um sistema de coordenadas cartesianas semelhante ao da matemática. Ou seja,  uma primitiva é caracterizada por um valor de posicionamento no eixo x e outro no eixo y. No Processing, a origem dos eixos está na lateral superior esquerda da tela. Assim, o eixo x tem seus valores crescendo da esquerda para a direita e o eixo y inicia-se em cima e cresce até a parte de baixo da tela. A notação de um ponto se dá através do valor de x, seguido pelo valor de y e separados por uma vírgula.

Exemplos :

• (0, 0): Origem padrão do eixo, ponto superior esquerdo;
• (99,0): Pixel na superior direita;
• (0, 99): Pixel na inferior esquerda;
• (99, 99): Pixel na inferior direita.

É possível alterar a origem do eixo utilizando-se a função translate. Tal função especifica uma quantidade de deslocamento que deve ser aplicado nos objetos sendo mostrados na tela. Mais detalhes sobre essa função serão tratados em capítulo posterior.

Fundo da Tela (background)

Assim, quando se fala em uma tela com resolução 800×600, isso significa que a tela contém uma matriz de 800 pixels de largura por 600 pixels de altura. Isso significa 480 mil pontos de luz na tela. Embora este valor possa parecer elevado, o olho humano é bastante exigente e outro fator que influencia na qualidade de uma imagem é o número de pontos que estão contidos em uma unidade de área. Uma unidade comumente utilizada é o pontos por polegada quadrada (dots per inch – dpi). Bons monitores tem resoluções de 100 dpi. Este valor nem chega perto da resolução de algumas impressoras modernas.

Os programas em Processing, portanto, além de configurarem o tamanho do conjunto de pixels que será utilizado como área de desenho devem também se preocupar com a melhor maneira de preencher estes pixels para melhorar a visualização do ser humano em relação à baixa resolução da tela do computador. Um zoom na tela do computador mostra esse problema em detalhe.

A função size controla o tamanho da janela do programa, recebendo dois parâmetros: largura e altura da janela.

size(100, 100);

size(200, 200);

size(320, 240);

Cores

A cor de fundo desta janela por padrão é cinza claro. Para alterar esse valor, a função background é usada para modificar a cor de desenho do fundo da tela. Esta função pode receber um ou mais parâmetros. Não é escopo deste capítulo os diferentes sistemas de representação de cores na tela do computador configurados por estes parâmetros. Futuramente, trataremos destes sistemas, mas, por enquanto, através do menu Tools > Color Selector é possível obter o código de cor referente a uma cor. Se, simplesmente um número entre 0 e 255 for fornecido, a cor de fundo será configurada entre o preto (valor 0) e o branco, com tons intermediários de cinza entre estes dois valores. O valor cinza claro, por exemplo, corresponde ao valor 204.

Duas outras funções para lidar com as cores são a função stroke e a função fill, respectivamente, permitindo alteração da cor das linhas e bordas e a cor de preenchimento das formas básicas. Outras duas funções auxiliares a estas são a função noStroke e a função noFill, as quais desabilitam as linhas e bordas e o preenchimento das formas. Na próxima seção trataremos destas formas, mostrando o que acontece quando se combina a chamada destas quatro funções.

Formas Primitivas

O Processing disponibiliza ao programador uma série de funções para desenho das formas bidimensionais primitivas. As principais:

• point: Desenha um ponto em uma posição específica;
• line: Desenha uma linha ligando dois pontos;
• triangle: Gera um triângulo a partir de 3 pontos;
• quad: Desenha um quadrilátero a partir de 4 pontos;
• rect: Desenha um tipo especial de quadrilátero, o retângulo, a partir de um ponto, uma largura e uma altura.
• ellipse: Desenha uma elipse, dado a sua coordenada, a largura e a altura. Para desenhar um círculo a largura e altura devem ser iguais;
• arc: Cria um arco. Arcos são pedaços de elipse. A função arc recebe como parâmetro além da coordenada, da largura e da altura o início e o fim do arco em radianos.
• bezier: Constrói uma curva de Bezier a partir dos pontos âncora e pontos de controle;
• curve: Desenha uma linha curva;
• beginShape, vertex e endShape: Constrói um polígono a partir de um conjunto de vértices.

No capítulo atual, trataremos apenas de algumas funções que trabalham com linhas retas. A figura abaixo resume os parâmetros necessários para construir cada uma das formas.

Retirada de Reas/Fry

A construção destas formas também podem ser influenciadas pelas funções de alteração nos atributos de desenho:

• stroke: Escolhe a cor usada para o desenho de bordas e linhas;
• strokeWeight: Determina a largura de desenho das linhas;
• strokeCap: Escolhe o estilo de renderização das finalizações de linha;
• strokeJoin: Define o estilo de junção dos segmentos de linha formando um polígono;
  
• noStroke: Desabilita o desenho das bordas e linhas;
  
• fill: Escolhe a cor usada para preenchimento das formas;
  
• noFill: Desabilita o preenchimento das formas;
  
• smooth: Desenha os elementos geométricos com bordas e cantos suavizados;
  
• noSmooth: Desabilita a suavização de bordas e cantos;
• rectMode: Configura o comportamento padrão de como um retângulo é desenhado.
  

Ponto

Elemento visual mais simples. Caracterizado, no mínimo, por um pixel. A função point recebe como parâmetro a posição em x e a posição em y do ponto sendo construído. Exemplo de chamada:

point(x, y);

// Pontos com o mesmo x e y formam uma linha diagonal
//  a partir da superior esquerda.
point(5, 5);
point(10, 10);
point(15, 15);
point(20, 20);
point(25, 25);
point(30, 30);

// Pontos com o mesmo valor de y formam uma linha horizontal
point(10, 50);
point(20, 50);
point(30, 50);
point(40, 50);
point(50, 50);
point(60, 50);
point(70, 50);
point(80, 50);
point(90, 50);

// Linhas são geradas a partir do agrupamento de pontos
//  Linha diagonal
point(30, 30);
point(31, 31);
point(32, 32);
point(33, 33);
point(34, 34);
point(35, 35);
//  Linha horizontal
point(40, 40);
point(41, 40);
point(42, 40);
point(43, 40);
point(44, 40);
// Linha vertical
point(60, 60);
point(60, 61);
point(60, 62);
point(60, 63);
point(60, 64);

A cor do ponto pode ser alterada através da função stroke. Tal função recebe como parâmetro a cor a ser utilizada.

// Linhas são geradas a partir do agrupamento de pontos
//  Linha diagonal com a cor branca
stroke(255);
point(30, 30);
point(31, 31);
point(32, 32);
point(33, 33);
point(34, 34);
point(35, 35);
//  Linha horizontal com a cor preta
stroke(0);
point(40, 40);
point(41, 40);
point(42, 40);
point(43, 40);
point(44, 40);
// Linha vertical com a cor cinza
stroke(128);
point(60, 60);
point(60, 61);
point(60, 62);
point(60, 63);
point(60, 64);

A largura do ponto é um atributo configurável com a função strokeWeight. O ponto, a partir de um pixel, pode ser colocado com qualquer tamanho na tela.

stroke(0);
point(10, 30);
strokeWeight(2);
stroke(50);
point(15, 30);
strokeWeight(10);
stroke(100);
point(25, 30);
strokeWeight(30);
stroke(150);
point(60, 30);
stroke(160);
strokeWeight(40);
point(50, 75);

Quando o ponto é desenhado com uma largura maior que 1 pixel, a suavização do desenho pode ser desejável. Este processo, chamado antialiasing elimina o serrilhamento no desenho de um ponto de maior largura. O antialiasing é ligado/desligado através das funções smooth e noSmooth.

stroke(128);
strokeWeight(50);
smooth();
point(25, 25);
noSmooth();
point(75, 75);

Linha

A partir de dois pontos (origem e destino), uma linha é gerada através do desenho de um conjunto de pontos que unem a origem e o destino. A função line recebe como parâmetros, nesta ordem:

• x1: coordenada em x da origem;
• y1: coordenada em y da origem;
• x2: coordenada em x do destino;
• y2: coordenada em y do destino.

Exemplo de chamada:

line(x1, y1, x2, y2);

// Linhas horizontais (y de igual valor na origem e no destino)
line(10, 20, 40, 20);
line(15, 30, 35, 30);
line(20, 40, 30, 40);
// Quando a origem e o destino são os mesmos, temos um ponto
line(25, 50, 25, 50);

// Linhas verticais são geradas quando o x é igual na origem e no destino
line(20, 10, 20, 40);
line(30, 15, 30, 35);
line(40, 20, 40, 30);

// Linhas que compartilham o mesmo ponto estão conectadas
line(30, 40, 30, 60);
line(30, 60, 40, 60);
line(40, 60, 40, 30);

A cor da linha é alterada através da função stroke. E a função noStroke oculta qualquer linha desenhada.

// Linhas que compartilham o mesmo ponto estão conectadas
stroke(0);
line(30, 10, 30, 80);
stroke(255);
line(30, 80, 90, 80);
// A linha a seguir não é mostrada
noStroke();
line(90, 80, 40, 80);

Por padrão, a largura de uma linha é de 1 pixel. A função strokeWeight também pode ser utilizada no desenho de linhas para escolher seu peso.

// Linhas que compartilham o mesmo ponto estão conectadas
// Linha fina
stroke(0);
strokeWeight(3);
line(30, 10, 30, 80);

stroke(255);
strokeWeight(10);
line(30, 80, 90, 80);

// Linha grossa
stroke(128);
strokeWeight(20);
line(90, 80, 90, 40);

A finalização de uma linha pode ser de diferentes estilos. Estes estilos são escolhidos através da função strokeCap. Por padrão, o estilo de renderização é o estilo ROUND, ou seja, uma linha termina com as bordas arredondadas.

strokeWeight(15);
line(10, 20, 90, 20);
strokeCap(SQUARE);
line(10, 40, 90, 40);
strokeCap(PROJECT);
line(10, 60, 90, 60);
strokeCap(ROUND);
line(10, 80, 90, 80);

E, para eliminar o serrilhamento o par smooth / noSmooth continua valendo.

strokeWeight(25);
smooth();
line(20, 25, 80, 25);
noSmooth();
line(20, 75, 80, 75);

Triângulo

A função triangle desenha um triângulo a partir de 3 pontos. Um triângulo pode ser construído a partir de 6 parâmetros que representam os pontos a serem conectados:

• x1: coordenada em x do primeiro ponto;
• y1: coordenada em y do primeiro ponto;
• x2: coordenada em x do segundo ponto;
• y2: coordenada em y do segundo ponto;
• x3: coordenada em x do terceiro ponto;
• y3: coordenada em y do terceiro ponto.

Exemplo de chamada:

triangle(x1, y1, x2, y2, x3, y3);

triangle(10, 10, 10, 70, 80, 70);
triangle(10, 70, 10, 80, 50, 80);

O triângulo é um polígono fechado. A função fill permite que se escolha a cor usada para o preenchimento do triângulo. A cor padrão é o branco (valor 255). A função noFill desabilita o preenchimento.

fill(0);
triangle(10, 10, 20, 10, 15, 5);
fill(50);
triangle(20, 20, 30, 20, 25, 15);
fill(100);
triangle(30, 30, 40, 30, 35, 25);
fill(150);
triangle(40, 40, 50, 40, 45, 35);
noFill();
triangle(50, 50, 60, 50, 55, 45);

fill(128);
triangle(0, 50, 50, 0, 100, 50);
noFill();
triangle(0, 50, 50, 10, 100, 50);
triangle(0, 50, 50, 20, 100, 50);
triangle(0, 50, 50, 30, 100, 50);
triangle(0, 50, 50, 40, 100, 50);

Por ser formado por uma junção de linhas, o triângulo permite que se escolha o estilo da conexão entre os segmentos através da função strokeJoin. Há 3 estilos disponíveis: MITER (o padrão), BEVEL e ROUND.

size(300, 100);
noFill();
strokeWeight(15);
strokeJoin(BEVEL);
triangle(20, 80, 50, 20, 80, 80);
strokeJoin(MITER);
triangle(120, 80, 150, 20, 180, 80);
strokeJoin(ROUND);
triangle(220, 80, 250, 20, 280, 80);

As funções stroke, noStroke, strokeWeight, smooth e noSmooth, já explicadas nas seções anteriores também valem para o triângulo.

size(300, 200);
background(0);
noFill();
smooth();
stroke(255);
strokeWeight(15);

strokeJoin(BEVEL);
triangle(20, 80, 50, 20, 80, 80);
strokeJoin(MITER);
triangle(120, 80, 150, 20, 180, 80);
strokeJoin(ROUND);
triangle(220, 80, 250, 20, 280, 80);

// Os triângulos seguintes possuem serrilhamento
noSmooth();
strokeJoin(BEVEL);
triangle(20, 180, 50, 120, 80, 180);
strokeJoin(MITER);
triangle(120, 180, 150, 120, 180, 180);
strokeJoin(ROUND);
triangle(220, 180, 250, 120, 280, 180);

Quadrilátero

Semelhante ao triângulo, o quadrilátero é determinado a partir de quatro pontos. A função quad recebe oito parâmetros, dois para cada ponto:

• x1: coordenada em x do primeiro ponto;
• y1: coordenada em y do primeiro ponto;
• x2: coordenada em x do segundo ponto;
• y2: coordenada em y do segundo ponto;
• x3: coordenada em x do terceiro ponto;
• y3: coordenada em y do terceiro ponto;
• x4: coordenada em x do quarto ponto;
• y4: coordenada em y do quarto ponto.

Exemplo de chamada:

quad(x1, y1, x2, y2, x3, y3, x4, y4);

Dependendo dos parâmetros o polígono gerado pode ser um:

• retângulo;
• quadrado;
• paralelogramo;
• trapézio;
• quadrilátero irregular.

size(300, 200);
// Quadrilátero irregular
quad(10, 10, 90, 90, 10, 90, 90, 10);
// Quadrado
quad(110, 10, 110, 90, 190, 90, 190, 10);
// Retângulo
quad(10, 110, 10, 190, 190, 190, 190, 110);
// Losango
quad(250, 10, 200, 100, 250, 190,300, 100);

Todas as funções (fill, strokeJoin,  stroke, noStroke, strokeWeight, smooth e noSmooth) que alteram o triângulo também podem ser usadas para alteração das propriedades das formas geradas pela função quad.

Retângulo

O retângulo é uma figura geométrica com todos os seus lados separados por ângulos retos (noventa graus). A função rect precisa de 4 parâmetros:

• x: coordenada em x do início do retângulo;
• y: coordenada em y do início do retângulo;
• w: largura do retângulo;
• h: altura do retângulo.

Exemplo de chamada:

rect(x, y, w, h);

A função rectMode permite que se altere o comportamento padrão de como um retângulo é desenhado a partir de sua localização.  Por padrão, os parâmetros x e y determinam o ponto da lateral superior esquerda do retângulo. Este é o rectMode(CORNER). A sintaxe rectMode(CORNERS) usa o primeiro e o segundo parâmetro como um dos cantos e o terceiro e quarto parâmetros para determinar a posição do outro canto. No caso de rectMode(CENTER), o retângulo é construído a partir do ponto central, ou seja, x e y determinam onde deve ficar o centro do retângulo. Os outros dois parâmetros são usados para a largura e altura do retângulo. Por fim, a chamada a rectMode(RADIUS) especifica que o retângulo deve ser desenhado a partir do ponto central. Mas, desta vez, o terceiro e quarto parâmetros determinam metade da altura e da largura.

size(300, 200);
fill(210);
rect(10, 10, 80, 50);
fill(200);
rect(50, 35, 80, 50);
fill(190);
rect(90, 60, 80, 50);
fill(180);
rect(130, 85, 80, 50);
fill(170);
rect(170, 60, 80, 50);
fill(160);
rect(210, 35, 80, 50);

size(300, 200);
// rectMode(CORNERS) recebe os pontos de limite do retângulo
rectMode(CORNERS);
rect(10, 10, 30, 30);
rect(30, 30, 50, 50);
rect(50, 50, 70, 70);
rect(70, 70, 90, 90);
noFill();
// rectMode(CENTER) recebe o centro, a largura e a altura
rectMode(CENTER);
rect(50, 50, 90, 90);
// rectMode(RADIUS); recebe o centro e metade da largura e metade da altura
rectMode(RADIUS);
rect(150, 100, 145, 95);

Todas as funções (fill, strokeJoin,  stroke, noStroke, strokeWeight, smooth e noSmooth) que alteram o triângulo e o quadrilátero também podem ser usadas para alteração das propriedades das formas geradas pela função rect.

Resumo

Neste capítulo começamos a percorrer o caminho com a Programação de Computadores. Conhecemos o ambiente Processing, que utilizaremos neste curso para a prototipação rápida de desenhos, animações, interações e programas em geral. A visão do Processing trabalhada hoje se limitou à utilização como ferramenta de desenho. Da Lógica de Programação, entendemos melhor qual é a anatomia de um programa: comentários, funções, constantes, etc. Por fim, algumas funções de geração de gráficos 2d foram exploradas e exemplificadas.

O que vem pela frente?

No próximo capítulo o foco será o Processing como ferramenta de animação e de tipografia básica. Para que ele possa ser usado desta maneira, o conceito de modo contínuo será apresentado. Além disso, outro assunto relevante será a utilização de variáveis.

Exercícios Propostos

A) Na aula de hoje você conheceu uma série de comandos para o desenho de primitivas gráficas. Vamos treinar sua aplicação. Usando pelo menos as funções: point, line, triang, quad e rect desenhe um robô. Você tem liberdade para o desenho que quiser, mas o lado direito do robô deve ser simétrico em relação ao lado esquerdo.

Para entregar este exercício proposto, use este link.

B) Treine a construção do esboço de outras figuras. Sugestões:

• Tabuleiro quadrado de 3 x 3;
• Jogo da velha na posição inicial;
• Seta;
• Bandeira do Brasil;
• Casa;
• etc…

Para saber mais

Shiffman, Daniel. Coordinated Systems and Shapes, 2008, Disponível em: http://www.processing.org/learning/tutorials/basics/

Reas, Casey. Fry, Ben. Processing: A Programming Handbook for Visual Designers and Artists. Páginas 23 a 36. Disponível parcialmente em: http://www.processing.org/img/learning/Processing-Sample-070607.pdf

Referência do Processing em Português. Disponível em: http://www.dainf.cefetpr.br/~merkle/processing/reference/ptBR/index_ext.html

Referência do Processing em Inglês. Disponível em: http://www.processing.org/reference/index.html

Capítulo 2 do Livro “Lógica de Programação – A Construção de Algoritmos e Estruturas de Dados” de Forbellone e Eberspächer. Páginas 17 a 21.

Capítulo 1 do Livro “Algoritmos Estruturados” de Farrer e outros. Páginas 47 a 50.

Tetris Moves Me – Narrated Version from Joana Kelly on Vimeo.

Siftables Music Sequencer from Jeevan Kalanithi on Vimeo.

Download Apresentação da Disciplina