How much to rotate a regular polygon so a side is on the bottom?

How much do I rotate a regular polygon so a side is on the bottom? In my example below, the polygons are always on an angle when they are first drawn.

function setup() {
  createCanvas(windowWidth, windowHeight);

function draw() {

  // Setup canvas
  background(243, 242, 243);
  translate(width * 0.5, height * 0.5);

  // Setup polygon colours
  fill(243, 242, 243);

  // Create polygon
  createPolygon(0, 0, 200, 16);

function createPolygon(x, y, radius, sides) {
  let angle = TWO_PI / sides;
  for (let i = 0; i < TWO_PI; i += angle) {
    var ax = x + cos(i) * radius;
    var ay = y + sin(i) * radius;
    vertex(ax, ay);

I have worked out that for polygons with a number of sides that is a binary number, you can rotate it by PI / sides radians, and it will be flat. It doesn't work for any other polygons with a non-binary number of sides. What equation do I use to find how much I should rotate it?


  • I've also just worked out that if you rotate a polygon with an odd number of sides by PI * 1.5, it works how I want.

  • edited December 2017 Answer ✓

    By a binary number of sides, do you mean an even number, like 2 4 6...?

    1. assume that your algorithm starts every polygon drawn on a point -- a triangle is pointing down, a square is oriented like a diamond, etc. etc. You want to change this.
    2. A triangle has 3 sides. Rotate it by 2PI for a full turn (no change). Rotate it by 2PI/3 to turn it one third -- that is, one side worth -- that is, no change, you just changed one point with another.
    3. Rotate a triangle by 2PI/6 (so, half a side -- one sixth of the way around) to swap a point with a flat bit.
    4. Rectangle? 2PI/4 is no change. 2PI/8 swaps a point for a flat bit.
    5. Pentagon? 2PI/10 ... that's really 2PI/(5*2)
    6. Hexagon? 2PI/(6*2)
    7. ...n-agon? 2PI/(n*2)

    Another way of putting this is: I want to rotate a shape by "(one half) (a side)" : (1/2)*(2PI/sides).

Sign In or Register to comment.