Search code examples
mathplottrigonometry

Plotting points around a circle non-uniformly


I would like to create this effect in code - where a series of points are plotted around a circle, however I would like to bunch the points closer together at the left & right hand sides of the circle and space them out (evenly) further apart at the top and bottom.

I feel this should be possible using standard sin/cos/tan functions but I can't figure it out.

Desired outcome

Here's my pseudo code so far to create a circle but with uniformly spread points:

var angleIncrement = (2 * Math.PI) / numPoints;
    
for (var i = 0; i < numPoints; i++) {
  var angle = i * angleIncrement;
  var x = centerX + radius * Math.cos(angle);
  var y = centerY + radius * Math.sin(angle);

  points.push(x, y);
}

Solution

  • You could try subtracting from the angle half the sine of twice the same angle. This should transform the linear function of the point index i into an "upward sine wave" that crosses the linear function at n π with derivative 0 and at (n + ½) π with derivative 2. Something like (untested!):

        var angleIncrement = (2 * Math.PI) / numPoints;
        
        for (var i = 0; i < numPoints; i++) {
          var linearAngle = i * angleIncrement;
          var angle = linearAngle - 0.5 * Math.sin(linearAngle * 2);
          var x = centerX + radius * Math.cos(angle);
          var y = centerY + radius * Math.sin(angle);
    
          points.push(x, y);
        }
    

    For less oscillation, replace that 0.5 by a smaller factor.