azevedolab.net 2015 Dr. Walter F. de Azevedo Jr.

(1)

(2)

Apresentação de outras linguagens de programação para Bioinformática: introdução ao Perl e ao Processing; modelagem de sistemas biológicos; aplicações Web em Python; apresentação do XML; otimização computacional; algoritmos genéticos; fractais; recursividade em programação; autômato celular; jogo da vida; redes neurais; computação biologicamente inspirada; desenvolvimento de projetos em Bioinformática.

2

Ementa

(3)

Página de entrada do site da linguagem Processing. Disponível em:

<http://processing.org>

Acesso em: 23 de agosto de 2015.

Na presente disciplina daremos continuidade ao desenvolvimento de programas para resolução de problemas biológicos. Iremos expandir nosso arsenal de linguagens de programação, com o uso da linguagem de programação Processing, especialmente utilizando seus recursos para simulação de sistemas biológicos, no que se refere à parte gráfica.

A linguagem de programação Processing foi desenvolvida em 2001, inicialmente por Ben Fry e Casey Reas, com uma proposta de criar uma linguagem de fácil aprendizagem para uso por designers e artistas plásticos. Sua proposta original foi superada, e hoje a linguagem Processing tem sido usada em diversas áreas, inclusive para simulação de sistemas

naturais. 3

Introdução ao Processing

(4)

Como é voltada para parte gráfica, a linguagem Processing tem comandos simples que permitem criar figuras com uma linha de código. Tal facilidade permite que exploremos suas funcionalidades para criarmos cenários, onde sistemas biológicos podem ser simulados.

O Processing foi criado a partir da linguagem de programação Java, mas você não precisa saber Java para programar em Processing. Podemos dizer que o Processing é um dialeto da linguagem Java. Conforme avançamos nos comandos do Processing apresentaremos mais detalhes desta relação do Processing com o Java.

4

(5)

Como é comum, o primeiro passo para aprender qualquer linguagem de programação é instalar seu ambiente do programação. No caso do Processing o ambiente de programação é chamado Processing Development Environment

(PDE). Veja no link

https://www.processing.org/download/

detalhes de como proceder a instalação. Há versões para Windows, Mac OS X e Linux.

5

(6)

Como toda linguagem de programação moderna, temos o nosso primeiro programa o “Hello World!”. Mas no Processing o nosso “Hello World!” não será uma mensagem de texto simples. Vamos criar uma figura, especificamente uma elipse. Depois que o Processing foi instalado, você deve ter um ícone do Programa, como este:

Ao clicar no ícone do Processing, você terá acesso ao PDE, o ambiente integrado de desenvolvimento (IDE) que usaremos para desenvolvermos nossos códigos. Análogo ao Eclipse usado para desenvolvermos os códigos em Python.

6

(7)

Janela do PDE para criarmos sketchs ( códigos em Processing).

A janela do PDE está mostrada abaixo, com suas funcionalidades.

7

(8)

Clique na janela branca do PDE e digite:

Clique na tecla de Run:

Será criada a janela gráfica, com a elipse.

Simples assim!

Veja que temos ponto e vírgula ao final da linha de comando, esta regra é usada para todos os comandos em Processing. Usamos o ponto e vírgula para indicar o

final da linha de comando. 8

ellipse(50,50,80,60); Função ellipse()

(9)

Abaixo temos o detalhamento da função ellipse(). Veja que o início da tela está do lado

esquerdo acima, assim, as coordenadas 0,0 indicam um ponto (pixel) do lado esquerdo acima da tela.

9

ellipse(50,50,80,60); Função ellipse()

www.processing.org

Coordenada x do centro da elipse em pixels Coordenada y do centro da elipse em pixels

Largura da elipse em pixels Altura da elipse em pixels

(10)

Abaixo temos as linhas para o programa make_circle.pde, veja que usamos a extensão .pde para programas em Processing. Ao salvarmos códigos digitados no PDE, não precisamos adicionar tal extensão, ela é colocada automaticamente.

O código acima cria uma janela retangular de 480 por 120 pixels e desenha um círculo preto, quando o mouse é pressionado ou um círculo branco, quando não é. Acima à

direita temos a janela gerada. 10

Programa make_circles.pde www.processing.org void setup(){ size(480,120); smooth(); } void draw(){ if (mousePressed) { fill(0); } else{ fill(255); } ellipse(mouseX,mouseY,80,80); }

(11)

Muito bem, conforme formos estudando a sintaxe da linguagem de programa Processing, iremos entender cada linha do código mostrado. O objetivo agora era simplesmente mostrarmos a facilidade de criarmos programas gráficos com poucas linhas de código. Vamos agora salvar o código criado. Clique em File>Save As... Depois digite o nome do código, make_circle. Não precisa da extensão .pde. Veja que podemos interromper clicando-se no botão Stop:

Podemos, também, finalizar a execução do código clicando à direita acima no “x” indicado.

A seguir temos uma sequência de funções para formas geométricas simples. 11

Programa make_circles.pde

(12)

12

Funções para Formas Básicas

point(50,50);

Coordenada x do ponto em pixels Coordenada y do ponto em pixels

(13)

13

line(50,50,80,80);

Coordenada x do início da linha em pixels Coordenada y do início da linha em pixels

Coordenada x do final da linha em pixels Coordenada y do final da linha em pixels

(14)

14

triangle(10,10,90,10,50,90);

