Polygon Properties

Area, Orientation, Length and Centroid

Area

Is the space occupied by the polygon.

For example, suppose the following canvas:

and we draw the following triangle on it, with vertices:

\[v_1 = (0,10); v_2 = (5,5); v_3 = (10,10)\]

The area of any simple polygon can be obtained with the Shoelace formula:

\[A = \frac{1}{2} \left |\displaystyle \sum_{i=0}^{n-1} (x_{i}y_{i+1} - x_{i+1}y_{i})\right |\]

Where \((x_i,y_i)\), \(i=0,1,...,n-1\), are the ordered vertices of the polygon...

...and the first and last vertex are equal:

\[x_0 = x_n \text{ and } y_0 = y_n\]

In our case:

\[ \begin{align} &A = 0.5\times | (0\times 5 - 5\times 10) + (5\times 10 - 10\times 5) + (10\times 10 - 0\times 10) |\\\\ &A = 25 \end{align} \]

The area of the canvas is 100, so the polygon occupies 25% of the canvas.

It makes sense, because as we can see, 4 polygons like this, will span the entire canvas:

Orientation

The orientation of a polygon (clockwise or counter clockwise) depends on the order in which its vertices are arranged:

The orientation of any simple polygon can be derived from its signed area

\[A = \frac{1}{2} \displaystyle \sum_{i=0}^{n-1} (x_{i}y_{i+1} - x_{i+1}y_{i})\]

If the previous expression is possitive then the polygon vertices are ordered clockwise; otherwise its orientation is counter clockwise.

For example, the orientation of the following polygon is clockwise:

\[a=(2,2), b=(8,2), c=(5,5), d=(8,8), e=(2,8)\]

It means its signed area should be possitive. Let's check it out:

\[ \begin{align} &A = 0.5\times [(a_{x}\times b_{y} - b_{x}\times a_{y}) + (b_{x}\times c_{y} - c_{x}\times b_{y}) + (c_{x}\times d_{y} - d_{x}\times c_{y}) + (d_{x}\times e_{y} - e_{x}\times d_{y}) + (e_{x}\times a_{y} - a_{x}\times e_{y})]\\\\ &A = 0.5\times [(2\times 2 - 8\times 2) + (8\times 5 - 5\times 2) + (5\times 8 - 8\times 5) + (8\times 8 - 2\times 8) + (2\times 2 - 2\times 8)]\\\\ &A = 27 \end{align} \]

Warning: this definition applies if we want visual coherence with computer screens. The formal definition is:

"If the vertices are ordered counterclockwise, the signed area is positive; otherwise, it is negative."

Length

Is the sum of the length of its sides

\[ L = \displaystyle \sum_{i=0}^{n-1} \sqrt{(x_{i} - x_{i+1})^2 + (y_{i} - y_{i+1})^2} \]

For example, the length of this polygon is approximately 26.5:

Centroid

Is a fixed and unique point representing the "center of mass" of a polygon.

The coordinates of the centroid \((C_x, C_y)\) of a solid simple polygon are:

\[ \begin{align} &C_x = \frac{1}{6A} \displaystyle\sum_{i=0}^{n-1} (x_i + x_{i+1}) (x_{i}y_{i+1} - x_{i+1}y_i)\\\\ &C_y = \frac{1}{6A} \displaystyle\sum_{i=0}^{n-1} (y_i + y_{i+1}) (x_{i}y_{i+1} - x_{i+1}y_i)\\\\ &A = \frac{1}{2} \displaystyle \sum_{i=0}^{n-1} (x_{i}y_{i+1} - x_{i+1}y_{i}) \end{align} \]

JS code:

var polygon={
    area: function(points){
        var sum=0, n=points.length;

        if(points[0][0] != points[n-1][0] || points[0][1] != points[n-1][1]){
            sum += (points[n-1][0]*points[0][1] - points[0][0]*points[n-1][1]);
        }

        for(var i=0; i < n-1; ++i){
            sum += (points[i][0]*points[i+1][1] - points[i+1][0]*points[i][1]);
        }

        return sum/2;
    },
    length: function(points){
        var l=0, n=points.length;

        if(points[0][0] != points[n-1][0] || points[0][1] != points[n-1][1]){
            l += Math.sqrt(Math.pow(points[0][1] - points[n-1][1], 2) + Math.pow(points[0][0] - points[n-1][0], 2));
        }

        for(var i=0; i < n-1; ++i){
            l += Math.sqrt( Math.pow(points[i][1] - points[i+1][1], 2) + Math.pow(points[i][0] - points[i+1][0], 2) );
        }

        return l;
    },
    is_clockwise: function(points){
        // return this.area(points) < 0 ? false : true; // visual coherence
        return this.area(points) < 0 ? true : false; // numerical coherence
    },
    centroid: function(points){
        var A=this.area(points), cx=0, cy=0, n=points.length;

        if(points[0][0] != points[n-1][0] || points[0][1] != points[n-1][1]){
            cx += ( (points[n-1][0] + points[0][0]) * (points[n-1][0]*points[0][1] - points[0][0]*points[n-1][1]) );
            cy += ( (points[n-1][1] + points[0][1]) * (points[n-1][0]*points[0][1] - points[0][0]*points[n-1][1]) );
        }

        for(var i=0; i < n-1; ++i){
            cx += ( (points[i][0] + points[i+1][0]) * (points[i][0]*points[i+1][1] - points[i+1][0]*points[i][1]) );
            cy += ( (points[i][1] + points[i+1][1]) * (points[i][0]*points[i+1][1] - points[i+1][0]*points[i][1]) );
        }

        return [(1/(6*A))*cx, (1/(6*A))*cy];
    }
}

var points=[[123,332],[262,367],[314,500],[390,378],[465,303],[436,262],[477,123],[343,181],[222,100],[233,245]];

console.log('area: ' + polygon.area(points));
console.log('clockwise: ' + polygon.is_clockwise(points));
console.log('length: ' + polygon.length(points));
console.log('centroid: ' + polygon.centroid(points));

Watch the video: