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:
- 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() {
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);
}
Postagens
