Criando gráficos com Allegro

19/08/2006

Neste post vamos ver como podemos criar gráficos com Allegro, bem simples, mas pode ajudar bastante em aplicações em que deve-se mostrar algumas informações de forma mais intuitiva.
Iremos usar as seguintes funções:
void line(BITMAP *bmp, int x1, int y1, int x2, int y2, int color);
função que desenha uma linha em um BITMAP, onde:

  • bmp – ponteiro de um BITMAP de destino
  • x1 – posição x do inicio da linha
  • y1 – posição y do inicio da linha
  • x2 – posição x do fim da linha
  • y2 – posição y do fim da linha

void triangle(BITMAP *bmp, int x1, y1, x2, y2, x3, y3, int color);
função que desenha um triangulo em um BITMAP, onde:

  • bmp – ponteiro de um BITMAP de destino
  • x1 a x3 – posição x de cada vértice do triangulo
  • y1 a y3 – posição y de cada vértice do triangulo

void textprintf_ex(BITMAP *bmp, const FONT *f, int x, int y, int color, int bg, const char *fmt, ...);
função que escreve um texto na tela, semelhante a função printf do C, mas para a Allegro, onde:

  • bmp – ponteiro de um BITMAP de destino
  • FONT – constante para a fonte a ser utilizada, padrão font
  • x e y – posição do texto na tela
  • color – cor do texto
  • bg – cor do fundo do texto, -1 para transparente

void textprintf_centre_ex(BITMAP *bmp, const FONT *f, int x, int y, int color, int bg, const char *fmt, ...);
função que escreve um texto na tela, porém a partir do meio do texto, onde:

  • bmp – ponteiro de um BITMAP de destino
  • FONT – contante para a fonte a ser utilizada, padrão font
  • x e y – posição do meio do texto na tela
  • color – cor do texto
  • bg – cor do fundo do texto, -1 para transparente

int makecol(int r, int g, int b);
função que cria uma cor em Allegro, onde:

  • r, g e b – valores de 0 a 255 para a quantidade de vermelho, verde e azul

O gráfico que vamos usar no exemplo é bem simples, e não permite, por exemplo, valores negativos. É apenas uma ilustração de como se pode fazê-los com Allegro.

Primeiramente vamos criar um BITMAP gráfico e desenhar os eixos nele:

TEXTO PURO
C:
  1. grafico = create_bitmap(640,480);
  2.  
  3. // desenhando o eixo x
  4. line(grafico, 50, 420, 580, 420, makecol(255,255,255));
  5. // desenhando o eixo y
  6. line(grafico, 50, 50, 50, 420, makecol(255,255,255));
  7. // desenhando a seta do eixo y
  8. triangle(grafico, 45,50 , 50,45 , 55,50, makecol(255,255,255));
  9. // desenhando a seta do eixo y
  10. triangle(grafico, 580,415 , 585,420 , 580,425, makecol(255,255,255));

Vamos agora criar a tabela de valores de x e y para nosso gráfico, lembrando que não validamos nenhum dado. Ou seja, na posição 0 dos dois vetores teremos as coordenadas (x0, y0) e assim por diante.

TEXTO PURO
C:
  1. // criando dois vetores, um para a tabela de valores para x e um para y
  2. int table_x[10] = {  0, 20, 40, 50, 60, 70, 80, 90, 100, 120 };
  3. int table_y[10] = { 20, 30, 20, 40, 50, 80, 10, 85, 110, 135 };

Vamos criar uma variável auxiliar i para usarmos nos nas repetições e uma des para guardar o deslocamento, considerando que o gráfico irá ter o tamanho de 540x380, ou seja, para centralizarmos o mesmo na tela precisamos deslocar 50.

Aproveitamos também e escrevemos o nome dos eixos e um titulo para os gráficos.

TEXTO PURO
C:
  1. int i;
  2.  
  3. int des = 50;
  4.  
  5. // escrevendo nos eixos
  6. textprintf_ex(grafico, font, 35, 50, makecol(200, 200, 20), -1, "y", 11);
  7. textprintf_ex(grafico, font, 580, 430, makecol(200, 200, 20), -1, "x", 11);
  8.  
  9. // titulo do grafico
  10. textout_centre_ex(grafico, font, "GRAFICO DE TESTE - POR TULIO FARIA",
  11. SCREEN_W / 2, 30,
  12. makecol(255, 0, 0), -1);

Desenhando as linhas da escala com um cinza mais claro, onde teremos uma linha a cada 10pixels.

TEXTO PURO
C:
  1. // desenhando a escala x
  2. for (i=10; i<530; i+=10){
  3. line(grafico, i+des, 419, i+des, 50, makecol(30,30,30));
  4. }
  5.  
  6. // desenhando a escala y:
  7. for (i=10; i<370; i+=10){
  8. line(grafico, 51, i+des, 580, i+des, makecol(30,30,30));
  9. }

Varremos a tabela de valores e vamos unindo os pontos formando as linhas do gráfico.

