Processing – Introdução a Programação

Voltar

Introdução

Vamos explorar mais sobre como usar o processing de forma produtiva e aprender um pouco sobre linguagens de programação.

Criar um programa é como criar uma receita gastronômica. Não basta apenas ter os ingredientes, mas é preciso saber em qual ordem e através de quais processos devemos mistura-los. Caso siga a receita na ordem incorreta não irá atingir o resultado esperado.

boloDeCenoura

boloDeCenoura

Repare o tópico “Modo de Fazer” e veja como as instruções estão numeradas. Ao observar as etapas está implícito o que deve ser feito e em que ordem. Mas existem outros tipos de instruções:

Lego

Lego

Novamente a sequencia de passos numerados é fundamental para atingir o resultado esperado. Explicando a montagem do projeto dessa forma é possível atingir o maior publico possível, independente da língua. O mesmo vale para musica, matemática e outras ciências.

musica

musica

Pitagoras

Pitagoras

 

 

 

 

 

 

 

Os programas de computador não estão muito longe. O computador possui sua própria linguagem, e através dela podemos passar instruções em sequencia para fazer “coisas”. O grupo “coisas” é bem grande, apesar da linguagem do computador ser bem simples. Podemos resolver problemas de engenharia, matemática, física, jogos, musica, videos e qualquer dado que possa ser descrito de forma digital. Bem, basicamente tudo…

Por enquanto vamos nos ater a “coisas” simples para entender melhor essa linguagem do computador. Quanto melhor dominar os conceitos básicos, mais coisas poderá fazer. Como qualquer linguagem escrita, falada ou outra, os programas são escritos com palavras (ou instruções). Para ele entender essas instruções precisa-se escrever corretamente, muitas vezes traduzir o que pensa não em português, mas em código. Sendo a palavra código aqui um termo comum utilizado por programadores para se referir a qualquer linguagem. Muitas vezes esse código lembra expressões matemáticas, pois veremos repetidamente o símbolo de = (igual) que significa em muitas linguagens atribuição. Atribuir é uma ação que envolve pegar o que está a direita do símbolo = e salvar no local indicado a esquerda. Por exemplo: y = 5 seria salve 5 no local chamado y.

Atribuição é processo de pegar uma informação qualquer e salva-la em um local da memória do seu computador. Esse local recebe um nome e poderá no futuro ser consultado  ou alterado quando necessário. Geralmente esse locais são chamados de variáveis. Essas variáveis são parecidas com aquelas que utilizamos na matemática para expressar polinómios, fórmulas e funções. Toda variável possui um tipo e em muitas linguagens é importante dizer qual tipo é de forma explicita. No momento vamos focar em dois tipos importantes: integer e floats (inteiros e números de ponto flutuante). Classificar o tipo da variável é importante por vários motivos: saber como melhor armazenar e ler corretamente os dados. Descrever o tipo é simples e basta ser feito apenas um vez por variável (no momento em que ela é citada a primeira vez no código). Por exemplo: int x seria reserve um espaço na memória chamado x que irá armazenar números inteiros.

Agora vamos juntar esses 3 conceitos (tipos, variáveis e atribuição) apresentados e ver como isso funciona na prática. Vamos dizer que tenho um valor que preciso armazenar, nesse caso 10. Observando o valor, vejo que é um numero inteiro (sem virgula). Já tenho o dado e tipo! Agora preciso apelidar um espaço de memória para armazenar esse valor. Vamos chama-lo de X. Nesse caso escrevo:

int x = 10;

Primeiro repare em um novo símbolo que apareceu: o ponto e virgula ; no final da linha. Esse ; simboliza o fim de uma instrução. Assim qualquer texto posterior será uma nova instrução e não parte da antiga. Voltando ao significado da linha de código: Primeiro o tipo, depois o nome, seguindo o símbolo de atribuição e por ultimo o valor que desejo salvar. Então a frase diz: “Reserve um espaço de memória para números inteiros chamado x e atribua o valor 10 a esse espaço”. Vamos explorar essa idéia:

1. int x = 2;
2. int y = 3;
3. int z = x + y;

Qual será o valor de ? Se você conhece um pouco de matemática sabe que + é símbolo da soma. Sendo assim se x é 2, y é 3, então x+y será 5. Vamos ler a sequencia toda de instruções:

1. Reserve um espaço para inteiros chamado x e insira o valor 2.
2. Reserve um espaço para inteiros chamado y e insira o valor 3.
3. Reserve um espaço para inteiros chamado z e insira o valor de x somado ao valor y.

A operação de atribuição é feita em dois tempos. Primeiro se resolve tudo que está do lado direito do símbolo de igual e depois, qualquer que seja o resultado é salvo no espaço indicado ao lado esquerdo. É importante que x e y sejam criados e atribuídos antes z, senão o computador não teria como calcular z. Seria como se os ingredientes da receita estejam faltando, ou sendo executados na ordem incorreta. Até agora passamos por vários conceitos básicos de programação. Para completar esse assunto coloco abaixo os símbolos para as quatro operações matemáticas:

+  Soma                 – Subtração
* Multiplicação    / Divisão

Normalmente executar um código como esse não irá trazer nenhum resultado em tela. Portando aproveito para mostra um comando útil e que irá servir para testar seu código no processing.

print(______);

A função de print( ) escreve para a área do console, ou seja, o rectângulo preto na base do ambiente de processamento. Esta função é útil para olhar para os dados que um programa está produzindo. (Tradução livre a partir do Processing Reference)

Ao escrever a palavra print e colocar um valor ou variável entre os parênteses o mesmo será exibido na tela de console do processing (A barra preta na base da janela). Assim experimente abrir o processing e digitar o código a seguir:

int x = 2;
int y = 3;
int z = x + y;
print(z);

Screen Shot 2015-06-19 at 00.28.22

Experimente alterar os valores de x, y e a operação entre eles.

Parabéns você estudou conceitos de tipos de variáveis, declaração de variáveis, atribuição de variáveis e a representação das 4 operações matemáticas básicas. Além disso conheceu a função print().


Aproveite agora para fazer um rápido exercício: Imagine a equação reduzida da reta y = ax + b. Vamos criar um programa que calcule y baseado em valores de a, x e b. Para isso vamos começar declarando todas as 4 variáveis envolvidas no problema com seus tipos correspondentes. Assim:

float y; // vamos descobrir
float x = 0; // Iniciar com zero
float a = 0.5; // Um valor arbitrário de coeficiente.
float b = 0; // Vamos manter b = 0 para simplificar a reta.

y = ax + b;
// é uma expressão válida que irá gerar resultado…
// pois todas as variáveis envolvidas possuem
// declaração e atribuição. Exceto o y que será
// atribuído após a equação ser processada.

print(y); // Irá mostrar o valor de y calculado no console.

Agora para tornar esse código mais interessante vamos usar a janela: no inicio do programa acrescente antes da linha float y; o código size(400,400); Assim

size(400,400);
float y;
… // resto do programa…

Agora após a linha y = ax + b; acrescente o comando de desenho como mostrado abaixo:

… // código anterior
y = ax + b;
ellipse(x,y,30,30); // Irá desenhar um elipse na posição x,y de tamanho 30,30.

O resultado será um círculo na posição 0,0 (canto superior esquerdo da janela). Agora experimento alterar o valor de x, variando de 0 até 400 e observe como o círculo se comporta. Ele deve se deslocar pela janela no traçado da linha.