azevedolab.net 2015 Dr. Walter F. de Azevedo Jr. 1
Ementa 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
Introdução ao Processing 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 Página de entrada do site da linguagem Processing. tem sido usada em diversas áreas, Disponível em: < http://processing.org > inclusive para simulação de sistemas Acesso em: 23 de agosto de 2015. naturais. 3
Introdução ao Processing 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. Página de entrada do site da linguagem Processing. Disponível em: < http://processing.org > Acesso em: 23 de agosto de 2015. 4
Introdução ao Processing 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:///download/ detalhes de como proceder a instalação. Há versões para Windows, Mac OS X e Linux. Página de entrada do site da linguagem Processing. Disponível em: < http://processing.org > Acesso em: 23 de agosto de 2015. 5
Introdução ao Processing 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. Página de entrada do site da linguagem Processing. Disponível em: < http://processing.org > Acesso em: 23 de agosto de 2015. 6
Introdução ao Processing A janela do PDE está mostrada abaixo, com suas funcionalidades. Janela do PDE para criarmos sketchs ( códigos em Processing). 7
Função ellipse() Clique na janela branca do PDE e digite: ellipse(50,50,80,60); 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
Função ellipse() 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. ellipse(50,50,80,60); Altura da elipse em pixels Largura da elipse em pixels Coordenada y do centro da elipse em pixels Coordenada x do centro da elipse em pixels 9
Programa make_circles.pde 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. void setup(){ size(480,120); smooth(); } void draw(){ if (mousepressed) { fill(0); } else{ fill(255); } ellipse(mousex,mousey,80,80); } 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 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
Funções para Formas Básicas point(50,50); Coordenada y do ponto em pixels Coordenada x do ponto em pixels 12
Funções para Formas Básicas line(50,50,80,80); Coordenada y do final da linha em pixels Coordenada x do final da linha em pixels Coordenada y do início da linha em pixels Coordenada x do início da linha em pixels 13
Funções para Formas Básicas triangle(10,10,90,10,50,90); Coordenada y do vértice 3 do triângulo em pixels Coordenada x do vértice 3 do triângulo em pixels Coordenada y do vértice 2 do triângulo em pixels Coordenada x do vértice 2 do triângulo em pixels Coordenada y do vértice 1 do triângulo em pixels Coordenada x do vértice 1 do triângulo em pixels 14
Funções para Formas Básicas quad(10,10,90,10,90,90,10,90); Coordenada y do vértice 3 do triângulo em pixels Coordenada x do vértice 3 do triângulo em pixels Coordenada y do vértice 2 do triângulo em pixels Coordenada x do vértice 2 do triângulo em pixels Coordenada y do vértice 1 do triângulo em pixels Coordenada x do vértice 1 do triângulo em pixels 15
Funções para Formas Básicas rect(10,20,80,60); Altura do retângulo em pixels Largura do retângulo em pixels Coordenada y do vértice à esquerda acima do retângulo em pixels Coordenada x do vértice à esquerda acima do retângulo em pixels 16
Funções para Formas Básicas arc(50,50,80,80,0,1.5*pi); Posição final do arco em radianos (sentido horário) Posição inicial do arco em radianos Altura em pixels Largura em pixels Coordenada y do centro em pixels Coordenada x do centro em pixels 17
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 18
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 19
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 20
Programa zoog01.pde A função smooth() suaviza a linhas desenhadas. 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 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 line(90,150,80,160); line(110,150,120,160); 21
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 22
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 23
Programa zoog01.pde A função stroke(0) especifica que as linhas terão a cor mostrada como argumento da função, no caso, cor 0, preta. 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 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 line(90,150,80,160); line(110,150,120,160); 24
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 25
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 26
Programa zoog01.pde Usamos novamente a função fill(255), só que agora com argumento 255, o que indica um preenchimento branco. 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 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 line(90,150,80,160); line(110,150,120,160); 27
Programa zoog01.pde 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. 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 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 line(90,150,80,160); line(110,150,120,160); 28
Programa zoog01.pde Voltamos a mudar a cor de preenchimento, com a função fill(0), que fará as próximas figuras terem preenchimento preto. 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 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 line(90,150,80,160); line(110,150,120,160); 29
Programa zoog01.pde Desenhamos os olhos do Zoog com duas elipses, como indicado abaixo. 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 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 line(90,150,80,160); line(110,150,120,160); 30
Programa zoog01.pde Por último, desenhamos as pernas do Zoog, com a função line(). 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 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 line(90,150,80,160); line(110,150,120,160); 31
Programa zoog01.pde 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
Referências -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