Coordenada x do vértice 1 do triângulo em pixels Coordenada y do vértice 1 do triângulo em pixels

Coordenada x do vértice 2 do triângulo em pixels

Coordenada y do vértice 2 do triângulo em pixels Coordenada x do vértice 3 do triângulo em pixels

(15)

15

quad(10,10,90,10,90,90,10,90);

Coordenada x do vértice 1 do triângulo em pixels Coordenada y do vértice 1 do triângulo em pixels

Coordenada x do vértice 2 do triângulo em pixels

Coordenada y do vértice 2 do triângulo em pixels Coordenada x do vértice 3 do triângulo em pixels

(16)

16

rect(10,20,80,60);

Coordenada x do vértice à esquerda acima do retângulo em pixels Coordenada y do vértice à esquerda acima do retângulo em pixels

Largura do retângulo em pixels Altura do retângulo em pixels

(17)

17

arc(50,50,80,80,0,1.5*PI);

Coordenada x do centro em pixels Coordenada y do centro em pixels

Largura em pixels Altura em pixels

Posição inicial do arco em radianos

(18)

Vamos usar as formas básicas vistas até agora, para criarmos uma figura complexa. Abaixo temos as linhas para o programa zoog01.pde, disponível no livro Shiffiman, 2007, página 27. À direita temos a figura gerada.

18

Programa zoog01.pde

size(200,200); // Set the size of the window background(255); // Draw a white background smooth();

// Set ellipses and rects to CENTER mode ellipseMode(CENTER);

rectMode(CENTER); // Draw Zoog’s body stroke(0);

fill(150);

rect(100,100,20,100); // Draw Zoog’s head 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);

(19)

A função size(x,y) especifica o tamanho da janela onde será desenhada a figura, no caso uma janela de 200 x 200 pixels. Se não for especificada cria-se uma janela de 100 x 100 pixels.

19

size(200,200); // Set the size of the window

background(255); // Draw a white background smooth();

fill(150);

line(90,150,80,160); line(110,150,120,160);

(20)

A função background(x) insere uma cor de fundo, no caso usamos o código com variação de preto background(0) até branco background(255). Números entre 0 e 255 indicam cinza. Veja que // é usado para comentários.

20

size(200,200); // Set the size of the window background(255); // Draw a white background

smooth();

fill(150);

line(90,150,80,160); line(110,150,120,160);

(21)

A função smooth() suaviza a linhas desenhadas.

21

fill(150);

line(90,150,80,160); line(110,150,120,160);

(22)

A ellipseMode(CENTER) estabelece o modo de desenho da elipse, com os primeiros números da função ellipse(x,y,largura,altura) sendo usados para especificar o centro da elipse.

22

// Set ellipses and rects to CENTER mode

ellipseMode(CENTER);

fill(150);

line(90,150,80,160); line(110,150,120,160);

(23)

Da mesma forma, rectMode(CENTER); estabelece o modo de desenho do retângulo, com os primeiros números da função rect(x,y,largura,altura) sendo usados para especificar o centro do retângulo em pixels.

23

ellipseMode(CENTER); rectMode(CENTER);

// Draw Zoog’s body stroke(0);

fill(150);

line(90,150,80,160); line(110,150,120,160);

(24)

A função stroke(0) especifica que as linhas terão a cor mostrada como argumento da função, no caso, cor “0”, preta.

24

// Draw Zoog’s body

stroke(0);

fill(150);

line(90,150,80,160); line(110,150,120,160);

(25)

A função fill(150) especifica que as figura terão como preenchimento a cor mostrada como argumento da função, no caso, cor “150”, cinza.

25

stroke(0); fill(150);

line(90,150,80,160); line(110,150,120,160);

(26)

A função rect(100,100,20,100) desenha um retângulo com centro em 100 e 100 pixels, largura 20 e altura 100 pixels. Como usamos antes a função fill(150), o retângulo terá preenchimento cinza.

26

rect(100,100,20,100);

// Draw Zoog’s head fill(255);

line(90,150,80,160); line(110,150,120,160);

(27)

Usamos novamente a função fill(255), só que agora com argumento 255, o que indica um preenchimento branco.

27

rect(100,100,20,100);

// Draw Zoog’s head

fill(255);

line(90,150,80,160); line(110,150,120,160);

(28)

A função ellipse(100,70,60,60) desenha uma elipse com centro em coordenadas 100 e 70 pixels, com largura e altura iguais à 60 pixels.

28

rect(100,100,20,100);

fill(255);

ellipse(100,70,60,60);

// Draw Zoog’s eyes fill(0);

line(90,150,80,160); line(110,150,120,160);

(29)

Voltamos a mudar a cor de preenchimento, com a função fill(0), que fará as próximas figuras terem preenchimento preto.

29

rect(100,100,20,100);

fill(255);

ellipse(100,70,60,60);

// Draw Zoog’s eyes

fill(0);

line(90,150,80,160); line(110,150,120,160);

(30)

Desenhamos os olhos do Zoog com duas elipses, como indicado abaixo.

30

rect(100,100,20,100);

fill(255);

ellipse(100,70,60,60);

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

(31)

Por último, desenhamos as pernas do Zoog, com a função line().

31

rect(100,100,20,100);

fill(255);

ellipse(100,70,60,60);

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

(32)

Exercício de programação: Pesquise no google por desenhos de “lady bug” e escolha um simples o suficiente para ser desenhado com Processing. Use as formas básicas vistas.

32

(33)

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

33

Referências