Stars in PHP

Have fun generating stars with PHP and GD

      In this short article I’ll show how to generate some nice stars dynamically with PHP and transfer them as an image. We will do this by creating some graphics with the precious help of the

GD library

But is this just about stars? No! We are taking stars just as a good example to start with. With this simple walkthrough you can create any images with php so, once you got this, just unleash your fantasy.

So let’s say we have a voting system on our website and we want different stars every day or, if you prefer, we have some special page in our fairy tales site where we need an incredible variety of stars. If we want 5 different types of stars it’s quite OK to make them with Gimp or Photoshop or other editor, but if we want 5000 types?¬†Generating them begins to sound good, right?
It will sound even better if we want to create an unique, procedural, hash-based avatar for every single user that subscribes to our site (like, i.e. www.stackoverflow.com does) so that we are sure that their thumbnail will be always different even if our user base is 10 millions (look for collision free hash functions to know more).

First of all you’d better make sure that the GD library is available on your server. To do this just write the following line into a new php file named, for example, infos.php

and then navigate to it with your browser (i.e. http://www.yoursite.com/infos.php). You should see GD enabled at some point of the long resulting list. If not, you’ll have to install them or ask your service provider to install them for you.

Our drawing will take advantage of GD’s function imagefilledpolygon. In order to understand some of the coiches it’s important to have an idea of how it works. The main thing to understand is that the $points argument is a sequence of x and y values chained alternatively. There’s no point structure that holds both x and y.

We will create a function that draws a star. Let’s have a look to the declaration.

Our $image is the variable that points to the image container that we created with @imagealphatruecolor that we’ll see in a bit. Then we have $x0 and $y0 which will be the centre of the star.
Do we want our function to draw only 5-spiked stars? Nooo. $numberOfSpikes will determine how many spikes our star has. $outerRadius says how much the spikes will be away from the centre whilst $innerRadius will say where the cavity points will be positioned.
Finally $r $g and $b are the components of the star’s color.

We are going to create a list of points so let’s prepare for that:

We can think of the star’s points as disposed in two separate circles: outer and inner. We just logically rotate the inner one so that the cavities lay in the very middle of two spikes.
Here we go through the main for to build the list of points. As we go from 0 to $N we find where the points are at that angle both for the outer circle and the inner circle. To calculate their coordinates, a simple combination of sin and cos functions is all we need. If you have no clue on how a circle is drawn, I suggest you search for an explanation and have a look. It’s pretty simple.
So, at every step of the for cycle we do the following:

  • Calculate x and y of the outer point
  • Push both values into the points array
  • Calculate x and y of the inner point
  • Push both values into the points array

Now that we have all the points in order, we can do the actual drawing

Great! Now that we have a function we can dive into a star drawing frenzy.
First of all it’s very important to let the browser know that when it requests the php file it knows it is an image. Which is what this line does.

Then we use GD’s imagecreatetruecolor to create an image structure. $W and $H, you might have guessed, are the width and the height in pixels. or die can be used to return an error in case the creation fails.

As we want the image to be transparent, we need to enable alpha blending. Some antialiasing will also give better looking edges.

We decide here the background color, aware that we will use it later as the representative color for the transparency map.

In order to have the background we fill the image with $bgcolor before drawing any stars.

After drawing a bunch of stars (see complete code below) we state that the filler color ($bgcolor variable) is the transparent one and finally wrap up the image into a GIF or PNG format. Other formats like JPG can be used of course if transparency is not used.

Hopefully you had a good introduction to GD and some magic behind it. Here’s a complete script to help you start experimenting in no time.
Enjoy coding!
RS

Output of the above code:

Star 1

Resulting image

And a lot more fun (find a clever name and call it modern art):

stars3 stars4

stars5

stars6

And the useful ones:

stars2