Processing - Textos e Imagens
Autor: EGDA | Publicado: 2011-01-24T19:35:00-08:00

olá aqui veremos como "desenhar" imagens já salvas em arquivo como png, jpg etc e também como colocar texto na sua aplicação processing. Como vocês já devem ter reparado, desenvolver uma aplicação nesta linguagem, é diferente de desenvolver aplicativos em IDE's como Visual Basic, Delphi dentre outras, apesar do resultado possa ser bem parecido.

Normalmente linguagens como o Delphi por exemplo, a IDE já faz praticamente todo o trabalho de codificação dos objetos apresentados na tela, o que não acontece no processing. Então para começar crie um novo projeto e salve no local desejado. Perceba que você não salva um arquivo apenas, o Processing cria uma pasta com o nome que você digitou, é dentro desta pasta que criaremos uma pasta com o nome "data" ela servirá para guardar os arquivos que você utilizará no programa.

Criando uma Fonte .vlw 

No menu do Processing, vá em Tools&gt;Create Font. Você deverá ver uma janela como esta:

Ai você deverá escolher exatamente como sua fonte deve parecer(exceto a cor) pois alterar o tamanho da fonte através do código resultará em perda de qualidade da imagem, você terá que criar um arquivo para cada tamanho que for usar, use nomes fáceis para facilitar o código.



Caso queira usar caracteres especiais clique no botão "Caracters" e selecione os tipos desejados, ou apenas selecione "All Caracters".

Para carregar uma fonte você deverá primeiro criar um objeto PFont, e carregá-lo com a fonte que você criou utilizando o Processing. 

Vamos ao Código:

void setup() {
&nbsp;&nbsp;background(255);//Cor de fundo 255,255,255
&nbsp;&nbsp;size(200,100);  //tamanho da janela 200x100
&nbsp;&nbsp;PFont font1; //Para começar crie um objeto PFont
&nbsp;&nbsp;font1&nbsp;=&nbsp;loadFont("fonte.vlw"); //Carrega o arquivo de fonte
&nbsp;&nbsp;textFont(font1); //Seta a fonte a ser usada
&nbsp;&nbsp;fill(0,0,255);   //Seta a cor a ser usada
&nbsp;&nbsp;text("Hello Strings!",10,50);  //Escreve o texto
}&nbsp;E o resultado é:
Caso tenha tido alguma dúvida durante o processo, sinta-se a vontade para perguntar.

Utilizando imagens
Nosso aplicativo com texto é extremamente simples ele nem ao menos precisou entrar no loop, a tela foi desenhada apenas uma vez e conseguimos o que queriamos. Para exemplificar o uso de imagens usarei algo pouco mais complexo.

Para começar, eu criei estas duas imagens que serão utilizadas no exemplo podem baixar e usá-las ou use qualquer outro ( .gif, .jpg, .tga, .png).
OBS.: As imagens devem está dentro da pasta "data" dentro do seu projeto.
Assim como o texto, as imagens também precisam ser previamente declaradas e carregadas e a forma de se fazer é praticamente a mesma. Mas para imagens, utilizaremos o objeto PImage e o metodo loadImage().
Organizando melhor o código ele ficou assim:

PFont font1; //Para começar crie um objeto PFont
PImage back; //Objeto PImage para nossa imagem de fundo

void setup() {
&nbsp;&nbsp;font1&nbsp;=&nbsp;loadFont("fonte.vlw"); //Carrega o arquivo de fonte
&nbsp;&nbsp;back&nbsp;=&nbsp;loadImage("back.png"); //carrega a imagem
&nbsp;&nbsp;size(240,320);  //tamanho da janela 240x320
&nbsp;&nbsp;image(back,0,0); //Desenha a imagem na posição 0x0
&nbsp;&nbsp;textFont(font1); //Seta a fonte a ser usada
&nbsp;&nbsp;fill(0,0,0);   //Seta a cor a ser usada
&nbsp;&nbsp;text("Hello Images!",60,20);  //Escreve o texto
}
Perceba que não usei background pois a imagem utilizada supostamente é o nosso background aqui. Agora para deixar as coisas mais interessantes vamos adicionar a outra imagem, e vamos fazer ela acompanhar a posição do mouse. Nosso código deveria ficar assim:

PFont font1; //Para começar crie um objeto PFont
PImage back; //Objeto PImage para nossa imagem de fundo
PImage pointer;