TEXTO PURO
C:
  1. // desenhando a linha do grafico
  2. for (i=1; i<10; i++){
  3. line(grafico, table_x[i-1]+des, table_y[i-1]+des, table_x[i]+des, table_y[i]+des, makecol(255,255,255));
  4. }
  5. // desenhando os pontos de cada relacao x e y
  6. for (i=0; i<10; i++){
  7. circlefill(grafico, table_x[i]+des, table_y[i]+des, 2, makecol(0,153,255));
  8. }

Depois de todo o gráfico estar no BITMAP gráfico, basta coloca-lo na tela (screen):

TEXTO PURO
C:
  1. draw_sprite(screen, grafico, 0, 0);

Pra finalizar um loop para deixar o gráfico na tela até que o usuário aperte ESC:

TEXTO PURO
C:
  1. while (!key[KEY_ESC]) {
  2.  
  3. // apenas para deixar o programa aberto até que se aperte ESC
  4.  
  5. }

Aplicação Final

Clique aqui e baixe o Exemplo para o Dev Cpp.

Dúvidas, comentem. Até a próxima.

9 Comentários »

  1. Andre said,

    Setembro 6, 2006 @ 17:03

    A tempo que eu procuro como fazer graficos desse tipo, estou tentando fazer um grafico de estatistica, a diferenca é que a origem do eixo y tem que ser quando ele se encontra com o eixo x...
    gostei, nao sabia que tinah essa funcao de texto (textprintf). eu so usava textout.

    estava querendo colocar no grafico uma área onde o usuario digita as coordenadas x,y e é colocado uma figura geometrica naquele lugar. se voce puder me dar uma dica me ajude, vou ficar muito grato, valeu mesmo.

  2. Andre said,

    Setembro 6, 2006 @ 17:04

    meu endereco é anboia@hotmail.com

  3. tulio said,

    Setembro 11, 2006 @ 16:30

    André, existe uma função polygon para desenhar poligonos, aqui vai um exemplo retirado da própria documentação do Allegro:

    int points[12] = { 50, 50, 100, 100, 100, 150,
    50, 200, 0, 150, 0, 100 };
    ...
    clear_to_color(screen, makecol(255, 255, 255));
    polygon(screen, 6, points, makecol(0, 0, 0));

    Ex. para criar um hexagono.

    Abraços... qualquer dúvida, só comentar...

  4. André said,

    Setembro 13, 2006 @ 12:31

    Entendi,porem vamos considerar que a figura geometrica seria um bitmap(_sprite) em um datafile. Como o usuario poderia digitar as coordenadas x,y ?
    Acho que eu deveria usar um d_edit_proc (GUI), mas como fazer isso?
    estava pensando tambem na possibilidade de clicar na figura , segurar e arrastar, seria possivel ! ? ! ? !

  5. Gabriel Santos said,

    Abril 10, 2007 @ 11:03

    Estou criando uma interface para um programa que utiliza arquivos e é necessário a entrada de informações do tipo INT e do tipo CHAR[] ,não sei como se faz quando usa o allegro ,nas bibliotecas padrão era fácil (scanf(%d,&valor); scanf(%c,nome);) já com o allegro não funciona gostaria de saber se tem algum comando especifico do allegro para isso.

  6. João said,

    Março 21, 2008 @ 01:00

    tipo, eu so nao tava entendendo como usar a funçao de texto incluindo o fundo do mesmo na mesma funçao, acho q pq devo ter digitado algo errado mesmo e nao percebi, pq aki logo vi como usar e nao estava errado nao......

    ah sim claro esse textprintf_ex tem a estrutura bem diferente do textout, dai testei o textout_ex tirei a ideia qd vi ai q vc coloco o textout_centre_ex, bom como os tipos textout( right,centre,left etc) sao bem diferentes do textprintf,
    achei melhor usar o textout_ex do qual a unica diferença do textou é q tem mais um tipo inteiro no final da sua declaraçao, q serve para cor de fundo do texto.

    E devo agradecer q aki tirou algumas duvidas sobre textos, vlw mesmo, agora nao aparece mais o warning no compilador , agora uso o textou_ex( q é o completo, e pelo visto o correto) doq apenas o textout. :)

  7. Tulio Faria said,

    Março 21, 2008 @ 20:48

    André, Gabriel,

    sim, é possível. Eu não sei falar a vocês precisamente, faz um tempo que não trabalho mais com o Allegro (infelizmente).

    João,

    obrigado pelo comentário.

    Abraços a todos,

  8. Elias Marques said,

    Dezembro 9, 2008 @ 23:50

    Gabriel, não sei se a informação ainda serve, mas você pode usar a biblioteca Gtk+. Ela é muito mais fácil que a Allegro, embora não tenha tanta liberdade quanto às imagens impressas. Porém, a Gtk+ contém elementos prontos, como botões, barras de rolagem e caixas de texto, ótimas para fazer caixas de diálogos. A questão INPUT-OUTPUT é bem mais trabalhada nela. Verifique, e escolha a que melhor se encaixar com seu projeto.

  9. Henrique said,

    Dezembro 12, 2008 @ 16:35

    Como vou fazo para colocar esse grafico dentro de uma interface já criada?

    Em um tamanho bem pequeno?

    Gtrato,

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário