CODEWITHSUNDEEP
javascriptmath
Max Hudson
Max Hudson

Reputation: 10206

Evenly space circles along sin curve

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?

Upvotes: 4

Views: 987

Answers (2)

Alnitak
Alnitak

Reputation: 339786

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.

Upvotes: 7

Maus
Maus

Reputation: 1843

So you have two constraints. Given a point a, a radius r, and a function f, you need to find a point b s.t.

Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)) === 2r

AND

f(b.x) == b.y

The first condition ensures that the two points are exactly non-overlapping, and the second ensures that b is on the curve you want (in this case, I think this function is Math.sin).

You need to do a bit of algebra to arrive at the solution, but this is how I'd set up this problem.

Upvotes: 0

Related Questions