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.