Interação em Processing
©2
01
5 D
r. W
alte
r F.
de
Aze
ve
do
Jr.
1
azevedolab.net
O programa ladybug01.pde ilustra o uso das formas geométricas para montarmos uma
figura mais complexa. Abaixo temos a figura de uma joaninha sem uso de cores.
Vamos mostrar cada trecho do código. Para facilitar a compreensão do código, para
cada trecho explicado é adicionada a parte do desenho da joaninha que o código gera.
2
Programa ladybug01.pdewww.processing.org
O trecho inicial define o tamanho da janela, função size(480,480) e a cor de fundo, com
a função background(255). A função smooth() suaviza as formas geométricas geradas.
A função ellipseMode(CENTER) indica que, ao usarmos a função ellipse(), os dois
primeiros números referem-se ao centro, onde a elipse será desenhada. A função
fill(255) indica que o preenchimento das figuras geométricas geradas será branco. Por
último, a função stroke(0) indica que as linhas serão desenhadas com a cor preta.
3
size(480,480); // Set the size of the window
background(255); // Draw a white background
smooth(); // Going smoothly with lines
ellipseMode(CENTER); // Set ellipses to CENTER mode
fill(255); // Set fill color as white
stroke(0); // Set line color as black
Programa ladybug01.pdewww.processing.org
A função ellipse() desenha a cabeça da joaninha, mostrada abaixo. Note que os dois
primeiros números especificam o centro em pixels, na janela gerada de 480 x 480
pixels. Os dois últimos números especificam a largura e altura, respectivamente. Como
trata-se de um círculo, usamos largura e altura iguais.
4
// Set ellipse() function to represent the head of the ladybug
ellipse(155,155,90,90);
Programa ladybug01.pdewww.processing.org
A segunda função ellipse() desenha o corpo da joaninha, como mostrado abaixo. Note
que a linguagem de programação Processing executa as funções de cima para baixo,
uma a uma. Assim, o segundo círculo é sobreposto ao primeiro, desta forma o primeiro
círculo, o que representa a cabeça, fica parcialmente coberto pelo segundo círculo, o
do corpo. Pense que cada função do Processing equivale a pintarmos numa tela, o que
pintamos depois se sobrepõe ao que pintamos antes.
5
// Set ellipse() function to represent the main body of the ladybug
ellipse(240,240,240,240);
Programa ladybug01.pdewww.processing.org
Desenhamos agora uma linha para a divisão do corpo, seria a visão que teríamos das
asas da joaninha. A linha é desenhada com a função line(). O primeiro par de números
indica o início da linha e o segundo par o final da linha, como sempre, as coordenadas
estão em pixels.
6
// Set line() function to represent the division of the ladybug
line(155,155,325,325);
Programa ladybug01.pdewww.processing.org
Para os olhos da joaninha, usamos duas elipses, como mostrado no código abaixo. O
resultado está mostrado à direita. Veja um aspecto curioso, que usaremos para gerar
simetria na joaninha. A segunda elipse tem as coordenadas do centro trocadas com
relação à primeira, o mesmo com a largura e altura. O resultado é que as duas elipses
são equidistantes com relação a uma linha imaginária que corta a janela de 480 x 480
pixels. Usaremos esta inversão para gerar figuras simétricas.
7
// Set a pair of ellipse() functions to represent the eyes
ellipse(120,155,25,35);
ellipse(155,120,35,25);
Programa ladybug01.pdewww.processing.org
Usamos duas linhas para o par de antenas, a partir da função line(). Veja que para
manter a simetria, usamos o mesmo recurso usado anteriormente para as elipses.
Invertemos as coordenadas da segunda linha, com relação à primeira.
8
// Set a pair of line() functions to represent the antennea
line(118,130,50,110);
line(130,118,110,50);
Programa ladybug01.pdewww.processing.org
Vamos adicionar as pintas da joaninha, usaremos a função ellipse(), uma para cada
pinta. Veja que mantemos a simetria do par de pintas, usando o recurso de inverter as
coordenadas. Temos um total de três pares de pintas.
9
// Add spots using ellipse() functions
ellipse(160,220,40,60);
ellipse(220,160,60,40);
ellipse(190,280,80,50);
ellipse(280,190,50,80);
ellipse(260,320,40,60);
ellipse(320,260,60,40);
Programa ladybug01.pdewww.processing.org
Temos agora uma parte delicada do desenho, as patas. Temos que desenhar três
pares de patas. Abaixo temos o código da primeira pata, usamos quatro linhas para
cada pata.
10
// First leg using line() functions
line(120,250,95,270);
line(122,268,97,280);
line(95,270,45,260);
line(97,280,45,260);
Programa ladybug01.pdewww.processing.org
Vamos à segunda pata, indicada no código abaixo.
11
// Second leg using line() functions
line(144,312,130,340);
line(157,326,138,347);
line(130,340,80,350);
line(138,347,80,350);
Programa ladybug01.pdewww.processing.org
Com a terceira pata, terminamos um lado da joaninha.
12
// Third leg using line() functions
line(220,360,230,395);
line(235,360,240,390);
line(230,395,265,430);
line(240,390,265,430);
Programa ladybug01.pdewww.processing.org
Para as três patas restantes, usamos o truque de inverter as coordenadas das linhas,
tal recurso gera linhas equidistantes da linha imaginária que corta a janela de 480 x
480 pixels. Invertendo-se as coordenadas da primeira pata, temos as coordenadas da
quarta pata, como mostrado abaixo.
13
// Forth leg using line() functions
line(250,120,270,95);
line(268,122,280,97);
line(270,95,260,45);
line(280,97,260,45);
Programa ladybug01.pdewww.processing.org
Para a quinta pata, invertemos as coordenadas das linhas de segunda pata, como
mostrado no código abaixo.
14
// Fifth leg using line() functions
line(312,144,340,130);
line(326,157,347,138);
line(340,130,350,80);
line(347,138,350,80);
Programa ladybug01.pdewww.processing.org
Finalmente a última pata, invertemos as coordenadas das linhas da terceira pata.
15
// Sixth leg using line() functions
line(360,220,395,230);
line(360,235,390,240);
line(395,230,430,265);
line(390,240,430,265);
Programa ladybug01.pdewww.processing.org
A partir do PDE podemos criar um aplicativo executável diretamente do menu. Vamos
usar o código ladybug01.pde, que acabamos de ver, para gerarmos um aplicativo. Para
isso, clique no Menu do PDE na sequência: File>Export Application, como indicado
abaixo.
16
Programa ladybug01.pdewww.processing.org
Escolhemos o sistema operacional do aplicativo, bem como se este terá botão de
parada e será mostrado no modo de tela cheia, como indicado nas opções do menu
abaixo. Clicamos Export.
17
Programa ladybug01.pdewww.processing.org
O PDE mostra uma mensagem que o aplicativo está sendo gerado, como indicado
abaixo. Ao final teremos uma mensagem “Done”, que indica que o aplicativo foi gerado.
O aplicativo será salvo na pasta onde está o ladybug01.
18
Programa ladybug01.pdewww.processing.org
Mensagem que indica que o
aplicativo está sendo gerado.
Abaixo temos a pasta onde foi salvo o aplicativo (arquivo ladybug01.exe), veja que este
arquivo gerado pode ser copiado para outro computador, não precisamos mais do PDE
para executarmos o programa ladybug01. Você pode deixá-lo num site da internet para
download ou transportar no seu pen drive. O único cuidado é gerarmos para o sistema
operacional que iremos usá-lo. Você agora tem seu executável pronto para uso, basta
clicar no ícone do aplicativo para executar o programa.
19
Programa ladybug01.pdewww.processing.org
A nossa joaninha ficaria muito mais interessante se adicionarmos cores. Uma das
formas que a linguagem de programação Processing trabalha com cores, é por meio
do sistema RGB (Red Green Blue). Usamos uma terna de números para indicar a
intensidade de cada uma das cores. Vamos considerar a função fill(), que usamos até o
momento com variação de 0 até 255. Agora para as cores, usamos o fill() com três
argumentos, como mostrado abaixo. A inserção de cores pode ocorrer na função
stroke() também.
20
Cores (Sistema RGB)www.processing.org
fill(r,g,b);
Intensidade da cor vermelha, entre 0 e 255
Intensidade da cor verde, entre 0 e 255Intensidade da cor azul, entre 0 e 255
stroke(r,g,b);
Intensidade da cor vermelha, entre 0 e 255
Intensidade da cor verde, entre 0 e 255
Intensidade da cor azul, entre 0 e 255
O PDE tem um recurso que indica os números a serem usados como argumentos para
uma dada cor. Para acioná-lo abra o PDE e clique em Tools>Color Selector, como
indicado abaixo.
21
Cores (Sistema RGB)www.processing.org
Agora temos uma paleta de cores. Clicando-se na cor desejada, temos o código RGB
para a cor em destaque. No exemplo abaixo, para termos uma figura com o azul
indicado, usaríamos fill(33,42,252).
22
Cores (Sistema RGB)www.processing.org
Exercício de programação: Modifique a joaninha do código ladybug01.pde para
adicionar cores. Use a função fill(r,g,b) para as cores. Gere o executável para o código
gerado.
23
Programa ladybug02.pdewww.processing.org
Vimos na aula anterior a função ellipse(), bem como a função ellipseMode(), com
argumento CENTER, que especificava o formato dos argumentos da função ellipse(),
ou seja, os dois primeiros números especificam o centro da elipse, e os dois últimos a
largura e altura, respectivamente. Destacamos agora que a função
ellipseMode(CENTER) não é necessária para a função ellipse(), visto que o modo
default é CENTER, assim não precisamos especificar, como no exemplo abaixo.
Normalmente, especificamos para deixarmos claro o modo sendo usado, tal cuidado é
especialmente útil em caso de programas com muitas linhas de código. Lembre-se,
uma vez estabelecido o modo, com a função ellipseMode(), todas as elipses geradas
após a função ellipseMode() seguirão o padrão estabelecido. Se tivermos uma
segunda função ellipseMode(), as novas elipses, a partir da segunda função
ellipseMode(), serão desenhadas seguindo o novo modo. E assim para uma terceira ou
mais funções ellipseMode(). 24
Função ellipse()www.processing.org
size(480,480); // Set the size for window
background(255); // Set background as white
ellipse(240,240,360,240); // Set ellipse
Outro modo de arranjo dos argumentos da função ellipse() é chamado CORNER, que
especifica as coordenadas do ponto à esquerda acima de um retângulo imaginário que
envolve a elipse gerada. Os dois últimos argumentos indicam a largura e altura, como
no modo CENTER. Abaixo temos o código com o modo CORNER.
Outro ponto a se destacar, veja que não usamos a função fill() para especificar a cor de
preenchimento das figuras. Quando queremos uma figura com fundo branco, não
precisamos especificar, o default é branco para o preenchimento. Da mesma forma,
não indicamos a cor da linha com a função stroke(), visto que o default é preto para
cor das linhas. Como já destacado, normalmente colocamos essas informações, para
deixar claro as cores que estamos usando, mesmo que sejam valores defaults.
25
Função ellipse()www.processing.org
size(480,480); // Set the size for window
background(255); // Set background as white
ellipseMode(CORNER); // Set the mode
ellipse(40,40,360,240); // Set ellipse
Para a função rect() a situação se inverte, o modo default é CORNER, onde os dois
primeiros números especificam as coordenadas em pixels do ponto à esquerda acima,
onde iniciamos o desenho do retângulo. Os dois últimos números são para largura e
altura, como sempre. Abaixo temos um trecho de código que usa o modo default para a
função retângulo.
26
Função rect()www.processing.org
size(480,480); // Set the size for window
background(255); // Set background as white
ellipse(240,240,360,240); // Set ellipse
Para usar o modo CENTER usamos a função rectMode(CENTER), como no trecho de
código mostrado abaixo.
27
Função rect()www.processing.org
size(480,480); // Set the size for window
background(255); // Set background as white
rectMode(CENTER); // Set mode for rect() function
rect(240,240,360,240); // Set rect
Como já vimos, a função background() estabelece a cor de fundo da janela gerada pela
função size(). Se omitirmos a função background(), a linguagem Processing assume o
valor default para a cor da tela, no caso cinza. Veja o trecho de código abaixo, onde
deletamos a linha da função background() do código do slide anterior. O resultado é
uma tela com a cor cinza.
28
Função background()www.processing.org
size(480,480); // Set the size for window
rectMode(CENTER); // Set mode for rect() function
rect(240,240,360,240); // Set rect
Caso seja necessário desenharmos uma forma sem preenchimento, usamos a função
noFill(), que elimina o preenchimento da figura gerada. No trecho de código abaixo
usamos a função noFill() antes da função rect(). O resultado é um retângulo sem
preenchimento, como mostrado na figura abaixo. A função noFill() pode ser usada para
eliminar o preenchimento de qualquer função que gere figuras com preenchimento,
como ellipse() e arc(), por exemplo.
29
Função noFill()www.processing.org
size(480,480); // Set the size for window
rectMode(CENTER); // Set mode for rect() function
noFill(); // No filling color
rect(240,240,360,240); // Set rect
Se quisermos eliminar a linha que cerca uma figura, usamos a função noStroke(), que
elimina a linha, deixando só o preenchimento, como no código abaixo. Não use as
funções noStroke() e noFill() aplicadas à mesma figura, pois teremos uma forma
geométrica sem linha e sem preenchimento.
30
Função noStroke()www.processing.org
size(480,480); // Set the size for window
noStroke(); // Set no stroke mode
rectMode(CENTER); // Set mode for rect() function
rect(240,240,360,240); // Set rect
Exercício de programação: Escreva o código que gera a figura abaixo. Use uma janela
de 480 x 480 pixels.
31
Programa myscreen01.pdewww.processing.org
Exercício de programação: Escreva o código que gera a figura abaixo. Use uma janela
de 480 x 480 pixels.
32
Programa myscreen02.pdewww.processing.org
Considere um jogo de videogame típico.
Ao iniciar o jogo você escolhe o nome do
seu personagem, pode, muitas vezes,
escolher as vestimentas e armas e até o
cenário e o nível de dificuldade do jogo.
Chamaremos esta situação de setup() do
jogo. Depois de estabelecidas as
condições iniciais, o jogo começa e os
gráficos do jogo são repetidos na sua
tela, num ritmo de pelo menos 30
quadros por segundo, assim você tem a
sensação de movimento dos
personagens. Chamaremos esta
situação de draw() do jogo.
A linguagem de programação Processing
usa este paradigma para mostrar
imagens na tela e, mais ainda, para
termos imagens dinâmicas, além das
imagens paradas vistas até agora.
33
Funções setup() e draw()www.processing.org
Videogame Pong.
Imagem disponível em:
<https://pt.wikipedia.org/wiki/Pong#/media/File:PongV
ideoGameCabinet.jpg >
Acesso em: 23 de agosto de 2016.
Um programa em Processing tem uma função chamada setup(), onde as condições
iniciais são estabelecidas. A outra função, chamada draw(), repete continuamente as
funções vinculadas a ela, até que o fim do programa seja solicitado pelo usuário.
Vamos fazer uma analogia com um belo dia de sol em Porto Alegre, e você decide
praticar exercícios e correr 8 km. O setup() seria algo assim, coloque os tênis e a
roupa de corrida e alongue-se. O draw() é coloque o pé direito na frente, coloque o pé
esquerdo na frente, repita do processo até o fim. O código seria como segue.
No código acima veja que não temos na função draw() “o repita até o fim”. Não precisa,
o Processing assume o que está vinculado à função draw() é para ser repetido até que
o fim do programa seja solicitado pelo usuário. Sobre o void usado antes do setup() e
do draw(), veja como um requisito da sintaxe da linguagem de programa Processing.
Mais adiante retornaremos ao void. 34
Funções setup() e draw()www.processing.org
void setup(){
// Coloque os tênis
// Vista a roupa
// Alongar
}
void draw(){
// Coloque o pé direito na frente
// Coloque o pé esquerdo na frente
}
Outro aspecto a ser destacado no nosso código para corrida. Veja que as funções do
setup() e do draw() estão entre chaves. Este é um requisito da sintaxe da linguagem
Processing. As funções a serem executadas estão contidas num bloco de código, este
bloco tem que estar envolvido entre chaves, similar ao recuo usado na linguagem
Python. Só que no Python não precisamos de chaves, só o recuo. Veja que usamos o
recuo em Processing, mas por uma questão de facilidade de leitura, não é obrigatório
seu uso, mas visualmente fica elegante a distribuição dos blocos de código.
Você pode forçar o PDE a colocar automaticamente os recuos nos blocos entre
chaves, com Edit>Auto Format, ou simplesmente <Ctrl> T.
35
Funções setup() e draw()www.processing.org
void setup(){
// Coloque os tênis
// Vista a roupa
// Alongar
}
void draw(){
// Coloque o pé direito na frente
// Coloque o pé esquerdo na frente
}
Ainda sobre os blocos de código, gostaria de destacar que os blocos, envolvidos em
chaves, podem conter outros blocos de código, que também devem estar envolvidos
em chaves, como no exemplo abaixo.
36
Funções setup() e draw()www.processing.org
{
// Um bloco de código
{
// Um segundo de bloco de código inserido no primeiro
}
}
Na aula passada vimos o programa zoog01.pde. Agora vamos usar a divisão entre
setup() e draw() para programarmos o zoog02.pde. O código segue abaixo.
37
Programa zoog02.pdewww.processing.org
void setup() {
// Set the size of the window
size(200, 200);
}
void draw() {
// Draw a white background
background(255);
// Set CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(150);
rect(100, 100, 20, 100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(100, 70, 60, 60);
// Draw Zoog's eyes
fill(0);
ellipse(81, 70, 16, 32);
ellipse(119, 70, 16, 32);
// Draw Zoog's legs
stroke(0);
line(90, 150, 80, 160);
line(110, 150, 120, 160);
}
A função setup() roda uma vez. A função size() sempre deve
estar no setup(), visto que a existência da tela é condição sine
qua non para que possamos desenhar sobre esta.
A função draw() roda de forma contínua, até que o fim do
programa seja solicitado pelo usuário.
Observe que ao executar o código zoog02.pde não percebemos a diferença com
relação à versão anterior, isto ocorre pois a função draw() não apresenta mudança de
estado durante a sua execução. Não temos variáveis que foram atualizadas durante a
execução do programa, assim temos o nosso Zoog sendo repetido 30 vezes na tela.
38
Programa zoog02.pdewww.processing.org
Uma forma de modificarmos as condições na função draw(), é pode meio do uso da
posição x,y do mouse, obtidas com as palavras-chave mouseX e mouseY. Vejamos o
código moving_square01.pde, mostrado abaixo.
A função setup() é similar à vista no programa zoog02.pde, a única diferença é que
aumentamos a janela para 480 x 480 pixels. A função draw() traz a função
background(255) que define o fundo branco. A função stroke(0) define que as linhas
têm cor preta. A função rectMode(CENTER) define o modo da função rect() como
CENTER. A função rect(mouseX,mouseY,50,50) desenha um retângulo com o centro
definido pela coordenadas x e y da posição do mouse. O resultado está abaixo.
39
Palavras-chave mouseX e mouseYwww.processing.org
void setup() {
size(480, 480);
}
void draw() {
background(255);
// Body
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX, mouseY, 50, 50);
}
Vamos fazer uma pequena modificação no código moving_square01.pde, com a
passagem da função background(255) para a função setup(). Sendo assim, esta só
será executada uma vez. Na situação anterior, a função background(255) era
executada toda vez, ou seja, cada vez que o quadrado era desenhado no ciclo de
execução seguinte era apagado, devido a ação da função background(255). O
quadrado é então redesenhado, só que com as novas coordenadas do mouse e numa
tela em branco. Assim o quadrado não deixava rastro.
40
Palavras-chave mouseX e mouseYwww.processing.org
void setup() {
size(480, 480);
background(255);
}
void draw() {
// Body
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX, mouseY, 50, 50);
}
Agora podemos ir um passo à frente. Vamos modificar o código zoog02.pde, de forma
que ele possa se deslocar por uma tela de 480 x 480 pixels. O código está abaixo.
41
void setup() {
size(480, 480);
}
void draw() {
// Draw a white background
background(255);
// Set CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(150);
rect(mouseX, mouseY, 20, 100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(mouseX, mouseY-30, 60, 60);
// Draw Zoog's eyes
fill(0);
ellipse(mouseX-19, mouseY-30, 16, 32);
ellipse(mouseX+19, mouseY-30, 16, 32);
// Draw Zoog's legs
stroke(0);
line(mouseX-10, mouseY+50, mouseX-20, mouseY+60);
line(mouseX+10, mouseY+50, mouseX+20, mouseY+60);
}
Programa zoog03.pdewww.processing.org
A principal modificação é que as coordenadas das formas são colocadas em função
das coordenadas do mouse. A primeira forma é a função rect(), em vermelho.
42
void setup() {
size(480, 480);
}
void draw() {
// Draw a white background
background(255);
// Set CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(150);
rect(mouseX, mouseY, 20, 100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(mouseX, mouseY-30, 60, 60);
// Draw Zoog's eyes
fill(0);
ellipse(mouseX-19, mouseY-30, 16, 32);
ellipse(mouseX+19, mouseY-30, 16, 32);
// Draw Zoog's legs
stroke(0);
line(mouseX-10, mouseY+50, mouseX-20, mouseY+60);
line(mouseX+10, mouseY+50, mouseX+20, mouseY+60);
}
A função rect(mouseX,mouseY,20,100) define o
centro da função com as coordenadas x,y do
mouse. Os valores anteriores eram 100,100 pixels.
A largura e altura são fixas, o que muda é o centro,
agora definido com o mouse.
Programa zoog03.pdewww.processing.org
Agora temos que ter atenção, para que todas outras formas tenham os centros
definidos com relação às posições que tínhamos no código anterior, o zoog02.pde.
43
void setup() {
size(480, 480);
}
void draw() {
// Draw a white background
background(255);
// Set CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(150);
rect(mouseX, mouseY, 20, 100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(mouseX, mouseY-30, 60, 60);
// Draw Zoog's eyes
fill(0);
ellipse(mouseX-19, mouseY-30, 16, 32);
ellipse(mouseX+19, mouseY-30, 16, 32);
// Draw Zoog's legs
stroke(0);
line(mouseX-10, mouseY+50, mouseX-20, mouseY+60);
line(mouseX+10, mouseY+50, mouseX+20, mouseY+60);
}
A função ellipse() seguinte tinha como
coordenadas (100,70), assim, usando-se os
valores da posição do mouse, mantemos a
coordenada x, o mouseX e subtraímos 30 da
posição y, o mouseY, como indicado.
Programa zoog03.pdewww.processing.org
Repetimos o processo para as outras formas, como em destaque no código. O
resultado é Zoog movimentando-se na tela.
44
void setup() {
size(480, 480);
}
void draw() {
// Draw a white background
background(255);
// Set CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(150);
rect(mouseX, mouseY, 20, 100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(mouseX, mouseY-30, 60, 60);
// Draw Zoog's eyes
fill(0);
ellipse(mouseX-19, mouseY-30, 16, 32);
ellipse(mouseX+19, mouseY-30, 16, 32);
// Draw Zoog's legs
stroke(0);
line(mouseX-10, mouseY+50, mouseX-20, mouseY+60);
line(mouseX+10, mouseY+50, mouseX+20, mouseY+60);
}
Programa zoog03.pdewww.processing.org
45
Programa zoog04.pdewww.processing.org
Exercício de programação: Modifique zoog03.pde de forma que gere o rastro do Zoog
na tela. O novo código chama-se zoog04.pde.
46
Programa zoog05.pdewww.processing.org
Exercício de programação: Modifique zoog03.pde de forma que que os olhos do Zoog
mudem de cor, conforme movimentamos o mouse. Use o sistema RGB para inserir cor
com a função fill().
47
As palavras-chave pmouseX e pmouseY indicam as coordenadas x,y do mouse no
ciclo anterior. Assim, podemos usar esta informação para relacionar a posição presente
do mouse com a que este tinha num ciclo anterior. A partir desta informação, podemos
ter acesso à velocidade de deslocamento do mouse, ou seja, quando maior for a
diferença entre a posição atual e a anterior, maior foi a velocidade de deslocamento do
mouse. No trecho de código abaixo, temos um programa, continuous_line01.pde que
desenha uma linha contínua na tela, a partir da posição anterior do mouse, acessada
com as palavras-chave pmouseX e pmouseY.
Palavras-chave pmouseX e pmouseYwww.processing.org
void setup() {
size(480, 480);
background(255);
smooth();
}
void draw() {
stroke(0);
line(pmouseX, pmouseY, mouseX, mouseY );
}
48
Para ter acesso à velocidade de deslocamento do mouse, usamos a função
matemática abs(), que retorna o módulo do argumento da função. No programa
continuous_line02.pde temos que a espessura da linha traçada é dada pela velocidade
de deslocamento do mouse. Para variarmos a espessura da linha, usamos a função
strokeWeight(). Especificamente, usamos como argumento da função o abs(mouseX-
pmouseX), como indicado no código abaixo.
Função strokeWeight()www.processing.org
void setup() {
size(480, 480);
background(255);
smooth();
}
void draw() {
stroke(0);
strokeWeight(abs(mouseX-pmouseX));
line(pmouseX, pmouseY, mouseX, mouseY );
}
49
Praticamente todos programas que usamos no dia-a-dia levam em consideração o que
acontece quando clicamos o mouse ou pressionamos uma tecla. Na linguagem de
programação Processing, temos as funções mousePressed() e keyPressed(), que
possibilitam tratar tais situações. Estas funções tratam de eventos, que, quando
ocorrem, realizam determinada tarefa. Por isso, temos que vincular blocos de código a
estas funções. O programa pop_squares01.pde desenha um quadrado na tela quando
clicamos com o mouse. Além disso, limpa a tela quando clicamos em qualquer tecla. O
código está mostrado abaixo.
Funções mousePressed() e keyPressed()www.processing.org
void setup() {
size(480, 480);
background(255);
}
void draw() {
}
void mousePressed() {
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX, mouseY, 16, 16);
}
void keyPressed() {
background(255);
}
A função setup() desenha uma
janela de 480x480 pixels, de fundo
branco.
A função draw() não faz nada.
A função mousePressed() desenha
um quadrado de fundo cinza,
quando o mouse é pressionado.
A função keyPressed() limpa a
tela, quando qualquer tecla for
pressionada.
50
Programa pop_squares02.pdewww.processing.org
Exercício de programação: Modifique pop_squares01.pde, de forma que os quadrados
mudem de cor, conforme a posição do mouse. Além disso, ao clicarmos uma tecla, a
nova cor de fundo é baseada na posição do mouse, sendo gera uma cor diferente das
cores possíveis para os quadrados. Dica: Use fill(mouseX,0,mouseY) para a função
mousePressed() e fill(mouseX,mouseY,0) para a função keyPressed().
51
Programa zoog06.pdewww.processing.org
Iremos tornar o Zoog mais dinâmico, além de adicionarmos as funções já vistas,
incluiremos a função frameRate(), que define quantos quadros por segundo são
jogados na tela. O valor default é 60 quadros por segundo. Podemos reduzir para 30
quadros por segundo, que é um valor padrão para imagens. O novo Zoog terá as
seguintes características:
1) O corpo seguirá a posição do mouse;
2) A cor dos olhos será determinada pela posição do mouse;
3) As pernas do Zoog serão desenhadas da posição anterior para presente;
4) Quando o mouse for clicado, será mostrada uma mensagem “You don’t know the
power of the dark side!”
Para mostra uma mensagem, usamos a função println(). A mensagem é mostrada no
console do PDE, no localizado na parte inferior.
52
Programa zoog06.pdewww.processing.org
void setup() {
// Set the size of the window
size(480, 480);
smooth();
frameRate(30) ;
}
void draw() {
// Draw a black background
background(255);
// Set ellipses and rects to CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(175);
rect(mouseX, mouseY, 20, 100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(mouseX, mouseY -30, 60, 60);
// Draw Zoog's eyes
fill(mouseX, 0, mouseY);
ellipse(mouseX-19, mouseY-30, 16, 32);
ellipse(mouseX + 19, mouseY-30, 16, 32);
// Draw Zoog's legs
stroke(0);
line(mouseX-10, mouseY + 50, pmouseX-10, pmouseY + 60);
line(mouseX + 10, mouseY + 50, pmouseX + 10, pmouseY + 60);
}
void mousePressed() {
println("You don’t know the power of the dark side!");
}
A função setup() desenha uma
janela de 480x480 pixels, de fundo
branco e uma taxa de 30 quadros
por segundo.
A função draw() desenha o Zoog,
como visto nos programas
anteriores. Veja que as pernas
variam conforme a posição
anterior do mouse, em destaque
com letras vermelhas no código ao
lado.
A função mousePressed() mostra
uma mensagem no console, com a
função println().
53
Programa zoog06.pdewww.processing.org
54
Exercício de Programaçãowww.processing.org
Exercício de programação: 1) Use a figura da joaninha que você gerou na aula anterior
e a transforme numa figura dinâmica, usando-se as funções setup() e draw(). 2)
Permita que a joaninha interaja com o mouse, variando sua posição na tela. 3) Permita
que as cores das pintas mudem conforme a posição do mouse. 4) Permita que a cor
dos olhos mude conforme a posição do mouse. Use um padrão de cores diferente do
usado para as manchas.
-MODEL, Mitchell L. Bioinformatics Programming Using Python. Sebastopol: O’Reilly Media, Inc., 2011. 1584 p.
-REAS, Casey & FRY, Bem. Geeting Started with Processing. Sebastopol: O’Reilly Media, Inc., 2010. 194 p.
-SHIFFMAN, Daniel. Learning Processing. A Beginner’s Guide to Programming Images, Animation, and Interaction.
Burlington: Morgan Kaufmann, 2008. 453 p.
-SHIFFMAN, Daniel. The Nature of Code: Simulating Natural Systems with Processing. Mountain View: The Nature of Code,
2012. 498 p.
Última atualização: 23 de agosto de 2015.
55
Referênciaswww.processing.org