Hello World! Processing.

Cof Cof!(Som de tosse). Tirando um pouco da poeira do blog.

Admito, não sou do tipo programador, gosto de experimentar e aprender, mas sou do lado hardware da força mesmo.

Recentemente estava precisando criar um programa para um dos meus projetos, uma espécie de impressora de matriz de pontos a partir de sucata, fiz o projeto para participar de um concurso no instructables, enfim, o que eu precisava era de uma linguagem que me permitisse(um noob em programação) fazer uso de processamento de imagens e uso de porta serial.

Complicado…. Meio que tenho mexido com java ultimamente, mas nem me atrevo a tentar algo assim no nível em que estou, que linguagem poderia usar? Foi ai que me lembrei do Processing, e que o Arduino havia sido baseado no mesmo, se o Arduino torna as coisas fáceis do lado dos microcontroladores, talvez tornasse fácil do lado dos computadores também. Estava correto, Processing é uma ferramenta de uso muito fácil, e estou adorando.

O legal com o Processing pra quem quer ter um primeiro contato com programação é que em vez de te dar de cara uma tela preta ou branca ou seja lá qual fora cor do console que você esteja usando, você tem uma tela de desenho pra experimentar, o que quer dizer que com ele você pode nessa tela desenhar linhas, formas, escrever texto, carregar imagens e fazer animações e exercitar sua criatividade.Como o Java, o Processing pode ser executado em Windows, Linux e Mac.

Bom, parece bacana, se você quiser fazer o download acesse essa página. Recomendo baixar a versão 32 bits mesmo que você use um sistema 64 bits, pois algumas bibliotecas, como a Serial, podem não funcionar no pacote 64 bits.

Se você já usou Arduino alguma vez, deve entender como bibliotecas funcionam, uma biblioteca é um conjunto de códigos criados por alguém que são disponibilizados para serem utilizados por qualquer pessoa, a ideia é tornar mais fácil o uso de alguma ferramenta. Por exemplo, a biblioteca Serial permite o fácil uso das portas seriais disponíveis no seu computador. Para adicionar uma nova biblioteca ao Processing basta colocar a pasta da biblioteca que você baixou na pasta libraries do Processing, simples assim. Há bibliotecas para tocar sons, criar modelos em 3D, animações entre outras.

Hello World!

Vamos ver um exemplo que criei para demonstrar algumas coisas bacaninhas do Processing.

Hum, talvez você tenha jogado a segunda geração dos jogos de Pokémon. Nessa geração foram introduzidos os Unowns, Pokémons em forma de letras que em certas partes do game, Crystal pelo menos, apareciam formando a seguinte frase:

“Our words shall remain here for the ages”

Tradução:

“Nossas palavras continuarão aqui pelas eras”

Isso me deu uma ideia, criar um sketch (é assim que são chamados os códigos no Processing) que gerasse a partir de uma frase qualquer uma imagem dessa frase formada a partir de Unows.

Então, como proceder?

Primeiro, conseguir as imagens dos Unowsn. Isso foi fácil, de fato se você pesquisar no google pode encontrar os sprites dos Pokémons de qualquer jogo, os sprites que usei foram da versão Diammond.

Segundo, interpretar a string com o texto a ser mostrado e relacionar cada letra a um sprite de Unown.

Terceiro, mostrar na tela a frase usando os sprites.

Abaixo o código:

//================================================
// Written by Robson Couto.                08/2014
// www.dragaosemchama.com.br
//
// You can use spaces, "!" and "?".Still are not discovered
// unows "," or ".", well, i'm not sure.
// To change to the next line use "/"
//'
// These unowns sprites are from the diamond version.
//                                          
//=================================================
String name ="hello /  world";//please, don't use captals nor a final dot.

PImage img; //variable(?!) to store a image of a unown, loving processing.
char letter;//variable to catch a peek in the string

public int x=40, y=40, w=0, h=1;//"x" and "y" are used for drawing, "w" and "h" are used to calculate the image size.
                                //each unown has 40x40 pixels, so the positios are based in 40pixels increases.

void setup() {
  background(255);//white background, use can change this to background(Red,Green,Blue) where the Red, Green and Blue can vary from 0 to 255.
  calculatesize();//function created to calculate the size of the image.
  size(w, h);//use the values of w and h found in calculatesize() to create the frame. 
  for (int i=0;i<(name.length());i++) {//checks every character in the string
    letter= name.charAt(i);
    if (letter=='/') { //next line
      y+=40;// increase the line.
      x=40;// resets the row, there are 40 pixels left and right the unowns.
    }
    if (letter!='/') {
      if (letter=='?') {//you can not use "?" to nane a file, so I used a dot.
        img = loadImage("201question.png");//load the "?" unown
      }
      else {
        img = loadImage("201"+letter+".png");//load any other unown, based in the name file
      }
      image(img, x, y);// display the unown loaded.
      x+=40;// next line
    }
  }
  save("myimage.png");//save your imave in the sketch folder.loving processing.
}

void draw() {//nothing here, the sketch don't need to be redrawned another times. the 'draw' function is a loop. 
}

void calculatesize() {// this function calcules the size to a good image.
  int count=0, largest=0;
  for (int i=0;i<(name.length());i++) {//this calcules the height of the image, each unown has 40x40 pixels, so lets give plus 40pixels above and under the write. 
    letter= name.charAt(i);   
    if (letter=='/') {
      h++;//increases the number of lines at each "/" encountered
    }
  }
  h=h*40+80;// the number of lines found times 40 pixels plus the 40 pixels above and under.

  for (int i=0;i<(name.length());i++) {//this calculates the width of the image, based in the max numbers of characterers betwwen two "/"; 
    letter= name.charAt(i);
    if (letter!='/') {//checks how many chars are between '/' it is, in a line.
      count++;
    }
    if (letter=='/') {//find the largest line and the number of chars 
      if (count>largest) {
        largest=count;
      } 
      count=0;
    }
    if (i==(name.length()-1)) {// this checks the last piece of the string.
      if (count>largest) {
        largest=count;
      } 
      count=0;
    }
    w=largest*40+80;// width is the number of chars in the largest line times 40 pixels plus 40 pixels above and under.
  }
}

Os métodos loadImage() e Image() carregam a imagem na memória e a mostram na tela respectivamente. Para formar uma frase bastava carregar as imagens na posição correta. Imagine uma matriz onde as posições podem ser preenchidas com letras ou espaços em branco.

Você pode baixar o projeto aqui.

Para escrever algo, basta colocar a frase desejada entre as aspas na String name, por exemplo:

String name ="hello /  world";

String name ="ola pessoal";

String name ="dragao sem chama";

Para separar as linhas, use o “/”. Você pode usar os caracteres “!” e “?” também, use apenas letras minúsculas.

Abaixo estão alguns exemplos:

 “Dragao sem chama”

“Hello world!”

“Escrevendo com unowns”

É isso, obrigado pela leitura, quem sabe a gente volte com outro post experimentando outra linguagem. Até mais.