Back to DFS's Workshop Page
Back to Agenda Page

Painting Simple Graphics

Programmers frequently need to generate graphics to illustrate data or to spruce up their pages.

Here we will use some of PHP's basic built-in image functions to create the accompanying picture. To get a fuller perspective on what is available, visit PHP's Image Functions page.

To create a page with this picture (or any other), you need to create a script for the page it will appear on and a separate PHP script to create the picture.

Here we will look at the various steps needed to create this picture and get it to appear on a particular page.

You can watch the picture being created step by step by clicking here.

The Page Where the Picture Will Appear

If you are always going to create the same picture (a boring prospect, but a good starting point for our discussion), all you need to do is to call the script which produces the picture.

<img src=drawslide.php>

This tag says simply that the source for the image is not a graphics file, but rather a PHP script which will provide the graphic.

If you want to allow for some variability, you could pass some variable names and their values to the script. Below, we pass the variable names xsize and ysize, and the values 300 and 200, respectively.

<img src=drawslide.php?xsize=300&ysize=200>

In the script drawslide.php, the variables $xsize and $ysize could be used to determine various aspects of the picture.

The Script Which Generates the Picture

To generate the image, there are six (6) steps.

Specify a header for the browser
The browser needs to know that this is a graphics file. This is done by calling the built-in Header() function, specifying that the format is PNG.
```
Header("Content-type: image/png");
```
Allocate RAM for the creation of the image
PHP needs to know how much RAM to set aside for creating the image. You specify the x and y sizes by calling the ImageCreate() function.
```
$im = ImageCreate ($xsize, $ysize);
```
A resource image pointer is returned which you then use with all other operations.
Specifying the colors
For each color you plan on using, you must ask PHP for a label. One of the labels is then used in the function call for each drawing operation. N.B. The first allocation requested is used for the background color, no matter what label is used. Counting the background color, six (6) were used to create the picture.
```
$bgcolor = ImageColorAllocate ($im, 0xBF, 0xBF, 0xBF);
$headcolor = ImageColorAllocate ($im, 0x00, 0xFF, 0xFF);
$nosecolor = ImageColorAllocate ($im, 0x00, 0xFF, 0x00);
$eyecolor = ImageColorAllocate ($im, 0x00, 0x00, 0xFF);
$hatcolor = ImageColorAllocate ($im, 0xD0, 0x00, 0x00);
$black = ImageColorAllocate ($im, 0x00, 0x00, 0x00);
```
Note that hexadecimal numbers have been used to specify the values for red, green, and blue. Decimal numbers could be used instead.

Drawing the Various Parts

The head with the hat was drawn in eight steps which are given below.

The variable $centerx and $centery were assigned values by using the built-in functions which determine the size of the drawing area.

// Determine the middle of the drawing area
$centerx = round(ImageSX($im) / 2);
$centery = round(ImageSY($im) / 2);

// Draw a circle for the head
ImageFilledEllipse( $im, $centerx, $centery, 150, 150, $headcolor);
// Draw an elipse for the left eye
ImageFilledEllipse( $im, $centerx - 25, $centery - 25, 30, 50, $eyecolor);
// Draw an elipse for the right eye
ImageFilledEllipse( $im, $centerx + 25, $centery - 25, 50, 30, $eyecolor);
// Draw a filled pie-shaped arc for the nose
ImageFilledArc( $im, $centerx, $centery - 10, 50, 50, 30, 150, $nosecolor, IMG_ARC_PIE);
// Draw a filled pie-shaped arc for the mouth
ImageFilledArc( $im, $centerx, $centery + 20, 75, 75, 30, 150, $black, IMG_ARC_PIE);
// Erase the unwanted portion for the mouth
ImageFilledArc( $im, $centerx, $centery + 20, 75, 75, 30, 150, $headcolor, IMG_ARC_CHORD);
// Draw the top of the hat
ImageFilledRectangle( $im, $centerx - 75, $centery - 90, $centerx + 75, $centery - 60, $hatcolor);
// Draw the brim of the hat
ImageSetThickness($im, 5);
ImageLine($im, $centerx - 100, $centery - 60, $centerx + 100, $centery - 60, $black);

Sending the Picture to the Browser
After the picture has been completed, it must be sent to the browser for placement in the page. This is accomplished with the Imagepng() function, which causes the graphic to be outputted in PNG format.
```
Imagepng ($im);
```
Freeing Memory
Finally, the memory used to create the picture must be released for reuse. This is done with a call to the ImageDestroy() function.
```
ImageDestroy ($im);
```

Other Embellishments

To illustrate step by step how the head was drawn, I had the PHP script which calls drawslide.php call itself using script-generated links. For the script to know which stage it should display, it must pass a counter variable (I used $slide, as in a slideshow) to itself.

For the initial run of the script, the variable has no value assigned. Since an unassigned variable prints as a null, the following fragment was used to ensure that a zero (0) would be printed.

$slide = $_REQUEST['slide'];
if(empty($slide)) $slide = 0;

The call to drawslide.php now requires that we specify how many steps are to be performed for drawing the desired part of the picture.

echo "<p><img src=drawslide.php?slide=" . $slide . "&xsize=300&ysize=200<";

The following code prints the links that appear below the picture. The system variable $PHP_SELF is used for the recursive link.

if( $slide > 0 ) {
   $slidelink = $slide - 1;
   echo "<a href=\"$PHP_SELF?slide=$slidelink\">PREV</a> &nbsp; \n";
}
else {
   echo "<font color=gray>PREV &nbsp; </font>\n";
}
for ($i = 0; $i < $totalslides; $i++) {
   if( $i != $slide) {
      echo "<a href=\"$PHP_SELF?slide=$i\">$i</a> &nbsp; \n"; }
   else { echo "<font color=#ff0000>$i</font> &nbsp; \n"; }
}
if( $slide < $totalslides -1 ) {
   $slidelink = $slide + 1;
   echo "<a href=\"$PHP_SELF?slide=$slidelink\">NEXT</a> &nbsp; \n";
}

To see how this code would work, take this link.