Evenly space circles along sin curve

Question

I am trying to position sprites (visually circlular with, say radius 50) evenly along a sin curve.

Currently, the function I am using for x and y are:

for(int i=0; i<number_of_sprites; i++){
    x = sprite_index*60
    y = sin(sprite_index)*60

    sprite.position = CGPointMake(x, y)
}

Even though the sprites are all evenly spaced along the x axis, you are not all equidistant from each other.

This is somewhat pseudocode - I'm simply looking for the mathematical function to do this.

How can I solve this problem?

Answer 1

According to this answer on math.stackexchange.com, the solution for calculating the arc length along a sine wave is an elliptic integral which is difficult to calculate analytically.

Fortunately you have a computer at your disposal that can apply the same formula using numerical integration to achieve an approximation of the desired curve.

Given the derivative of sin(x) is cos(x), if you increment your x variable very slowly (with a per-step increment of dx) then at each step your ds will be dx * sqrt(1 + cos(x)^2). Keep accumulating the ds values until it reaches (or exceeds) your desired spacing and only then draw a point.

See http://jsfiddle.net/alnitak/fp7aknoc/ for a demo.