pi-r-fun.com

Polygon Generator 800X800 Canvas

This page uses (see example page ) a JavaScript function to generate and position polygons on a HTML canvas. The basic algorithm of the function involves dividing 1 by the number of polygon angles, multiply that value by the angle number. Multiply those values by 6.28 to get radian values. Multiply the sine and cosine of the radian values by the hypotenuse to get x an y values. Store those values in arrays, transpose the values to canvas coordinates and connect the points with lines. All that sounds quite complicated but understanding the principle of the counter clockwise revolution makes it understandable. To create a square divide 1 by 4, the value is .25. Angle 1 is .25 angle 2 is 2*.25(.50), 3 is .75 and 4 is 1.00. The polygon function accepts an offset parameter to tilt the polygon. The function's parameter list also includes origin location values of virtual cartesian cooridinate systems, virtual cartesian hypotenuse, line width, color, number of polygon sides, canvas ID and fill option. The function can be called multiple times with in a javascript program.

color

black |
blue |
green |
yellow |
red |
pink |
orange |
gray |
maroon |
teal |

number of sides |
|||||||||

3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |

line width |
|||||||||

1 |
2 |
3 |
4 |
5 |
6 |
8 |
10 |
12 |
14 |

virtual hypotenuse size |
|||||||||

5 |
10 |
25 |
50 |
100 |
150 |
200 |
250 |
300 |
350 |

virtual x origin |
|||||||||

25 |
100 |
200 |
300 |
400 |
500 |
600 |
700 |
750 |
775 |

virtual y origin |
|||||||||

25 |
100 |
200 |
300 |
400 |
500 |
600 |
700 |
750 |
775 |

rotation offset |
|||||||||

.08 |
.16 |
.25 |
.125 |
.33 |
.10 |
0 |
.05 |
.5 |
.66 |