1) Escolha uma das bibliotecas listadas no resumo a seguir, na seção 5 (Links para Bibliotecas), ou procure por alguma biblioteca na Internet:

http://www.brunocampagnolo.com/2009_2/processing/libs/

Antes de escolher sua biblioteca verifique se alguém já não a escolheu no link abaixo:

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

É essencial que cada aluno use uma biblioteca diferente.

Selecione sua biblioteca no link abaixo:

http://spreadsheets.google.com/viewform?formkey=dEdRUXhUcUp1S1ZJeUpYeWNhZ1lNaFE6MA

2) Crie um documento sobre sua biblioteca, citando:

a) Nome;

b) Link;

c) Descrição do que faz a biblioteca;

d) Requisitos para instalação;

e) Passos para instalação;

d) Pelo menos 3 exemplos BEM COMENTADOS;

O primeiro exemplo, pode ser igual a um exemplo já fornecido pela biblioteca.

O segundo exemplo deve ser inédito.

Seu terceiro exemplo também deve ser inédito e usar também outra biblioteca qualquer a sua escolha.

3) Você deverá apresentar seu segundo exemplo no dia 8/12.

ENTREGA VIA EUREKA, EM PASTA CRIADA NO MÓDULO CONTEÚDO ATÉ O DIA 7/12.

Deixe seu exemplo público, para que seus colegas também possam vê-lo.

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.

Competição aberta para criação de programas em Processing com um limite de 200 caracteres (ou menos).

Envie seu programa até dia * 13/9/2009 *.

Para quem tem interesse em participar, uma dica também é testar alguns exemplos de código gerados em uma iniciativa espontânea semelhante:

http://www.abstractmachine.net/blog/p5-tweets/

Neste caso, o código era postado via Twitter, limitado a um único tweet, ou seja, 140 caracteres.

Este portal organiza um conjunto de experiências interativas, jogos e mini-aplicativos com o objetivo de mostrar o poder do navegador Google Chrome em relação ao desenvolvimento de programas na linguagem JavaScript que executem no navegador Web. Embora o portal seja patrocinado pelo Google e as experiências tenham um melhor aproveitamento apenas no Chrome, chama a atenção a possibilidade de explorar o JavaScript em aplicações gráficas cada vez mais poderosas. E, tão importante do que a demonstração técnica é o fato que estas aplicações são 100% JavaScript, ou seja, não dependem de nenhum plugin proprietário como Flash ou Java. Para que no futuro a Web continue aberta, sem dependência de nenhuma empresa e, ao mesmo tempo, a inovação continue a acontecer, o investimento neste tipo de aplicação deve ser estimulado.

É claro, a dependência do Google enquanto proprietário de um browser e, ao mesmo tempo, buscador web deve ser vista com reservas. O importante é que outros browsers também podem  ter implementações de experiências semelhantes sem precisar da empresa ou de algum de seus plugins. Essa independência se deve ao fato que do lado tecnológico, o que possibilita o funcionamento da maior parte dos códigos no Chrome Experiments são elementos que estão sendo discutidos para a inserção nas especificações HTML5/ CSS3 como a tag <canvas> e as transformações CSS. A tag <canvas>, por exemplo, já é presente nativamente na maior parte dos navegadores atuais (menos o IE…). Porém, mesmo no IE ela pode ser emulada facilmente.

Para quem não tem acesso ao Chrome, o vídeo abaixo mostra alguns exemplos. Um dos experimentos que mais me cativou foi o Twitch. Desenvolvido por um dos criadores da linguagem Processing (C. E, B. Reas), usando o port da linguagem para JavaScript (Processing.js),  é um conjunto de one-button games (jogos  cuja interação usa apenas um botão) que se conectam sequencialmente através das janelas do navegador. No Chrome, cada janela é um processo em separado.  Assim, cada minigame é executado com uma taxa de atualização (frame rate) constante.

O portal é aberto a contribuições de programadores e designers que tenham interesse em mostrar seus projetos em JavaScript.

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.