the Origin

Rotating Polygons


Unlike images, polygons cannot be directly rotated in Revolution.  They have no "angle" property.

Polygons are defined by a list of the points of their vertices.  We discuss here how to transform a polygon's points so that it is effectively rotated on the stack/card canvas.

Download the Revolution RotatePolygons stack to see examples and to get all scripts.  Read the commented script and a recipe for making a rotatable polygon.  And look at this horrible metronome example of use.

The solution & basic idea

The basic idea is to design the polygon by its points relative to an origin and keep this design.  One can think of these points as lying in "design-space", unlike the actual points visually representing the rotated and translated polygon on the card canvas.

The design is with real numbers (i.e. not necessarily integer values).  It can be by a list of cartesian x,y pairs or a list of polar r,θ pairs.  It is kept in custom properties and it never changes.

Examples of simple designs

Here is a simple rectangle:

This rectangle would rotate around its centre.  Its design points would be

x    y
1     15 30
2 -15 30
3 -15 -30
4 15 -30
1 15 30

The following rectangle would look the same but would rotate around its lower-left corner, since that is where the design space origin is:

Its design points would be 

x    y
1     30 60
2 0 60
3 0 0
4 30 0
1 30 60

And this design is easier to define by its polar coordinates:

Its design points would be

r    θ
1      30 0.314159
2 11.46 0.942478
3 30 1.570796
4 11.46 2.199115
5 30 2.827433
6 11.46 3.455752
7 30 4.084070
8 11.46 4.712389
9 30 5.340708
10 11.46 5.969026
1 30 0.314159

Display points

The actual set of points used to display the polygon is derived from the design by routines (handlers) defined to compute the display points given a desired actual location of the design's origin and a desired angle of rotation.

A polygon must therefore be given these custom properties:

pPoints:  the Cartesian coordinates of the points whereby the origin is the point around which the graphic will turn (its "centre").  Y is up (see conventions).

pRThetas:  the list of radii and angles of the points in polar coordinates.

pAngle:  the angle through which the graphic is rotated from its natural orientation.

pLoc:  the actual location of the graphic's design origin, in display coordinates.

To be able to design, move and rotate polygons the polygons themselves need no script:  all code can be put higher up in the message path.

The user may define either the pPoints or the pRThetas, the undefined set is computed from the defined one by the functions CartesianToPolar and PolarToCartesian.  The polar coordinates pRThetas are used in rotation and the Cartesian coordinates pPoints are used only to define shape.  For most polygons it is easier to define the shape using Cartesian coordinates, but some (e.g. a spiral) may be easier defined in polar coordinates.

There is no need for the polygon to have a script if the message path contains setprop handlers for pLoc and pAngle.

In the scripts the word polygon is used interchangeably with graphic (of style polygon).

Note that in Revolution "the loc of graphic … " does not return a point that is fixed to the polygon:  it returns the centre of the circumscribed rectangle!  This loc is neither the centre of the polygon nor its centre of gravity.

    A polygon (red) and its circumscribed rectangle.

The little circle is the centre of the rectangle.

The same polygon rotated.  The dim, rotated rectangle is the circumscribed rectangle from the previous figure.

The new circumscribed rectangle has different dimensions and also has a centre that lies in a different position with respect to the polygon.

The Revolution loc of the polygon is the centre of the circumscribed rectangle and hence it is a point that is not fixed to the polygon.

  But in moving and rotating a polygon we do need a point that is fixed to it.  That means we also need a way to define the loc of a polygon independently of Revolution and that is why we introduce the custom property pLoc.


For Cartesian coordinates the y axis points upwards, for polar coordinates the angle 0 is to the right and angles grow counterclockwise (like in maths).  Angles are in radians.

If an edge of the polygon should not be drawn, leave a blank line in pPoints and pRThetas but make sure there is always a point after a blank line, i.e. the list must end in a non-blank line.

The last transformation after rotation is to put the points at their positions relative to the desired location pLoc on the card canvas.  This requires rounding as well as converting to display-Y which points down.

next planned revision: 2009-11