void setup() {
&nbsp;&nbsp;font1&nbsp;=&nbsp;loadFont("fonte.vlw"); //Carrega o arquivo de fonte
&nbsp;&nbsp;back&nbsp;=&nbsp;loadImage("back.png"); //carrega a imagem
&nbsp;&nbsp;pointer&nbsp;=&nbsp;loadImage("pointer.png");
&nbsp;&nbsp;size(240,320);  //tamanho da janela 240x320
&nbsp;&nbsp;smooth();
&nbsp;&nbsp;image(back,0,0); //Desenha a imagem na posição 0x0
&nbsp;&nbsp;textFont(font1); //Seta a fonte a ser usada
&nbsp;&nbsp;fill(0,0,0);   //Seta a cor a ser usada
&nbsp;&nbsp;text("Hello Images!",60,20);  //Escreve o texto
}

void draw(){
imageMode(CENTER);
image(pointer,mouseX,mouseY);
}

Compile e rode este código, confira cada letra, use nomes fáceis para os arquivos, é comum erros por tentar carregar um arquivo com nome errado, ou que está fora do lugar.
&nbsp;Interessante!! Mas não é exatamente o que eu queria...
Para quem entendeu o que está acontecendo ótimo você pode pular alguns parágrafos, se não preste bastante atenção nesta parte que é importante.

Como ja foi dito anteriormente, o Processing gera sua aplicação através de desenhos na tela, ele foi feito para as mais diversas aplicações possiveis, desde programas mais comuns como oque utilizamos normalmente, a verdadeiras obras de arte em que sua janela é o quadro. Por este motivo, coisas básicas como limpar a tela a cada ciclo é algo que devemos fazer manualmente.

COMO?!?!?!?!?!?!

Bem simples, vamos ver o código mais de perto.

PFont font1; //Para começar crie um objeto PFont
PImage back; //Objeto PImage para nossa imagem de fundo
PImage pointer;

void setup() {
&nbsp;&nbsp;font1&nbsp;=&nbsp;loadFont("fonte.vlw"); //Carrega o arquivo de fonte
&nbsp;&nbsp;back&nbsp;=&nbsp;loadImage("back.png"); //carrega a imagem
&nbsp;&nbsp;pointer&nbsp;=&nbsp;loadImage("pointer.png");
&nbsp;&nbsp;size(240,320);  //tamanho da janela 240x320
&nbsp;&nbsp;smooth();
&nbsp;&nbsp;image(back,0,0); //Desenha a imagem na posição 0x0
&nbsp;&nbsp;textFont(font1); //Seta a fonte a ser usada
&nbsp;&nbsp;fill(0,0,0);   //Seta a cor a ser usada
&nbsp;&nbsp;text("Hello Images!",60,20);  //Escreve o texto
}

void draw(){
imageMode(CENTER);
image(pointer,mouseX,mouseY);
}Os trechos destacados acima são as 3 funções que desenham nossa janela, primeiro é desenhado o fundo, depois o texto e por ultimo a espiral na posição do mouse, mas como vocês viram, ele desenha infinitas espirais a cada nova posição do mouse (afinal é pra isso que servem os loops não?), mas eu quero apenas UMA espiral movendo-se na tela, e não um rastro de infinitas...

Para isso basta transferir o código que desenha o fundo e o texto para o loop e fazer alguns ajustes como:
Limpar a tela para que a imagem atual nao se misture com a anterior.
Caso utilize mais de um modo de desenho, por exemplo imageMode(), não deixe de colocar, pois onde não houver explicitamente o modo, será usado o ultimo modo, que pode não ser interessante já que estamos dentro de um loop.
Resultado: 
PFont font1; //Para começar crie um objeto PFont
PImage back; //Objeto PImage para nossa imagem de fundo
PImage pointer;

void setup() {
&nbsp;&nbsp;font1&nbsp;=&nbsp;loadFont("fonte.vlw"); //Carrega o arquivo de fonte
&nbsp;&nbsp;back&nbsp;=&nbsp;loadImage("back.png"); //carrega a imagem
&nbsp;&nbsp;pointer&nbsp;=&nbsp;loadImage("pointer.png");
&nbsp;&nbsp;size(240,320);  //tamanho da janela 240x320
&nbsp;&nbsp;smooth();
}

void draw() {
&nbsp;&nbsp;background(255);//Pinta toda a tela de branco&nbsp;   imageMode(CORNER);
&nbsp;&nbsp;image(back,0,0); //Desenha a imagem na posição 0x0
&nbsp;&nbsp;textFont(font1); //Seta a fonte a ser usada
&nbsp;&nbsp;fill(0,0,0);   //Seta a cor a ser usada
&nbsp;&nbsp;text("Hello Images!",60,20);  //Escreve o texto
&nbsp;&nbsp;imageMode(CENTER);
&nbsp;&nbsp;image(pointer,mouseX,mouseY);
}