Aula 02 – Variáveis do Processing e o Modo Contínuo

10 março, 2009 (16:36) | aulas | Por: admin

Objetivo

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.

linhas

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.

linhas2

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.

linhas3

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.

depuracao

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()”.

erro_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:

mostratext

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.

fontesdisponiveis

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

fontlist

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.

valormousex

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.

exemploolaprocessing

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 …”.

erroduplodraw

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.

valorframerate

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.

framerateframecount

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.

framerateframecounttext

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.

framerateframecounttextcorrigido

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.

exemploanimacaoline1

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.

exemploanimacaoline2

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.

exemploanimacaoelipse1

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.

exemploanimacaorect1

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.

x x % 3
0 0
1 1
2 2
3 0
4 1
5 2
6 0
7 1
8 2
9 0
10 1
11 2

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.

exemploanimacaorect3

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.

exemplomousexmousey

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.

exemplomousexmousey2

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.

exemplomousexmousey3

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().

exemplomousexmousey4

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.

exemplomousexmousey5

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

Executar!

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

exemplomousexmousey6

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.

exemplomousexmousey7

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

Executar!

exemplomousexmousey8

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.

exemplopmousex1

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.

exemplomousepressed

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.

exemplomousepressed2

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.

exemplosetup

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:

resultadoesperadoex

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:

resultadoesperadoex2

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. 

Comentários

Pingback de Introdução à Programação 1 e 2 (2009) » Aula 03 – Expressões Aritméticas, Relacionais e Lógicas
Data: 24 de março de 2009 Hora: 15:19

[...] entendemos o Processing como uma ferramenta de desenho e como uma ferramenta de animação e interação. Cada vez mais funções são apresentadas para que se entenda como funcionam as funcionalidades de [...]