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