Center of each side of a polygon in JavaScript

In JavaScript, finding the center (midpoint) of each side of a polygon involves calculating the average coordinates between consecutive vertices. This is useful in computational geometry for polygon analysis and graphics applications.

Problem Definition

Given an array of coordinate pairs representing polygon vertices, we need to find the midpoint of each side. Each side connects two consecutive vertices, and the last vertex connects back to the first vertex to close the polygon.

// Example polygon coordinates (longitude, latitude)
const polygonVertices = [
    [-73.9280684530257, 40.8099975343718],
    [-73.9282820374729, 40.8100875554645],
    [-73.9280124002104, 40.8103130893677],
    [-73.927875543761, 40.8102554080229],
    [-73.9280684530257, 40.8099975343718]
];

console.log("Polygon vertices:", polygonVertices);

Polygon vertices: [
  [ -73.9280684530257, 40.8099975343718 ],
  [ -73.9282820374729, 40.8100875554645 ],
  [ -73.9280124002104, 40.8103130893677 ],
  [ -73.927875543761, 40.8102554080229 ],
  [ -73.9280684530257, 40.8099975343718 ]
]

Solution: Finding Side Centers

The midpoint between two points (x?, y?) and (x?, y?) is calculated as ((x? + x?) / 2, (y? + y?) / 2).

const findSideCenters = (vertices) => {
    const centers = [];
    
    for (let i = 0; i < vertices.length; i++) {
        // Find next vertex index (wraps to 0 for last vertex)
        const nextIndex = (i + 1) % vertices.length;
        
        // Calculate midpoint between current and next vertex
        const centerX = (vertices[i][0] + vertices[nextIndex][0]) / 2;
        const centerY = (vertices[i][1] + vertices[nextIndex][1]) / 2;
        
        centers.push([centerX, centerY]);
    }
    
    return centers;
};

const polygonVertices = [
    [-73.9280684530257, 40.8099975343718],
    [-73.9282820374729, 40.8100875554645],
    [-73.9280124002104, 40.8103130893677],
    [-73.927875543761, 40.8102554080229],
    [-73.9280684530257, 40.8099975343718]
];

const sideCenters = findSideCenters(polygonVertices);
console.log("Side centers:", sideCenters);

Side centers: [
  [ -73.92817524524929, 40.81004254491815 ],
  [ -73.92814721884164, 40.8102003224161 ],
  [ -73.92794397198571, 40.8102842486953 ],
  [ -73.92797199839336, 40.81012647119735 ],
  [ -73.9280684530257, 40.8099975343718 ]
]

How It Works

The algorithm iterates through each vertex and calculates the midpoint with the next vertex:

1. Modulo operator (%): Ensures the last vertex connects to the first vertex
2. Midpoint formula: Averages the x and y coordinates of two points
3. Result array: Contains one center point for each side of the polygon

Alternative Implementation

Here's a more concise version using array methods:

const findSideCentersMap = (vertices) => {
    return vertices.map((vertex, i) => {
        const nextVertex = vertices[(i + 1) % vertices.length];
        return [
            (vertex[0] + nextVertex[0]) / 2,
            (vertex[1] + nextVertex[1]) / 2
        ];
    });
};

const vertices = [
    [0, 0],
    [4, 0], 
    [4, 3],
    [0, 3]
];

console.log("Square vertices:", vertices);
console.log("Side centers:", findSideCentersMap(vertices));

Square vertices: [ [ 0, 0 ], [ 4, 0 ], [ 4, 3 ], [ 0, 3 ] ]
Side centers: [ [ 2, 0 ], [ 4, 1.5 ], [ 2, 3 ], [ 0, 1.5 ] ]

Conclusion

Finding polygon side centers involves calculating midpoints between consecutive vertices using the average of their coordinates. The modulo operator ensures proper wrapping from the last vertex back to the first, creating a complete set of side centers for any polygon.