1.1    Sobre o Processing

  Processing é um ambiente de programação simples que foi criado para tornar mais fácil para desenvolver aplicações visualmente orientados, com ênfase na animação.  Originalmente construído como uma extensão específica de domínio para Java voltado para artistas e designers. O procesing é baseado em Java, mas porque os elementos do programa em processamento são bastante simples, você pode aprender a usá-lo mesmo se você não sabe qualquer Java. Se você estiver familiarizado com Java, é melhor esquecer que Processing tem nada a ver com Java por um tempo, até você pegar o jeito de como a API funciona.        

1.2    Instalando o Procesing

1- Acessar o site http://processing.org/download   2- Clicar em ‘No Donation’ (se não desejar doar) e clicar em Download 3 – Será aberto a página para a seleção do sistema operacional após a seleção se iniciará o download.     No Windows, você terá um arquivo .zip. Clique duas vezes nele e arraste a pasta dentro para um local no seu disco rígido. Em seguida, dê um duplo clique para iniciar processing.exe.   A versão Linux é um arquivo .tar.gz,. Baixe o arquivo em seu diretório pessoal, em seguida, abra uma janela de terminal e digite: tar xvfz processing-xxxx.tgz. Isto irá criar uma pasta chamada processing. Em seguida, mude para o diretório: cd processing-xxxx and run it: ./processing     A versão Mac OS X também é um arquivo .zip. Clique duas vezes nele e arraste o ícone de processamento para a pasta Aplicativos. Em seguida, dê um duplo clique no ícone para iniciar o processing.  

1.3    Primeiro desenvolvimento

  Abrindo o programa podemos perceber uma grande área de editor de texto. Abaixo do editor é a área da mensagem, e abaixo que é o Console. A área de mensagem é usado para mensagens de uma linha, e o Console é usado para mais detalhes técnicos.   No editor, digite o seguinte: ellipse(50, 40, 80, 90); Esta linha de código significa "desenhar uma elipse, com o centro 50 pixels da esquerda e 40 pixels de cima para baixo, com uma largura 80 e uma altura de 90 pixels." Clique no botão Run, que se parece com isso:   Se você digitar o código com erro, a área da mensagem ficará vermelho e exibindo o erro. Se isso ocorrer deve verificar se o código está correto os números devem estar contidos entre parênteses e ter vírgulas entre cada um deles, e a linha deve terminar com um ponto e vírgula.   Uma das coisas mais difíceis sobre como começar com programação é que você tem que ser muito específico sobre a sintaxe. O software de processamento nem sempre é inteligente o suficiente para saber o que você quer dizer, e pode ser bastante exigente com a colocação de pontuação. Você vai se acostumar com isso com um pouco de prática.    

1.4    Animação

    Este Código cria uma janela que é de 400 pixels de largura e 300 pixels de altura, e depois começa a desenhar círculos vermelhos na posição do mouse. Quando clica com o botão do mouse, a cor círculo muda para preto.     void setup() {size(400, 300);} void draw() {if (mousePressed) {fill(0);} else {fill(255,0,0);}   ellipse (mouseX, mouseY, 80, 80);}       Analisado o código:     “void” = Palavra-chave usada indicam que uma função não retorna nenhum valor. Cada função ou deve retornar um valor de um tipo de dados específico ou usar a palavra-chave void para especificar que não retorna nada.   “setup()” = é executado uma vez, quando o programa começar. É usado para definir propriedades iniciais, tais como tamanho da tela e para carregar a mídia, tais como imagens e fontes como o programa é iniciado. Só pode haver uma função setup () para cada programa e não deve ser chamado novamente após sua execução inicial. Se o esboço é uma dimensão diferente do que o padrão, o tamanho () função de função ou fullScreen () deve ser a primeira linha no setup (). “{size(400, 300);}” = Tamanho da tela.   “daw” = Chamado diretamente após setup (), a função draw () executa continuamente as linhas de código contido dentro de seu bloco até que o programa está parado ou noLoop () é chamado. Ele sempre deve ser controlado com noLoop (), redesenhar () e loop (). Se noLoop () é usado para parar o código em draw () de executar, então redesenhar () fará com que o código dentro de draw () a ser executada uma única vez, e loop () fará com que o código dentro de draw () para retomar a executar continuamente. O número de vezes desenhar () executa em cada segundo pode ser controlada com a função framerate (). Só pode haver uma função para cada esboço, e desenhar () deve existir se você deseja que o código seja executado de forma contínua, ou para processar eventos como mousePressed (). Você pode ter uma chamada vazia para desenhar () em seu programa, como exibido no código acima.   “if” = Permite que o programa fazer uma decisão sobre qual código para executar. Se o código for inserido como “true” (verdadeiro), as declarações fechados dentro do bloco são executados e se o teste for avaliada como falsa as declarações não são executados.   “mousePressed” = A função mousePressed () é chamado uma vez depois de cada vez que um botão do mouse é pressionado. A variável MouseButton (ver a entrada de referência relacionado) pode ser usado para determinar qual tecla foi pressionada. Mouse e eventos de teclado só funcionam quando um programa tem “draw ()”. Sem “draw ()”, o código é executado apenas uma vez e depois pára o atendimento de eventos.   “fill” = Define a cor usada para preencher formas.   Por exemplo, se você executar fill (204, 102, 0),todas as formas posteriores será preenchido com laranja. Esta cor é ou especificados em termos de RGB ou HSB de cor dependendo do colorMode actual (). (O espaço de cor padrão é RGB, com cada valor no intervalo de 0 a 255.) Cores básicas:   Branco - RGB (255,255,255); Azul - RGB (0,0,255); Vermelho - RGB (255,0,0); Verde - RGB (0,255,0); Amarelo - RGB (255,255,0); Rosa - RGB (255,0,255); Azul Claro - RGB (0,255,255); Preto - RGB (0,0,0).     “Else” = Estende a se estrutura permitindo que o programa de escolher entre dois ou mais blocos de código. Ele especifica um bloco de código para executar quando a expressão se é falsa.   “Elipse” = Desenha uma elipse (oval) para a tela. Uma elipse com igual largura e altura é um círculo. Por padrão, os dois primeiros parâmetros definir o local, e os terceiro e quarto parâmetros definir a largura e a altura da forma.   “mouseX” = Coordenada inicial do Mouse   “mouseY” = Coordenada final do Mouse          

1.5    Animação de Movimentação de Mouse

    Este Código cria uma janela que é de 700 pixels de largura e 400 pixels de altura, quando o mouse é movimentado ele altera sua seu tamanho.   void setup() { size(700, 400); noStroke(); rectMode(CENTER); } void draw() { background(0); fill(255, 0,0); rect(mouseX, height/2, mouseY/2+10, mouseY/2+10); fill(0,0,255); int quadradoX = width-mouseX; int quadradoY = height-mouseY; rect(quadradoX, height/2, (quadradoY/2)+10, (quadradoY/2)+10); }                

1.6    Exemplo de Colisão

  Abaixo está um código complexo de colisão de objetos com alteração de posição, a ideia é alterar o código colocando \\ para colocar comentários para estudo.