Présentation de l'exemple
Pour que cela fonctionne, il faut que la librairie GD soit installée
et, suivant la version, vous pourrez générer des images
au format GIF ou PNG pour les plus récentes. Une sombre histoire
de licence a fait que la fabrication du GIF est soumise à des droits.
Le monde de l'image a découvert alors l'exitence du format PNG,
qui s'avère au bout du compte de meilleur qualité ! L'utilisation
de la fonction phpinfo() vous indiquera l'existence ou non de cette librairie
sur votre serveur.
Contrairement à d'autres applications avec PHP ou un autre langage,
le graphisme fait un large appel aux système de coordonnées.
Et dès que l'on sort de quelques lignes parallèles aux axes,
il faut maîtriser un peu de trigonométrie. Cela remue les
méninges ..
Je ne vais pas prendre un exemple standard de représentation
graphique dune série de données numériques, mais
celui du dessin d'une étoile à cinq branches. Quand on a
compris le principe de tracé, on peut tout faire. Et mis à
part quelques calculs trigonométriques...c'est plus simple qu'un
histogramme !
Etude mathématique succinte
 Notre
étoile est donc tracée dans un cercle de rayon 1, le premier
point est en (1.0). Les angles au centre entre deux points sont de
Mais le système de coordonnées des images n'est pas le
repère mathématique habituel, le point (0,0) est le point
en haut à gauche, qui correspond à notre (-1,-1)., L'image
du repère a été générée avec
PHP.
Nous allons donc travailler avec notre repère habituel et transformer
les coordonnées par homothétie et translation.
Les sommets du pentagone ont pour coordonnées
(cos( 2*i*pi/5), sin( 2*i*pi/5)) ;-))) pour i variant de 0 à 4.
Et pour obtenir une étoile, on les joint de deux en deux, le tableau
des coordonnées est mis en dur dans le script, afin de ne pas alourdir
la présentation.
Création d'une image
Quel que soit le contenu de l'image, il faut commencer par la créer,
du moins créer l'espace mémoire dans lequel nous allons
écrire et dessiner. Nous utilisons imageCreate() qui prend deux
paramètres la largeur et la hauteur, exprimés en pixels,
de l'image en question. Cette fonction nous renvoie un handle ou un pointeur
sur la zone mémoire, ce pointeur doit être fourni à
toutes les autres fonctions de manipulation :
$hImg = imageCreate( 200, 200);
Quand nous aurons terminer de travailer notre image, nous devons la
déclarer et ce n'est qu'à ce moment là que nous spécifions
le type - gif, jpeg, png - de notre image. Créons une image PNG
:
header("Content-type: image/png");
imagePng($hImg);
Nous devons spécifier à l'aide d'une entête spécifique
au navigateur que ce qu'il va recevoir n'est pas du texte, nous lui en
indiquons le type Mime.
Entre ces deux fonctions, il y a la création proprement dite
de l'image.
Dessiner dans l'image
Notre étoile est juste un affaire de quleques liognes, c'est
pour cela que j'ai choisi cet exemple.
La fonction imageLine sert à tracer une ligne entre les points
(x1,y1) et (x2,y2):
imageLine( $hImg, $x1, $y1, $x2, $y2, $c);
où $c est une couleur déclarée par
$c = imageColorAllocate( $hImg, $r, $v, $b);
$r, $v et $b sont les valeurs RVB de la couleur, ce sont des entiers compris
de façon standard entre 0 et 255.
Il suffit juste de faire un boucle pour parcourir notre tableau de coordonnées,
en conservant le point d'arrivée comme départ de la ligne
suivante :
// Tracé de l'étoile
$x1 = $X[0]; $y1 = $Y[0];
for( $i=1; $i<6; $i++) {
$j=( $i%5);
$x2 = $X[$j]; $y2 = $Y[$j];
imageLine( $hImg, $x1, $y1, $x2, $y2, $c);
$x1 = $x2; $y1 = $y2;
}
Les couleurs
La première couleur allouée est automatiquement utilisée
comme couleur de fond. On alloue donc une couleur en premier comme couleur
de fond.
Script complet
<?php
// Fonctions de service
function chgCoordX( $x) {
global $hom;
return $hom *( 1 + $x);
}
function chgCoordY( $y) {
global $hom;
return $hom *( 1 - $y);
}
// Dimension du graphique
$diagramWidth = $diagramHeight = 200;
$hom = $diagramWidth/2;
// Tableaux des coordonnées
for( $j=0; $j<5; $j++) {
$A[$j] = cos( 2*$j*PI() / 5);
$B[$j] = sin( 2*$j*PI() / 5);
}
// On croise les points (on les prende 2 en 2 modulo 5
$X[0] = chgCoordX( $A[0]); $Y[0] = chgCoordY( $B[0]);
$X[1] = chgCoordX( $A[2]); $Y[1] = chgCoordY( $B[2]);
$X[2] = chgCoordX( $A[4]); $Y[2] = chgCoordY( $B[4]);
$X[3] = chgCoordX( $A[1]); $Y[3] = chgCoordY( $B[1]);
$X[4] = chgCoordX( $A[3]); $Y[4] = chgCoordY( $B[3]);
// On construit l'image
$hImg = imageCreate( $diagramWidth, $diagramHeight);
// Allocation de la couleur de l'étoile
$colorBackgr = imageColorAllocate( $hImg, 255, 255, 255);
$c = imageColorAllocate( $hImg, 255, 0, 0);
// Tracé de l'étoile
$x1 = $X[0]; $y1 = $Y[0];
for( $i=1; $i<6; $i++) {
$j=( $i%5);
$x2 = $X[$j]; $y2 = $Y[$j];
imageLine( $hImg, $x1, $y1, $x2, $y2, $c);
$x1 = $x2; $y1 = $y2;
}
if ( imagetypes() & IMG_GIF) {
header("Content-type: image/gif");
imageGif($hImg);
} elseif (imagetypes() & IMG_PNG) {
header("Content-type: image/png");
imagePng( $hImg); //
} else {
die("Pas de support graphique avec PHP sur
ce serveur");
}
?>
Il y a des moyens plus rapide pour affecter les coordonnées,
mais j'ai préféré détailler et isoler la partie
mathématique de la partie graphisme afin que tout le monde s'y
retrouve.
 Voilà
le résultat :
Télécharger le source
au format .txt.
Conclusion
Vous pourrez vous entraîner à tracer des étoiles
à plusieurs branches : 3, 4, 6, 7 etc.. Si vous tracez les polygones
non croisés, on a vite fait de monter une animation qui montre
que la série des polygones à n côtés tend vers
le cercle quand n croit vers l'infini ...les mathématiques en douceur
!
Daniel Lucazeau
www.ajornet.com
Chef de projet Internet
| 
Imprimer
Donner votre avis
Webmaster