Chaikin’s corner cutting algorithm is an astonishingly simple way to turn a jagged line into a smooth curve.

It's extremely effective, and it will take you like ten minutes to write.

– Benjamin Kovach, A Box of Chaos: The Generative Artist's Toolkit

A demo

The gray line below is the original, randomly generated path. The red line is the path smoothed with Chaikin’s algorithm. Drag the slider to change the number of smoothing iterations. You can also drag the points around to form a different path.

The algorithm

The algorithm is quite simple. It can be intuitively understood as iteratively “cutting off” the sharp corners in the path:

• For each pair of neighboring points A and B in the path:
  • Find the point C, 25% of the way between A and B.
  • Find the point D, 75% of the way between A and B.
• All the C and D points form a new, smoother path.

Then you just iterate as needed. The following animation shows two iterations of the algorithm visually:

JavaScript implementation

Below is the JavaScript implementation I wrote for the demos on this page:

function chaikin(points) {
    var newPoints = [];

    for (var i = 0; i < points.length - 1; i++) {
        const a = points[i];
        const b = points[i+1];

        // a*0.75 + b*0.25
        newPoints.push(a.mul(0.75).add(b.mul(0.25)));

        // a*0.25 + b*0.75
        newPoints.push(a.mul(0.25).add(b.mul(0.75)));
    }

    return newPoints;
}

Making pretty pictures

A few months ago, I made some generative art using Flutter. I was particularly pleased with the result below, which uses Chaikin’s algorithm to draw the smooth curves.