Introdução ao Processing

Introdução ao Processing

Processing é uma linguagem de programação de código aberto e ambiente de desenvolvimento integrado, construído para as artes eletrônicas e comunidades de projetos visuais com o objetivo de ensinar noções básicas de programação de computador em um contexto visual e para servir como base para cadernos eletrônicos.

Desde o início, o Processing foi projetado para ser o mais simples possível para iniciantes, sabendo que sua simplicidade também beneficiaria usuários mais experientes. Ele foi inspirado pelo imediatismo de linguagens anteriores como BASIC e Logo, bem como nossas experiências aprendendo a codificar e ensinando codificação para uma ampla gama de origens. Os mesmos elementos ensinados em uma aula de ciência da computação do ensino médio ou universitário são ensinados através do Processing, mas com uma ênfase diferente. Com seu foco na criação de mídia visual e interativa, os alunos novatos em programação acham satisfatório fazer algo aparecer em sua tela momentos depois de usar o software. 

Começando

Comece visitando https://processing.org/download e selecionando a versão para Mac, Windows ou Linux, dependendo da máquina que você possui. A instalação em cada máquina é simples:

• No Windows, você terá um arquivo .zip. Clique duas vezes nele e arraste a pasta para um local no disco rígido. Pode ser Arquivos de Programas ou simplesmente a área de trabalho, mas o importante é que a pasta de processamento seja retirada desse arquivo .zip. Em seguida, clique duas vezes em processing.exe para iniciar.

• A versão do Mac OS X também é um arquivo .zip. Clique duas vezes nele e arraste o ícone Processing para a pasta Applications. Se você estiver usando a máquina de outra pessoa e não puder modificar a pasta Aplicativos, basta arrastar o aplicativo para a área de trabalho. Em seguida, clique duas vezes no ícone Processing para iniciar.

• A versão do Linux é um arquivo .tar.gz, que deve ser familiar para a maioria dos usuários do Linux. Baixe o arquivo para o seu diretório inicial, abra uma janela de terminal e digite:

tar xvfz processing-xxxx.tgz

(Substitua xxxxpelo restante do nome do arquivo, que é o número da versão.) Isso criará uma pasta chamada processing-2.0ou algo semelhante. Em seguida, mude para esse diretório:

cd processing-xxxx

e execute-o:

./processing

Com alguma sorte, a janela principal de processamento agora estará visível. A configuração de todos é diferente, portanto, se o programa não foi iniciado ou se você estiver travado, visite a página de solução de problemas para possíveis soluções.

Seu Primeiro Programa

Agora você está executando o Processing Development Environment (ou PDE). Não há muito para isso; a grande área é o Editor de Texto, e há uma fileira de botões na parte superior; esta é a barra de ferramentas. Abaixo do editor está a Área de Mensagens e abaixo dela está o Console. A Área de Mensagem é usada para mensagens de uma linha e o Console é usado para mais detalhes técnicos.

No editor, digite o seguinte:

 size(400, 400);
 ellipse(50, 50, 80, 80);

Em size(400, 400); definimos a dimensão da largura e altura da janela de exibição em unidades de pixels. A linha de código ellipse(50, 50, 80, 80); significa "desenhe uma elipse, com o centro 50 pixels acima da esquerda e 50 pixels abaixo do topo, com largura e altura de 80 pixels".

Clique no botão Executar (botão triângulo na barra de ferramentas).

Se você digitou tudo corretamente, verá um círculo na tela. Se você não digitou corretamente, a Área de Mensagens ficará vermelha e reclamará de um erro. Se isso acontecer, certifique-se de ter copiado o código de exemplo exatamente: os números devem estar entre parênteses e ter vírgulas entre cada um deles, e a linha deve terminar com um ponto e vírgula.

Exemplos

 void setup() {
   
    size(480, 120);
 
}

 
void draw() {
   
    if (mousePressed) {
     
        fill(0);
   
    } else {
     
        fill(255);
   
    }
   
    ellipse(mouseX, mouseY, 80, 80);

}

Este programa cria uma janela com 480 pixels de largura e 120 pixels de altura e começa a desenhar círculos brancos na posição do mouse. Quando um botão do mouse é pressionado, a cor do círculo muda para preto.

Explicarei mais sobre os elementos deste programa em detalhes mais tarde. Por enquanto, execute o código, mova o mouse e clique para ver o que ele faz. Enquanto o esboço estiver em execução, o botão Executar mudará de cor. Você pode clicar no ícone quadrado “parar” para interromper o esboço.

Árvore Recursiva

Renderiza uma estrutura simples semelhante a uma árvore por meio de recursão. O ângulo de ramificação é calculado em função da localização horizontal do mouse. Mova o mouse para a esquerda e para a direita para alterar o ângulo.

 float theta;   


 void setup() {
   
   size(640, 360);
 
 }

 
 void draw() {
 

   background(0);
  	
   frameRate(30);
  	
   stroke(255);
  

   // Vamos escolher um ângulo de 0 a 90 graus com base na posição do mouse
  	
   float a = (mouseX / (float) width) * 90f;
  	
   // Converte para radianos
  	
   theta = radians(a);  
  	
   // Inicia a árvore na parte inferior da tela
  	
   translate(width/2,height);
 // Desenha uma linha de 120 pixels
  	
   line(0,0,0,-120);
          // Move para o final dessa linha
  	
   translate(0,-120);
         // Inicia a ramificação recursiva!
  	
   branch(120);

 }

 

   void branch(float h) {
  	 
     // Cada ramo terá 2/3 do tamanho do anterior
  	 
     h *= 0.66;
  
 
     // Todas as funções recursivas devem ter uma condição de saída!!!!
 
     // Aqui, o nosso é quando o comprimento do ramo é de 2 pixels ou menos
   
     if (h > 2) {
     
        pushMatrix();      // Salve o estado atual da transformação (ou seja, onde estamos agora)
     
        rotate(theta);     // Gira em theta
     
        line(0, 0, 0, -h); // Desenhe o galho
     
        translate(0, -h);  // Mover para o final do ramo
     
        branch(h);         // Ok, agora me chamo para desenhar dois novos galhos!!
     
        popMatrix();       // Sempre que voltamos aqui, "pop" para restaurar o estado anterior da matriz
        
 
        //Repita a mesma coisa, apenas ramificando para a "esquerda" desta vez!
     
        pushMatrix();
     
        rotate(-theta);
     
        line(0, 0, 0, -h);
     
        translate(0, -h);
     
        branch(h);
     
        popMatrix();
   

    }
 
 }