Yesterday I showed how to create regular polygons using a simple formula. Today I will show how to extend that to draw stars and bursts as well.

Looking at the image above, we can see that to do a 4-point star we need to identify the same initial 4 points Po, P1, P2 and P3 than the ones needed to draw the 4-side polygon (square) shown on the left. For the star we need to set an inner radius that will control the position of the points P1’, P2’, P3’ and P4’. And then the formula becomes:

For point i, where i is an odd number,

Pi.x = radius * Math.sin((180 - 360*i/n + _initRot)*RADTOANGLES);
Pi.y = radius * Math.cos((180 - 360*i/n + _initRot)*RADTOANGLES);

And, for point i, where i is an even number,

Pi.x = innerRadius * Math.sin((180 - 360*i/n + _initRot)*RADTOANGLES);
Pi.y = innerRadius * Math.cos((180 - 360*i/n + _initRot)*RADTOANGLES);

Where is n is the number of sides of the star multiplied by 2.

Hence, the odd points are defining the outer points of the star, while the even points are defining the inner ones. Then, all we need to do is to draw lines from P0 to P1, from P1 to P2, …, and from Pn-1 to P0. As in the case with the regular polygons, I included a variable _initRot in case you want to position the initial point at some angle other than 0.

As you probable guessed from the title, this can be easily expanded to draw bursts as well. A burst is similar to a star but instead of connecting the point with straight lines, the outer points are connected with curves and the inner points are used as controls points to draw quadratic Bezier curves.

The image below shows a regular polygon (pentagon), a star and a burst with similar parameters.

The green circle is generated using the radius and the blue circle using the inner radius.

We can add some additional parameters to make this little application cooler. For example, we can rotate the inner circle (blue) and move the inner points for the stars and bursts accordingly to produce some nice results as shown below.

For point i, where i is an odd number,

Pi.x = radius * Math.sin((180 - 360*i/n + _innerRadiusOffset + _initRot)*RADTOANGLES);
Pi.y = radius * Math.cos((180 - 360*i/n + _innerRadiusOffset + _initRot)*RADTOANGLES);

And, for point i, where i is an even number,

Pi.x = innerRadius * Math.sin((180 - 360*i/n + _initRot)*RADTOANGLES);
Pi.y = innerRadius * Math.cos((180 - 360*i/n + _initRot)*RADTOANGLES);

Where is n is the number of sides of the star multiplied by 2.

Additionally, we can shift the center of the inner circle to produce some odd results. Check the video below for some of the figures that can be created changing parameters dynamically. You can also play around with the application (below the video). Or click HERE to open it in another browser tab.

In this version I added the capability to drag each shape around as well.

In the next post I will show you how to extend it even further to allow drawing some fancy arrows.

Do you have some ideas of other stuff we could do with this? If so, please share on the comments.

## mike: how do you keep the slide from animating when you click again on the s...

## Ratan: Can you please share the code...

## Jinny: Its really useful. Can you share source code for this??...

## Shridhar: Nice...