Drawing Arrows in Actionscript 3 (Flex 4) Using Simple Trigonometry

Arrows

Continuing the work on the last post – Drawing Stars and Bursts in Actionscript 3 (Flex 4) Using Simple Trigonometry, today I am showing how that little application can be extended to draw arrows of different types, such as the ones on the image below.

In order to create the arrows, we can take the half right side of a burst with 4 sides and render the arrow head with it. That means drawing a quadratic Bezier curve from Po to P1 and another from P1 to P2, using the controls points according to the inner circle (as described on the previous article). See figure above. The rest of the arrow is created by drawing lines from P2 to P3, P3 to P4, P4 to P5, P5 to P6 and then closing the shape with a line from P6 to P0.

Points P3, P4, P5, and P6 can be defined setting the parameters for “Arrow Length”, “Shaft Base Offset”, and Arrow Shaft Thickness”.

Changing the inner radius affect how the head of the arrow will be rendered. Experiment with the tool to produce concave, convex or straight shaped heads.

As usual, below is the application, in case you would like to try it out. Open it in a new tab by clicking HERE.

Get Adobe Flash player

 

Play around and let me know what do you think. Also, please give me any suggestions you may have to improve it or to extend it.

I have some ideas of where I would like to take it next, but getting yours would be great too.


Drawing Stars and Bursts in Actionscript 3 (Flex 4) Using Simple Trigonometry

Stars and Bursts

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.

Get Adobe Flash player

 

Get Adobe Flash player

 

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.


UA-4365634-1