Visnos Interactive Polygon Explorer

Regular Polygons

To create a regular polygon simply drag one of the three sliders. The sides slider changes the number of sides. For a regular polygon all the vertices lie on a circle circumference. The radius slider adjusts this circle radius. You can display the circle which is initially transparent. Simply click the circle background ctrl followed by a colour from the colour picker. To hide the circle click the X in the colour picker. The angle slider adjusts the overall orientation of polygon.

Irregular Polygons

All the vertices can be clicked and dragged to new positions. You can turn off this feature by clicking the drag toggle button. You can also change the snap value, when set to one the points snaps to the nearest square, set to zero for no snapping.

A quick way to create an irregular polygon is start with a regular one and then click the dice which move all the vertices by a small random amount. Click repeatedly and the polygon wobbles like a jelly. You can add a side/vertex by clicking the + button, a new vertex point will be inserted at the mid point of the side clockwise of the currently selected point. To remove a vertex click the - button.

Measuring Angles or Sides

The activity can display a protractor for measuring angles, click the protractor button to display or hide it. You can also display a ruler by clicking the ruler button. Note when you are using the the protractor or ruler it is best to turn off draggable points.

Displaying interior and exterior angles automatically

Various angle types can be displayed. Start by clicking the interior toggle. The interior angle appears, to show the arc adjust the slider. To show the exterior angles you have more choices, use the select control to choose the exterior angles clockwise or anticlockwise. Or the outer angle which is 360°âˆ’ interior. Adjust the arc for this angle with the adjacent slider.

Styling Section

The boxes for each colour are labelled and you can also move the mouse cursor over a box for a more detailed description in the top bar. However it is important to realize that some colours are initially off/transparent.

For example the background circle is useful as students will soon realize that for regular polygons the vertices always lie on the circumference of the circle at equal intervals. The circle obviously is also associated with the radius control

The spokes of the polygon (Mathematical name?) can also be displayed. These are lines that connect the vertices to the centre point of the circle. They are useful when discussing the programming terminal. But also the angle between the spokes will match the exterior angle. The spokes be used when talking about rotational symmetry when moving the angle slider

Programming Terminal

Here at Visnos we believe that small amounts of computer programming can greatly enhance student learning opportunities. Learning a whole programming language can be daunting, but making some changes to an existing piece of code is not too difficult. Children enjoy seeing how their alterations can instantly create interesting results.

This is the first activity that includes the terminal, when it is clicked a dialogue will open up and the code(written in javascript) can be altered. Clicking the RUN button will now swap the new code and if there is no error a success message will appear in the main demo bar. If the code contains errors which is quite easy an error message will appear in the bar.

Understanding the function

To produce regular polygons the program uses a function which is passed an index which corresponds to the number of the point or vertex and the current radius as read from the radius slider control. This radius can be thought of as the spoke length. The function simply returns a number which corresponds to the length the spoke will have.

This sounds complicated but is actually quite easy to understand once you start changing the values. A video has been produced with many examples of using the terminal. A list of some of the video examples is shown below, try them out by typing them into terminal and pressing RUN. Please don't expect to understand all the code at once!

return 3;

Instead of returning the radius, the function now return 3. The polygon produced is a regular one of radius 3, and moving the radius slider no longer has any effect. If you have a background circle, notice does still change when the slider is moved.

return radius/2;

The / symbol is used by computers rather than ÷, so radius/2 means divide the radius value each time by 2. So now another regular polygon is produced, but with a radius of half the amount shown for the radius control. Congratulations you have hacked the program to tell a lie!

return radius*2;

The * is a computers multiply symbol, so this now the radius will be double what the control says.

return radius*0.5;

So this is the same result as radius/2, but see how quickly programming allows math principles are incorporated. In this case 0.5 is the same as a half and multiplying by a half is the same as dividing by two.

return radius*index/5;

Now its starts to get more interesting, the index is included in the return value. The index starts at zero and then is increased by one for each new vertex, so this means the spoke lengths will be 0*radius/5,1*radius/5,2*radius/5 etc. This means the spoke length will get bigger for each new side. Set the sides to 100 and adjust the radius and you can see the spiral like effect produced.

if ( index == 2 )
	  return 0;
	else
	  return radius;
	

This is an example of a conditional statement, if the index is equal to two then zero is returned, so the spoke length will be zero. In all other cases return the radius.

if ( index % 2 == 0 )
	  return radius;
	else
	  return radius/2;
	

This final example includes a conditional statement which uses the % or modulus operator. The modulus operator returns the integer remainder of dividing the preceding number. So in this case index % 2 == 0 is finding the remainder from dividing by two, if the remainder is zero then the number is even. So the code is actually return the radius if the index is even or returns the radius divided by two if the index is odd.

Related activities

An interesting use of regular polygons is to use them to find an approximation of the special number π this is done pi explained activity. There are further activities for studying angles in particular basic angles.

Click to toggle the display of the protractor.
Click to toggle the display of the ruler.
Click to open terminal in order to edit polygon creation function
Drag
Toggle draggable vertices, when on each vertex can be dragged to different positions.
Set the snap value for dragging, 1 will snap to nearest square, 0 for no snap.
+
Add a new vertex to the polygon (mid pt of side)
Remove the currently selected vertex
Randomize the position of all the vertices.
sides
Set the number of sides for a starter regular polygon
Radius
Set the radius of the starter regular polygon.
angle
Set the angle of the first point of polygon, useful for rotational symmetry.
Toggle display of interior angle.
Set the arc fill colour of the interior angle
Set the arc radius of the interior angle
Set type of angle to show, exterior clockwise or anticlockwise, reflex opposite interior or none.
Set the arc fill colour for the outer angle
Set the arc radius of the outside angle
text
Set the text colour
stroke
Set the stroke colour
polygon fill
Set the polygon fill colour
circle
Set the circle colour, regular polygons vertices lie on the circumference
spokes
Set the spokes colour, regular polygons have spoke originating for the circle centre
arc line
Set the angle arcs colour
Click to view instruction videos Close the activity View information about the activity Pan and zoom (using mouse/mousewheel)