guida alla programmazione grafica in c/c++

GUIDA ALLA PROGRAMMAZIONE GRAFICA IN C
.:luxx:.
PREMESSE
• In questa guida non verranno trattati i costrutti di flusso, le
funzioni, o comunque le caratteristiche del linguaggio, che si
danno come presupposte.
• Il software che utilizzeremo sarà l’IDE Dev c++, di cui sono
riuscito a trovare solo versioni per windows.
A questo link potrete trovare la distribuzione per ambiente
windows.
Installiamo ed eseguiamo il wizard del programma per la sua
configurazione.
Per lavorare in grafica abbiamo bisogno delle librerie allegro,
quindi scarichiamo l’aggiornamento andando in:
strumenti - cerca aggiornamenti e scaricando il pacchetto allegro.
INTRODUZIONE
Salve, questa guida tratta di programmazione grafica in C.
Tratteremo grafica bidimensionale, non 3D.
La programmazione grafica risulta semplice, ma allo stesso tempo,
necessita di una buona capacità di ragionamento per arrivare alla
soluzione del problema prefissato.
LET’S START!
Bene, ora siamo nel nostro ambiente di sviluppo, dobbiamo aprire
un nuovo progetto;
file – nuovo – progetto – multimedia - allegro application(DLL)
selezioniamo inoltre, il linguaggio c standard.
Il risultato sarà un sorgente dato di standard dove vengono definiti
alcuni parametri per il nostro lavoro; proviamo a fare compila e poi
esegui (F9).
Ecco che compare di output una finestra 640X480 di colore nero.
Analizziamo il corpo sorgente.
while (!key[KEY_ESC]) {} indica che l’output generato sarà
visualizzato
sino a quando non verrà premuto il tasto ESC.
Ciò che sta al di fuori della funzione main() serve a definire
l’output, ad esempio
res = set_gfx_mode(GFX_AUTODETECT_WINDOWED, 640,
480, 0, 0);
definisce le dimensioni dell’output.
In ambiente grafico si lavora moltissimo con le funzioni; per avere
sotto mano le funzioni date di standard da allegro, andiamo a
cercare il file allegro.chm nella directory del software ad esempio:
C:\Dev-Cpp\docs\allegro\allegro.chm
Noi, a livelli base, useremo le funzioni che si trovano in API Drawing Primitives.
Iniziamo a scrivere un po’ di codice.
Prendiamo in considerazione la funzione line()
La sua sintassi è
line(output(noi useremo screen), x, y, x2, y2, colore);
dove x e y sono le coordinate di un estremo del segmento e x2 e
y2 sono le coordinate dell’altro estremo.(vedi immagine seguente)
come riferimento va ricordato che il primo punto in alto a sinistra
ha coordinate (0,0), l’ultimo punto in basso a destra, ha
coordinate, in questo caso, (639, 479).
…
void init();
void deinit();
int x = 30;
int y = 30;
int x2 = 90;
int y2 = 90;
int bianco = 0xffffff;
int main() {
init();
while (!key[KEY_ESC])
{ line(screen, x, y, x2, y2, bianco);
}
…
Produrrà questo risultato(le coordinate le ho aggiunte io in paint)
Il nostro programma quindi ci ha disegnato una linea sull’ouput,
alle coordinate che gli avevamo assegnato.
Ora proviamo, per farvi notare una cosa, a incrementare o a
decrementare una coppia delle variabili ad esempio aggiungere nella
while(!key[KEY_ESC]) i valori
x = x – 10;
x2 = y – 10;
mandate in esecuzione e lasciatelo eseguire per una decina di
secondi, notiamo quindi che vengono disegnate linee verso destra,
e queste linee continuano fino a quando non viene premuto il tasto
ESC; dove sta il problema? Le linee, ad un certo punto spuntano di
nuovo da sinistra e continuano verso destra e così via.
Il perché di questo si trova nella dichiarazione; noi abbiamo
dichiarato le variabili come int; int copre i valori da
−2.147.483.648 a +2.147.483.647, ad ogni while il valore
aumenta e quando supera il valore massimo riparte dal valore
minimo e viceversa.
La soluzione, molto semplice, sta nell’introdurre una variabile, che
io per abitudine chiamo myflag e inizializzarla con valore 0;
successivamente nella while inseriremo una if del tipo
If(myflag == 0) { codice }
E al di fuori della if cambieremo il valore di myflag cosicché la
while si ripeta una volta sola.
Il codice finale sarà:
#include <allegro.h>
void init();
void deinit();
int x = 30;
int y = 30;
int x2 = 90;
int y2 = 90;
int bianco = 0xffffff;
int myflag = 0;
int main()
{ init();
while (!key[KEY_ESC])
{ if (myflag == 0)
{ line(screen, x, y, x2, y2, bianco);
x = x + 10;
x2 = x2 + 10;
}
myflag = 1;
}
deinit();
return 0;
}
END_OF_MAIN()
….
Abbiamo detto che in grafica in C si lavora sulle funzioni standard
di allegro, vediamone altre 4 di base.
Rect(output, x, y, x2, y2, colore);
La sintassi è praticamente identica a quella di line().
Da questa funzione viene disegnato un rettangolo; le coordinate, x,
y, x2, y2, sono le coordinate degli estremi della diagonale del
rettangolo, sulla diagonale verranno costruiti i lati e si formerà la
figura.
Circle(output, x, y, raggio, colore);
questa funzione disegna un cerchio.
Le coordinate x e y sono le coordinate del centro, raggio è per
l’appunto una variabile che definisce il raggio del cerchio.
Queste due funzioni disegnano appunto solo il contorno della
figura, se si vuole ottenere un riempimento, bisogna utilizzare le
funzioni rectfill() e circlefill() che hanno la stessa sintassi delle
precedenti.
Esempio:
#include <allegro.h>
void init();
void deinit();
int x = 30;
int y = 30;
int x2 = 90;
int y2 = 90;
int bianco = 0xffffff;
int rosso = 0xff0000;
int blu = 0x0000ff;
int verde = 0x00ff00;
int giallo = 0xffff00;
int raggio = 120;
int myflag = 0;
int main() {
init();
while (!key[KEY_ESC])
{ if (myflag == 0)
{line(screen, x, y, x2, y2, bianco);
rect(screen, x + 40, y + 40, x2 + 180, y2 + 180, rosso);
circle(screen, x + 460, y + 140, raggio, blu);
rectfill(screen, x + 300, y + 320, x2 + 550, y2 + 380,
giallo);
circlefill(screen, x + 200, y + 300, raggio - 60, verde);
}
myflag = 1;
}
deinit();
return 0;
}
END_OF_MAIN()
….
Che darà come risultato
Con un po' di inventiva e immaginazione si possono trovare tutta
una serie di “disegni” da fare.
Un buon esercizio sarebbe quello di disegnare, ad esempio una
scacchiera, con le pedine di dama.
Ricordo che il fatto non sta nel dare delle coordinate numeriche
ogni volta alle coordinate delle figure, ma trovare il giusto
algoritmo che porta alla soluzione.
Questo è il mio risultato.
Buon lavoro
.:luxx:.