Processing - Textos e Imagens

Vamos Tratar Aqui sobre Processing e Aplicações Visuais Simples.
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>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() {
  background(255);//Cor de fundo 255,255,255
  size(200,100);  //tamanho da janela 200x100
  PFont font1; //Para começar crie um objeto PFont
  font1 = loadFont("fonte.vlw"); //Carrega o arquivo de fonte
  textFont(font1); //Seta a fonte a ser usada
  fill(0,0,255);   //Seta a cor a ser usada
  text("Hello Strings!",10,50);  //Escreve o texto
} 

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() {
  font1 = loadFont("fonte.vlw"); //Carrega o arquivo de fonte
  back = loadImage("back.png"); //carrega a imagem
  size(240,320);  //tamanho da janela 240x320
  image(back,0,0); //Desenha a imagem na posição 0x0
  textFont(font1); //Seta a fonte a ser usada
  fill(0,0,0);   //Seta a cor a ser usada
  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() {
  font1 = loadFont("fonte.vlw"); //Carrega o arquivo de fonte
  back = loadImage("back.png"); //carrega a imagem
  pointer = loadImage("pointer.png");
  size(240,320);  //tamanho da janela 240x320
  smooth();
  image(back,0,0); //Desenha a imagem na posição 0x0
  textFont(font1); //Seta a fonte a ser usada
  fill(0,0,0);   //Seta a cor a ser usada
  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.

 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() {
  font1 = loadFont("fonte.vlw"); //Carrega o arquivo de fonte
  back = loadImage("back.png"); //carrega a imagem
  pointer = loadImage("pointer.png");
  size(240,320);  //tamanho da janela 240x320
  smooth();
  image(back,0,0); //Desenha a imagem na posição 0x0
  textFont(font1); //Seta a fonte a ser usada
  fill(0,0,0);   //Seta a cor a ser usada
  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:

1. Limpar a tela para que a imagem atual nao se misture com a anterior.
2. 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() {
  font1 = loadFont("fonte.vlw"); //Carrega o arquivo de fonte
  back = loadImage("back.png"); //carrega a imagem
  pointer = loadImage("pointer.png");
  size(240,320);  //tamanho da janela 240x320
  smooth();
}

void draw() {
  background(255);//Pinta toda a tela de branco  

  imageMode(CORNER);
  image(back,0,0); //Desenha a imagem na posição 0x0
  textFont(font1); //Seta a fonte a ser usada
  fill(0,0,0);   //Seta a cor a ser usada
  text("Hello Images!",60,20);  //Escreve o texto
  imageMode(CENTER);
  image(pointer,mouseX,mouseY);
}