Possible to position elements along a curve using javascript/jQuery?

I am working on a design where I would like to 开发者_StackOverflowposition header elements along a curve. Example:

Typically I would do this manually using CSS, but in this case there can be a dynamic number of items.

I'm curious if anyone knows of a way to place a dynamic number of items along a curve? I'm guessing it would require a way of specifying an equation that defines what the curve should be (notice that the curve above peaks right of center...) and then place items spaced evenly on that.

Has anyone done this before? Any recommendations on where to start?

---

A simple way to specify a curve is using a Bezier cubic.

function bez3(x0, y0, x1, y1, x2, y2, x3, y3, t)
{
    var x01 = x0 + t*(x1 - x0);
    var y01 = y0 + t*(y1 - y0);
    var x12 = x1 + t*(x2 - x1);
    var y12 = y1 + t*(y2 - y1);
    var x23 = x2 + t*(x3 - x2);
    var y23 = y2 + t*(y3 - y2);

    var x012 = x01 + t*(x12 - x01);
    var y012 = y01 + t*(y12 - y01);
    var x123 = x12 + t*(x23 - x12);
    var y123 = y12 + t*(y23 - y12);

    return {x: x012 + t*(x123 - x012),
            y: y012 + t*(y123 - y012)};
}

The curve starts at t=0, (x0, y0) tangent toward (x1, y1) and arrives at t=1, (x3, y3) coming tangent from (x2, y2).

For t=0 the function returns the starting point (x0, y0), for t=1 the function returns the ending point (x3, y3). Values of t between 0 and 1 are points along the curve (they're smoothly but not equally spaced however). You can think to t as a "time" parameter of a point moving along the curve.

Following this link is possible to see an interactive version implemented in javascript/canvas (the example uses letters A, B, C and D instead of 0, 1, 2 and 3 to mark the different points).

---

You could using the formula of a curve and absolute positioning. Write a function, which given X will return you Y, make that function return Y as something that will be curvy (look into your old geometry or trig books). Now, iterate through your elements, giving a certain gap between the X values of your elements. X = left, Y = top.

See http://fancythought.blogspot.com/2011/06/love-formula-heart-shaped-curvy-graph.html for formula...

You could also use relative positioning on a parent element to allow for better placement (relative will make the absolute elements position relative to the parent).

---

I ended up using the function @6502's mentioned to create a jQuery plugin that I am using for this. Since number of elements that must be placed on the curve varies dynamically, having the plugin that is applied to a selector works nicely. It also assists with generating the equation of the curve.

You can find it here:

• http://plugins2.jquery.com/project/jCurvy
• http://jCurvy.com