Plotting points around a circle non-uniformly

53 views Asked by At

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);
}
1

There are 1 answers

0
Walter Tross On BEST ANSWER

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.