Bioinformática. Uma introdução com a linguagem Python filefigura mais complexa. ... que a linguagem de programação Processing executa as funções de cima para baixo, ... círculo,

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


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);


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);


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);


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);


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);


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);


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);


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);


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);


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);


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);


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);


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


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


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


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


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


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


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


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



ellipseMode(CORNER); // Set the mode


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




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



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



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



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


noStroke(); // Set no stroke mode


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


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


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


{

// 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


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);


}

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


background(255);

// Set CENTER mode


rectMode(CENTER);

// Draw Zoog's body

stroke(0);

fill(150);


// 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 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() {


background(255);

// Set CENTER mode


rectMode(CENTER);

// Draw Zoog's body

stroke(0);

fill(150);


// Draw Zoog's head

stroke(0);

fill(255);


// Draw Zoog's eyes

fill(0);



// Draw Zoog's legs

stroke(0);



}

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.


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


background(255);

// Set CENTER mode


rectMode(CENTER);

// Draw Zoog's body

stroke(0);

fill(150);


// Draw Zoog's head

stroke(0);

fill(255);


// Draw Zoog's eyes

fill(0);



// Draw Zoog's legs

stroke(0);



}

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.


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


background(255);

// Set CENTER mode


rectMode(CENTER);

// Draw Zoog's body

stroke(0);

fill(150);


// Draw Zoog's head

stroke(0);

fill(255);


// Draw Zoog's eyes

fill(0);



// Draw Zoog's legs

stroke(0);



}


45


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


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);


}

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


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


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


rectMode(CENTER);

// Draw Zoog's body

stroke(0);

fill(175);


// 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);

// 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


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

Documents

Bioinformática. Uma introdução com a linguagem Python filefigura mais complexa. ... que a linguagem de programação Processing executa as funções de cima para baixo, ... círculo,